ionic2
Ionic2 CSS-componenten
Zoeken…
rooster
Het rastersysteem van Ionic is gebaseerd op flexbox, een CSS-functie die wordt ondersteund door alle apparaten die Ionic ondersteunt. Het raster bestaat uit drie eenheden-raster, rijen en kolommen. Kolommen worden uitgevouwen om hun rij te vullen en worden aangepast aan extra kolommen.
| Klasse | Breedte |
|---|---|
| breedte 10 | 10% |
| breedte-20 | 20% |
| breedte 25 | 25% |
| breedte 33 | 33,3333% |
| breedte-50 | 50% |
| breedte 67 | 66,6666% |
| breedte 75 | 75% |
| breedte 80 | 80% |
| breedte 90 | 90% |
Voorbeeld.
<ion-grid>
<ion-row>
<ion-col width-10>This column will take 10% of space</ion-col>
</ion-row>
</ion-grid>
Kaarten
Kaarten zijn een geweldige manier om belangrijke stukken inhoud weer te geven en verschijnen snel als een kernontwerppatroon voor apps. Ze zijn een geweldige manier om informatie te bevatten en te organiseren en tegelijkertijd voorspelbare verwachtingen voor de gebruiker in te stellen. Met zoveel inhoud om tegelijkertijd weer te geven, en vaak zo weinig schermvastgoed, zijn kaarten voor veel bedrijven snel het favoriete ontwerppatroon geworden.
Voorbeeld.
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
</ion-card-content>
</ion-card>