アプリ バーとツール バーの追加 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
アプリ バーを使って、ユーザーのコンテキスト (通常は、現在のページまたは現在の選択) に関連するコマンドを表示します。 アプリ バーは、コマンド実行サーフェスを表します。ユーザーがアプリ バー上の省略記号がタップすると、開いた状態に変わり、アイコン ボタンとメニュー項目 (有効な場合) のラベルが表示されます。 AppBarCommand は、"プライマリ" または "セカンダリ" のいずれかになります。プライマリ コマンドは、AppBar の動作領域のコマンドのボタンとして表示されます。セカンダリ コマンドは、オーバーフロー領域のメニュー コマンドとして常に非表示です。 AppBar は、アプリケーションの表示の上部または下部に制限され、常にキャンバスをオーバーレイします。
.png "アプリ バーの例")
ツール バーは、AppBar の特殊な形式のツール バーであり、コマンド スケーラビリティに対処する単純なコントロールです。このコントロールには、動作領域 (コマンドがすぐに利用できる) とオーバーフロー領域 (コマンドが表示されないが、エンドユーザーが要求すると表示される) があります。このコントロールでは、容量が限られている場合に、プライマリ領域からセカンダリ領域への動的に移動することができるようにすることでアダプティブ動作をサポートしています。 ツール バーは、アプリ内の 1 つの場所に制限されているわけではなく、アプリ バー、ポップアップ、キャンバス上などのさまざまな場所に表示できます。
アプリ バー、ツール バー、およびその他の主要な JavaScript 用 Windows ライブラリ (WinJS) の操作は、Try WinJS Web サイトで試すことができます。
AppBar とツール バーでは一部の方法のみが異なることに留意することが重要です。
- AppBar は 閉じることができる軽量なオーバーレイです。つまり、常に画面の一部を占拠します。
- AppBar は、すべての閉じることができる軽量なオーバーレイと同じように、<body> 要素の直接の子である必要があります。
- ツール バーは、閉じられるとオーバーレイではなくなります。つまり、その他のコンポーネントのように、独自のレイアウト領域が必要になります。
- ツール バーは、開くと垂直方向に拡大して近隣のコンテンツを隠し、オーバーレイのように動作します。
このセクションの内容
| トピック | 説明 |
|---|---|
ToolBar は、コマンドのスケーラビリティに対応する単純なコントロールです。このコントロールには、action area (コマンドがすぐに利用できる) と overflow area (コマンドが表示されないが、エンドユーザーが要求すると表示される) があります。このコントロールでは、容量が限られている場合に、プライマリ領域からセカンダリ領域への動的に移動することができるようにすることでアダプティブ動作をサポートしています。 ToolBar は、アプリ内の 1 つの場所に制限されているわけではなく、Splitview、Flyout、canvas 上などのさまざまな場所に表示できます。 |
|
この記事では、JavaScript を使った Windows ランタイム アプリに AppBar を追加する方法を説明します。 |
|
JavaScript を使って Windows ストア アプリにカスタム コンテンツを含む AppBar を追加できます。 |
|
ここでは、AppBar のベスト プラクティスに従いながら、これらのシナリオをサポートするための ListView と AppBar の相互作用について説明します。 |
|
アプリ バーまたはツール バーとそれらのコントロールのスタイルを設定する方法の例を示します。 |