Responsive generic modal component.
Webcomponent built with Atomico JS, Simple to use and customize modal. Includes additional support for React and Preact.
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:
padding="1rem"
padding="1rem, 2rem 720px, 3rem 1080px"
position: String responsivo, defines the position of the content within the modal, example:
position="center"
position="center top"
position="center bottom"
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.
React
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";position="left center"position="right center"
position="center, right bottom 1080px"
<script
type="module"
src="http://esm.sh/@atomico/modal"></script>
<atomico-modal></atomico-modal>Utility and generic components
The Keen-slider api but with WebComponents
Webcomponent built with Atomico JS to use keen-slider as webcomponent. Includes additional support for React and Preact.
most of the properties are homologous to
The slidesPerView, slidesSpacing and slidesOrigin props accept responsive expressions, example:
CreateSlider
dispatched when defining the slider prop, useful for accessing the keen-slider instance
KeenSlider.next()
next slide
KeenSlider.prev()
prev slide
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";boolean
Changes the direction of the slider from horizontal to vertical. (Note: The height of the container must be defined if vertical is true) Default is false.
rtl
boolean
Changes the direction in which the slides are positioned, from left-to-right to right-to-left. Default is false.
rubberband
boolean
Enables or disables the rubberband behavior for dragging and animation after a drag. Default is tr
autoplay
boolean
autoplayLoop / autoplay-loop
number / 2000
initial
number
mode
"snap" | "free" | "free-snap"
slidesPerView / slides-per-view
string
slidesSpacing / slides-spacing
string
slidesOrigin / slides-origin
string
slider
KeenSliderInstance
loop
boolean
Enables or disables carousel/loop functionality of the slider.
drag
boolean
Enables or disables mouse and touch control. Default is tru
disabled
boolean
vertical
import { KeenSlider } from "@atomico/keen-slider/preact";<script
type="module"
src="http://esm.sh/@atomico/keen-slider"></script>
<atomico-keen-slider><atomico-keen-slider><atomico-keen-slider
slider-per-view="1, 2 520px, 3 720px"
></atomico-keen-slider>Webcomponent built with Atomico JS, Simple to use and customize table. Includes additional support for React and Preact.
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.
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
width: string, cell width.
React
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";row border-radius
--table--row-shadow
row box-shadow
--table--row-background
row background
--table--row-header-radius
border-radius of the row declared as slot="header"
--table--row-header-shadow
box-shadow of the row declared as slot="header"
--table--row-header-background
background of the row declared as slot="header"
--table--row-last-radius
borde-radius de la ultima fila
--table--cell-align
cell alignment, default middle
--table--cell-padding
cell padding
--table--cell-header-padding
padding of the cell inside the Tr declared as slot="header"
--table--radius
table borde-radius
--table--background
table background
--table--border
table borde
--table--border-split
border dividing cells
--table--row-gap
row spacing
--table--row-radius
Webcomponent built with to use lottie as webcomponent. Includes additional support for React and Preact.
Differences with lottie file
Faster and smaller
Non-blocking, thanks to lazy loading.
<script
type="module"
src="http://esm.sh/@atomico/table"></script>
<atomico-table></atomico-table>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.
React
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>