Share
In questa parte di "Foundation for Beginners" vedremo i pulsanti, i menu a discesa e il plugin "Clearing".
Foundation ha un solido set di pulsanti e sono molto facili da implementare. Basta aggiungere una classe di 'pulsante' a qualsiasi elemento di ancoraggio, input, div o pulsante per vederlo trasformarsi in un glorioso pulsante in stile Foundation. Questo ti dà solo il pulsante standard, ma ci sono una vasta gamma di stili e tipi di pulsanti che puoi usare. Ecco un rapido esempio:
Pulsante predefinito Pulsante piccolo Pulsante piccolo Pulsante grande Pulsante secondario Pulsante di avviso pulsante di successo Pulsante rotondo con raggio Pulsante disabilitato
Questo esempio mostra tutte le dimensioni, gli stili e gli stati preimpostati. Ognuno di loro offre molto sulla flessibilità; tutti i preset possono essere sovrascritti con stili personalizzati, il che significa che non è necessario creare i pulsanti da zero.
I pulsanti utilizzano le classi concatenate per ottenere stili diversi. Ad esempio, inizia con "button", quindi aggiungi una dimensione, "small", un colore, "success" e un raggio "round". Puoi anche disabilitare qualsiasi pulsante aggiungendo 'disabilitato', illustrando quanto sia versatile questo approccio stilistico.
I pulsanti di base sono abbastanza semplici da implementare e i gruppi di pulsanti sono altrettanto semplici. Usano una semplice struttura di lista in questo modo:
Questo ti darà un gruppo standard di tre pulsanti, tuttavia puoi aggiungere classi e classi di raggio per controllare la larghezza, "pari-2", "pari-3" fino a "pari-8". Queste classi di larghezza vengono utilizzate per riempire lo spazio disponibile con i pulsanti e vengono utilizzate al meglio quando il numero nella classe pari corrisponde alla quantità di pulsanti presenti. Ad esempio, se avessi quattro pulsanti, "pari-4" sarebbe la scelta migliore.
Le barre dei pulsanti potrebbero essere descritte come un gruppo di gruppi di pulsanti. Prendi un div, aggiungi class = "button-bar" a quel div e posiziona tutti i gruppi di pulsanti desiderati al suo interno. Questo può essere di grande aiuto quando si tratta di layout di pulsanti più complessi. Ecco un esempio:
- Pulsante 1
- Pulsante 2
- Pulsante 3
- Pulsante 1
- Pulsante 2
- Pulsante 3
Sugli schermi piccoli, ogni gruppo di pulsanti all'interno della barra viene impilato automaticamente, consentendo un aspetto pulito su qualsiasi schermo. Prendendo le opzioni coperte in ciascuna delle sezioni precedenti, puoi davvero andare in città con i tuoi pulsanti.
Nell'ultima importante revisione di Foundation è stato introdotto un nuovo plugin JavaScript chiamato dropdowns, che è davvero utile quando si sovrappongono ai pulsanti. Il markup richiede essenzialmente di aggiungere una classe 'dropdown' al tuo pulsante, con l'aggiunta di un attributo personalizzato ovvero 'data-dropdown'.
Segui questo con un elenco non ordinato contenente un ID corrispondente all'attributo dropdown dei dati, ad esempio:
Pulsante a discesa
È anche importante notare che la classe 'f-dropdown' su ul è molto importante quindi non dimenticare di aggiungerla.
Nota: Non dimenticare di includere il menu a discesa js nel download di Foundation.
L'ultimo livello di flessibilità con cui devi giocare è l'opzione per aggiungere una divisione nei tuoi pulsanti. Questo può essere usato per indicare la disponibilità di un menu a discesa, un download, qualunque cosa tu voglia veramente. Aggiungilo al tuo pulsante usando la classe 'split' e un elemento span che dovrebbe includere lo stesso attributo 'data-dropdown' che abbiamo usato in precedenza nel nostro esempio del menu a discesa.
Pulsante a discesa
Siccome il dropdown JavaScript è un semplice plugin, c'è solo una opzione con cui giocare - definendo il nome della classe applicato al menu a discesa quando è aperto:
Accentsconagua
$ (document) .foundation ('dropdown', activeClass: 'open'); La compensazione facilita la creazione di lightbox reattivi con immagini di qualsiasi dimensione.
Clearing è un plugin lightbox super veloce. Come puoi immaginare, il markup è molto semplice ed è molto utile quando lo slider dell'orbita non funziona per te.
Ormai conoscerai molto bene il modo in cui Foundation lavora con le strutture delle liste e sono ancora una volta al centro di questo plugin. Costruisci un elenco non ordinato, con alcuni contenuti all'interno di ciascun elemento dell'elenco. Aggiungi una classe 'clearing-thumbs' a ul, oltre a un attributo personalizzato vuoto di 'data-clearing'.
Se dovessi aggiungere una classe 'clearing-feature' al primo li nella tua struttura ul, allora Foundation lo mostrerebbe come l'immagine in primo piano nella tua selezione lightbox. Vale la pena notare che la compensazione utilizza la struttura a blocchi di blocchi che abbiamo trattato in precedenza nella serie. Ciò aiuta a garantire che tutte le anteprime abbiano la stessa altezza e siano distribuite uniformemente.
Seguendo la nostra completa copertura di pulsanti e menu a discesa, possiamo guardare avanti per la copertura di moduli e interruttori personalizzati. Ci vediamo lì!
