アコーディオンアイテム
アコーディオンアイテムは、アコーディオンコンポーネント内で展開・折りたたみが可能な個別のセクションを構成する要素です。
コンポーネントとして独立しておらず、アコーディオンコンポーネントの子要素として存在します。
v4.0.0で追加されました。
プロパティ
| No | 項目 | 入力値 | デフォルト値 | アクションプロパティ | タイプ | アクションデフォルト値 | 説明 |
|---|---|---|---|---|---|---|---|
| 1 | ID | 文字列 | 自動設定 | id | string | 自動設定 | [id]プロパティはアクションで設定はできません。 |
| 2 | ラベル | 文字列 | label | string | アコーディオンアイテムのサマリー文字列 | ||
| 3 | 展開時の高さ | 数値 | expandedHeight | number | アコーディオンアイテムを開いた時の高さ | ||
| 4 | 展開時の間隔 | 数値 | expandedGap | number | アコーディオンアイテムを開いた時の次のアコーディオンアイテムとの余白 | ||
| 5 | 背景色 | 文字列 カラーピッカー | backgroundColor | string | アコーディオンアイテムの背景色 | ||
| 6 | ラベル色 | 文字列 カラーピッカー | labelColor | string | アコーディオンアイテムのサマリー文字色 | ||
| 7 | Expanded | 選択 1. ON 2. OFF | OFF | expanded | boolean | false | アコーディオンアイテムの展開状態設定 |
| 8 | 非アクティブ | 選択 1. ON 2. OFF | OFF | disable | boolean | false | アコーディオンアイテムのアクティブ状態設定定 |
| 9 | 表示 | 選択 1. ON 2. OFF | OFF | visibility | boolean | false | アコーディオンアイテムの表示状態設定 |
| 10 | アクション表示 | 真偽 | Off | showActions | boolean | false | アコーディオンアイテムのアクション領域表示設定 |
| 11 | アクション値 | [詳細1] | actionsValue | array of object | アクション領域のアクション設定 |
アコーディオンアイテムコンポーネント
アコーディオンアイテムに配置されるコンポーネントの事を、アコーディオンアイテムコンポーネントと呼びます。
アコーディオンアイテムコンポーネントは以下の手順でアコーディオンアイテムに追加することが出来ます。
- アコーディオンアイテムバーの＋アイコンをクリックする。
- コンポーネント追加ダイアログが表示される。
- 任意のコンポーネントを選択し、
追加ボタンをクリックする。
アコーディオンアイテムコンポーネントプロパティ
アコーディオンアイテムに追加したコンポーネントには、通常のコンポーネントと比較して以下のプロパティが追加されます。
- Component Type
- X
- Y
また、アコーディオンアイテムコンポーネントのクリックイベントまたはチェンジイベントに設定可能な値は以下になります。
| コンポーネント | クリックイベントまたはチェンジイベント |
|---|---|
| テキストフィールド | 1. なし 2. アクション 3. 切り離されたアクション |
| テキストエリア | 1. なし 2. アクション 3. 切り離されたアクション |
| 数値フィールド | 1. なし 2. アクション 3. 切り離されたアクション |
| 選択ボックス | 1. なし 2. アクション 3. 切り離されたアクション |
| コンボボックス | 1. なし 2. アクション 3. 切り離されたアクション |
| ボタン | 1. なし 2. NEXT UI 3. URL 4. アクション 5. 切り離されたアクション 6. アップロード 7. カメラ |
| アイコンボタン | 1. なし 2. アクション 3. 切り離されたアクション 4. カメラ |
| タイポグラフィー | |
| イメージ | 1. なし 2. NEXT UI 3. URL 4. アクション 5. 切り離されたアクション |
| リンク | 1. なし 2. アクション 3. 切り離されたアクション 4. NEXT UI 5. 値 6. ダウンロード |
[詳細1] アクション値
アクション値では、表示したアクション領域に表示するボタンの詳細設定を行うことが出来ます。 プロパティダイアログからアクション値のグリッドを起動し、ラベルやイベントなどを設定します。
アクション値グリッド
アクション値グリッドは以下のカラムで構成されています。
| カラム | セルタイプ | プロパティ | タイプ | 説明 |
|---|---|---|---|---|
| ID | 入力 | id | string | 1. 識別子 2. アクション値内で一意である必要がある |
| ラベル | 入力 | label | string | ボタンラベル |
| 色 | 文字列 カラーピッカー | color | string | ボタンの色 |
| スタイル | 選択 1. Contained 2. Outlined 3. Text | variant | string | ボタンのスタイル |
| クリックイベント | 選択 1. None 2. Action |