Componentes

panel

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

31 de 31

Pill tabs

1537Pill tabsNavegaçãoUma faixa de guias onde um único comprimido desliza e se estende até a guia selecionada, com seta, teclas de navegação Home e End e um painel que faz crossfades.

Sheet drawer

1540Sheet drawerSobreposiçõesUm painel deslizante que surge de uma borda sobre um fundo escurecido, mantém o foco interno e fecha com Escape, o botão Fechar ou um puxão em seu cabeçalho.

Assistant Ripple Glow

1665Assistant Ripple GlowFundosUma ondulação em forma de anel se espalha sobre uma duplicata do próprio conteúdo de um painel enquanto sua borda acende enquanto uma tarefa está em execução.

Drifting gradient wash

1687Drifting gradient washFundosUm painel gradiente de dois tons superdimensionado além de sua moldura e movido lentamente para frente e para trás, de modo que o limite da cor flutua pela superfície para sempre.

Orbiting border spark

1725Orbiting border sparkFundosUma faísca brilhante com uma cauda desbotada corre para sempre ao redor da borda de um painel, seguindo o raio exato do canto em vez de cortar os cantos.

Paste Format Menu

1729Paste Format MenuBotõesUma pílula com um sinal de intercalação que abre uma lista com bordas de opções de formatação de pasta e quadra seus cantos inferiores para que as duas formas sejam lidas como uma só peça.

Pointer takeover zone

1795Pointer takeover zoneCursorUm painel que oculta o cursor do sistema enquanto o ponteiro está dentro dele e desenha sua própria marca em seu lugar, aparecendo na entrada e saindo na saída.

Slotted panel card

1805Slotted panel cardCartõesUma superfície combinável com slots de cabeçalho, ação, corpo e rodapé que mantêm seu espaçamento, independentemente de quantos forem usados.

Sliding panel button

1832Sliding panel buttonBotõesUm botão com borda cujo segundo rótulo aparece em um painel colorido a partir da borda direita, cobrindo completamente o primeiro rótulo.

Pointer Spotlight Panel

1876Pointer Spotlight PanelCartõesUm painel de conteúdo com uma luz suave que segue o ponteiro em sua face e fixa no centro no foco do teclado.

Anchored detail popover

1910Anchored detail popoverSobreposiçõesUm botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.

Anchored settings popover

1913Anchored settings popoverSobreposiçõesUm botão que abre um pequeno painel de configurações ancorado ao lado dele, crescendo a partir do canto mais próximo do gatilho e virando para os lados quando o espaço acaba.

Branded Code Panel

1925Branded Code PanelFormuláriosUm painel de verificação centralizado sob um pequeno bloqueio de marca, onde um código rejeitado agita a linha uma vez, limpa-a e volta o foco para a primeira caixa.

1981Icon label tabsNavegaçãoUma linha de chips de abas icon-and-label com destaque deslizante, onde o painel abaixo desliza na direção da aba escolhida.

Masked Reveal Accordion

1997Masked Reveal AccordionExibição de dadosUm acordeão cujos painéis são descobertos por uma máscara móvel de bordas rígidas à medida que são abertos, de modo que as respostas aparecem linha por linha em vez de desaparecerem como um bloco.

Roving focus tabs

2026Roving focus tabsNavegaçãoUma lista de guias com o teclado criado em torno da ordem de guias itinerantes, onde apenas a guia ativa ou em foco pode ser acessada por Tab e um marcador fino rastreia a atual.

Single Panel Disclosure

2039Single Panel DisclosureExibição de dadosUm gatilho e um painel: um bloco compacto de mostrar e ocultar que coloca seu conteúdo sob uma máscara suave.

Solid Ring Spinner

2047Solid Ring SpinnerMensagens de statusUm indicador de carregamento em caixa acolchoado: um anel grosso com uma borda colorida girando a uma velocidade linear constante dentro de um painel arredondado.

Edge-slide panel

2146Edge-slide panelSobreposiçõesUm painel de configurações que fica alinhado com a borda da tela enquanto a página atrás dele escurece e fica desfocada.

Grouped filter popover

2161Grouped filter popoverSobreposiçõesUma fileira de pequenos botões de filtro onde a abertura do painel de um botão fecha automaticamente qualquer outro painel já aberto na mesma linha, cada painel crescendo a partir da borda de onde foi acionado.

Morphing tab panel

2195Morphing tab panelNavegaçãoUm pequeno painel com guias onde o sublinhado ativo desliza entre as guias e o grande glifo do painel se transforma em vez de trocar, para que as duas visualizações pareçam contínuas.

Starred repos disclosure

2244Starred repos disclosureExibição de dadosUma linha de cabeçalho com um botão de alternância que revela uma pequena lista oculta de repositórios marcados com estrela abaixo de uma linha que permanece sempre visível.

Tilt-in content frame

2253Tilt-in content frameSobreposiçõesUm painel informativo que se inclina a partir de uma borda, é descartado livremente com um clique externo ou Escape e cresce suavemente à medida que uma segunda seção de conteúdo é revelada.

Fading edge scroll panel

2353Fading edge scroll panelLayoutUm painel de rolagem que oculta a barra nativa, flutua um polegar fino apenas enquanto você o usa e esmaece o conteúdo em qualquer borda que ainda tenha mais para alcançar.

Masked reveal disclosure

2384Masked reveal disclosureLayoutUma divulgação cujo painel cresce até sua própria altura natural, enquanto uma borda de gradiente suave mostra o conteúdo de cima para baixo e depois volta para trás ao fechar.

Overlay scroll panel

2396Overlay scroll panelLayoutUm painel delimitado que oculta a barra de rolagem da plataforma e desenha sua própria trilha de sobreposição estreita, do tamanho de um polegar de acordo com o conteúdo.

Panel swallow button

2398Panel swallow buttonBotõesUm botão com um painel de ícones mais escuro encaixado em uma das bordas; ao passar o mouse ou focar no teclado, o painel cresce em toda a largura e o rótulo desaparece abaixo dele.

Progressive edge blur

2407Progressive edge blurLayoutUma faixa fixada em uma borda de um painel de rolagem que desfoca e esmaece seu conteúdo gradualmente no fundo, em vez de cortá-lo em uma linha rígida.

Pass through wipe button

2558Pass through wipe buttonBotõesUm botão preenchido cujo painel brilhante aparece de uma borda ao passar o mouse e sai pela borda oposta quando você avança, para que continue viajando.

Quick menu orb

2670Quick menu orbBotõesUm gatilho de acento redondo cujo glifo se dobra em uma marca fechada enquanto um pequeno menu intitulado de linhas de ícones aumenta abaixo dele.

Nested panel frame

2836Nested panel frameCartõesUm revestimento externo silencioso com uma faixa compacta de cabeçalho e rodapé que contém um ou mais painéis inseridos mais nítidos, agrupando o conteúdo relacionado com profundidade clara.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Anchored detail popover
Um botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.
Anchored settings popover
Um botão que abre um pequeno painel de configurações ancorado ao lado dele, crescendo a partir do canto mais próximo do gatilho e virando para os lados quando o espaço acaba.
Assistant Ripple Glow
Uma ondulação em forma de anel se espalha sobre uma duplicata do próprio conteúdo de um painel enquanto sua borda acende enquanto uma tarefa está em execução.

Orientações de design

Abrir o índice completo

Etiquetas

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)