FloatingActionButton (FAB)
O FloatingActionButton é um botão que flutua sobre a interface do usuário, sempre visível, usado para promover uma ação primária ou frequente em um aplicativo.
Quando usar:
- Para destacar a ação principal ou mais importante em uma tela.
- Em aplicações móveis ou responsivas onde é necessário um acesso rápido a uma funcionalidade específica.
- Quando a interface precisa de um elemento de ação que seja altamente visível e de fácil acesso.
- Em telas onde o espaço é limitado e um botão tradicional ocuparia muito espaço ou distrairia o usuário.
Quando não usar:
- Quando há múltiplas ações principais com a mesma importância, pois o FAB é destinado a uma única ação primária.
- Em telas onde a ação não é crítica ou não é frequentemente utilizada pelo usuário.
- Em interfaces que já possuem muitos elementos flutuantes ou sobrepostos, para evitar poluição visual.
- Em telas grandes (desktop), onde um botão tradicional ou outro componente de interface pode ser mais apropriado.
Uso
js
<CdsFloatingActionButton
icon="plus-outline"
size="md"
variant="green"
:actions="[
{
icon: 'document-outline',
label: 'Documentos',
},
{
icon: 'home-outline',
label: 'Início',
},
{
icon: 'edit-outline',
label: 'Editar',
}
]"
/>Preview
Dois botões na mesma tela
Botão com sub-itens
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | Define a variante de cor do botão. São 9 variantes implementadas: 'green', 'teal', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber', 'gray' e 'dark'. |
icon | string | 'plus-outline' | -- | Define o ícone do botão. |
actions | array | [] | -- | Lista de ações do subMenu. Cada item deve conter os atributos `label` e `icon`. |
size | string | 'md' | sm md lg | Define o tamanho do botão. São 3 variantes implementadas: 'sm', 'md' e 'lg'. |
Eventos
Nome | Descrição |
|---|---|
@main-button-click | |
@action-click |