Item

composant

One entry of a list: its media, its title and description, its actions.

Aperçu

Clair

Two-factor authentication

A code from an application at each sign-in.

Code

<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Sombre

Two-factor authentication

A code from an application at each sign-in.

Code

<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

variant size as

Two-factor authentication

A code from an application at each sign-in.

<twig:Item:Group>
    <twig:Item as="li" variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Two-factor authentication</twig:Item:Title>
            <twig:Item:Description>A code from an application at each sign-in.</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions><twig:Button size="sm" variant="outline">Turn on</twig:Button></twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Variantes

`variant`

The visual style variant.

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

variant="default"

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

variant="outline"

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

variant="muted"

`size`

The item size.

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

size="default"

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

size="sm"

`as`

The HTML tag to render; use a when the whole item navigates and li in an Item:Group.

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

as="div"

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

as="a"

Two-factor authentication

A code from an application at each sign-in.

Two-factor authentication

A code from an application at each sign-in.

as="li"

Installation

php bin/console ux:install item --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`variant`	`'default'\|'outline'\|'muted'`	`'default'`	The visual style variant.
`size`	`'default'\|'sm'`	`'default'`	The item size.
`as`	`'div'\|'a'\|'li'`	`'div'`	The HTML tag to render; use `a` when the whole item navigates and `li` in an `Item:Group`.

Accessibility

An Item:Group is a list, its items li elements, so a screen reader says how many there are. The media is decorative and hidden from screen readers: write in the title what a picture would say. With as="a", the whole item is one link; then it holds no other link or button.

Fichiers à copier

templates/components/Item.html.twig

{%- props
    ## 'default'|'outline'|'muted' The visual style variant.
    variant = 'default',
    ## 'default'|'sm' The item size.
    size = 'default',
    ## 'div'|'a'|'li' The HTML tag to render; use `a` when the whole item navigates and `li` in an `Item:Group`.
    as = 'div'
-%}
{%- set _tag = as in ['div', 'a', 'li'] ? as : 'div' -%}
{%- set _variant = {outline: ' isOutline', muted: ' isMuted'}[variant] ?? '' -%}
<{{ _tag }} data-slot="item" data-variant="{{ variant }}" data-size="{{ size }}"{{ attributes.defaults({class: 'isItem' ~ _variant ~ (size is same as('sm') ? ' isSmall' : '')}) }}>
{##- The item, typically an `Item:Media`, an `Item:Content` and `Item:Actions`. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>

templates/components/Item/Actions.html.twig

<div data-slot="item-actions"{{ attributes.defaults({class: 'isItemActions'}) }}>
{##- The buttons or links acting on the item. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Item/Content.html.twig

<div data-slot="item-content"{{ attributes.defaults({class: 'isItemContent'}) }}>
{##- The title and the description of the item. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Item/Description.html.twig

<p data-slot="item-description"{{ attributes.defaults({class: 'isItemDescription'}) }}>
{##- A line or two about the item. -#}
{%- block content %}{% endblock -%}
</p>

templates/components/Item/Footer.html.twig

<div data-slot="item-footer"{{ attributes.defaults({class: 'isItemFooter'}) }}>
{##- A line below the item's media and content. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Item/Group.html.twig

<ul role="list" data-slot="item-group"{{ attributes.defaults({class: 'isItemGroup'}) }}>
{##- The items of the list, each an `Item` with `as="li"`, separated or not by `Item:Separator`. -#}
{%- block content %}{% endblock -%}
</ul>

templates/components/Item/Header.html.twig

<div data-slot="item-header"{{ attributes.defaults({class: 'isItemHeader'}) }}>
{##- A line above the item's media and content. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Item/Media.html.twig

{%- props
    ## 'default'|'icon'|'image' What the media holds, which sets its box.
    variant = 'default'
-%}
<div data-slot="item-media" data-variant="{{ variant }}" aria-hidden="true"{{ attributes.defaults({class: 'isItemMedia' ~ ({icon: ' hasIcon', image: ' hasImage'}[variant] ?? '')}) }}>
{##- A decorative icon, an image or an avatar. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Item/Separator.html.twig

<li role="none" data-slot="item-separator"{{ attributes.defaults({class: 'isItemSeparator'}) }}></li>

templates/components/Item/Title.html.twig

<div data-slot="item-title"{{ attributes.defaults({class: 'isItemTitle'}) }}>
{##- The name of the item. -#}
{%- block content %}{% endblock -%}
</div>