Webcomponent built with Atomico JS to use keen-slider as webcomponent. Includes additional support for React and Preact.

Modules

import { KeenSlider } from "@atomico/keen-slider";

// Import that does not associate the tagName by default
import { KeenSlider } from "@atomico/keen-slider/elements";

import { KeenSlider } from "@atomico/keen-slider/react";

import { KeenSlider } from "@atomico/keen-slider/preact";

<script 
    type="module" 
    src="http://esm.sh/@atomico/keen-slider"></script>
    
<atomico-keen-slider><atomico-keen-slider>

Properties / attributes

most of the properties are homologous to keen-slider documentation

The slidesPerView, slidesSpacing and slidesOrigin props accept responsive expressions, example:

<atomico-keen-slider 
    slider-per-view="1, 2 520px, 3 720px"
></atomico-keen-slider>

Events

CreateSlider

dispatched when defining the slider prop, useful for accessing the keen-slider instance

Methods

KeenSlider.next()

next slide

KeenSlider.prev()

prev slide

Examples

React

Webcomponent built with Atomico JS, Simple to use and customize table. Includes additional support for React and Preact.

Modules

import { Table, Tr, Td } from "@atomico/table";

// Import that does not associate the tagName by default
import { Table, Tr, Td } from "@atomico/table/elements";

import { Table, Tr, Td } from "@atomico/table/react";

import { Table, Tr, Td } from "@atomico/table/preact";

<script 
    type="module" 
    src="http://esm.sh/@atomico/table"></script>
    
<atomico-table></atomico-table>

Custom properties

Properties Table

collapse: boolean, collapses the rows of the table, if breakpoint is defined the component will automatically define this props when detecting the match with breakpoint.

breakpoint: string, media query to observe to copal the table.

Properties Tr

sticky: boolan,The table row will set its position according to the scroll position

td: array ,list of Td nodes associated with the TR component

collapse: boolean, property defined according to the state of the parent.

last: last row of the table

Properties Td

width: string, cell width.

Examples

React

Webcomponent built with Atomico JS to use lottie as webcomponent. Includes additional support for React and Preact.

Differences with lottie file

1. Faster and smaller

2. Non-blocking, thanks to lazy loading.

Modules

import { Lottie } from "@atomico/components/lottie";

// Import that does not associate the tagName by default
import { Lottie } from "@atomico/lottie/elements";

import { Lottie } from "@atomico/components/lottie/react";

<script 
    type="module" 
    src="http://esm.sh/@atomico/lottie"></script>
    
<atomico-lottie></atomico-lottie>

Properties

cdn: boolean , import lottie-web from a CDN, by default https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js, this can be modified through the existing cdn object in the module, by default it is false.

path: string, animation path, compatible with lottiefiles

loop: boolean, the animation plays in a loop.

lazyload: boolean, the animation is downloaded when an interception occurs

intersectionOffset : string, defines the offset for interception loading or animation playback.

intersectionControl: boolean, if true the animation is played only on interception.

intersectionControlReplay: boolean, each intercept restarts the animation.

Examples

React

Webcomponent built with Atomico JS, Simple to use and customize modal. Includes additional support for React and Preact.

Modules

import {
  Modal // HTMLElement
} from "@atomico/modal";

// Import that does not associate the tagName by default
import { Modal } from "@atomico/modal/elements";

import {
  Modal
} from "@atomico/modal/react";

import {
  Modal
} from "@atomico/modal/preact";

<script 
    type="module" 
    src="http://esm.sh/@atomico/modal"></script>
    
<atomico-modal></atomico-modal>

Properties

showAfterMs / show-after-ms: String, defines the milliseconds to wait for the activation of the modal.

show: Boolean, defines whether or not to show the modal.

padding: String responsivo, define a padding for the content of the modal, example:

1. padding="1rem"

2. padding="1rem, 2rem 720px, 3rem 1080px"

position: String responsivo, defines the position of the content within the modal, example:

1. position="center"

2. position="center top"

3. position="center bottom"

4. position="left center"

5. position="right center"

6. position="center, right bottom 1080px"

fullSize / full-size: Boolean, It enables the use of background in the modal, this is complemented by the background slot to attach personalized content in the background.

fullSizeClosed / full-size-closed: Boolean, defines whether clicking on the background hides the modal.

Examples

React