Bootstrap5Components (bootstrap5components v0.5.1)
View SourceA module to generate Phoenix Bootstrap components tailored to your application.
This module can be used together with the CodeGen package as follows:
defmodule YourAppWeb.CoreComponents do
use CodeGen,
module: Bootstrap5Components,
options: [
# This option is required:
gettext_module: YourAppWeb.Gettext
]
end
Supports the following options:
gettext_module
- a module that implements theGettext
behaviour to internationalize the user-visible text in your components
Summary
Functions
A component that adds a new item to a list of movable inputs.
This component is meant to be used inside <.movable_inputs_for />
component.
Animate with a back in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a back out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a bounce out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade in up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a fade out up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flash pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flip pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flip in x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flip in y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flip out x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a flip out y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a head shake pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a heart beat pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a hinge pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a jack in the box pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a jello pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a light speed in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a light speed in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a light speed out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a light speed out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a pulse pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a roll in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a roll out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate in down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate in down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate in up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate in up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate out down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate out down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate out up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rotate out up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a rubber band pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a shake x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a shake y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a slide out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a swing pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a tada pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a wobble pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Animate with a zoom out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Render a resource as HTML.
Get the url for a resource.
Create a select option from a resoure that implements
the Bootstrap5Components.Resource
protocol.
Create list of select options from a list of resoures that´
implement the Bootstrap5Components.Resource
protocol.
Render a resource as plain text.
Renders a back navigation link.
A component for bulk actions that can take the ids of multiple targets.
A checkbox to select an id for a bulk action.
Renders a button.
A component containing the references to all CSS and JS used by these components.
A component that deletes an item from moveable inputs.
This component is meant to be used inside <.movable_inputs_for />
component.
Generates a generic error message.
Renders flash notices.
Shows the flash group with standard titles and content.
Default options for Flop pagination that play well with Bootstrap5.
Default options for Flop tables that play well with Bootstrap5.
Renders a header with title.
Renders a Bootstrap Icon.
Renders an input with label and error messages.
Renders a label.
Renders a data list.
Area for the main content below the nabvar, supporting slots for the content itself and for an optional sidebar.
Renders a modal.
Attributes
field
(Phoenix.HTML.FormField
) (required)
A component to move an element up in an association. To move up an element in an association is the same as movinbg it towards the beginning of the list.
Navbar component.
Component for a navbar link.
Attributes
field
(Phoenix.HTML.FormField
) (required)
Get the url for a resource.
Renders an input with label and error messages.
Sidebar link.
A group of links in your sidebar, which will be rendered as a block
Renders a simple form.
Renders a table with generic styling.
Translates an error message using gettext.
Translates the errors for a field from a keyword list of errors.
Functions
A component that adds a new item to a list of movable inputs.
This component is meant to be used inside <.movable_inputs_for />
component.
Attributes
sort_param
(Phoenix.HTML.FormField
) - sort field for the association.cursor
(:string
) - CSS cursor style while hovering the button. Defaults to"pointer"
.tooltip
(:string
) - tooltip for the action. Defaults tonil
.class
(:string
) - CSS class for the outer element (a <label/> element). Defaults to"btn btn-primary mt-3 form-control"
.
Animate with a back in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_in_down(speed: :normal, repeat: true)}>
Animate as <strong>back in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_in_down(speed: :fast, repeat: true)}>
Animate as <strong>back in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_in_down(speed: :faster, repeat: true)}>
Animate as <strong>back in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_in_left(speed: :normal, repeat: true)}>
Animate as <strong>back in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_in_left(speed: :fast, repeat: true)}>
Animate as <strong>back in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_in_left(speed: :faster, repeat: true)}>
Animate as <strong>back in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_in_right(speed: :normal, repeat: true)}>
Animate as <strong>back in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_in_right(speed: :fast, repeat: true)}>
Animate as <strong>back in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_in_right(speed: :faster, repeat: true)}>
Animate as <strong>back in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_in_up(speed: :normal, repeat: true)}>
Animate as <strong>back in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_in_up(speed: :fast, repeat: true)}>
Animate as <strong>back in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_in_up(speed: :faster, repeat: true)}>
Animate as <strong>back in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_out_down(speed: :normal, repeat: true)}>
Animate as <strong>back out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_out_down(speed: :fast, repeat: true)}>
Animate as <strong>back out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_out_down(speed: :faster, repeat: true)}>
Animate as <strong>back out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_out_left(speed: :normal, repeat: true)}>
Animate as <strong>back out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_out_left(speed: :fast, repeat: true)}>
Animate as <strong>back out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_out_left(speed: :faster, repeat: true)}>
Animate as <strong>back out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_out_right(speed: :normal, repeat: true)}>
Animate as <strong>back out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_out_right(speed: :fast, repeat: true)}>
Animate as <strong>back out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_out_right(speed: :faster, repeat: true)}>
Animate as <strong>back out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a back out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_back_out_up(speed: :normal, repeat: true)}>
Animate as <strong>back out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_back_out_up(speed: :fast, repeat: true)}>
Animate as <strong>back out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_back_out_up(speed: :faster, repeat: true)}>
Animate as <strong>back out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce(speed: :normal, repeat: true)}>
Animate as <strong>bounce</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce(speed: :fast, repeat: true)}>
Animate as <strong>bounce</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce(speed: :faster, repeat: true)}>
Animate as <strong>bounce</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_in(speed: :normal, repeat: true)}>
Animate as <strong>bounce in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_in(speed: :fast, repeat: true)}>
Animate as <strong>bounce in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_in(speed: :faster, repeat: true)}>
Animate as <strong>bounce in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_in_down(speed: :normal, repeat: true)}>
Animate as <strong>bounce in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_in_down(speed: :fast, repeat: true)}>
Animate as <strong>bounce in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_in_down(speed: :faster, repeat: true)}>
Animate as <strong>bounce in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_in_left(speed: :normal, repeat: true)}>
Animate as <strong>bounce in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_in_left(speed: :fast, repeat: true)}>
Animate as <strong>bounce in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_in_left(speed: :faster, repeat: true)}>
Animate as <strong>bounce in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_in_right(speed: :normal, repeat: true)}>
Animate as <strong>bounce in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_in_right(speed: :fast, repeat: true)}>
Animate as <strong>bounce in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_in_right(speed: :faster, repeat: true)}>
Animate as <strong>bounce in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_in_up(speed: :normal, repeat: true)}>
Animate as <strong>bounce in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_in_up(speed: :fast, repeat: true)}>
Animate as <strong>bounce in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_in_up(speed: :faster, repeat: true)}>
Animate as <strong>bounce in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_out(speed: :normal, repeat: true)}>
Animate as <strong>bounce out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_out(speed: :fast, repeat: true)}>
Animate as <strong>bounce out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_out(speed: :faster, repeat: true)}>
Animate as <strong>bounce out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_out_down(speed: :normal, repeat: true)}>
Animate as <strong>bounce out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_out_down(speed: :fast, repeat: true)}>
Animate as <strong>bounce out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_out_down(speed: :faster, repeat: true)}>
Animate as <strong>bounce out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_out_left(speed: :normal, repeat: true)}>
Animate as <strong>bounce out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_out_left(speed: :fast, repeat: true)}>
Animate as <strong>bounce out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_out_left(speed: :faster, repeat: true)}>
Animate as <strong>bounce out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_out_right(speed: :normal, repeat: true)}>
Animate as <strong>bounce out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_out_right(speed: :fast, repeat: true)}>
Animate as <strong>bounce out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_out_right(speed: :faster, repeat: true)}>
Animate as <strong>bounce out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a bounce out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_bounce_out_up(speed: :normal, repeat: true)}>
Animate as <strong>bounce out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_bounce_out_up(speed: :fast, repeat: true)}>
Animate as <strong>bounce out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_bounce_out_up(speed: :faster, repeat: true)}>
Animate as <strong>bounce out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in(speed: :normal, repeat: true)}>
Animate as <strong>fade in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in(speed: :fast, repeat: true)}>
Animate as <strong>fade in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in(speed: :faster, repeat: true)}>
Animate as <strong>fade in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_bottom_left(speed: :normal, repeat: true)}>
Animate as <strong>fade in bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_bottom_left(speed: :fast, repeat: true)}>
Animate as <strong>fade in bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_bottom_left(speed: :faster, repeat: true)}>
Animate as <strong>fade in bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_bottom_right(speed: :normal, repeat: true)}>
Animate as <strong>fade in bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_bottom_right(speed: :fast, repeat: true)}>
Animate as <strong>fade in bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_bottom_right(speed: :faster, repeat: true)}>
Animate as <strong>fade in bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_down(speed: :normal, repeat: true)}>
Animate as <strong>fade in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_down(speed: :fast, repeat: true)}>
Animate as <strong>fade in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_down(speed: :faster, repeat: true)}>
Animate as <strong>fade in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_down_big(speed: :normal, repeat: true)}>
Animate as <strong>fade in down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_down_big(speed: :fast, repeat: true)}>
Animate as <strong>fade in down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_down_big(speed: :faster, repeat: true)}>
Animate as <strong>fade in down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_left(speed: :normal, repeat: true)}>
Animate as <strong>fade in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_left(speed: :fast, repeat: true)}>
Animate as <strong>fade in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_left(speed: :faster, repeat: true)}>
Animate as <strong>fade in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_left_big(speed: :normal, repeat: true)}>
Animate as <strong>fade in left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_left_big(speed: :fast, repeat: true)}>
Animate as <strong>fade in left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_left_big(speed: :faster, repeat: true)}>
Animate as <strong>fade in left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_right(speed: :normal, repeat: true)}>
Animate as <strong>fade in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_right(speed: :fast, repeat: true)}>
Animate as <strong>fade in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_right(speed: :faster, repeat: true)}>
Animate as <strong>fade in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_right_big(speed: :normal, repeat: true)}>
Animate as <strong>fade in right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_right_big(speed: :fast, repeat: true)}>
Animate as <strong>fade in right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_right_big(speed: :faster, repeat: true)}>
Animate as <strong>fade in right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_top_left(speed: :normal, repeat: true)}>
Animate as <strong>fade in top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_top_left(speed: :fast, repeat: true)}>
Animate as <strong>fade in top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_top_left(speed: :faster, repeat: true)}>
Animate as <strong>fade in top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_top_right(speed: :normal, repeat: true)}>
Animate as <strong>fade in top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_top_right(speed: :fast, repeat: true)}>
Animate as <strong>fade in top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_top_right(speed: :faster, repeat: true)}>
Animate as <strong>fade in top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_up(speed: :normal, repeat: true)}>
Animate as <strong>fade in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_up(speed: :fast, repeat: true)}>
Animate as <strong>fade in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_up(speed: :faster, repeat: true)}>
Animate as <strong>fade in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade in up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_in_up_big(speed: :normal, repeat: true)}>
Animate as <strong>fade in up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_in_up_big(speed: :fast, repeat: true)}>
Animate as <strong>fade in up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_in_up_big(speed: :faster, repeat: true)}>
Animate as <strong>fade in up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out(speed: :normal, repeat: true)}>
Animate as <strong>fade out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out(speed: :fast, repeat: true)}>
Animate as <strong>fade out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out(speed: :faster, repeat: true)}>
Animate as <strong>fade out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out bottom left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_bottom_left(speed: :normal, repeat: true)}>
Animate as <strong>fade out bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_bottom_left(speed: :fast, repeat: true)}>
Animate as <strong>fade out bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_bottom_left(speed: :faster, repeat: true)}>
Animate as <strong>fade out bottom left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out bottom right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_bottom_right(speed: :normal, repeat: true)}>
Animate as <strong>fade out bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_bottom_right(speed: :fast, repeat: true)}>
Animate as <strong>fade out bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_bottom_right(speed: :faster, repeat: true)}>
Animate as <strong>fade out bottom right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_down(speed: :normal, repeat: true)}>
Animate as <strong>fade out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_down(speed: :fast, repeat: true)}>
Animate as <strong>fade out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_down(speed: :faster, repeat: true)}>
Animate as <strong>fade out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out down big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_down_big(speed: :normal, repeat: true)}>
Animate as <strong>fade out down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_down_big(speed: :fast, repeat: true)}>
Animate as <strong>fade out down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_down_big(speed: :faster, repeat: true)}>
Animate as <strong>fade out down big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_left(speed: :normal, repeat: true)}>
Animate as <strong>fade out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_left(speed: :fast, repeat: true)}>
Animate as <strong>fade out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_left(speed: :faster, repeat: true)}>
Animate as <strong>fade out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out left big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_left_big(speed: :normal, repeat: true)}>
Animate as <strong>fade out left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_left_big(speed: :fast, repeat: true)}>
Animate as <strong>fade out left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_left_big(speed: :faster, repeat: true)}>
Animate as <strong>fade out left big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_right(speed: :normal, repeat: true)}>
Animate as <strong>fade out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_right(speed: :fast, repeat: true)}>
Animate as <strong>fade out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_right(speed: :faster, repeat: true)}>
Animate as <strong>fade out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out right big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_right_big(speed: :normal, repeat: true)}>
Animate as <strong>fade out right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_right_big(speed: :fast, repeat: true)}>
Animate as <strong>fade out right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_right_big(speed: :faster, repeat: true)}>
Animate as <strong>fade out right big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out top left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_top_left(speed: :normal, repeat: true)}>
Animate as <strong>fade out top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_top_left(speed: :fast, repeat: true)}>
Animate as <strong>fade out top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_top_left(speed: :faster, repeat: true)}>
Animate as <strong>fade out top left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out top right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_top_right(speed: :normal, repeat: true)}>
Animate as <strong>fade out top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_top_right(speed: :fast, repeat: true)}>
Animate as <strong>fade out top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_top_right(speed: :faster, repeat: true)}>
Animate as <strong>fade out top right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_up(speed: :normal, repeat: true)}>
Animate as <strong>fade out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_up(speed: :fast, repeat: true)}>
Animate as <strong>fade out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_up(speed: :faster, repeat: true)}>
Animate as <strong>fade out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a fade out up big pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_fade_out_up_big(speed: :normal, repeat: true)}>
Animate as <strong>fade out up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_fade_out_up_big(speed: :fast, repeat: true)}>
Animate as <strong>fade out up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_fade_out_up_big(speed: :faster, repeat: true)}>
Animate as <strong>fade out up big</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flash pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flash(speed: :normal, repeat: true)}>
Animate as <strong>flash</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flash(speed: :fast, repeat: true)}>
Animate as <strong>flash</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flash(speed: :faster, repeat: true)}>
Animate as <strong>flash</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flip pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flip(speed: :normal, repeat: true)}>
Animate as <strong>flip</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flip(speed: :fast, repeat: true)}>
Animate as <strong>flip</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flip(speed: :faster, repeat: true)}>
Animate as <strong>flip</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flip in x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flip_in_x(speed: :normal, repeat: true)}>
Animate as <strong>flip in x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flip_in_x(speed: :fast, repeat: true)}>
Animate as <strong>flip in x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flip_in_x(speed: :faster, repeat: true)}>
Animate as <strong>flip in x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flip in y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flip_in_y(speed: :normal, repeat: true)}>
Animate as <strong>flip in y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flip_in_y(speed: :fast, repeat: true)}>
Animate as <strong>flip in y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flip_in_y(speed: :faster, repeat: true)}>
Animate as <strong>flip in y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flip out x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flip_out_x(speed: :normal, repeat: true)}>
Animate as <strong>flip out x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flip_out_x(speed: :fast, repeat: true)}>
Animate as <strong>flip out x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flip_out_x(speed: :faster, repeat: true)}>
Animate as <strong>flip out x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a flip out y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_flip_out_y(speed: :normal, repeat: true)}>
Animate as <strong>flip out y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_flip_out_y(speed: :fast, repeat: true)}>
Animate as <strong>flip out y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_flip_out_y(speed: :faster, repeat: true)}>
Animate as <strong>flip out y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a head shake pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_head_shake(speed: :normal, repeat: true)}>
Animate as <strong>head shake</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_head_shake(speed: :fast, repeat: true)}>
Animate as <strong>head shake</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_head_shake(speed: :faster, repeat: true)}>
Animate as <strong>head shake</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a heart beat pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_heart_beat(speed: :normal, repeat: true)}>
Animate as <strong>heart beat</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_heart_beat(speed: :fast, repeat: true)}>
Animate as <strong>heart beat</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_heart_beat(speed: :faster, repeat: true)}>
Animate as <strong>heart beat</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a hinge pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_hinge(speed: :normal, repeat: true)}>
Animate as <strong>hinge</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_hinge(speed: :fast, repeat: true)}>
Animate as <strong>hinge</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_hinge(speed: :faster, repeat: true)}>
Animate as <strong>hinge</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a jack in the box pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_jack_in_the_box(speed: :normal, repeat: true)}>
Animate as <strong>jack in the box</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_jack_in_the_box(speed: :fast, repeat: true)}>
Animate as <strong>jack in the box</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_jack_in_the_box(speed: :faster, repeat: true)}>
Animate as <strong>jack in the box</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a jello pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_jello(speed: :normal, repeat: true)}>
Animate as <strong>jello</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_jello(speed: :fast, repeat: true)}>
Animate as <strong>jello</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_jello(speed: :faster, repeat: true)}>
Animate as <strong>jello</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a light speed in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_light_speed_in_left(speed: :normal, repeat: true)}>
Animate as <strong>light speed in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_light_speed_in_left(speed: :fast, repeat: true)}>
Animate as <strong>light speed in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_light_speed_in_left(speed: :faster, repeat: true)}>
Animate as <strong>light speed in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a light speed in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_light_speed_in_right(speed: :normal, repeat: true)}>
Animate as <strong>light speed in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_light_speed_in_right(speed: :fast, repeat: true)}>
Animate as <strong>light speed in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_light_speed_in_right(speed: :faster, repeat: true)}>
Animate as <strong>light speed in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a light speed out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_light_speed_out_left(speed: :normal, repeat: true)}>
Animate as <strong>light speed out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_light_speed_out_left(speed: :fast, repeat: true)}>
Animate as <strong>light speed out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_light_speed_out_left(speed: :faster, repeat: true)}>
Animate as <strong>light speed out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a light speed out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_light_speed_out_right(speed: :normal, repeat: true)}>
Animate as <strong>light speed out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_light_speed_out_right(speed: :fast, repeat: true)}>
Animate as <strong>light speed out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_light_speed_out_right(speed: :faster, repeat: true)}>
Animate as <strong>light speed out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a pulse pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_pulse(speed: :normal, repeat: true)}>
Animate as <strong>pulse</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_pulse(speed: :fast, repeat: true)}>
Animate as <strong>pulse</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_pulse(speed: :faster, repeat: true)}>
Animate as <strong>pulse</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a roll in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_roll_in(speed: :normal, repeat: true)}>
Animate as <strong>roll in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_roll_in(speed: :fast, repeat: true)}>
Animate as <strong>roll in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_roll_in(speed: :faster, repeat: true)}>
Animate as <strong>roll in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a roll out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_roll_out(speed: :normal, repeat: true)}>
Animate as <strong>roll out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_roll_out(speed: :fast, repeat: true)}>
Animate as <strong>roll out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_roll_out(speed: :faster, repeat: true)}>
Animate as <strong>roll out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_in(speed: :normal, repeat: true)}>
Animate as <strong>rotate in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_in(speed: :fast, repeat: true)}>
Animate as <strong>rotate in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_in(speed: :faster, repeat: true)}>
Animate as <strong>rotate in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate in down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_in_down_left(speed: :normal, repeat: true)}>
Animate as <strong>rotate in down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_in_down_left(speed: :fast, repeat: true)}>
Animate as <strong>rotate in down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_in_down_left(speed: :faster, repeat: true)}>
Animate as <strong>rotate in down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate in down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_in_down_right(speed: :normal, repeat: true)}>
Animate as <strong>rotate in down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_in_down_right(speed: :fast, repeat: true)}>
Animate as <strong>rotate in down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_in_down_right(speed: :faster, repeat: true)}>
Animate as <strong>rotate in down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate in up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_in_up_left(speed: :normal, repeat: true)}>
Animate as <strong>rotate in up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_in_up_left(speed: :fast, repeat: true)}>
Animate as <strong>rotate in up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_in_up_left(speed: :faster, repeat: true)}>
Animate as <strong>rotate in up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate in up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_in_up_right(speed: :normal, repeat: true)}>
Animate as <strong>rotate in up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_in_up_right(speed: :fast, repeat: true)}>
Animate as <strong>rotate in up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_in_up_right(speed: :faster, repeat: true)}>
Animate as <strong>rotate in up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_out(speed: :normal, repeat: true)}>
Animate as <strong>rotate out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_out(speed: :fast, repeat: true)}>
Animate as <strong>rotate out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_out(speed: :faster, repeat: true)}>
Animate as <strong>rotate out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate out down left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_out_down_left(speed: :normal, repeat: true)}>
Animate as <strong>rotate out down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_out_down_left(speed: :fast, repeat: true)}>
Animate as <strong>rotate out down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_out_down_left(speed: :faster, repeat: true)}>
Animate as <strong>rotate out down left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate out down right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_out_down_right(speed: :normal, repeat: true)}>
Animate as <strong>rotate out down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_out_down_right(speed: :fast, repeat: true)}>
Animate as <strong>rotate out down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_out_down_right(speed: :faster, repeat: true)}>
Animate as <strong>rotate out down right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate out up left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_out_up_left(speed: :normal, repeat: true)}>
Animate as <strong>rotate out up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_out_up_left(speed: :fast, repeat: true)}>
Animate as <strong>rotate out up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_out_up_left(speed: :faster, repeat: true)}>
Animate as <strong>rotate out up left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rotate out up right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rotate_out_up_right(speed: :normal, repeat: true)}>
Animate as <strong>rotate out up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rotate_out_up_right(speed: :fast, repeat: true)}>
Animate as <strong>rotate out up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rotate_out_up_right(speed: :faster, repeat: true)}>
Animate as <strong>rotate out up right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a rubber band pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_rubber_band(speed: :normal, repeat: true)}>
Animate as <strong>rubber band</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_rubber_band(speed: :fast, repeat: true)}>
Animate as <strong>rubber band</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_rubber_band(speed: :faster, repeat: true)}>
Animate as <strong>rubber band</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a shake x pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_shake_x(speed: :normal, repeat: true)}>
Animate as <strong>shake x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_shake_x(speed: :fast, repeat: true)}>
Animate as <strong>shake x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_shake_x(speed: :faster, repeat: true)}>
Animate as <strong>shake x</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a shake y pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_shake_y(speed: :normal, repeat: true)}>
Animate as <strong>shake y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_shake_y(speed: :fast, repeat: true)}>
Animate as <strong>shake y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_shake_y(speed: :faster, repeat: true)}>
Animate as <strong>shake y</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_in_down(speed: :normal, repeat: true)}>
Animate as <strong>slide in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_in_down(speed: :fast, repeat: true)}>
Animate as <strong>slide in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_in_down(speed: :faster, repeat: true)}>
Animate as <strong>slide in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_in_left(speed: :normal, repeat: true)}>
Animate as <strong>slide in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_in_left(speed: :fast, repeat: true)}>
Animate as <strong>slide in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_in_left(speed: :faster, repeat: true)}>
Animate as <strong>slide in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_in_right(speed: :normal, repeat: true)}>
Animate as <strong>slide in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_in_right(speed: :fast, repeat: true)}>
Animate as <strong>slide in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_in_right(speed: :faster, repeat: true)}>
Animate as <strong>slide in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_in_up(speed: :normal, repeat: true)}>
Animate as <strong>slide in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_in_up(speed: :fast, repeat: true)}>
Animate as <strong>slide in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_in_up(speed: :faster, repeat: true)}>
Animate as <strong>slide in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_out_down(speed: :normal, repeat: true)}>
Animate as <strong>slide out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_out_down(speed: :fast, repeat: true)}>
Animate as <strong>slide out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_out_down(speed: :faster, repeat: true)}>
Animate as <strong>slide out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_out_left(speed: :normal, repeat: true)}>
Animate as <strong>slide out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_out_left(speed: :fast, repeat: true)}>
Animate as <strong>slide out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_out_left(speed: :faster, repeat: true)}>
Animate as <strong>slide out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_out_right(speed: :normal, repeat: true)}>
Animate as <strong>slide out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_out_right(speed: :fast, repeat: true)}>
Animate as <strong>slide out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_out_right(speed: :faster, repeat: true)}>
Animate as <strong>slide out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a slide out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_slide_out_up(speed: :normal, repeat: true)}>
Animate as <strong>slide out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_slide_out_up(speed: :fast, repeat: true)}>
Animate as <strong>slide out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_slide_out_up(speed: :faster, repeat: true)}>
Animate as <strong>slide out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a swing pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_swing(speed: :normal, repeat: true)}>
Animate as <strong>swing</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_swing(speed: :fast, repeat: true)}>
Animate as <strong>swing</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_swing(speed: :faster, repeat: true)}>
Animate as <strong>swing</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a tada pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_tada(speed: :normal, repeat: true)}>
Animate as <strong>tada</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_tada(speed: :fast, repeat: true)}>
Animate as <strong>tada</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_tada(speed: :faster, repeat: true)}>
Animate as <strong>tada</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a wobble pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_wobble(speed: :normal, repeat: true)}>
Animate as <strong>wobble</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_wobble(speed: :fast, repeat: true)}>
Animate as <strong>wobble</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_wobble(speed: :faster, repeat: true)}>
Animate as <strong>wobble</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom in pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_in(speed: :normal, repeat: true)}>
Animate as <strong>zoom in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_in(speed: :fast, repeat: true)}>
Animate as <strong>zoom in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_in(speed: :faster, repeat: true)}>
Animate as <strong>zoom in</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom in down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_in_down(speed: :normal, repeat: true)}>
Animate as <strong>zoom in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_in_down(speed: :fast, repeat: true)}>
Animate as <strong>zoom in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_in_down(speed: :faster, repeat: true)}>
Animate as <strong>zoom in down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom in left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_in_left(speed: :normal, repeat: true)}>
Animate as <strong>zoom in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_in_left(speed: :fast, repeat: true)}>
Animate as <strong>zoom in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_in_left(speed: :faster, repeat: true)}>
Animate as <strong>zoom in left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom in right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_in_right(speed: :normal, repeat: true)}>
Animate as <strong>zoom in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_in_right(speed: :fast, repeat: true)}>
Animate as <strong>zoom in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_in_right(speed: :faster, repeat: true)}>
Animate as <strong>zoom in right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom in up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_in_up(speed: :normal, repeat: true)}>
Animate as <strong>zoom in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_in_up(speed: :fast, repeat: true)}>
Animate as <strong>zoom in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_in_up(speed: :faster, repeat: true)}>
Animate as <strong>zoom in up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom out pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_out(speed: :normal, repeat: true)}>
Animate as <strong>zoom out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_out(speed: :fast, repeat: true)}>
Animate as <strong>zoom out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_out(speed: :faster, repeat: true)}>
Animate as <strong>zoom out</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom out down pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_out_down(speed: :normal, repeat: true)}>
Animate as <strong>zoom out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_out_down(speed: :fast, repeat: true)}>
Animate as <strong>zoom out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_out_down(speed: :faster, repeat: true)}>
Animate as <strong>zoom out down</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom out left pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_out_left(speed: :normal, repeat: true)}>
Animate as <strong>zoom out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_out_left(speed: :fast, repeat: true)}>
Animate as <strong>zoom out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_out_left(speed: :faster, repeat: true)}>
Animate as <strong>zoom out left</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom out right pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_out_right(speed: :normal, repeat: true)}>
Animate as <strong>zoom out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_out_right(speed: :fast, repeat: true)}>
Animate as <strong>zoom out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_out_right(speed: :faster, repeat: true)}>
Animate as <strong>zoom out right</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Animate with a zoom out up pattern. This function is not a component. It is a function meant to return a list of CSS classes.
Options:
:speed
(default:true
) - supports the following values::normal
,:fast
,:faster
.:repeat
(default:false
) - whether the animation repeats itself.
You can see the resulting animation in the examples below.
Normal speed
<p class={animate_zoom_out_up(speed: :normal, repeat: true)}>
Animate as <strong>zoom out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Fast speed
<p class={animate_zoom_out_up(speed: :fast, repeat: true)}>
Animate as <strong>zoom out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Faster speed (default)
<p class={animate_zoom_out_up(speed: :faster, repeat: true)}>
Animate as <strong>zoom out up</strong>
</p>
The code above results in the following animation. This animation is played on repeat in order to better showcase the movements, but most of the time you'll probably prefer an animation that does not repeat.
Render a resource as HTML.
Get the url for a resource.
Create a select option from a resoure that implements
the Bootstrap5Components.Resource
protocol.
Create list of select options from a list of resoures that´
implement the Bootstrap5Components.Resource
protocol.
Render a resource as plain text.
Renders a back navigation link.
Examples
<.back navigate={~p"/posts"}>Back to posts</.back>
Attributes
navigate
(:any
) (required)
Slots
inner_block
(required)
A component for bulk actions that can take the ids of multiple targets.
Attributes
id
(:string
) (required)active
(:boolean
) (required)on_submit
(:string
) - Defaults to"bulk_action"
.on_change
(:string
) - Defaults to"selected_for_bulk_action"
.- Global attributes are accepted.
Slots
action
- Accepts attributes:navigate
(:string
)name
(:string
)class
(:string
)confirmation_dialog
(:string
)
A checkbox to select an id for a bulk action.
Attributes
target
(:any
) (required)aria_label
(:string
) - Defaults to"..."
.
Renders a button.
Examples
<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>
Attributes
type
(:string
) - Defaults tonil
.class
(:string
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["disabled", "form", "name", "value"]
.
Slots
inner_block
(required)
A component containing the references to all CSS and JS used by these components.
Attributes
theme
(:string
) - the bootswatch theme to use; usenil
if you want a custom theme. Defaults tonil
.remote_select_widget
(:boolean
) - whether to download the JS and CSS for the remote select widget. Defaults totrue
.remote_select_widget_right_to_left
(:boolean
) - whether to add support for right to left text in the select widget. Defaults tofalse
.
A component that deletes an item from moveable inputs.
This component is meant to be used inside <.movable_inputs_for />
component.
Attributes
input
(Phoenix.HTML.FormField
) - the input to be deleted.drop_param
(Phoenix.HTML.FormField
) - drop param for the association.animation
(:string
) - classes to add to the deleted element before removing it. Defaults to"animate__animated animate__fadeOutRight animate__faster"
.animation_duration
(:integer
) - classes to add to the deleted element before removing it. Defaults to300
.tooltip
(:string
) - tooltip for the action. Defaults tonil
.class
(:string
) - CSS class for the outer element (a <label/> element). Defaults to"btn btn-sm btn-outline-danger"
.cursor
(:string
) - CSS cursor style while hovering the button. Defaults to"pointer"
.
Generates a generic error message.
Slots
inner_block
(required)
Renders flash notices.
Examples
<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
Attributes
id
(:string
) - the optional id of flash container. Defaults to"flash"
.flash
(:map
) - the map of flash messages to display. Defaults to%{}
.title
(:string
) - Defaults tonil
.kind
(:atom
) - used for styling and flash lookup.Must be one of:info
, or:error
.autoshow
(:boolean
) - whether to auto show the flash on mount. Defaults totrue
.close
(:boolean
) - whether the flash can be closed. Defaults totrue
.- Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.
Slots
inner_block
- the optional inner block that renders the flash message.
Shows the flash group with standard titles and content.
Examples
<.flash_group flash={@flash} />
Attributes
flash
(:map
) (required) - the map of flash messages.
Default options for Flop pagination that play well with Bootstrap5.
Note: this is an argument one should pass to a Flop paginiation component, not a standalone component.
Default options for Flop tables that play well with Bootstrap5.
Note: this is an argument one should pass to a Flop table component, not a standalone component.
Renders a header with title.
Attributes
class
(:string
) - Defaults tonil
.
Slots
inner_block
(required)text
subtitle
actions
Renders a Bootstrap Icon.
Examples
TODO
Attributes
name
(:string
) (required)title
(:string
) - Defaults tonil
.size
(:any
) - Defaults to"1em"
.
Renders an input with label and error messages.
A %Phoenix.HTML.Form{}
and field name may be passed to the input
to build input names and error messages, or all the attributes and
errors may be passed explicitly.
Examples
<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />
Attributes
id
(:any
) - Defaults tonil
.name
(:any
)label
(:string
) - Defaults tonil
.value
(:any
)type
(:string
) - Defaults to"text"
.field
(Phoenix.HTML.FormField
) - a form field struct retrieved from the form, for example: @form[:email].errors
(:list
) - Defaults to[]
.checked
(:boolean
) - the checked flag for checkbox inputs.prompt
(:string
) - the prompt for select inputs. Defaults tonil
.options
(:list
) - the options to pass to Phoenix.HTML.Form.options_for_select/2.multiple
(:boolean
) - the multiple flag for select inputs. Defaults tofalse
.tight_spacing
(:boolean
) - remove the extra top margin. Defaults tofalse
.- Global attributes are accepted. Supports all globals plus:
["autocomplete", "cols", "disabled", "form", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]
.
Slots
inner_block
Renders a label.
Attributes
for
(:string
) - Defaults tonil
.
Slots
inner_block
(required)
Renders a data list.
Examples
<.list>
<:item title="Title"><%= @post.title %></:item>
<:item title="Views"><%= @post.views %></:item>
</.list>
Slots
item
(required) - Accepts attributes:title
(:string
) (required)
Area for the main content below the nabvar, supporting slots for the content itself and for an optional sidebar.
Attributes
hide_sidebar
(:boolean
) - Defaults tofalse
.sidebar_class
(:string
) - Defaults to"col-sm-3"
.sidebar_body_class
(:string
) - Defaults to""
.content_class
(:string
) - Defaults to"col-sm-9"
.
Slots
sidebar
content
(required)
Renders a modal.
Attributes
id
(:string
) (required)show
(:boolean
) - Defaults tofalse
.on_cancel
(Phoenix.LiveView.JS
) - Defaults to%Phoenix.LiveView.JS{ops: []}
.on_confirm
(Phoenix.LiveView.JS
) - Defaults to%Phoenix.LiveView.JS{ops: []}
.on_click_away
(Phoenix.LiveView.JS
) - Defaults to%Phoenix.LiveView.JS{ops: []}
.close_button
(:boolean
) - Defaults totrue
.
Slots
inner_block
(required)title
subtitle
confirm
cancel
Examples
<.modal id="confirm-modal">
Are you sure?
<:confirm>OK</:confirm>
<:cancel>Cancel</:cancel>
</.modal>
JS commands may be passed to the :on_cancel
and on_confirm
attributes
for the caller to react to each button press, for example:
<.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
Are you sure you?
<:confirm>OK</:confirm>
<:cancel>Cancel</:cancel>
</.modal>
Attributes
field
(Phoenix.HTML.FormField
) (required)sort_param
(Phoenix.HTML.FormField
) (required) - the parameter used by Ecto to sort your inputs.move_param
(Phoenix.HTML.FormField
) (required) - the parameter that represents the item to be moved.moved_param
(Phoenix.HTML.FormField
) (required) - the parameter that represents the item that has been moved.drop_param
(Phoenix.HTML.FormField
) - this attribute is optional if you don't want to support input deletion, but it is required if you want to use the<delete_input input={}/>
component.Defaults to
nil
.moved_animation
(:any
) - Defaults to"animate__animated animate__pulse animate__faster"
.
A component to move an element up in an association. To move up an element in an association is the same as movinbg it towards the beginning of the list.
Attributes
input
(Phoenix.HTML.FormField
) - the input to be moved.animation
(:string
) - Defaults to"animate__animated animate__fadeOut animate__faster"
.tooltip
(:string
) - tooltip for the action. Defaults tonil
.group_class
(:string
) - CSS class for the outer element (a <div/> element). Defaults to"btn btn-group"
.move_up_class
(:string
) - CSS class for the move-up element (a <label/> element). Defaults to"btn btn-sm btn-outline-dark"
.move_down_class
(:string
) - CSS class for the move-down element (a <label/> element). Defaults to"btn btn-sm btn-outline-dark"
.cursor
(:string
) - CSS cursor style while hovering the button. Defaults to"pointer"
.cursor_when_disabled
(:string
) - CSS cursor style while hovering the disabled button. Defaults to"default"
.
Slots
move_up
move_down
Attributes
field
(Phoenix.HTML.FormField
) (required)sort_param
(Phoenix.HTML.FormField
) (required) - the parameter used by Ecto to sort your inputs.drop_param
(Phoenix.HTML.FormField
) - this attribute is optional if you don't want to support input deletion, but it is required if you want to use the<delete_input input={}/>
component.Defaults to
nil
.moved_animation
(:any
) - Defaults to"animate__animated animate__pulse animate__faster"
.
Get the url for a resource.
Renders an input with label and error messages.
A %Phoenix.HTML.Form{}
and field name may be passed to the input
to build input names and error messages, or all the attributes and
errors may be passed explicitly.
Examples
<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />
Attributes
id
(:any
) - Defaults tonil
.name
(:any
)label
(:string
) - Defaults tonil
.value
(:any
)path
(:string
)field
(Phoenix.HTML.FormField
) - a form field struct retrieved from the form, for example: @form[:email].errors
(:list
) - Defaults to[]
.checked
(:boolean
) - the checked flag for checkbox inputs.prompt
(:string
) - the prompt for select inputs. Defaults tonil
.options
(:list
) - the already chosen elements. Defaults to[]
.multiple
(:boolean
) - the multiple flag for select inputs. Defaults tofalse
.- Global attributes are accepted. Supports all globals plus:
["autocomplete", "cols", "disabled", "form", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]
.
Sidebar link.
Attributes
to
(:string
) (required) - destination for your link.
Slots
inner_block
A group of links in your sidebar, which will be rendered as a block
Slots
inner_block
Renders a simple form.
Examples
<.simple_form for={@form} phx-change="validate" phx-submit="save">
<.input field={@form[:email]} label="Email"/>
<.input field={@form[:username]} label="Username" />
<:actions>
<.button>Save</.button>
</:actions>
</.simple_form>
Attributes
for
(:any
) (required) - the datastructure for the form.as
(:any
) - the server side parameter to collect all input under. Defaults tonil
.- Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus:
["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target"]
.
Slots
inner_block
(required)actions
- the slot for form actions, such as a submit button.
Renders a table with generic styling.
Examples
<.table id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.table>
Attributes
id
(:string
) (required)rows
(:list
) (required)row_id
(:any
) - the function for generating the row id. Defaults tonil
.class
(:string
) - class(es) for your table; by default thetable
class is used. Defaults to"table"
.row_click
(:any
) - the function for handling phx-click on each row. Defaults tonil
.row_item
(:any
) - the function for mapping each row before calling the:col
and:action
slots. Defaults to&Function.identity/1
.reorderable
(:boolean
) - wether the table rows can be reordered by the user. Defaults tofalse
.reorderable_event_name
(:string
) - name of the event sent to the LiveView when the items are reordered. Defaults to"reordered"
.reorderable_animation_duration
(:integer
) - animation duration. Defaults to150
.
Slots
col
(required) - Accepts attributes:label
(:string
)
action
- the slot for showing user actions in the last table column.
Translates an error message using gettext.
Translates the errors for a field from a keyword list of errors.