Share
I denne delen av "Stiftelsen for nybegynnere" ser vi på knapper, dropdowns og "Clearing" plugin.
Stiftelsen har et solid sett med knapper og de er veldig enkle å implementere. Bare legg til en klasse av "knapp" til ethvert anker-, input-, div- eller knappelement for å se det forvandle til en strålende Foundation-stylet knapp. Dette får deg bare standard bokseknappen, men det finnes et bredt spekter av knappestiler og typer du kan bruke. Her er et raskt eksempel:
Standard knapp Liten knapp Liten knapp Stor knapp Sekundær knapp suksess knapp Alert Button Radius Button Round Button Deaktivert knapp
Dette eksemplet viser alle forhåndsinnstilte størrelser, stiler og tilstander. De tilbyr hverandre ganske mye i form av fleksibilitet; alle forhåndsinnstillinger kan overstyres med tilpassede stiler, noe som betyr at du ikke trenger å bygge opp knappene dine fra grunnen av.
Knapper bruker kjedede klasser for å oppnå forskjellige stiler. For eksempel, start med 'knapp' og legg til en størrelse, 'liten', en farge, 'suksess' og en radius 'runde'. Du kan også deaktivere hvilken som helst knapp ved å legge til 'deaktivert', noe som illustrerer hvor fleksibel denne styling-tilnærmingen er.
Grunnleggende knapper er enkle nok til å implementere og knappene grupper er like enkelt. De bruker en enkel liste struktur som så:
Dette gir deg en standardgruppe på tre knapper, men du kan legge til radius klasser og klasser for å kontrollere bredden, 'even-2', 'even-3' til og med 'even-8'. Disse breddeklassene brukes til å fylle ledig plass med knappene dine og brukes best når tallet i selvklassen samsvarer med antallet knapper som er til stede. For eksempel, hvis du hadde fire knapper, ville 'even-4' være det beste valget.
Knapper kan beskrives som en gruppe av knappgrupper. Ta en div, legg til class = "button-bar" til den div og plassere så mange knappgrupper som du ønsker inne i den. Dette kan være en reell hjelp når det gjelder mer komplekse knappoppsett. Her er et eksempel:
- Knapp 1
- Knapp 2
- Knapp 3
- Knapp 1
- Knapp 2
- Knapp 3
På små skjermer stables hver knappgruppe i linjen automatisk, slik at du får et rent utseende på hvilken som helst skjerm. Ved å ta med valgene dekket i hver av de ovennevnte seksjonene, kan du virkelig gå til byen på knappene dine.
I den siste store revisjonen av Stiftelsen ble det innført et nytt JavaScript-plugin som ble kalt dropdowns, noe som egentlig kommer til nytte når det lagres på toppen av knapper. Markeringen krever i hovedsak at du legger til en "dropdown" -klasse på knappen din, med tillegg av et egendefinert attributt nemlig "data-dropdown".
Følg dette med en uordnet liste som inneholder et ID som matcher data-dropdown-attributten, for eksempel:
Dropdown Button
Det er også viktig å merke seg at 'f-dropdown'-klassen på ul er veldig viktig, så ikke glem å legge den til.
Merk: Ikke glem å inkludere dropdown js i nedlastingen av Foundation.
Det siste laget av fleksibilitet du må spille med, er muligheten til å legge til en splitt i knappene dine. Dette kan brukes til å indikere tilgjengeligheten av en dropdown, en nedlasting, hva du vil egentlig. Legg den til på knappen din ved hjelp av "delt" -kursen og et spenningselement som skal inneholde det samme "data-dropdown" -attributtet vi brukte tidligere i eksempelvis nedtrekkseksempel.
Dropdown Button
Ettersom dropdown-JavaScript er et enkelt plugin, er det bare ett alternativ å spille med - definerer klassenavnet som brukes til rullegardinmenyen når den er åpen:
Accentsconagua
$ (dokument) .foundation ('dropdown', activeClass: 'open'); Clearing gjør det enkelt å lage responsive lysbokser med ethvert størrelsesbilde.
Clearing er en super rask lightbox plugin. Som du kan forestille deg, er markupen død enkel og er veldig nyttig når omløpsklippen ikke virker for deg.
Nå vil du være veldig kjent med måten Foundation arbeider med listestrukturer, og de er igjen i hjertet av denne plugin. Bygg en uordnet liste, med litt innhold innenfor hvert listeelement. Legg til en "clearing-thumbs" -klasse til ul, pluss et tomt tilpasset attributt for "data-clearing".
Hvis du skulle legge til en "clearing-feature" -klasse til den første li i ul-ul-strukturen, vil Foundation vise den som det kjente bildet i lysboksen. Det er verdt å merke seg at clearing bruker blokkruten struktur vi dekket tidligere i serien. Dette bidrar til at alle miniatyrbilder er like høye og jevnt fordelt.
Etter vår fullstendige dekning av knapper og rullegardiner, kan vi glede oss til å dekke tilpassede skjemaer og brytere. jeg ser deg der!
