Skip to content

Componentes de Botões e Ações - Documentação

Introdução

O pacote w2o-blade-components oferece uma variedade de componentes para ações e interações do usuário. Estes componentes são projetados para fornecer uma experiência consistente, acessível e visualmente atraente em toda a aplicação.

Botão

O componente principal para todas as ações clicáveis na aplicação.

Propriedades:

  • Para definir a cor do botão, utilize as classes de background
    • Ex:class="bg-danger"
  • dataTooltip (string|null): Texto do tooltip. Padrão: null
  • dataTooltipPosition (string): Posição do tooltip. Padrão: 'auto'
  • Valores: auto, top, right, bottom, left
  • dataTooltipTrigger (string): Evento que dispara o tooltip. Padrão: 'hover'
  • Valores: hover, click, focus

Uso Básico:

1
2
3
<x-w2o::botao>
    Clique Aqui
</x-w2o::botao>

Botão com Loading:

1
2
3
4
5
6
<x-w2o::botao type="submit" wire:loading.attr="disabled" wire:target="save">
    <span wire:loading wire:target="save">
        <x-w2o::spinner />
    </span>
    <span>Salvar</span>
</x-w2o::botao>

Botão com Tooltip Integrado:

1
2
3
4
5
6
<x-w2o::botao 
    color="info"
    data-tooltip="Esta é uma informação adicional sobre o botão"
    data-tooltip-position="top">
    Informação
</x-w2o::botao>

BotaoVoltar

Componente especializado para botões de navegação "Voltar".

Uso básico:

1
2
3
<x-w2o::botao-voltar>
    Voltar
</x-w2o::botao-voltar>

Com atalho:

1
2
3
4
5
<a data-keybind="f10" href="{{ route('users.index') }}">
    <x-w2o::botao-voltar>
        F10 - Voltar
    </x-w2o::botao-voltar>
</a>

Nota: Este componente é um wrapper do componente Botao com cor padrão diferente.

Badge

Componente para exibir etiquetas, status e informações destacadas.

Propriedades:

  • color (string): Cor do badge. Padrão: 'primary'
  • Valores: primary, secondary, success, danger, warning, info, muted
  • badgeStyle (string): Estilo visual do badge. Padrão: 'outline'
  • default: Badge preenchido com cor sólida
  • outline: Badge com borda colorida e fundo transparente

Uso Básico:

1
2
3
4
5
6
7
<x-w2o::badge color="success">
    Ativo
</x-w2o::badge>

<x-w2o::badge color="danger">
    Inativo
</x-w2o::badge>

Tooltip

Componente para exibir dicas e informações adicionais.

Propriedades:

  • position (string): Posição do tooltip. Padrão: 'auto'
  • Valores: auto, top, right, bottom, left
  • trigger (string): Evento que dispara o tooltip. Padrão: 'hover'
  • Valores: hover, click, focus

Slots:

  • gatilho: Elemento que dispara o tooltip
  • slot (padrão): Conteúdo do tooltip

Uso Básico:

1
2
3
4
5
6
7
8
9
<x-w2o::tooltip>
    <x-slot:gatilho>
        <x-w2o::botao color="info">
            <i class="ti ti-info-circle"></i>
        </x-w2o::botao>
    </x-slot:gatilho>

    Esta é uma informação importante sobre a ação.
</x-w2o::tooltip>

Tooltip em Texto:

1
2
3
4
5
6
7
<x-w2o::tooltip position="top">
    <x-slot:gatilho>
        <span class="underline cursor-help">Passe o mouse aqui</span>
    </x-slot:gatilho>

    Informação adicional exibida no tooltip
</x-w2o::tooltip>

Tooltip em Link:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<x-w2o::tooltip position="left">
    <x-slot:gatilho>
        <a href="{{ $excluirDesabilitado ? 'javascript:void(0)' : route('delete', $id) }}"
            class="{{ $excluirDesabilitado ? 'text-muted cursor-not-allowed' : '' }}">
            Excluir
        </a>
    </x-slot:gatilho>

    {{ $excluirDesabilitado ? 'Não é possível excluir este registro' : '' }}
</x-w2o::tooltip>

Tooltip sem Gatilho Customizado:

1
2
3
4
{{-- Usa botão de informação padrão --}}
<x-w2o::tooltip position="right">
    Texto da dica que será exibido
</x-w2o::tooltip>

Spinner

Componente para indicar carregamento/processamento.

Uso básico:

1
<x-w2o::spinner />

Com Livewire loading: 

1
2
3
<span wire:loading wire:target="save">
    <x-w2o::spinner />
</span>