This hidden pages includes work in progress and future features, do not use because will have breaking changes on semversion.
Classes not xt Components
.hero .listing .googlelocator .slider .slider-navs-container .parallax
Classes not xt Themes
.product .featured .megamenu
Markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
You can set activation styles by adding the class .on.
Use Tailwind CSS variants active:, group-active:, on:, group-on: to assign animations.
Use Tailwind CSS variants off:, group-off:, on:, group-on:, in:, group-in:, out:, group-out: to assign animations.
Use Tailwind CSS variants dir-before:, group-dir-before:, group-off-before:, group-on-before:, group-in-before:, group-out-before:, dir-after:, group-dir-after:, group-off-after:, group-on-after:, group-in-after:, group-out-after: to assign animations.
Use component classes to style disabled. Check xtendui/src/global.css.js for default styles.
Use component utility .xt-card-group to stack card content horizontally.
The padding of .xt-overlay-container is set as a utility. Check xtendui/src/overlay.css.js for default styles.
Use Tailwind CSS to assign size (e.g. padding, font-size).
Use Tailwind CSS to assign animation (e.g. translate, transition-property, transition-duration, transition-timing-function).
For full API see Gsap ScrollTrigger API.
This demos use loader see documentation for more info.
For accessibility purpose use
<nav></nav>with an accessible name assigning[aria-label]or[aria-labelledby].
For seo purpose add breadscrumb metadata.
(use touch device to see it in action)
(use narrow screen to see it in action)
| Syntax | Mixin | Description | |
|---|---|---|---|
| Component | .xt-loader-<direction> | loader-<direction> | Loader direction for filler |
| Syntax | Mixin | Variants | Description | |
|---|---|---|---|---|
| Utility | .xt-card-group | xt-card-group | responsive | Card stack horizontal wrapper |
| Name | Example | Description | |
|---|---|---|---|
| Attribute | data-xt-group | data-xt-group="my-group,another-group" | Group or multiple groups on elements and targets |
| Syntax | Description | |
|---|---|---|
| Property | direction:Number | Direction 1 or -1 |
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | collapseHeight:String | false | Type of elements that collapse vertically, can be elements, targets, elementsInner, targetsInner |