ionic-framework
イオン性のCSSコンポーネント

備考

基本グリッドシステムの構文

基本グリッド

Ionicでは、 rowクラスを要素に設定してrow宣言できます。行は水平に整列された要素になり、この要素内のすべてが行に属します。行内では、幅の異なる列を宣言できます。次の宣言を選択できます。

最大値の列は100の行内にあります。次に、基本グリッドの例をいくつか示します。

<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>

オフセットグリッド

col-offset-<value>を設定することもできます。下の例では、幅カラムの3分の1は幅オフセットの3分の1です。つまり、幅が3分の1になり、ページがオフセットされてページ中央に配置されます。

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

列の整列

col-<align_value>をこれとは別に列に設定することで、列を垂直にcol-<align_value>させることができます。

<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>

上記の方法では、各列を独自の列に配置します。行内のすべての列を揃えたい場合は、行自体に揃え値を設定できます。下の例では、この行の中のすべての列は、行の中央で垂直に整列します。

<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>

レスポンスグリッド

また、いくつかのビューポートの幅で互いに重ねて積み重ねられるので、列を反応させることもできます。あなたには3つの選択肢があります。

この例では、これらの列はほぼ横長の電話の幅で積み重ねられます。

<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>

これらのブレークポイントがあなたに適していない場合や、より具体的なブレークポイントが必要な場合は、もちろん自分のメディアクエリを作成することもできます。

基本的なリスト項目の構文

ほぼすべてのアプリケーションには何らかのリストがあります。 Ionicには、アプリケーション内で簡単にリストを作成できるように、組み込みのready-to-goリスト項目のCSS宣言があります。 HTML要素を使用してクラスの宣言をしたり、ディレクティブのion-listを使ってそれらを作ることができます。ディレクティブの例は一番下にあります。

基本的なリスト項目CSS構文：

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

仕切り付きリスト：

<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>

アイコン付きのアイテムをリストする：

<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>

アイテムの両側に次の構文でアイコンを設定することもできます。

<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>

ボタンまたはボタンを含むリスト項目は、次のように作成できます。

<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>

アバター、サムネイル、およびインセットを使用してリストアイテムを作成し、リストアイテムの周りにパディングを作成することもできます。 Ionicはまた、リスト項目に応じてパディングを設定することによって、リスト項目の設定アイコンなどを処理する。

Ionicには、チェックボックス、ラジオボタンなどのための独自の指示があります。これはIonicのチェックボックスリストの例です。

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

ユーティリティーカラーの基本的な使い方

プリセットイオニックCSSはテーマとプリセットカラーを持っています。 ionic.cssまたはカスタムCSSファイルの基本値を変更または上書きできます。これらをSASSで定義し、IonicでSASSを使用するには、端末でionic setup sassコマンドを実行するだけです。

ボタンの色の基本的な使い方。 button-<phrase>クラスはボタンの背景を作成し、テーマを設定します。

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

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

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

CSSプレフィックスの選択肢は次のとおりです。

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

これらのクラスは、バッジなどにも追加できます。バッジの例を次に示します。

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