レスポンシブ対応コンポーネントとテンプレート
APL向けAlexaデザインシステムには、APLドキュメントで使用できる一連のレスポンシブ対応コンポーネントとテンプレートが用意されています。これらのレイアウトは、さまざまなモード、サイズ、形状を持つviewportに自動的に対応します。独自のレイアウトを開発する代わりにレスポンシブ対応コンポーネントとテンプレートを使用すると、手間をかけずにレスポンシブ対応のAPLドキュメントを作成できます。
レスポンシブ対応コンポーネントとテンプレートについて
APLのコンポーネントとは、画面に表示する基本的なUI要素のことです。APLでは、一連のプリミティブコンポーネントを定義します。たとえば、Textコンポーネントはテキストブロックを表示します。コンポーネントを使用する際は、さまざまなviewportに対応できるようにしてください。たとえば、Textコンポーネントの場合は、viewportの特性に基づいて、フォントのサイズや色を変更するための条件文を作成できます。
レスポンシブ対応コンポーネントは、モジュール式のレスポンシブ対応要素にコンポーネントを結合したものです。コンポーネントを使用する場合と同様に、ドキュメントの構成要素として使用できます。たとえば、Buttonは、異なる種類のすべてのデバイスで機能するボタンを表示し、さまざまなボタンの状態を自動的に処理します。
レスポンシブ対応テンプレートは、コンポーネントとレスポンシブ対応コンポーネントを組み合わせたもので、完全なviewportデザインを提供します。テンプレートには、背景、ヘッダー、コンテンツなどが含まれ、viewport全体に適用されます。たとえば、Text Listテンプレートでは、背景とヘッダーを含むテキスト項目のスクロールリストが表示されます。
レスポンシブ対応コンポーネントとテンプレートを使用して、簡単な手順でAPLドキュメントを作成し、さまざまなviewportに対応できるようにします。以下に示すように、独自のレイアウトを一から作成するよりも、はるかに簡単です。
|
レスポンシブ対応コンポーネントを使用してボタンを作成する方法は、次のとおりです。
|
コンポーネントを使用してボタンを一から作成する方法は、次のとおりです。
|
|
レスポンシブ対応テンプレートを使用して全画面スクロールリストを作成する方法は、次のとおりです。
|
コンポーネントを使用して全画面スクロールリストを一から作成する方法は、次のとおりです。
|
alexa-layoutsパッケージを読み込む
レスポンシブ対応コンポーネントとテンプレートを使用するには、ドキュメントのimport配列にalexa-layoutsパッケージを追加します。alexa-layoutsパッケージの最新バージョンは1.2.0です。
ドキュメントのimportsセクションの例は、次のとおりです。
{
"import": [
{
"name": "alexa-layouts",
"version": "1.2.0"
}
]
}
alexa-layoutsを読み込むと、自動的にalexa-stylesとalexa-viewport-profilesも読み込まれます。個別に読み込む必要はありません。
利用可能なレスポンシブ対応コンポーネントとテンプレート
利用可能な各コンポーネントまたはテンプレートについて詳しくは、以下のリンクを参照してください。
レスポンシブ対応コンポーネント：
- AlexaBackground
- AlexaButton
- AlexaCheckbox
- AlexaDivider
- AlexaFooter
- AlexaHeader
- AlexaIconButton
- AlexaImage
- AlexaImageListItem
- AlexaOrdinal
- AlexaPageCounter
- AlexaProgressBar
- AlexaProgressBarRadial
- AlexaProgressDots
- AlexaRadioButton
- AlexaRating
- AlexaSlider
- AlexaSliderRadial
- AlexaSwipeToAction
- AlexaSwitch
- AlexaTextListItem
- AlexaTransportControls
レスポンシブ対応テンプレート：
