Balayer pour afficher
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
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.
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:
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[null,null,["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Swipe to reveal\n\nAllow users to swipe a component to reveal extra actions.\n\nThe *swipe to reveal* component lets you add extra actions to\nchips and cards, specifically when they appear in lists. This component lets\nusers quickly get things done without leaving the screen.\n\nUsers can partially swipe chips and cards to the left to access these\nactions, then tap on an action to complete it. Users can also fully swipe\nchips and cards to the left to quickly commit to the primary action. \nThe component has 2 slots for these actions:\n\n1. **Primary**\n2. **Secondary (optional)**\n\nAnatomy\n-------\n\n### Revealed actions\n\nDevelopers can customize the actions for their unique use cases. Consider\nthe color and iconography used in these actions to help users understand\nwhat they mean.\n\nThe revealed actions appear on the same side for all language\nlocales.\n\n1. **Primary action**\n2. **Secondary action (optional)** \n\n### Commit to a primary action\n\nTo commit to the primary action, a user can either tap on the button or\ncontinue swiping to the left. In this way, the button extends to the entire\nwidth of the screen and displays a label. The action fades away after being\nselected.\n\nThe first example shows a **single button option** . The\nsecond example shows a **double button option**. \n\n### Undo action\n\nFor destructive actions, add an undo component to let users reverse these\nactions. Add the undo capability to the primary action.\n\nIf added, an undo chip button appears in place of the committed action.\nAfter a short period of time, the undo action fades away, and the system\ncompletes the committed action. \n\n### Swipe thresholds\n\nThe swipe to reveal component's behavior depends upon how far the user\nswipes across the screen:\n\n- If the user swipes across less than 50% of the screen, the component snaps back to its starting position, and no action is taken.\n- If the user swipes across the screen between 50% and 75% of the full width, the component remains partially visible, and the actions associated with the component appear.\n- If the user swipes across more than 75% of the screen, the component disappears, and the system automatically performs the primary action.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\nThe following material-themed components implement the swipe to reveal behavior:\n\n- [`SwipeToRevealCard`](/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.foundation.RevealState,androidx.compose.ui.Modifier,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0))\n- [`SwipeToRevealChip`](/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealChip(androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.foundation.RevealState,androidx.compose.ui.Modifier,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0))\n\n### On cards\n\nThe following screenshots show the swipe to reveal component's appearance when\nusing the `SwipeToRevealCard` class:\n\n### On chips\n\nThe following screenshots show the swipe to reveal component's appearance when\nusing the `SwipeToRevealChip` class:"]]
