++ fix e controlli
This commit is contained in:
61
resources/views/components/btn.blade.php
Normal file
61
resources/views/components/btn.blade.php
Normal file
@@ -0,0 +1,61 @@
|
||||
{{--
|
||||
Pulsante unico dell'applicazione.
|
||||
|
||||
Esiste per un motivo preciso: prima ogni pagina si scriveva i propri
|
||||
pulsanti, e in quattro modi diversi — style= inline con i colori a mano (piu'
|
||||
onmouseover per l'hover), catene di utility Tailwind ripetute a memoria,
|
||||
.btn-action* in sei tinte, .btn-primary-* in due. La stessa azione cambiava
|
||||
aspetto da una pagina all'altra, e nessuno di quei pulsanti aveva uno stato
|
||||
di focus. Le classi stanno in resources/css/app.css.
|
||||
|
||||
variante:
|
||||
primary l'azione principale. Una sola per schermata o per zona.
|
||||
secondary tutto il resto: dettaglio, modifica, scarica, filtra.
|
||||
danger SOLO dove si cancellano o si sovrascrivono dati.
|
||||
ghost annulla, chiudi, pulisci.
|
||||
|
||||
tono:
|
||||
solido il pieno (default). Per le azioni isolate.
|
||||
tenue la tinta chiara. Per le azioni dentro le righe di un elenco,
|
||||
dove cinquanta pulsanti pieni diventano rumore.
|
||||
velato per i comandi sopra una superficie colorata (la testata). Il
|
||||
colore lo dà lo sfondo; qui `variante` non ha effetto.
|
||||
|
||||
dimensione: sm per le righe di elenco.
|
||||
icona: true per i pulsanti di sola icona. Richiede un aria-label,
|
||||
altrimenti chi usa un lettore di schermo trova un pulsante
|
||||
senza nome — title non basta.
|
||||
|
||||
Con href rende un <a>, altrimenti un <button type=button> — il tipo si puo'
|
||||
sovrascrivere (type=submit) come qualsiasi altro attributo.
|
||||
|
||||
ATTENZIONE, per disabilitarlo: si scrive :disabled="$condizione", NON
|
||||
@disabled($condizione). Dentro un tag di componente le direttive Blade non
|
||||
vengono compilate: il tag <x-btn> resta letterale nel PHP generato mentre il
|
||||
</x-btn> viene invece chiuso, e la vista muore con "syntax error, unexpected
|
||||
token endif". Il binding funziona come ci si aspetta perche' la borsa degli
|
||||
attributi salta i valori false e rende disabled="disabled" per i true.
|
||||
--}}
|
||||
@props([
|
||||
'variante' => 'secondary',
|
||||
'tono' => 'solido',
|
||||
'dimensione' => null,
|
||||
'icona' => false,
|
||||
'href' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$classi = implode(' ', array_filter([
|
||||
'tm-btn',
|
||||
'tm-btn-' . $variante,
|
||||
in_array($tono, ['tenue', 'velato'], true) ? 'tm-btn-' . $tono : null,
|
||||
$dimensione === 'sm' ? 'tm-btn-sm' : null,
|
||||
$icona ? 'tm-btn-icona' : null,
|
||||
]));
|
||||
@endphp
|
||||
|
||||
@if ($href)
|
||||
<a href="{{ $href }}" {{ $attributes->class($classi) }}>{{ $slot }}</a>
|
||||
@else
|
||||
<button type="{{ $attributes->get('type', 'button') }}" {{ $attributes->except('type')->class($classi) }}>{{ $slot }}</button>
|
||||
@endif
|
||||
Reference in New Issue
Block a user