ReactionButton

composant

One reaction of phil/reactions-bundle: a button that says it is pressed, its emoji or its image, its label for screen readers and its counter; or the same, as plain text, for a viewer who cannot press it. Any other attribute, such as the name and value of a form, goes on the button.

Aperçu

Clair

Code

<twig:ReactionButton label="Like" emoji="👍" :count="3" countLabel="3 reactions" />

Sombre

Code

<twig:ReactionButton label="Like" emoji="👍" :count="3" countLabel="3 reactions" />

Essayer

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

<twig:ReactionButton label="Like" emoji="👍" :count="3" countLabel="3 reactions" />

Variantes

`pressed`

Whether this reaction is the viewer's.

pressed="false"

pressed="true"

`interactive`

A button, or plain text for a viewer who cannot press it.

Like3 reactions

interactive="false"

interactive="true"

Usage

Code

<twig:ReactionButton label="Thanks" emoji="🙏" :pressed="true" name="withdraw" value="thanks" />

Installation

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

Propriétés

Propriété	Type	Par défaut	Description
`emoji`	`string\|null`	`null`	The Unicode emoji; hidden from screen readers, which read the label.
`image`	`string\|null`	`null`	The address of the image, when the reaction has no emoji.
`imageAlt`	`string\|null`	`null`	The replacement text of the image; the label when null.
`count`	`int\|null`	`null`	The counter; none is shown when null.
`countLabel`	`string\|null`	`null`	What screen readers read instead of the counter.
`pressed`	`bool`	`false`	Whether this reaction is the viewer's.
`interactive`	`bool`	`true`	A button, or plain text for a viewer who cannot press it.

Examples

An emoji of the site

<twig:ReactionButton label="The gnome" image="/emojis/gnome.webp" imageAlt="A gnome waving" />

Shown without being pressable

<twig:ReactionButton label="Like" emoji="👍" :count="3" countLabel="3 reactions" :interactive="false" />

Fichiers à copier

templates/components/ReactionButton.html.twig

{#-
 # One reaction: a button saying whether it is pressed, or the same as plain text for a viewer who cannot press it. The
 # emoji is hidden from screen readers, which read the label; the counter is read through its own label.
 #}
{%- props
    ## string The name of the reaction.
    label,
    ## string|null The Unicode emoji; hidden from screen readers, which read the label.
    emoji = null,
    ## string|null The address of the image, when the reaction has no emoji.
    image = null,
    ## string|null The replacement text of the image; the label when null.
    imageAlt = null,
    ## int|null The counter; none is shown when null.
    count = null,
    ## string|null What screen readers read instead of the counter.
    countLabel = null,
    ## bool Whether this reaction is the viewer's.
    pressed = false,
    ## bool A button, or plain text for a viewer who cannot press it.
    interactive = true
-%}
{%- set _face -%}
    {%- if image is not null -%}
        <img src="{{ image }}" alt="{{ imageAlt ?? label }}" width="20" height="20" loading="lazy">
    {%- else -%}
        <span aria-hidden="true">{{ emoji }}</span><span class="isVisuallyHidden">{{ label }}</span>
    {%- endif -%}
    {%- if count is not null and count > 0 -%}
        <span aria-hidden="true">{{ count }}</span><span class="isVisuallyHidden">{{ countLabel ?? count }}</span>
    {%- endif -%}
{%- endset -%}
{%- if interactive -%}
    <button type="submit" aria-pressed="{{ pressed ? 'true' : 'false' }}"{{ attributes.defaults({class: 'isReaction'}) }}>{{ _face }}</button>
{%- else -%}
    <span{{ attributes.defaults({class: 'isReaction'}) }}>{{ _face }}</span>
{%- endif -%}