Componentes

drag

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

21 de 21

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.

Split panes

1542Split panesLayoutDois painéis divididos por uma alça que os redimensiona arrastando ou com a tecla de seta, mantém um tamanho mínimo em ambos os lados e volta ao clique duplo.

Coiled Spring Drag

1675Coiled Spring DragAnimaçãoUm ladrilho arrastável preso ao seu local de origem por uma bobina esticada que se estica e afina conforme você puxa, e então puxa o ladrilho para trás quando você o solta.

Drag tile track

1771Drag tile trackAnimaçãoUm ladrilho que você pode jogar em torno de uma pista delimitada que se inclina para o arrasto, resiste além das bordas e pára com impulso.

Swipe photo stack

1838Swipe photo stackCartõesUma pilha de cartões fotográficos onde o de cima pode ser jogado para a esquerda ou para a direita, enviando-o para trás à medida que a pilha avança.

Scaling dot carousel

2027Scaling dot carouselNavegaçãoUm carrossel de slides cujo cartão ativo fica em escala completa enquanto seus vizinhos encolhem ligeiramente, emparelhado com indicadores de pontos que se ampliam em comprimidos rotulados.

Scrub Number Input

2030Scrub Number InputFormuláriosUm campo numérico com botões de incremento e decremento, além de um rótulo arrastável que move o valor para cima ou para baixo conforme você o arrasta para os lados.

Peelable sticker

2203Peelable stickerAnimaçãoUm adesivo de vinil que você pode arrastar ao redor de sua área, cuja borda se eleva da superfície ao pairar e descasca ainda mais enquanto você o segura.

Rubber sheet panel

2218Rubber sheet panelAnimaçãoUm painel que se comporta como uma borracha esticada: o ponteiro o agarra, os pontos vizinhos se arrastam e, ao soltá-lo, ele volta com uma oscilação.

Bottom sheet panel

2271Bottom sheet panelSobreposiçõesUma folha de estilo móvel que sobe da borda inferior com uma alça e pode ser arrastada de volta para baixo para ser descartada.

Curved Scroll Wall

2330Curved Scroll WallLayoutUma parede de fotos com rolagem horizontal renderizada em um plano curvado suavemente que continua rolando infinitamente em qualquer direção.

Drag reorder checklist

2341Drag reorder checklistExibição de dadosUma lista de verificação cujas linhas podem ser arrastadas para uma nova ordem, com itens marcados desenhando uma marca animada e um tachado.

Receding stack carousel

2411Receding stack carouselLayoutUm carrossel onde as cartas se distanciam atrás da carta em foco, escurecendo e desfocando à medida que ficam atrás.

Spring drag carousel

2439Spring drag carouselLayoutUm carrossel de cartas arrastável que se encaixa na carta mais próxima com física de primavera e pode ser reproduzido automaticamente em um loop.

Swipe action row

2445Swipe action rowSobreposiçõesUma linha de lista em estilo de mensagem que revela botões de ação coloridos atrás dela conforme você a arrasta para os lados.

Swipe away card deck

2446Swipe away card deckLayoutUm baralho de cartões fotográficos em leque que você pode arrastar ou tocar para enviar o de cima para trás, um de cada vez.

Interactive spin globe

2738Interactive spin globeMídiaUm globo de tela sombreado que gira automaticamente lentamente, ilumina marcadores brilhantes sobre locais dispersos e pode ser agarrado e girado manualmente.

Before/After reveal handle

2758Before/After reveal handleCampos de entradaUm divisor arrastável sobre duas cenas empilhadas que revela uma à esquerda e outra à direita, movida pelo ponteiro, clique para pular e teclas de seta.

Exposure dial slider

2766Exposure dial sliderCampos de entradaUma visualização da foto com uma leitura de exposição circular no canto acima de uma régua arrastável de marcas que define o valor de exposição em EV.

Vertical brightness slider

2788Vertical brightness sliderCampos de entradaUm controle deslizante alto que se enche de luz na parte inferior conforme você arrasta, resiste a qualquer extremidade e volta ao ser liberado.

Elastic tug slider

2795Elastic tug sliderCampos de entradaUm controle deslizante que se estica como um elástico quando arrastado pelas extremidades, fazendo com que a faixa volte com um salto quando liberada.

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.

Before/After reveal handle
Um divisor arrastável sobre duas cenas empilhadas que revela uma à esquerda e outra à direita, movida pelo ponteiro, clique para pular e teclas de seta.
Bottom sheet panel
Uma folha de estilo móvel que sobe da borda inferior com uma alça e pode ser arrastada de volta para baixo para ser descartada.
Coiled Spring Drag
Um ladrilho arrastável preso ao seu local de origem por uma bobina esticada que se estica e afina conforme você puxa, e então puxa o ladrilho para trás quando você o solta.

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)