メインコンテンツにスキップ
バージョン: v8

UIコンポーネント

Ionicアプリは、コンポーネントと呼ばれる高レベルのビルディングブロックで構成されており、アプリのUIを迅速に構築できます。 Ionicには、カード、リスト、タブなど、多くのコンポーネントが標準で付属しています。基本を理解したら、APIインデックスを参照して、各コンポーネントとサブコンポーネントの完全なリストを確認してください。

アクションシート

アクションシートには、アクションの確認またはキャンセルができるオプションが表示されます。

アラート

アラートは、ユーザーが特定のアクションまたはアクションのリストを選択できるようにするための優れた方法です。

バッジ

バッジは、通常、ユーザーに数値を伝える小さなコンポーネントです。

ボタン

ボタンを使用すると、ユーザーはアクションを実行できます。アプリを操作したり、アプリ内を移動したりするための重要な方法です。

カード

カードは、重要なコンテンツを表示するための優れた方法であり、画像、ボタン、テキストなどを含めることができます。

チェックボックス

チェックボックスを使用して、ユーザーに2択の決定を行う必要があることを知らせることができます。

チップ

チップは、データまたはアクションを表示するためのコンパクトな方法です。

コンテンツ

コンテンツは、アプリを操作したり、アプリ内を移動したりするための典型的な方法です。

日付と時刻の選択

日付と時刻の選択を使用すると、ユーザーが日付と時刻を簡単に選択できるインターフェースを表示できます。

フローティングアクションボタン

フローティングアクションボタンは、画面上でプライマリアクションを実行する円形のボタンです。

アイコン

Web、iOS、Androidアプリで使用する美しくデザインされたアイコン。

グリッド

グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストシステムです。

無限スクロール

無限スクロールを使用すると、ユーザーがアプリをスクロールするときに新しいデータを読み込むことができます。

入力

入力を使用すると、ユーザーはアプリにデータを入力できます。

アイテム

アイテムは、リストの一部として使用できる汎用UIコンテナです。

リスト

リストには、連絡先リスト、プレイリスト、メニューなど、情報の行を表示できます。

ナビゲーション

ナビゲーションとは、ユーザーがアプリ内の異なるページ間を移動する方法です。

メニュー

メニューは一般的なナビゲーションパターンです。画面に常駐させることも、必要に応じて表示することもできます。

モーダル

モーダルは、一時的なUIを表示するために画面内外にスライドし、ログインページやサインアップページによく使用されます。

ポップオーバー

ポップオーバーを使用すると、コンテキストを変更せずに情報やオプションを簡単に表示できます。

進捗インジケーター

進捗インジケーターは、操作またはアクティビティの進行状況を視覚化します。

ラジオボタン

ラジオボタンを使用すると、相互排他的なオプションのセットを表示できます。

リフレッシャー

リフレッシャーは、コンテンツコンポーネントにプルダウンして更新する機能を提供します。

サーチバー

サーチバーは、通常ツールバーからアイテムを検索またはフィルタリングするために使用されます。

並べ替え

並べ替えを使用すると、ユーザーはドラッグアンドドロップでアイテムのリストを並べ替えることができます。

ルーティング

ルーティングにより、現在のパスに基づいてナビゲーションできます。

セグメント

セグメントは、フィルターまたはビュースイッチャーとして使用できる相互排他的なボタンのセットを提供します。

セレクト

セレクトは、ネイティブHTMLセレクトに似ていますが、ソートと選択に関する点がいくつか改善されています。

タブ

タブを使用すると、最新のアプリで標準的なナビゲーションパターンであるタブ付きナビゲーションが可能になります。

トースト

トーストは、アプリのコンテンツの上に通知を表示するために使用されます。一時的に表示することも、閉じることができるようにすることもできます。

トグル

トグルは、2値オプションの入力であり、多くの場合、オプションやスイッチに使用されます。

ツールバー

ツールバーは、アプリに関連する情報やアクションを格納するために使用されます。