itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 14:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity
htmx/www/attributes/kt-classes.md

1.4 KiB
Raw Blame History

layout title
layout.njk </> kutty - kt-classes

kt-classes

The kt-classes attribute allows you to specify CSS classes that will be swapped onto the element that the attribute is on. This allows you to apply CSS Transitions to your HTML without resorting to javascript.

A kt-classes attribute value consists of "runs", which are separated by an & character. All class operations within a given run will be applied sequentially, with the delay specified.

Within a run, a , character separates distinct class operations.

A class operation is an operation name add, remove, or toggle, followed by a CSS class name, optionally followed by a colon : and a time delay.

Here are some examples:

<div kt-classes="add foo"/> <!-- adds the class "foo" after 100ms -->
<div kt-classes="remove bar:1s"/> <!-- removes the class "bar" after 1s -->
<div kt-classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s
                                               then adds the class "foo" 1s after that -->
<div kt-classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds 
                                                    class "foo" after 1s  -->
<div kt-classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->

Notes

  • kt-classes is not inherited
  • The default delay if none is specified is 100ms