From 9581745296fb1108627d84b2d0c44a0eb32a95f1 Mon Sep 17 00:00:00 2001
From: Mateusz <43219043+Trochonovitz@users.noreply.github.com>
Date: Fri, 7 Apr 2023 08:26:05 +0200
Subject: [PATCH] Reworked integrations (#1581)
* Reworked Angular integration
* Reworked React integration
* Reworked Vue integration
* Reworked Django integration
* Reworked Remix integration
* Reworked Svelte integration
* Reworked Express integration
* Reworked Laravel integration
* Reworked Next integration
* Reworked Nuxt integration
* Reworked Solid integration
* Typos fixes
---
.../standard/integrations/angular/index.html | 39 +--
.../integrations/django/index-ss.html | 3 +
.../standard/integrations/django/index.html | 42 ++-
.../integrations/express/index-ss.html | 3 +
.../standard/integrations/express/index.html | 319 ++++++++++--------
.../integrations/laravel/index-ss.html | 3 +
.../standard/integrations/laravel/index.html | 75 +++-
.../standard/integrations/next/index.html | 72 ++--
.../standard/integrations/nuxt/index.html | 57 +++-
.../standard/integrations/react/index.html | 21 +-
.../standard/integrations/remix/index.html | 93 ++---
.../standard/integrations/solid/index.html | 17 +-
.../standard/integrations/svelte/index.html | 19 +-
.../docs/standard/integrations/vue/index.html | 19 +-
site/layouts/partials/header/header.html | 2 +-
15 files changed, 463 insertions(+), 321 deletions(-)
diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
index a5de5e98b..a4b19bc05 100644
--- a/site/content/docs/standard/integrations/angular/index.html
+++ b/site/content/docs/standard/integrations/angular/index.html
@@ -200,40 +200,22 @@ Step 4
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
Step 5
- In root directory add typings.d.ts file and put in there
- Tailwind Elements module's declarataion.
-
-
-
-
- {{< twsnippet/wrapper "typings.d.ts" "" "mobile" >}}
- {{< twsnippet/code active=true lang="JavaScript" >}}
- declare module 'tw-elements';
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
-
- Step 6
-
- In app.component.ts file (located in
- src/app/ directory) put lifecycle method where are you going to
- dynamically importing library.
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
{{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
+ import { Datepicker, Input, initTE } from "tw-elements";
+
ngOnInit() {
- const importTE = async () => {
- await import('tw-elements');
- };
- importTE();
- }
+ initTE({ Datepicker, Input });
+ }
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -258,29 +240,30 @@ Step 6
Step 1
- Import library.
+ Import components which are you intend to use.
{{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
- Initialize component in lifecycle hook.
+ Initialize components in lifecycle hook.
{{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
ngOnInit() {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
- const myDatepicker = new te.Datepicker(
+ const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
diff --git a/site/content/docs/standard/integrations/django/index-ss.html b/site/content/docs/standard/integrations/django/index-ss.html
index 288b400f5..5ddb01e95 100644
--- a/site/content/docs/standard/integrations/django/index-ss.html
+++ b/site/content/docs/standard/integrations/django/index-ss.html
@@ -12,3 +12,6 @@
>Installing and configuring Tailwind CSS and Tailwind Elements
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/django/index.html b/site/content/docs/standard/integrations/django/index.html
index b43be2300..70b2c46d8 100644
--- a/site/content/docs/standard/integrations/django/index.html
+++ b/site/content/docs/standard/integrations/django/index.html
@@ -285,7 +285,7 @@
Step 6
{{< twsnippet/wrapper "home.html" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -350,9 +350,47 @@
Step 9
{{< twsnippet/wrapper "home.html" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
+
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Initialize components in script section.
+
+
+
+ {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ const myInput = new te.Input(document.getElementById("myDatepicker"));
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/express/index-ss.html b/site/content/docs/standard/integrations/express/index-ss.html
index 5e6b37e4b..3dda58bee 100644
--- a/site/content/docs/standard/integrations/express/index-ss.html
+++ b/site/content/docs/standard/integrations/express/index-ss.html
@@ -12,3 +12,6 @@
>Installing and configuring Tailwind CSS and Tailwind Elements
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/express/index.html b/site/content/docs/standard/integrations/express/index.html
index 88c789871..b13e570f9 100644
--- a/site/content/docs/standard/integrations/express/index.html
+++ b/site/content/docs/standard/integrations/express/index.html
@@ -18,6 +18,7 @@
+
+
+
+
+ Creating a new Express application
+
+
+
+
+ Let's create a fresh Express application so that we can go through all the
+ steps together.
+
-
-
-
- Creating a new Express application
-
-
-
-
- Let's create a fresh Express application so that we can go through all the
- steps together.
-
-
- Step 1
- Create new project
-
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+
Step 1
+
Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
mkdir my-project
cd my-project
npm init
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 2
- Install Express
+ Step 2
+ Install Express
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
npm install express
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
-
-
Step 3
-
- Create folder views (in root directory) and put inside
- index.ejs file with classical HTML structure.
-
-
+
Step 4
+ Step 3
- In root directory create index.js file where will be located
- your Express configuration.
+ Create folder views (in root directory) and put inside
+ index.ejs file with classical HTML structure.
+
-
-
- {{< twsnippet/wrapper "index.js" "" "mobile" >}}
+
Step 4
+
+ In root directory create index.js file where will be located your
+ Express configuration.
+
+
+
+
+ {{< twsnippet/wrapper "index.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
const express = require("express");
const app = express();
@@ -129,43 +131,43 @@
Step 4
});
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
-
-
-
- Installing and configuring Tailwind CSS and Tailwind Elements
-
-
-
- Step 1
- Install Tailwind CSS
-
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 2
-
- Add the paths to all of your template files in your
- tailwind.config.cjs file.
-
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
-
-
- {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
/** @type {import('tailwindcss').Config} */
module.exports = {
@@ -178,99 +180,136 @@
Step 2
}
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 3
-
- Add the @tailwind directives for each of Tailwind’s layers to
- your input.css file in root directory.
-
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your input.css file in root directory.
+
-
-
- {{< twsnippet/wrapper "input.css" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "input.css" "" "mobile" >}}
{{< twsnippet/code active=true lang="CSS" >}}
@tailwind base;
@tailwind components;
@tailwind utilities;
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 4
-
- Start the Tailwind CLI build process. Run the CLI tool to scan your
- template files for classes and build your CSS.
-
+ Step 4
+
+ Start the Tailwind CLI build process. Run the CLI tool to scan your template
+ files for classes and build your CSS.
+
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 5
- Install ejs.
+ Step 5
+ Install ejs.
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plainext" type="terminal" >}}
npm install ejs
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
+
Step 6
-
- In index.ejs file, at the end of head link
- Tailwind's CSS file.
-
+ Step 6
+
+ In index.ejs file, at the end of head link
+ Tailwind's CSS file.
+
-
-
- {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
Step 7
-
- In index.ejs file, at the end of body link
- script for Tailwind Elements JS file.
-
+ Step 7
+
+ In index.ejs file, at the end of body link script
+ for Tailwind Elements JS file.
+
-
-
- {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
-
-
Step 8
-
- Alternatively at the end of body in
- index.ejs include script tag with linking to
- Tailwind Elements CDN.
-
-
-
-
- {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
Step 8
+
+ Alternatively at the end of body in
+ index.ejs include script tag with linking to
+ Tailwind Elements CDN.
+
+
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Initialize components in script section.
+
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ const myInput = new te.Input(document.getElementById("myDatepicker"));
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
{{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
-
-
+ {{< /twsnippet/wrapper >}}
+
+
diff --git a/site/content/docs/standard/integrations/laravel/index-ss.html b/site/content/docs/standard/integrations/laravel/index-ss.html
index 533218cf9..f862df582 100644
--- a/site/content/docs/standard/integrations/laravel/index-ss.html
+++ b/site/content/docs/standard/integrations/laravel/index-ss.html
@@ -12,3 +12,6 @@
>Installing and configuring Tailwind CSS and Tailwind Elements
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/laravel/index.html b/site/content/docs/standard/integrations/laravel/index.html
index b62b402d7..28d1f4313 100644
--- a/site/content/docs/standard/integrations/laravel/index.html
+++ b/site/content/docs/standard/integrations/laravel/index.html
@@ -154,45 +154,48 @@ Step 3
Step 4
- Install Tailwind Elements.
+
+ Make sure your compiled CSS and JS are included in the
+ head in welcome.blade.php file (located in
+ ./resources/views directory).
+
{{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
- npm install tw-elements
+ @vite('resources/css/app.css')
+ @vite('resources/js/app.js')
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 5
-
- Import Tailwind Elements in app.js file which is located in
- ./resources/js directory.
-
+ Install Tailwind Elements.
- {{< twsnippet/wrapper "app.js" "" "mobile" >}}
- {{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 6
- Make sure your compiled CSS and JS are included in the
- head in welcome.blade.php file (located in
- ./resources/views directory).
+ Import components which are you intend to use and necessary function
+ initTE in app.js file which is located in
+ ./resources/js directory.
+ Initialize initTE.
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
- {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
- @vite('resources/css/app.css')
- @vite('resources/js/app.js')
+ {{< twsnippet/wrapper "app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { Datepicker, Input, initTE } from "tw-elements";
+ initTE({ Datepicker, Input });
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -207,9 +210,47 @@ Step 7
{{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
+
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Initialize components.
+
+
+
+ {{< twsnippet/wrapper "app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ const myInput = new Input(document.getElementById("myDatepicker"));
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/next/index.html b/site/content/docs/standard/integrations/next/index.html
index 8faefb4be..0559c8ded 100644
--- a/site/content/docs/standard/integrations/next/index.html
+++ b/site/content/docs/standard/integrations/next/index.html
@@ -171,36 +171,59 @@ Step 4
Step 5
- In _app.js file (located in src/pages/ directory)
- put lifecycle method where are you going to dynamically importing library.
+ Create standalone file and import components which are you intend to use and
+ necessary function
+ initTE. Initialize initTE in a lifecycle method.
- {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+ {{< twsnippet/wrapper "Component.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
+ import { useEffect } from "react";
+ import { Datepicker, Input, initTE } from "tw-elements";
+
useEffect(() => {
- const importTE = async () => {
- (await import("tw-elements")).default;
- };
- importTE();
+ initTE({ Datepicker, Input });
}, []);
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 6
+
+ Import client-side component wrapping it into dynamic import with
+ ssr object set to false.
+
+
+
+
+ {{< twsnippet/wrapper "index.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import dynamic from "next/dynamic";
+
+ const Component = dynamic(() => import("./component"), {
+ ssr: false,
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 7
Alternatively you can import Tailwind Elements by adding
script tag in _app.js file (located in
- src/pages/ directory).
+ src/pages/ directory) and using Script module from
+ next/script.
{{< twsnippet/wrapper "_app.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="HTML" >}}
-
+ import Script from "next/script";
+
+
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -227,31 +250,32 @@ Step 6
Step 1
- Create standalone component. Import library inside.
+ Import components which are you intend to use.
{{< twsnippet/wrapper "Component.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input, initTE } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
- Initialize component in lifecycle hook.
+ Initialize components in lifecycle hook.
- {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
+ {{< twsnippet/wrapper "Component.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import { useEffect } from "react";
useEffect(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
- const myDatepicker = new te.Datepicker(
+ const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
@@ -259,25 +283,5 @@
Step 2
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
- Step 3
-
- Import client-side component wrapping it into dynamic import with
- ssr object set to false.
-
-
-
-
- {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
- {{< twsnippet/code active=true lang="JavaScript" >}}
- import dynamic from "next/dynamic";
-
- ...
- const Component = dynamic(() => import("./component"), {
- ssr: false,
- });
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
diff --git a/site/content/docs/standard/integrations/nuxt/index.html b/site/content/docs/standard/integrations/nuxt/index.html
index 4b8af748d..494376ac9 100644
--- a/site/content/docs/standard/integrations/nuxt/index.html
+++ b/site/content/docs/standard/integrations/nuxt/index.html
@@ -196,25 +196,51 @@ Step 5
Step 6
- In _app.js file (located in src/pages/ directory)
- put lifecycle method where are you going to dynamically importing library.
+ Create standalone file and import components which are you intend to use and
+ necessary function
+ initTE. Initialize initTE in a lifecycle method.
- {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+ {{< twsnippet/wrapper "Component.vue" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- useEffect(() => {
- const importTE = async () => {
- (await import("tw-elements")).default;
- };
- importTE();
- }, []);
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
Step 7
+
+ Import client-side component wrapping it into
+ ClientOnly element.
+
+
+
+
+ {{< twsnippet/wrapper "app.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+
+
+
+
+
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 8
Alternatively you can import Tailwind Elements by adding
script tag in nuxt.config.js file (located in root
@@ -229,7 +255,7 @@
Step 7
head: {
script: [
{
- src: "https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js",
+ src: "https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.min.es.js",
},
],
},
@@ -260,19 +286,19 @@ Step 7
Step 1
- Import library.
+ Import components which are you intend to use.
{{< twsnippet/wrapper "App.vue" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input, initTE } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
- Initialize component in lifecycle hook.
+ Initialize components in lifecycle hook.
@@ -281,6 +307,7 @@
Step 2
import { onMounted } from "vue";
onMounted(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
diff --git a/site/content/docs/standard/integrations/react/index.html b/site/content/docs/standard/integrations/react/index.html
index 832b87a79..d706afc7e 100644
--- a/site/content/docs/standard/integrations/react/index.html
+++ b/site/content/docs/standard/integrations/react/index.html
@@ -192,19 +192,19 @@
Step 4
Step 5
- In App.jsx file (located in src/ directory) put
- lifecycle method where are you going to dynamically importing library.
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
{{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
+ import { useEffect } from "react";
+ import { Datepicker, Input, initTE } from "tw-elements";
+
useEffect(() => {
- const importTE = async () => {
- await import("tw-elements");
- };
- importTE();
+ initTE({ Datepicker, Input });
}, []);
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -230,27 +230,28 @@
Step 5
Step 1
-
Import library.
+
Import components which are you intend to use.
{{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
-
Initialize component in lifecycle hook.
+
Initialize components in lifecycle hook.
{{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import React, { useEffect } from "react";
+ import { useEffect } from "react";
useEffect(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
diff --git a/site/content/docs/standard/integrations/remix/index.html b/site/content/docs/standard/integrations/remix/index.html
index 66ae6107d..4082136d8 100644
--- a/site/content/docs/standard/integrations/remix/index.html
+++ b/site/content/docs/standard/integrations/remix/index.html
@@ -18,6 +18,7 @@
@@ -202,25 +203,60 @@ Step 5
Step 6
- In root.jsx file (located in app/ directory) put
- lifecycle method where are you going to dynamically importing library.
+ Create standalone component which will has a name with
+ Component.client.jsx. It shows framework that should not render
+ this component in a server-side mode.
+
+
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
- {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
+ {{< twsnippet/wrapper "Component.client.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import { useEffect } from "react";
+ import { Datepicker, Input, initTE } from "tw-elements";
useEffect(() => {
- const importTE = async () => {
- await import("tw-elements");
- };
- importTE();
+ initTE({ Datepicker, Input });
}, []);
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
+
+ Step 7
+ Install remix-utils.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm i remix-utils
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 8
+ Import your client-side component.
+
+
+
+ {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { ClientOnly } from "remix-utils";
+ import Component from "./components/Component.client";
+
+ ...
+ export default function App() {
+ return (
+ ...
+ {() =>
+ ); }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
@@ -242,17 +278,13 @@
Step 6
Step 1
-
- Create standalone component which will has a name with
- Component.client.jsx. It shows framework that should not render
- this component in a server-side mode. Then import library.
-
+
Import components which are you intend to use.
{{< twsnippet/wrapper "Component.client.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -267,10 +299,11 @@
Step 2
import { useEffect } from "react";
useEffect(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
- const myDatepicker = new te.Datepicker(
+ const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
@@ -278,37 +311,5 @@
Step 2
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
-
-
Step 3
-
Install remix-utils.
-
-
-
- {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
- {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
- npm i remix-utils
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
-
-
Step 4
-
Import client-side component.
-
-
-
- {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
- {{< twsnippet/code active=true lang="JavaScript" >}}
- import { ClientOnly } from "remix-utils";
- import Component from "./components/Component.client";
-
- ...
- export default function App() {
- return (
- ...
- {() =>
- ); }
- {{< /twsnippet/code >}}
- {{< /twsnippet/wrapper >}}
-
diff --git a/site/content/docs/standard/integrations/solid/index.html b/site/content/docs/standard/integrations/solid/index.html
index 35543a622..829c91d76 100644
--- a/site/content/docs/standard/integrations/solid/index.html
+++ b/site/content/docs/standard/integrations/solid/index.html
@@ -173,8 +173,8 @@
Step 4
Step 5
- In App.jsx file (located in src/ directory) put
- lifecycle method where are you going to dynamically importing library.
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
@@ -182,12 +182,10 @@
Step 5
{{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import { onMount } from "solid-js";
+ import { Datepicker, Input, initTE } from "tw-elements";
onMount(() => {
- const importTE = async () => {
- await import("tw-elements");
- };
- importTE();
+ initTE({ Datepicker, Input });
});
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -213,19 +211,19 @@
Step 5
Step 1
-
Import library.
+
Import components which are you intend to use.
{{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input, initTE } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
-
Initialize component in lifecycle hook.
+
Initialize components in lifecycle hook.
@@ -234,6 +232,7 @@
Step 2
import { onMount } from "solid-js";
onMount(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
diff --git a/site/content/docs/standard/integrations/svelte/index.html b/site/content/docs/standard/integrations/svelte/index.html
index f7c65aaf7..f34ec9166 100644
--- a/site/content/docs/standard/integrations/svelte/index.html
+++ b/site/content/docs/standard/integrations/svelte/index.html
@@ -224,19 +224,19 @@
Step 6
Step 7
- In +layout.svelte file (located in
- src/routes/ directory) put lifecycle method where are you going
- to dynamically importing library.
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
- {{< twsnippet/wrapper "+layout.svelte" "" "mobile" >}}
+ {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import { onMount } from "svelte";
+ import { Datepicker, Input, initTE } from "tw-elements";
- onMount(async () => {
- await import("tw-elements");
+ onMount(() => {
+ initTE({ Datepicker, Input });
});
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -270,13 +270,13 @@
Step 1
{{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
-
Initialize component in lifecycle hook.
+
Initialize components in lifecycle hook.
@@ -285,10 +285,11 @@
Step 2
import { onMount } from "svelte";
onMount(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
- const myDatepicker = new te.Datepicker(
+ const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
diff --git a/site/content/docs/standard/integrations/vue/index.html b/site/content/docs/standard/integrations/vue/index.html
index a7ae6435d..39767dc8c 100644
--- a/site/content/docs/standard/integrations/vue/index.html
+++ b/site/content/docs/standard/integrations/vue/index.html
@@ -193,8 +193,8 @@
Step 4
Step 5
- In App.vue file (located in src/ directory) put
- lifecycle method where are you going to dynamically importing library.
+ Import components which are you intend to use and necessary function
+ initTE. Initialize initTE in a lifecycle method.
@@ -202,12 +202,10 @@
Step 5
{{< twsnippet/wrapper "App.vue" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import { onMounted } from "vue";
+ import { Datepicker, Input, initTE } from "tw-elements";
onMounted(() => {
- const importTE = async () => {
- await import("tw-elements");
- };
- importTE();
+ initTE({ Datepicker, Input });
});
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
@@ -235,19 +233,19 @@
Step 5
Step 1
-
Import library.
+
mport components which are you intend to use.
{{< twsnippet/wrapper "App.vue" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
- import * as te from "tw-elements";
+ import { Datepicker, Input } from "tw-elements";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
Step 2
-
Initialize component in lifecycle hook.
+
Initialize components in lifecycle hook.
@@ -256,10 +254,11 @@
Step 2
import { onMounted } from "vue";
onMounted(() => {
+ const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
- const myDatepicker = new te.Datepicker(
+ const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
diff --git a/site/layouts/partials/header/header.html b/site/layouts/partials/header/header.html
index aaad3be4b..76bd5e03e 100644
--- a/site/layouts/partials/header/header.html
+++ b/site/layouts/partials/header/header.html
@@ -4,7 +4,7 @@
+ {{ end }} sticky left-0 top-0 z-50 w-full bg-white shadow dark:bg-neutral-800">