Composants

panel

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

31 sur 31

Pill tabs

1537Pill tabsNavigationUne bande d'onglets où une seule pilule glisse et s'étire sur l'onglet sélectionné, avec une flèche, des touches de navigation Début et Fin et un panneau qui effectue un fondu enchaîné.

Sheet drawer

1540Sheet drawerSuperpositionsUn panneau coulissant qui surgit d'un bord sur un fond sombre, maintient le focus à l'intérieur et se ferme sur Échap, sur le bouton de fermeture ou en tirant sur son en-tête.

Assistant Ripple Glow

1665Assistant Ripple GlowArrière-plansUne ondulation en forme d'anneau s'étend vers l'extérieur sur une copie du contenu d'un panneau tandis que son bord s'allume aussi longtemps qu'une tâche est en cours d'exécution.

Drifting gradient wash

1687Drifting gradient washArrière-plansUn panneau dégradé bicolore surdimensionné au-delà de son cadre et se déplaçant lentement d'avant en arrière, de sorte que la limite de couleur dérive pour toujours sur la surface.

Orbiting border spark

1725Orbiting border sparkArrière-plansUne étincelle brillante avec une queue qui s'estompe s'étend pour toujours autour du bord d'un panneau, suivant le rayon exact du coin au lieu de couper les coins.

Paste Format Menu

1729Paste Format MenuBoutonsUne pilule avec un curseur qui ouvre une liste bordée de choix de mise en forme de pâte et quadrille ses coins inférieurs afin que les deux formes se lisent comme une seule pièce.

Pointer takeover zone

1795Pointer takeover zoneCurseurUn panneau qui masque le curseur système lorsque le pointeur est à l'intérieur et dessine sa propre marque à sa place, apparaissant à l'entrée et ressortant à la sortie.

Slotted panel card

1805Slotted panel cardCartesUne surface composable avec des fentes d'en-tête, d'action, de corps et de pied de page qui conservent leur espacement quel que soit le nombre utilisé.

Sliding panel button

1832Sliding panel buttonBoutonsUn bouton bordé dont la deuxième étiquette s'insère sur un panneau coloré à partir du bord droit, recouvrant complètement la première étiquette.

Pointer Spotlight Panel

1876Pointer Spotlight PanelCartesUn panneau de contenu avec une lumière douce qui suit le pointeur sur sa face et se fixe au centre lors de la mise au point du clavier.

Anchored detail popover

1910Anchored detail popoverSuperpositionsUn bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.

Anchored settings popover

1913Anchored settings popoverSuperpositionsUn bouton qui ouvre un petit panneau de paramètres ancré à côté, grandissant à partir du coin le plus proche de son déclencheur et retournant les côtés lorsque l'espace est épuisé.

Branded Code Panel

1925Branded Code PanelFormulairesUn panneau de vérification centré sous un petit verrou de marque, où un code rejeté secoue la ligne une fois, l'efface et les mains se concentrent sur la première case.

1981Icon label tabsNavigationUne rangée de puces d'onglet icon-and-label avec une surbrillance coulissante, où le panneau situé en dessous glisse dans la direction de l'onglet choisi.

Masked Reveal Accordion

1997Masked Reveal AccordionAffichage des donnéesUn accordéon dont les panneaux sont découverts par un masque mobile aux bords durs lorsqu'ils s'ouvrent, de sorte que les réponses apparaissent ligne par ligne au lieu de s'effacer en bloc.

Roving focus tabs

2026Roving focus tabsNavigationUne liste d'onglets au clavier en premier, construite autour de l'ordre des tabulations itinérantes, où seul l'onglet actif ou ciblé est accessible par Tab et un marqueur fin suit l'onglet actuel.

Single Panel Disclosure

2039Single Panel DisclosureAffichage des donnéesUn déclencheur et un panneau : un bloc compact d'affichage et de masquage qui dépose son contenu sous un masque souple.

Solid Ring Spinner

2047Solid Ring SpinnerMessages d’étatUn indicateur de chargement rembourré et en boîte : un anneau à trait épais avec un bord de couleur accentuée tournant à une vitesse linéaire constante à l'intérieur d'un panneau arrondi.

Edge-slide panel

2146Edge-slide panelSuperpositionsUn panneau de paramètres qui s'appuie contre le bord de l'écran tandis que la page située derrière s'assombrit et se brouille.

Grouped filter popover

2161Grouped filter popoverSuperpositionsUne rangée de petits boutons de filtre où l'ouverture du panneau d'un bouton ferme automatiquement tout autre panneau déjà ouvert dans la même rangée, chaque panneau s'agrandissant à partir du bord à partir duquel il a été déclenché.

Morphing tab panel

2195Morphing tab panelNavigationUn petit panneau à onglets dans lequel le soulignement actif glisse entre les onglets et le grand glyphe du panneau se transforme au lieu de s'échanger, de sorte que les deux vues semblent continues.

Starred repos disclosure

2244Starred repos disclosureAffichage des donnéesUne ligne d'en-tête avec un bouton bascule qui révèle une courte liste cachée de référentiels favoris sous une ligne qui reste toujours visible.

Tilt-in content frame

2253Tilt-in content frameSuperpositionsUn panneau d'information qui s'incline depuis un bord, se ferme librement lors d'un clic extérieur ou d'un échappement, et s'agrandit en douceur à mesure qu'une deuxième section de contenu est révélée.

Fading edge scroll panel

2353Fading edge scroll panelMise en pageUn panneau de défilement qui masque la barre native, fait flotter un pouce mince uniquement pendant que vous l'utilisez et fait disparaître le contenu sur le bord qui a encore plus à atteindre.

Masked reveal disclosure

2384Masked reveal disclosureMise en pageUne divulgation dont le panneau s'agrandit jusqu'à sa propre hauteur naturelle tandis qu'un bord légèrement dégradé efface le contenu depuis le haut, puis recule à la fermeture.

Overlay scroll panel

2396Overlay scroll panelMise en pageUn panneau délimité qui masque la barre de défilement de la plate-forme et dessine sa propre piste de superposition fine, de la taille d'un pouce par rapport au contenu.

Panel swallow button

2398Panel swallow buttonBoutonsUn bouton avec un panneau d'icônes plus sombre ancré sur un bord ; en survol ou en focus clavier, le panneau s'agrandit sur toute la largeur et l'étiquette disparaît en dessous.

Progressive edge blur

2407Progressive edge blurMise en pageUne bande épinglée sur un bord d'un panneau défilant qui brouille et fond progressivement son contenu vers l'arrière-plan au lieu de le couper sur une ligne dure.

Pass through wipe button

2558Pass through wipe buttonBoutonsUn bouton rempli dont le panneau lumineux s'efface depuis un bord en survol et sort par le bord opposé lorsque vous partez, de sorte qu'il continue de voyager.

Quick menu orb

2670Quick menu orbBoutonsUn déclencheur d'accent rond dont le glyphe se replie en une marque de fermeture tandis qu'un petit menu intitulé de rangées d'icônes s'agrandit en dessous.

Nested panel frame

2836Nested panel frameCartesUne coque extérieure discrète avec une bande d'en-tête et de pied de page compacte qui contient un ou plusieurs panneaux insérés plus nets, regroupant le contenu associé avec une profondeur claire.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Anchored detail popover
Un bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.
Anchored settings popover
Un bouton qui ouvre un petit panneau de paramètres ancré à côté, grandissant à partir du coin le plus proche de son déclencheur et retournant les côtés lorsque l'espace est épuisé.
Assistant Ripple Glow
Une ondulation en forme d'anneau s'étend vers l'extérieur sur une copie du contenu d'un panneau tandis que son bord s'allume aussi longtemps qu'une tâche est en cours d'exécution.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)