ionic2
Componenti CSS Ionic2
Ricerca…
Griglia
Il sistema di griglia di Ionic è basato su flexbox, una funzione CSS supportata da tutti i dispositivi supportati da Ionic. La griglia è composta da tre unità: griglia, righe e colonne. Le colonne si espandono per riempire la loro riga e verranno ridimensionate per adattarle a colonne aggiuntive.
| Classe | Larghezza |
|---|---|
| larghezza-10 | 10% |
| larghezza-20 | 20% |
| larghezza-25 | 25% |
| larghezza-33 | 33,3333% |
| larghezza-50 | 50% |
| larghezza-67 | 66,6666% |
| larghezza-75 | 75% |
| larghezza-80 | 80% |
| larghezza-90 | 90% |
Esempio.
<ion-grid>
<ion-row>
<ion-col width-10>This column will take 10% of space</ion-col>
</ion-row>
</ion-grid>
Carte
Le carte sono un ottimo modo per visualizzare parti importanti di contenuti e stanno rapidamente emergendo come un modello di progettazione principale per le app. Sono un ottimo modo per contenere e organizzare le informazioni, impostando anche aspettative prevedibili per l'utente. Con così tanti contenuti da mostrare in una sola volta, e spesso così poco spazio sullo schermo, le carte sono diventate rapidamente il modello di design preferito da molte aziende.
Esempio.
<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>