サーチ…


備考

Ionicには、次のハイブリッドモバイルアプリケーションをコーディングしながら、あなたの人生をより楽にするために宣言されたCSSコンポーネントが多数用意されています。これらのコンポーネントは、基本グリッドシステムからフォームのスタイリングまでさまざまです。これらのコンポーネントは、あらかじめ設定されたCSSスタイルシートを使用してIonicをインストールする場合に使用します。

Ionic CSSがあなたの手に与える基本的な機能の1つは、最初から色のセットが付属していますが、一般的には色は上書きされることになっています。命名規則を設定するのに役立つユーティリティーカラーが追加されています。あなたはそれをアプリケーションの基本テーマと呼ぶことができます。色をカスタマイズするには、ionic.css CSSファイルからの色を単純に上書きできます。さらに、IonicはSassを使用して構築されているので、より多くのパワーと柔軟性を得るために、_variables.scssファイル内のカラー変数を変更して拡張することもできます。

あなたの端末でionic setup sassコマンドを実行することで、SASSを使いやすいようにIonicプロジェクトをセットアップすることができます。

公式文書はIonic CSSでご覧いただけます: http : //ionicframework.com/docs/components/

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

基本グリッド

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

クラス
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%

最大値の列は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つの選択肢があります。

クラスブレークポイント(およそ)
.responsive-sm 景観電話よりも小さい
.responsive-md 縦型タブレットよりも小さい
.responsive-lg 風景タブレットよりも小さい

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

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


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow