Autorisez les utilisateurs à balayer un composant pour afficher des actions supplémentaires.
Le composant Balayer pour afficher vous permet d'ajouter des actions supplémentaires aux chips et aux fiches, en particulier lorsqu'ils apparaissent dans des listes. Ce composant permet aux utilisateurs d'effectuer rapidement des tâches sans quitter l'écran.
Les utilisateurs peuvent balayer partiellement les chips et les cartes vers la gauche pour accéder à ces actions, puis appuyer sur une action pour l'effectuer. Les utilisateurs peuvent également balayer complètement les chips et les fiches vers la gauche pour s'engager rapidement dans l'action principale.
Le composant comporte deux emplacements pour ces actions:
- Principal
- Secondaire (facultatif)
Anatomie
Actions révélées
Les développeurs peuvent personnaliser les actions en fonction de leurs cas d'utilisation uniques. Réfléchissez à la couleur et à l'iconographie utilisées dans ces actions pour aider les utilisateurs à comprendre leur signification.
Les actions révélées apparaissent du même côté pour toutes les langues.
- Action principale
- Action secondaire (facultatif)
S'engager dans une action principale
Pour confirmer l'action principale, l'utilisateur peut appuyer sur le bouton ou continuer à balayer l'écran vers la gauche. De cette manière, le bouton s'étend sur toute la largeur de l'écran et affiche un libellé. L'action disparaît après avoir été sélectionnée.
Le premier exemple présente une option à bouton unique. Le deuxième exemple présente une option à deux boutons.
Annuler l'action
Pour les actions destructives, ajoutez un composant d'annulation pour permettre aux utilisateurs d'annuler ces actions. Ajoutez la fonctionnalité d'annulation à l'action principale.
Si vous l'ajoutez, un bouton de suppression s'affiche à la place de l'action effectuée. Après un court laps de temps, l'action d'annulation disparaît et le système termine l'action validée.
Seuils de balayage
Le comportement du composant "Balayer pour afficher" dépend de la distance parcourue par l'utilisateur sur l'écran:
- Si l'utilisateur balaie moins de 50% de l'écran, le composant revient à sa position de départ et aucune action n'est effectuée.
- Si l'utilisateur balaie l'écran entre 50% et 75% de la largeur totale, le composant reste partiellement visible et les actions associées au composant s'affichent.
- Si l'utilisateur balaie plus de 75% de l'écran, le composant disparaît et le système effectue automatiquement l'action principale.
Composants associés
Les composants suivants, sur le thème Material, implémentent le comportement de balayage pour révéler:
Sur les fiches
Les captures d'écran suivantes montrent l'apparence du composant lorsque vous balayez l'écran pour le révéler à l'aide de la classe SwipeToRevealCard:
Sur les chips
Les captures d'écran suivantes montrent l'apparence du composant lorsque vous balayez l'écran pour le révéler à l'aide de la classe SwipeToRevealChip:
