Usage
Twilight Web Components makes it easy to implement and use them across any framework or no framework at all. This is accomplished by utilizing web platform APIs and Web Components that are standardized for smooth use.It's worth noting that the Tailwind CSS Framework is the default foundation for the Twilight web components.There is a possibility that future plans may include other CSS frameworks. Installation#
To use the components, developers need to load a CSS file and some JavaScript. The CSS file includes the fonts and design tokens.Twilight Themes#
When using Twilight web components within Twilight themes, there's no need to include them in your bundle or HTML. The Twilight theme engine will automatically inject the latest version of the Twilight web components into the page.Bundler/ES modules#
You need Node.js and Tailwind CSS installed, then install the components by performing one of the following commands:Yarn Installation Command
npm install @salla.sa/twilight-components --save
The following code imports and applies polyfills for older browsers, then registers the
Twilight Web Components with the
window object, enabling their use in the webpage.
Tailwind Config#
Tailwind CSS Framework is the default foundation for the Twilight web components. There is a possibility that future plans may include other CSS frameworks.Now you can adding twilight tainwind theme to your tailwind.config.js file:Tailwind added a just-in-time compiler, which generates styles as the developer writes the theme rather than generating everything in advance at initial build time.Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the content option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be emptyAs mentioned previously . The file tailwind.config.js is already bundled with the Twilight starter theme files. However, you may use any other CSS framework. Usage#
After installation, Components can be easily added in the basic HTML markup, as shown in the following example:CSS Variables#
Colors and fonts are the predominant features of the theme, which can be set by assigning the CSS styles. Twilight Web Components use the CSS Variables that have already been introduced. Accordingly, the developer can use the following CSS styles to assign them to the theme's colors and fonts.More details on this can be found here. Events#
We recommend using DOM events, but we also provide custom events to help with specific event kinds. All custom events are always documented on their own documentation page for each component.Moreover, developers can detect when a component has been loaded, as Twilight registers its components using the standard Web Components API's CustomElementsRegistry object. This object also provides a whenDefined function, which takes a component name and returns a promise. When the component is defined, the promise will be fulfilled: Modified at 2024-08-18 06:23:53
