ionic css レイアウト入門 (2)_html/css_WEB-ITnose

5． ionic 界面组件 表单输入
1.输入组件容器 : .item-input
在 ionic 中，各种输入组件被定义成不同的 HTML 模板，以便将描述标签和输入元素 打包在
一起。在这个模板的根元素上，需要声明.item-input 样式：
...

不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：

用户名

ionic は、テキスト入力、スイッチ、チェック ボタン、ラジオ ボタン、選択ボックス、スライダーなどの一般的な入力コンポーネントのスタイルを事前定義します:

2. テキスト入力: input[type="text"]

Text通常、入力はテキスト入力要素と説明ラベルで構成されます。

ionic では、次の HTML テンプレートを使用して、テキスト ラベルを持つ入力ボックスを作成します。

< span class="input-label">...

複数の入力コンポーネントの場合、フォームをより整理するために、それらをリストに入れることができます:

...
< ; any class="item item-input">...
...

3. テキスト入力: ラベルとしてプレースホルダーを使用します

説明ラベルを配置できる場合もあります 省略これにより、簡潔な効果を得ることができます:

これは input 要素のネイティブ関数であり、そのプレースホルダー属性を設定することで実現できます:

< i class= "icon ios-unlocked-outlinepositive">

4. テキスト入力: 積み上げラベル

積み上げラベルは、説明的なラベルが独自の行を占めることを意味します:

.item-stacked-label スタイルを使用して積み上げラベルを宣言します:

メール

5. スイッチ: .toggle input[type="checkbox"]

スイッチは通常、オンとオフの 2 つの状態を設定するために使用されます:

上の図に示すように、スイッチの視覚的な部分は 2 つの部分で構成されます。スライド トラック (.track) とハンドル (.handle)。 ionic

次の HTML テンプレートを使用してスイッチ コンポーネントを作成します:

スイッチには、背景の変更に使用される配色スタイル .toggle-{color} もあります。スライドレールの色です。

6. チェック ボタン
チェック ボックスは通常、一連のリスト内の一部のメンバーを選択するために使用されます:

スイッチと同様、チェック ボタンも HTML チェックボックス入力に基づいて実装されます。次の HTML テンプレートを使用してチェック ボタンを宣言します:

< any>

チェック ボタンの配色スタイルは .checkbox-{color} であると推測したかもしれません。


7. ラジオ ボタン: .item-radio input[type="radio"]

ラジオ ボタンは、一連の選択肢から 1 つだけを選択するために使用されます:

上の図でわかるように、 , ラジオ ボタン ボタンの視覚的な部分には、選択アイコン (.radio-icon) と説明コンテンツ (.item-content) の 2 つの部分が含まれます。.item-content には任意のコンテンツを追加できます。

ラジオ ボタンは、HTML ラジオ入力要素に基づいて実装されます。次の HTML テンプレートを使用して、ラジオ ボタンを宣言します:

...




ラジオ ボタンは通常、単独ではありません

...

...
...

group-name によってラジオ ボタンのグループ化が決定されることに注意してください。そのため、相互排他オプションの場合は、そのグループが-name は同じ名前に設定する必要があります。
8. スライダー: .range input[type="range"]

range は HTML5 で新しく導入された要素であり、連続値を調整するためによく使用されます:

上の図からわかるように、スライダーの視覚的な部分には、左右のアイコンと中央のスライダーの 3 つの部分が含まれています。 アイコンはオプションです。アイコンを使用しない場合、スライダーは幅全体を占めます。
ionic では、次の HTML テンプレートを使用してスライダーを宣言します:


< ; input name="{range-name}" type="range">

使用方法 .range-{color} スタイルはスライダーのカラー スキームを宣言し、主にスライダーの色に影響します。

9. 選択ボックス: .item-select select

各プラットフォームでは、選択ボックスの表示方法が異なります。たとえば、PC では従来のドロップダウン ボックスですが、Android ではラジオ ポップアップです。 iOS では、ウィンドウの半分を覆うカスタム スクローラーです。


通常は、常に選択ボックスとテキストをリスト エントリに入れます。選択ボックス エントリを作成するには、次の HTML テンプレートを使用します。

< label class= "item-input item-select">

...

...

6

．インターフェイス コンポーネント タブ
1. タブ: .tabs

タブは、複数のボタンまたはリンクを含めることができるコンテナであり、通常は一貫したナビゲーション エクスペリエンスを提供するために使用されます。 ionic では、タブを宣言するには .tabs スタイルを使用し、タブ メンバーを宣言するには .tab-item スタイルを使用します。

...< /any>

...
...

デフォルトでは、タブは画面の下部にあります。 .tabs スタイルを要素に適用すると、引き続き 3 種類の定義済みスタイルから選択して、要素とそのコンテンツの外観をさらに宣言できます。


1. 兄弟スタイルは同じ要素に適用されます。 .tabs としてタブの位置、色などを宣言します。
2. 従属スタイル - 従属スタイルは .tabs のサブ要素にのみ適用でき、サブ要素のサイズやその他の特性を宣言します。
3. 優れたスタイル - 優れたスタイルは、タブのプラットフォーム特性を宣言するために .tabs の親要素に適用されます。

2.tab-item: アイコンを使用します
タブのオプションにはデフォルトでテキストのみが含まれます: Weibo (微博) や WeChat (微信) など:

特定の内容になるようにします。オプション要素にアイコンを挿入するときは、次の 2 つの点に注意する必要があります:

1. i タグを使用して .tab-item にアイコンを挿入します
2. .tabs コンテナーで .tabs-icon-{position} を使用します。アイコンの位置を宣言します。
アイコンの位置を定義するには 3 つの方法があります:
.tabs-icon-top - アイコンをテキストの上に配置します

.tabs-icon-left - アイコンをテキストの左側に配置します

.tabs-icon-only -アイコンのみを使用し、テキストは表示しません


3. .tab-item: バッジを使用します
WeChat タブの 3 番目の項目には、バッジと呼ばれる赤い情報要素が含まれています:


.tab-item 内にある場合バッジを含め、次の 2 つの点に注意する必要があります:

バッジ要素を挿入するには .badge スタイルを使用する

.tab-item の同じレベルで .has-badge スタイルを宣言する

< ;any class="tab- item has-badge">

...

...


4. タブ: 上部のタブ

デフォルトでは、タブは画面の下部に配置されます。タブを上部に配置するには、.tabs-top スタイルを使用します。

トップ タブも広く使用されています:

5. .tab-striped .tabs: ストライプ スタイル タブ

細いストリップを使用する Android プラットフォームから派生したストライプ スタイル タブ オプションの選択状態を示します。

ionic では、.tabs-triped スタイルを使用してストリップ スタイル タブを宣言します。

tab-item">...
...
...

7
．カスタマイズされたレイアウト グリッド システム
1. グリッド システム
ionic のグリッド システムは、CSS3 のフレキシブル ボックス モデルを使用しているため、ほとんどのグリッド システムとは異なります。
Flex レイアウトの主なアイデアは、使用可能なスペースを最良の方法で埋めるために、コンテナに子要素の幅、高さ、さらには順序さえも変更できるようにすることです。 CSS3 に Flex コンテナを導入する主な目的は、あらゆるタイプの表示デバイスと画面サイズに適応することです。

ionic でグリッド システムを使用するには、主に 2 つのクラスを使用します:
.row - コンテナ要素で .row クラスを使用することは、それをフレキシブル コンテナ、つまりフレキシブル ボックスとして設定することを意味します。
.col - 拡張係数と縮小係数の両方を 1 に設定して、子要素で .col クラスを使用します。これは、すべての子要素がコンテナの幅を均等に分割することを意味します。

2. .col: デフォルトの固定幅列

ionic のグリッドでは、各行の列はデフォルトで同じ幅であるため、画像閲覧インターフェイスの実装が非常に簡単になります。
下の写真は Instagram アプリのスクリーンショットです:

3. .col-{width-percent}: 列幅を指定します

もちろん、一部の列の幅を明示的に指定することもできます。 ionic は、列の幅を素早く指定するためのプリセット CSS クラスをいくつか提供しています:


.col-10 - コンテナの幅の 10% を占めます

.col-90 - コンテナの幅の 90% を占めます

たとえば、78% の幅を指定する必要がある場合は、次のようにすることができます:

.col-78{

-webkit-box-flex: 0;
-webkit-flex: 0 0 78%;
-moz-box-flex: 0;
-moz-flex: 0 0 %78;
-ms-flex: 0 0 78%;
flex: 0 0 78%;
}

.col-4. {width-percent} : 列を指定幅の広い

Windows Phone Metro スタイルは情報表示に大きな利点がありますが、Ctrip の APP ではこの
点が強調表示されません :-( :

グリッドの列幅をカスタマイズすることで同様のインターフェースを簡単に実装できます

5. .col-offset-{width-percent}: 列オフセットを指定します

列はデフォルトの位置からオフセットできます。ionic は列オフセットをすばやく設定できるようにいくつかの CSS クラスをプリセットします。

.col-offset-10 - デフォルトの位置をコンテナの幅の 10% オフセットします

.col-offset-90 - デフォルトの位置をコンテナの幅の 90% オフセットします

これは実際にはマージンを設定することで実現されます子要素の -left スタイル。したがって、通常の位置から 78% オフセットする必要がある場合は、次のようにすることができます:

.col-offset-78{
margin-left:78%;
}

6. .col-{align}: 列の垂直方向の配置
行内の要素の高さが異なる場合、
行全体の高さに合わせて短い要素が自動的に引き伸ばされます。 Ionic はこれを提供し、これらの要素の垂直方向の配置を指定するために、いくつかのプリセット CSS クラスを使用します。
.col-top - 要素を垂直方向に上に配置します。要素を中央に配置します

.col-bottom - 要素を下に揃えます

これは、要素




の CSS3 スタイル align-self を設定することで実現されます。