Pelote
EN
Navigation

NavigationRail

Rail vertical de 96px à gauche, logo cookie et destinations en pilule 56×32.

Catégorie: NavigationOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

ExpressiveRéférence

UX / UIRègles illustrées

À faire
OverviewServices
Trois signaux pour l'actif : pilule, icône remplie, graisse.
À éviter
OverviewServices
Actif signalé par la seule couleur du texte.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

AccueilAppsRéglages

Destinations en tuiles, sélection par cadre primary.

ChromeY2K

OverviewContainersServices

Destinations en boutons chromés, l'actif en gel primary.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Rail vertical de 96px à gauche (web, au-delà du point de rupture défini par Layout : 600 px M3 ou 760 px, voir Layout) : logo cookie, destinations avec pilule 56×32 et libellé 12px.

Règles

  • Actif : pilule secc, icône remplie, libellé 600, aria-current="page".
  • Toutes les destinations sur desktop ; sur mobile, les 4 premières passent en NavigationBar, le reste dans « More ».
  • Bordure droite sch 1px.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.