メッセージ
カレンダー
会議
連絡先
メール
ドキュメント
ドライブ
AI テーブル
AI 議事録
勤怠
承認
YiDA
管理コンソール1. グループ分けコンポーネントの概要
1.1 グループ分けとは
グループ分けは、類似する機能のモジュールを 1 つのグループにまとめるための公式推奨のブロックマネージャーです。 効果は以下のとおりです。 グループ分けコンポーネント グループ内にコンポーネントを追加1.2 ユースケース
1 つのページに複数の独立したモジュールを表示する場合（例：店舗の商品、棚、価格などをそれぞれ独立したモジュールに配置する場合）で、各モジュールに複数のフォームコンポーネントが含まれるときは、モジュールごとにグループにまとめて配置します。2. 属性
2.1 ヘッダーを表示
トグルをオフにすると、すべてのヘッダー設定オプションが自動的に折りたたまれます。 ヘッダー表示と非表示の比較は以下のとおりです。 ヘッダーを表示 ヘッダーを非表示2.1.1 グループタイトル
このグループの名前を表示します。テキストが長すぎる場合は切り詰められ、最初の 9 文字（漢字）のみが表示されます。2.1.2 アイコン
グループにアイコンを設定できます。効果は以下のとおりです。 アイコンの設定2.1.3 ユーザーお知らせ
グループ名の後に「i」アイコンが追加されます。クリックすると重要な情報を確認できます。効果は以下のとおりです。 お知らせと注意事項2.1.4 ヘッダー区切り線
トグルをオフにすると、ヘッダーの区切り線が非表示になります。効果は以下のとおりです。 ヘッダー区切り線2.2 PC設定
フォームページのレイアウトにおいて、グループ分けコンポーネントの表示方法を制御します。効果は以下のとおりです。2.2.1 境界線を表示
グループ分けコンポーネントの周囲に境界線を表示します。オン・オフの効果は以下のとおりです。 境界線を表示2.2.2 Margin
グループ分けコンポーネントの外側の余白を調整します。効果は以下のとおりです。2.2.3 Padding
グループ分けコンポーネントの内側の余白を調整します。効果は以下のとおりです。 Paddingのオン・オフ2.3 モバイル設定
PC設定と類似していますが、モバイル側のみに適用されます。設定方法はPCと同じです。効果は以下のとおりです。3. スタイル
グループのスタイル設定では、通常はブロック表示モードを直接使用します。 スタイル設定3.1 ソースコード編集
CSSソースコードでスタイルを直接編集します。現在のdivはデフォルトでflexレイアウトを使用しています。3.2 状態
従来のPC側コンポーネントの状態でグループを設定します。- Default：通常状態
- hover：マウスがコンポーネントのホットスポット上にあり、クリックしていない状態
- focus：ページ要素にカーソルフォーカスがある状態
- active：ページ要素が選択され、アクティブになっている状態
- 各状態の設定において、デフォルト状態は他の 3 つの状態を上書きします。
- hover、focus、activeの各状態は独立して設定され、相互に影響しません。
- CSSでは独立したセレクタとして設定されます。
3.3 表示
CSSのdisplayモードに対応します。- block：ボックスモデル
- inline-block：インラインボックスモデル
- inline：インラインモデル
- flex：フレキシブルレイアウトモデル
- flexレイアウトを使用して、項目を必要に応じて水平方向または垂直方向に配置します。
- さらに、水平方向および垂直方向の中央揃えを設定できます。効果は以下のとおりです。
3.4 MarginとPadding
Marginは、ボックスモデルと他のノード要素との間の距離を指します。 Paddingは、ボックスモデルとその内側の要素との間の余白を指します。効果は以下のとおりです。3.5 テキスト
テキスト設定は、グループ内のコンポーネントタイトルに反映されます。カスタマイズすることも、テキストタイトルを直接選択することも可能です。効果は以下のとおりです。3.6 背景
システム組み込みの色を選択するか、ローカルの画像をアップロードして背景に設定します。効果は以下のとおりです。3.7 境界線
グループ分けコンポーネントの境界線効果を設定します。 さらに、コンポーネントの四隅の丸みを制御する角の半径の設定にも対応しています。効果は以下のとおりです。3.8 影
コンポーネントの影を設定します。xとyで方向を指定し、blurとspreadで影の見え方を調整します。3.9 不透明度
コンポーネントモジュール全体の透明度を設定します。範囲は 0 〜 100 で、デフォルトは 100 です。0 は完全に透明であることを意味します。3.10 Cursor
- pointerを選択：マウスがブロック上にあるときに手のアイコンが表示されます。
- defaultを選択：マウスがブロック上にあるときに矢印のアイコンが表示されます。