diff --git a/content/articles/products/components/bottom-fixed-area.mdx b/content/articles/products/components/bottom-fixed-area.mdx deleted file mode 100644 index 39ea43df9..000000000 --- a/content/articles/products/components/bottom-fixed-area.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: 'BottomFixedArea' -description: '画面下部に固定で表示する操作パネルです。項目ごとに画面を分けた機能など、連続した入力を求める場合に使用します。' ---- -import { ComponentPropsTable } from '@Components/ComponentPropsTable' -import { ComponentStory } from '@Components/ComponentStory' - -画面下部に固定で表示する操作パネルです。項目ごとに画面を分けた機能など、連続した入力を求める場合に使用します。 - - - -## Props - - - - diff --git a/content/articles/products/components/bottom-fixed-area/images/bottom-fixed-area_composition.png b/content/articles/products/components/bottom-fixed-area/images/bottom-fixed-area_composition.png new file mode 100644 index 000000000..eaab9fa5a Binary files /dev/null and b/content/articles/products/components/bottom-fixed-area/images/bottom-fixed-area_composition.png differ diff --git a/content/articles/products/components/bottom-fixed-area/index.mdx b/content/articles/products/components/bottom-fixed-area/index.mdx new file mode 100644 index 000000000..f0f17b207 --- /dev/null +++ b/content/articles/products/components/bottom-fixed-area/index.mdx @@ -0,0 +1,67 @@ +--- +title: 'BottomFixedArea' +description: '画面の下部に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。' +--- +import { ComponentPropsTable } from '@Components/ComponentPropsTable' +import { ComponentStory } from '@Components/ComponentStory' + +画面の下部に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。 + + + +## 基本的な考え方 + +ページ全体を対象とした主要なアクションがある場合、BottomFixedAreaを使ってボタンを固定表示できます。代表的な例として以下があります。 + +- [ページ全体を使ったモード](/products/design-patterns/modal-ui/#h3-2)であるとき +- タスクとしての性質を持つオブジェクトの詳細画面 + +置かれるアクションボタンの例として、次のようなものがあります。 + +- 操作した内容をシステムに送信する +- 操作した内容を破棄し、前の状態に戻す +- プレビューする +- タスクを次のステータスに進める、前のステータスに戻す +- オブジェクトを削除する、アーカイブする + +## 使用上の注意 + +### ページ全体に対するアクションボタン以外は置かない + +BottomFixedAreaに置くアクションボタンは、ページに表示されている情報全体に対するものに限定します。 + +以下のようなアクションのボタンは、BottomFixedArea以外の場所に置いてください。 + +- オブジェクトの名前変更など、「ページの一部」に対するアクション +- 機能全体の設定変更など、「ページよりも広い範囲」に対するアクション + +### アクション対象外のカラムがある場合はFloatAreaを使う + +固定表示するアクションボタンの対象とならないカラム（サイドバーなど）がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。 + +## 構成 + +1. 説明文（任意） +2. アクションボタン + +![BottomFixedAreaの構成](./images/bottom-fixed-area_composition.png) + +### 1. 説明文（任意） + +必要に応じて、アクションに関する説明を書きます。 + +### 2. アクションボタン + +必要に応じて、以下のボタンを配置できます。 + +- Primaryボタン・Secondaryボタン + - 最大でそれぞれ1個ずつ置けます。 + - 両方置く場合は、Primaryボタンを右側に置きます。 +- Tertiaryボタン + - Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。 + +## Props + + + + diff --git a/content/articles/products/components/float-area.mdx b/content/articles/products/components/float-area.mdx deleted file mode 100644 index 39f5d4182..000000000 --- a/content/articles/products/components/float-area.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: 'FloatArea' -description: 'BottomFixedAreaから派生した、より配置の自由度が高いコンポーネントです。画面下部固定ではなく、浮遊しています。' ---- -import { ComponentPropsTable } from '@Components/ComponentPropsTable' -import { ComponentStory } from '@Components/ComponentStory' - -[BottomFixedArea](/products/components/bottom-fixed-area/)から派生した、より配置の自由度が高いコンポーネントです。画面下部固定ではなく、浮遊しています。 - - - -## Props - - - - diff --git a/content/articles/products/components/float-area/images/float-area_composition.png b/content/articles/products/components/float-area/images/float-area_composition.png new file mode 100644 index 000000000..9cc6059bc Binary files /dev/null and b/content/articles/products/components/float-area/images/float-area_composition.png differ diff --git a/content/articles/products/components/float-area/images/float-area_layout.png b/content/articles/products/components/float-area/images/float-area_layout.png new file mode 100644 index 000000000..b695b7173 Binary files /dev/null and b/content/articles/products/components/float-area/images/float-area_layout.png differ diff --git a/content/articles/products/components/float-area/index.mdx b/content/articles/products/components/float-area/index.mdx new file mode 100644 index 000000000..bb9486c33 --- /dev/null +++ b/content/articles/products/components/float-area/index.mdx @@ -0,0 +1,66 @@ +--- +title: 'FloatArea' +description: 'ページの前面に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。' +--- +import { ComponentPropsTable } from '@Components/ComponentPropsTable' +import { ComponentStory } from '@Components/ComponentStory' + +ページの前面に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。 + + + +## 基本的な考え方 + +ページ内の特定の領域全体を対象とした主要なアクションがある場合、FloatAreaを使ってボタンを固定表示できます。代表的な例として以下があります。 + +- [ページの一部を使ったモード](/products/design-patterns/modal-ui/#h3-3)であるとき +- タスクとしての性質を持つオブジェクトの詳細画面 + +置かれるアクションボタンの例として、次のようなものがあります。 + +- 操作した内容をシステムに送信する +- 操作した内容を破棄し、前の状態に戻す +- プレビューする +- タスクを次のステータスに進める、前のステータスに戻す +- オブジェクトを削除する、アーカイブする + +## 使用上の注意 + +### 対象領域全体に対するアクションボタン以外は置かない + +FloatAreaに置くアクションボタンは、対象となる領域全体に対するものに限定します。 + +以下のようなアクションのボタンは、FloatArea以外の場所に置いてください。 + +- オブジェクトの名前変更など、「対象領域の一部」に対するアクション +- 機能全体の設定変更など、「対象領域よりも広い範囲」に対するアクション + +### ページ全体を対象とする場合はBottomFixedAreaを使う + +ページ内の一部の領域ではなく全体を対象とする場合は、[BottomFixedArea](/products/components/bottom-fixed-area/)を使ってください。 + +## レイアウト + +対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。 + +![FloatAreaのレイアウト](./images/float-area_layout.png) + +## 構成 + +1. Primaryボタン +2. Secondaryボタン（任意） +3. Tertiaryボタン（任意） + +![FloatAreaの構成](./images/float-area_composition.png) + +Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。 + +## デザインパターン + +パターンの1つとして[共通設定のアクションビュー](/products/design-patterns-core-features/main-admin/)があります。 + +## Props + + + +