ionic2
Ionic2 CSS-komponenter
Sök…
Rutnät
Ionic's rutnät är baserat på flexbox, en CSS-funktion som stöds av alla enheter som Ionic stöder. Rutnätet består av tre enheter-rutnät, rader och kolumner. Kolumner kommer att utvidgas för att fylla sin rad och kommer att ändra storlek för att passa ytterligare kolumner.
Klass | Bredd |
---|---|
bredd-10 | 10% |
bredd-20 | 20% |
bredd-25 | 25% |
bredd-33 | 33,3333% |
bredd-50 | 50% |
bredd-67 | 66,6666% |
bredd-75 | 75% |
bredd-80 | 80% |
bredd-90 | 90% |
Exempel.
<ion-grid>
<ion-row>
<ion-col width-10>This column will take 10% of space</ion-col>
</ion-row>
</ion-grid>
kort
Kort är ett utmärkt sätt att visa viktiga innehållsdelar och dyker snabbt upp som ett kärndesignmönster för appar. De är ett bra sätt att innehålla och organisera information, samtidigt som de ställer in förutsägbara förväntningar för användaren. Med så mycket innehåll att visa på en gång, och ofta så lite skärmfastigheter, har kort snabbt blivit designmönstret för många företag.
Exempel.
<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>
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow