ionic-framework
Composants CSS ioniques

Remarques

Syntaxe de base du système de grille

Grille de base

Dans Ionic, vous pouvez déclarer des lignes en définissant la classe row sur un élément. Les lignes seront des éléments alignés horizontalement et tout ce qui se trouve dans cet élément appartiendra à la ligne. A l'intérieur de la ligne, vous pouvez déclarer différentes colonnes de largeur. Vous avez le choix entre les déclarations suivantes.

La valeur maximale des colonnes que peut contenir une ligne est 100. Voici quelques exemples de grille de base.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Grilles Offset

Vous pouvez également définir col-offset-<value> sur les colonnes. Dans l'exemple ci-dessous, le tiers de la largeur d'une colonne a un tiers de la largeur, ce qui signifie qu'elle aura une largeur d'un tiers et sera centrée dans la page en raison de son décalage.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

Aligner les colonnes

Aligner les colonnes verticalement est peut-être en définissant la valeur col-<align_value> sur une colonne séparément.

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Ce qui précède alignera chaque colonne sur elle-même. Si vous souhaitez aligner toutes les colonnes de la ligne, vous pouvez définir la valeur d'alignement sur la ligne elle-même. Dans l'exemple ci-dessous, toutes les colonnes de cette ligne s'aligneront verticalement au centre de la ligne.

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Grille réactive

Vous pouvez également souhaiter que les colonnes soient réactives à mesure qu’elles s’empileront les unes sur les autres à une certaine largeur de fenêtre. Vous avez trois choix.

Dans cet exemple, ces colonnes s'empileront sous la largeur approximative d'un téléphone de paysage.

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Vous pouvez également faire vos propres requêtes sur les médias si ces points d'arrêt ne vous conviennent pas et / ou si vous avez besoin de points d'arrêt plus spécifiques.

Syntaxe de base des éléments de liste

Presque chaque application a une sorte de liste. Ionic possède ses propres déclarations CSS d'élément de liste prêtes à l'emploi pour faciliter la création de listes dans votre application. Vous pouvez soit utiliser des éléments HTML et déclarer une classe pour le ou utiliser la directive ion-list pour les créer. L'exemple d'une directive est en bas.

Élément de base de la syntaxe CSS:

<ul class="list">
  <li class="item"></li>
</ul>

Liste avec des séparateurs:

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

Liste des éléments avec des icônes:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

Vous pouvez également définir des icônes des deux côtés des éléments avec la syntaxe suivante:

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

Un élément de liste avec un bouton ou des boutons peut être créé comme ceci:

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

Il est également possible de créer des éléments de liste avec des avatars, des vignettes et des encarts qui créeront un remplissage autour des éléments de la liste. Ionic gère également la configuration des icônes, etc. dans les éléments de la liste en définissant le remplissage en fonction des éléments de la liste.

Ionic a également ses propres directives pour les cases à cocher, les boutons radio, etc. Voici un exemple de liste de cases à cocher avec Ionic.

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>

Utilisation basique des couleurs utilitaires

Preset Ionic CSS aura un thème et des couleurs prédéfinies pour cela. Vous pouvez modifier ou remplacer les valeurs de base dans le fichier ionic.css ou dans votre fichier CSS personnalisé. Vous pouvez également les définir avec SASS et, pour utiliser SASS dans Ionic, il vous suffit d'exécuter la commande ionic setup sass dans votre terminal.

Utilisation de base des couleurs dans un bouton. La button-<phrase> fera de l'arrière-plan du bouton et bordera la couleur du thème défini.

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

Vos choix de préfixe CSS sont les suivants:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Ces classes peuvent être ajoutées également par exemple dans les badges, etc. Voici un exemple de badge:

<span class="badge badge-positive">Positive badge</span>