Animação
Archetype morph shape
Archetype morph shape: Uma forma se transforma em botão, interruptor, controle deslizante, cartão e caixa de seleção, com leituras ao vivo de sua largura, altura, raio dos cantos e partes durante cada mudança.
Como usar Archetype morph shape
Archetype morph shape usa o formato de prévia “amplo” com o tema “claro/escuro”.
Personalizar a prévia
Estes controles são passados para a demo. Os valores e limites descrevem a prévia; consulte a implementação para conhecer todas as props.
| Controle | Tipo | Valor inicial | Limites da prévia |
|---|---|---|---|
accent | color | #1F45FF | Os metadados não indicam outro limite. |
detail | color | #EEEAE2 | Os metadados não indicam outro limite. |
hold | number | 1.1 | De 0.4 a 4; passo 0.1 |
morph | number | 0.9 | De 0.3 a 2.5; passo 0.1 |
readouts | boolean | true | Os metadados não indicam outro limite. |
autoplay | boolean | true | Os metadados não indicam outro limite. |
Para quais frameworks Archetype morph shape está disponível?
Archetype morph shape está disponível para React, Vue, Svelte, Astro, HTML. A prévia usa React; as observações sobre o código se referem a index.tsx. Confira as interações na versão escolhida antes de depender delas.
Quais são as dependências de Archetype morph shape?
Os metadados React não indicam dependências npm adicionais ao React.
Quais detalhes de acessibilidade aparecem em Archetype morph shape?
O código React de Archetype morph shape inclui: atributos e manipuladores (aria-hidden, aria-label, aria-readonly, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); papéis explícitos (slider). Estas são observações do código. Verifique os nomes acessíveis, a ordem do foco e o comportamento do teclado na página completa.
Como Archetype morph shape trata a redução de movimento?
Archetype morph shape consulta a preferência de movimento no código React por meio de matchMedia(prefers-reduced-motion). Confira a implementação completa, os estilos compartilhados e a versão escolhida com a redução de movimento ativada; estas observações não garantem que todas as animações parem.
