State mode - Jolty UI documentation

State mode

By default, the state of all elements is toggled via the hidden attribute, so it’s important to ensure that elements will be hidden when this attribute is present, for which we will set the following styles:

[hidden]:not([hidden="until-found"]) {
  display: none !important; /* not necessary if jolty-ui is used */
}

Options

All components support the following option: stateMode.

Mode	Hidden state selector	Description
`'hidden'`	`[hidden]`	Default mode, hides through `display: none;`
`'hidden-until-found'`	`[hidden="until-found"]`	The element will show when a match is found in the site search. Read more
`'inert'`	`[inert]`	Makes the element non-interactive, but remains visible
`'class-hidden'`	`.ui-hidden`	The element remains fully interactive, adds the `.ui-hidden` class when hidden
`'class-shown'`	-	The element remains fully interactive, adds the `.ui-shown` class when shown
`'remove'`	-	The element is removed from the DOM. Add the `hidden` attribute to hide by default

Inert mode

Some content that is hidden until you click on the button. It opens and closes with animation.

Сlass-hidden mode

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, veritatis adipisci et itaque aperiam consequuntur saepe rerum odio pariatur alias eaque autem mollitia, quam minima aspernatur eveniet dicta. Voluptatum veniam culpa illo dignissimos repellat impedit aliquid harum dicta sed corporis, quae assumenda excepturi dolorum vel eius nam minima sint modi quas non ipsum! Soluta animi ipsa natus in et ipsam asperiores illum eos alias molestiae necessitatibus amet rerum, debitis perferendis reprehenderit molestias nostrum sapiente modi eaque saepe vero, quo doloribus? Dolores quidem recusandae totam iste corrupti dolorum quia. Nulla consequatur dolores id laboriosam sit recusandae reprehenderit odio ullam impedit.

Hidden-until-found mode

This mode is useful when you want to hide elements until they are found in the site search.

Сlass-shown mode

This mode is useful when the same element can have different purposes depending on the conditions.

Resize the screen to 550px to display the menu in a dialog