Iniciar sesión

Componentes

Capas superpuestas

Diálogos, paneles y menús superpuestos sobre la página.

36 de 62

Cargando el índice completo de búsqueda.

Command palette

1527Command paletteCapas superpuestasUna superposición de búsqueda abierta con un botón o Ctrl K que filtra comandos agrupados, mueve un resaltado con las teclas de flecha, ejecuta el seleccionado en Enter e informa el resultado.

Anchored detail popover

1910Anchored detail popoverCapas superpuestasUn botón disparador que abre un pequeño panel anclado que contiene un formulario de configuración titulado, que crece desde el borde del disparador y se cierra con Escape o un clic externo.

Anchored info popover

1911Anchored info popoverCapas superpuestasUn botón disparador que abre un pequeño panel de información flotante anclado a uno de sus bordes, desvaneciéndose y escalando desde ese borde y descartándose con un clic externo o Escape.

Anchored popover card

1912Anchored popover cardCapas superpuestasUn botón disparador que abre una pequeña tarjeta de configuración anclada a sí misma, que se amplía desde el borde del que crece y se cierra con un segundo clic, Escape o una pulsación exterior.

Anchored settings popover

1913Anchored settings popoverCapas superpuestasUn botón que abre un pequeño panel de configuración anclado a su lado, que crece desde la esquina más cercana a su gatillo y voltea los lados cuando se acaba el espacio.

Banner header dialog

1919Banner header dialogCapas superpuestasUna ventana modal con una franja de color en su borde superior, colocada sobre una copia atenuada y completamente inerte de la página detrás de ella.

Bounce warning dialog

1923Bounce warning dialogCapas superpuestasUn cuadro de diálogo de confirmación que aparece con un exceso elástico y una insignia de icono que rebota, exigiendo una respuesta antes de que la página siguiente vuelva a ser utilizable.

Bulk action toolbar

1927Bulk action toolbarCapas superpuestasUna barra de herramientas flotante para recorrer una cola de registros uno a la vez, con acciones de íconos que revelan su etiqueta al pasar el mouse y un botón principal que confirma el destino.

Confirm action dialog

1942Confirm action dialogCapas superpuestasUn modal centrado que interrumpe la página para que alguien confirme o cancele explícitamente una acción seria antes de que suceda.

Consequence confirm dialog

1943Consequence confirm dialogCapas superpuestasUn cuadro de diálogo de confirmación que aparece desde un borde elegido y bloquea la página hasta que el visitante cancela o continúa explícitamente.

Custom shell lightbox

1948Custom shell lightboxCapas superpuestasUna cuadrícula de galería que abre una caja de luz sin bordes, que muestra cómo un motor de apertura, cierre y enfoque puede usar una carcasa completamente personalizada.

Edge slide sheet

1953Edge slide sheetCapas superpuestasUn panel que se desliza desde el borde de la pantalla para contener contenido complementario como un carrito o filtros, sin salir de la página actual.

Flip Side Hint Tooltip

1960Flip Side Hint TooltipCapas superpuestasUna burbuja de sugerencia que aparece al pasar el mouse o al foco del teclado y que se voltea automáticamente hacia cualquier lado la mantiene completamente visible cerca del borde de la pantalla.

Instant Hint Tooltip

1983Instant Hint TooltipCapas superpuestasUna pequeña etiqueta que se desvanece y se escala a la vista junto a un elemento al pasar el mouse o al foco del teclado, brindando una pista rápida sin agregar desorden visible.

Keyboard Context Menu

1985Keyboard Context MenuCapas superpuestasUn menú de acciones desplegable con elementos agrupados, atajos de teclado y un submenú anidado, totalmente manejable desde el teclado con un resaltado de enfoque deslizante.

Centered modal frame

2119Centered modal frameCapas superpuestasUn modal sencillo y centrado que se desvanece y escala sobre un fondo atenuado, con encabezado, cuerpo y pie de página, para formas y confirmaciones cotidianas.

Checkable action menu

2121Checkable action menuCapas superpuestasUn menú que combina acciones simples con filas de casillas de verificación y un conjunto de opciones únicas, haciendo aparecer cada marca cuando se enciende y deslizando un punto entre las opciones.

Cursor-chasing tooltip

2137Cursor-chasing tooltipCapas superpuestasUna burbuja de pistas que aparece al pasar el cursor o al enfocar y puede deslizarse para seguir el puntero a medida que se mueve a través del gatillo.

Edge aware popover

2145Edge aware popoverCapas superpuestasUn popover que surge de su gatillo y se voltea o se desplaza hacia el lado opuesto cuando el lado que usted solicitó pasa por el borde del marco y permanece pegado mientras las cosas se desplazan.

Edge-slide panel

2146Edge-slide panelCapas superpuestasUn panel de configuración que aparece al ras del borde de la pantalla mientras la página detrás de él se oscurece y se vuelve borrosa.

Edge-tilt alert modal

2147Edge-tilt alert modalCapas superpuestasUn modal de advertencia para acciones irreversibles que se eleva y se inclina desde el borde inferior con un sobrepaso elástico y se cierra solo mediante sus propios botones.

Focus-Trapped Modal Kit

2156Focus-Trapped Modal KitCapas superpuestasUna base modal básica cuyo objetivo principal es el comportamiento disciplinado del teclado: atrapa el enfoque mientras está abierto y lo restaura precisamente al cerrar, envuelto en una entrada inclinable.

Grouped backdrop popover

2160Grouped backdrop popoverCapas superpuestasUn disparador de ventana emergente que se abre cerca de su ancla con un fondo atenuado opcional y cierra cualquier ventana emergente hermana en su grupo tan pronto como se abre.

Grouped filter popover

2161Grouped filter popoverCapas superpuestasUna fila de pequeños botones de filtro donde al abrir el panel de un botón se cierra automáticamente cualquier otro panel que ya esté abierto en la misma fila, cada panel crece desde cualquier borde desde el que se activó.

Bottom sheet panel

2271Bottom sheet panelCapas superpuestasUna hoja de estilo móvil que se eleva desde el borde inferior con un asa y se puede arrastrar hacia abajo para descartarla.

Command Palette Search

2272Command Palette SearchCapas superpuestasUna superposición convocada por teclado con un campo de búsqueda en la parte superior y una lista de comandos agrupados y filtrados en vivo debajo, navegable completamente por teclado y ejecutado con Enter.

Account Dropdown Menu

2295Account Dropdown MenuCapas superpuestasUn disparador de avatar que abre un menú de cuenta agrupado con sugerencias de atajos de teclado, un submenú temático y una fila de cierre de sesión destructiva con un estilo aparte del resto.

Account Menu Flyout

2296Account Menu FlyoutCapas superpuestasUn botón de resumen de perfil que se abre en un menú de cuenta de filas etiquetadas, con una pequeña línea indicadora curva que se endereza cuando el menú está abierto.

App folder expand

2300App folder expandCapas superpuestasUn mosaico de carpetas estilo pantalla de inicio cuyos pequeños íconos de aplicaciones crecen hasta convertirse en un panel completo, cada ícono viaja desde su miniatura hasta su lugar grande.

Blocking alert dialog

2306Blocking alert dialogCapas superpuestasUn diálogo centrado que exige una elección explícita antes de cerrarse, utilizado para acciones irreversibles que el visitante no debe descartar por accidente.

Card to fullscreen modal

2311Card to fullscreen modalCapas superpuestasUna tarjeta de lista que se transforma continuamente en un panel de detalles casi a pantalla completa usando su propia imagen y título, y luego vuelve a transformarse al cerrarse.

Confirm action modal

2324Confirm action modalCapas superpuestasUn cuadro de diálogo de confirmación centrado que se abre sobre un fondo que se oscurece y le pide al visitante que confirme o cancele una acción destructiva.

Confirm Delete Modal

2325Confirm Delete ModalCapas superpuestasUn cuadro de diálogo de confirmación centrado que se desvanece sobre un fondo atenuado, le pide al usuario que confirme una acción destructiva y se anima al cancelar, confirmar o hacer clic externo.

Destructive confirm dialog

2334Destructive confirm dialogCapas superpuestasUn cuadro de diálogo de confirmación para acciones destructivas que solo se cierra a través de sus propios botones y se niega a cerrarse al hacer clic en el fondo o escapar.

Dismissible Dialog

2335Dismissible DialogCapas superpuestasUn cuadro de diálogo centrado en un propósito general que se abre sobre un fondo borroso y que puede cerrarse casualmente con el botón de cerrar, el fondo o Escape.

Drag Dismiss Bottom Drawer

2340Drag Dismiss Bottom DrawerCapas superpuestasUn panel que se desliza hacia adentro desde un borde con una pequeña manija de arrastre, rastrea el arrastre de un dedo o puntero con resistencia de banda elástica y se abre nuevamente o se cierra dependiendo de qué tan lejos se tira.

Abrir el índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)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)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 (6)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 (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)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)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)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 (12)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 (8)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)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)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 (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)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 (11)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)wrapper (3)zoom (4)