Share
In dit deel van "Foundation for Beginners" zullen we kijken naar knoppen, vervolgkeuzemenu's en de "Clearing" -plug-in.
Foundation heeft een degelijke set knoppen en ze zijn zeer eenvoudig te implementeren. Voeg eenvoudig een klasse van 'knop' toe aan elk anker-, invoer-, div- of knopelement om het te transformeren in een glorieuze Foundation styled-knop. Dit geeft je gewoon de standaard boxknop, maar er is een breed scala aan knopstijlen en -typen die je kunt gebruiken. Hier is een snel voorbeeld:
Standaardknop Tiny Button Small Button Grote knop Secundaire knop Succesknop Waarschuwingsknop Radius Knop Ronde knop Uitgeschakelde knop
Dit voorbeeld toont alle vooraf ingestelde formaten, stijlen en toestanden. Ze bieden elk behoorlijk wat flexibiliteit; alle presets kunnen worden vervangen door aangepaste stijlen, wat betekent dat u uw knoppen niet helemaal opnieuw hoeft op te bouwen.
Knoppen gebruiken gekoppelde klassen om verschillende stijlen te bereiken. Begin bijvoorbeeld met 'knop' en voeg vervolgens een grootte toe, 'klein', een kleur, 'succes' en een straal 'rondje'. Je kunt ook elke knop uitschakelen door 'uitgeschakeld' toe te voegen, waarmee wordt geïllustreerd hoe veelzijdig deze stijlbenadering is.
Basisknoppen zijn eenvoudig genoeg om te implementeren en knoppengroepen zijn net zo eenvoudig. Ze gebruiken een eenvoudige lijststructuur zoals:
Dit geeft je een standaard groep van drie knoppen, maar je kunt straalklassen en klassen toevoegen om de breedte te regelen, 'even-2', 'even-3' tot 'even-8'. Deze breedteklassen worden gebruikt om de beschikbare ruimte met uw knoppen te vullen en worden het best gebruikt wanneer het getal in de even klasse overeenkomt met het aantal aanwezige knoppen. Als u bijvoorbeeld vier knoppen had, was 'even-4' de beste keuze.
Knoppenbalken kunnen worden beschreven als een groep knopgroepen. Neem een div, voeg toe class = "button-bar" naar die div en plaats zoveel knopgroepen als je wilt. Dit kan een echte hulp zijn als het gaat om complexere knoplay-outs. Hier is een voorbeeld:
- Knop 1
- Knop 2
- Knop 3
- Knop 1
- Knop 2
- Knop 3
Op kleine schermen wordt elke groep knoppen in de balk automatisch gestapeld, zodat elk scherm er schoon uitziet. Door opties te nemen die in elk van de bovenstaande secties zijn behandeld, kun je echt naar de stad gaan op je knoppen.
In de laatste grote revisie van Foundation is een nieuwe JavaScript-plug-in genaamd dropdowns geïntroduceerd, die echt van pas komt als je een laag op de knoppen plaatst. De markup vereist in essentie dat je een 'dropdown'-klasse aan je knop toevoegt, met de toevoeging van een aangepast attribuut namelijk' data-dropdown '.
Volg deze met een ongeordende lijst met een id die overeenkomt met uw kenmerk voor gegevensverkenning, bijvoorbeeld:
Dropdown-knop
Het is ook belangrijk om op te merken dat de 'f-dropdown' klasse op de ul erg belangrijk is, dus vergeet niet om deze toe te voegen.
Notitie: Vergeet niet om de vervolgkeuzelijst js toe te voegen aan je download van Foundation.
De laatste laag aan flexibiliteit waarmee je moet spelen, is de optie om een splitsing toe te voegen aan je knoppen. Dit kan worden gebruikt om de beschikbaarheid van een vervolgkeuzelijst, een download, wat je maar wilt echt aan te geven. Voeg het toe aan uw knop met behulp van de klasse 'split' en een span-element dat hetzelfde 'gegevens-dropdown'-kenmerk moet bevatten dat we eerder in ons dropdown-voorbeeld hebben gebruikt.
Dropdown-knop
Omdat de vervolgkeuzelijst JavaScript een eenvoudige plug-in is, is er maar één optie om mee te spelen: de klassenaam definiëren die wordt toegepast op de vervolgkeuzelijst wanneer deze wordt geopend:
Accentsconagua
$ (document) .foundation ('dropdown', activeClass: 'open'); Met Clearing kunt u eenvoudig responsieve lichtbakken maken met afbeeldingen van elke grootte.
Clearing is een supersnelle lightbox-plug-in. Zoals je je kunt voorstellen, is markup doodeenvoudig en erg handig als de baanschuifregelaar niet voor jou werkt.
Inmiddels ben je goed bekend met de manier waarop Foundation werkt met lijststructuren en staan ze opnieuw centraal in deze plug-in. Bouw een ongeordende lijst, met wat inhoud binnen elk lijstitem. Voeg een 'clearing-thumbs'-klasse toe aan de ul, plus een leeg aangepast kenmerk van' data-clearing '.
Als u een klasse 'clearing-feature' zou toevoegen aan de eerste li in uw ul-structuur, zou Foundation deze als de afgebeelde afbeelding in uw lightbox-selectie weergeven. Het is vermeldenswaard dat clearing de blokrasterstructuur gebruikt die we eerder in de serie hebben behandeld. Dit zorgt ervoor dat alle miniaturen dezelfde hoogte hebben en gelijkmatig worden verdeeld.
Na onze volledige dekking van knoppen en vervolgkeuzemenu's, kunnen we uitkijken naar aangepaste formulieren en switches. ik zie je daar!
