アプリバー

アプリバーはスティッキーなヘッダーコンポーネントです。設定によって、ドロワーやアバターを表示することができます。

ノート

• アプリバーはひとつのUIに対してひとつまで配置できます。エディタ上ではドロワーやアバターのメニューは開きません。プレビューまたはデプロイから確認できます。
• アプリバーは常に最前面に配置されるコンポーネントです。アプリバーより前面にコンポーネントを配置することはできません

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	app_bar	id	string	app_bar	[id]プロパティはアクションで設定はできません。
2	高さ	数値	64	height	number	300	コンポーネントの高さ
3	左	数値	12 12 [タブレット] 4 [モバイル]	paddingLeft	number	12 12 [タブレット] 4 [モバイル]	アプリバーの左余白
4	右	数値	12 12 [タブレット] 4 [モバイル]	paddingRight	number	12 12 [タブレット] 4 [モバイル]	アプリバーの右余白
5	色	文字列 カラーピッカー		color	string		コンポーネントの色設定
6	タイトル色	文字列 カラーピッカー		titleColor	string		タイトルの色設定
7	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示状態
8	キャッシュ無効	真偽	OFF	cacheDisabled	boolean	false	アバターのイメージに対してのキャッシュ利用状態
9	ドロワー	真偽	ON	drawer	boolean	true	ドロワーの表示状態
10	ドロワー幅	数値		drawerWidth	number		ドロワーの幅設定
11	ドロワーアイコン色	文字列 カラーピッカー		drawerIconColor	string		ドロワーアイコンの色設定 v3.4.0で追加されたプロパティ
12	ドロワーアイテム	表形式 [詳細1]	[詳細1]	drawerItems	array of object	[詳細1]	ドロワーアイテムの設定
13	アバター	真偽	OFF	avatar	boolean	true	アバターの表示状態
14	アバターイメージ	文字列		avatarImage	string		アバター画像の設定
15	レター	文字列		avatarLetter	string		アバターに表示する文字
16	アバター色	文字列 カラーピッカー		avatarColor	string		アバターの背景色
17	アバターバッジ	真偽	オフ	avatarBadge	boolean	false	アバターバッジの表示状態
18	アバタークリックイベント	文字列 1. なし 2. メニュー	なし	avatarClickEvent	string	menu	アバタークリック時の動作
19	アバターメニューアイテム	表形式 [詳細2]	[詳細2]	avatarMenuItems	array of object	[詳細2]	アバターアイテムの設定
20	追加コンポーネント	真偽	OFF	additionalComponents	boolean	false	追加コンポーネントの表示状態 v4.1.0で追加されました。
21	追加コンポーネントアイテム	表形式 [詳細3]	[]	additionalComponentsItems	array of object	[]	追加コンポーネントアイテムの設定 v4.1.0で追加されました。
22	タイトル	文字列	App Bar	title	string	App Bar	アプリバーのタイトル表示

[詳細1] ドロワー

デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。 削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	アイコン	ラベル	クリックイベント	NEXT UI	切り離されたアクション	URL	区切り線
チェックボックス	item1	MoveToInbox	Inbox	None				いいえ
チェックボックス	item2	Mail	Starred	None				いいえ
チェックボックス	item3	MoveToInbox	Send Email	None				いいえ
チェックボックス	item4	Mail	Drafts	None				はい
チェックボックス	item5	MoveToInbox	All Mail	None				いいえ
チェックボックス	item6	Mail	Trash	None				いいえ
チェックボックス	item7	MoveToInbox	Spam	None				いいえ

[{"id":"item1","icon":"MoveToInbox","label":"Inbox","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item2","icon":"Mail","label":"Starred","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item3","icon":"MoveToInbox","label":"Send Email","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item4","icon":"Mail","label":"Drafts","clickEvent":"None","nextUi":"","url":"","divider":true},{"id":"item5","icon":"MoveToInbox","label":"All Mail","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item6","icon":"Mail","label":"Trash","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item7","icon":"MoveToInbox","label":"Spam","clickEvent":"None","nextUi":"","url":"","divider":false}]

ノート

• ドロワーのクリックイベントの選択肢は None | Next UI | URL | Action | Detached Action となります。
• ドロワーでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 区切り線は[はい (true)]の場合、そのメニュー要素の下に区切り線が付与されます。
• [NEXT UI] に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

[詳細2]メニュー

メニューとはアイコンボタンをクリックしたときに表示される選択肢のことです。 デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。 削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	アイコン	ラベル	クリックイベント	Next UI	切り離されたアクション	URL	区切り線
チェックボックス	Profile	AccountCircle	Profile	None				いいえ
チェックボックス	MFA_Setting	Settings	MFA Setting	Next UI	MFA Setting Step1			いいえ
チェックボックス	Change_Password	LockReset	Change password	Next UI	Change Password			いいえ
チェックボックス	Sign_Out	Logout	Sign out	Next UI	Sign Out			いいえ

ノート

• メニューのクリックイベントの選択肢は None | Next UI | URL | Action | Detached Action となります。
• メニューでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 認証UIへのNext UIがメニューとして初期登録されています。認証を必要としないアプリケーションの場合、 これらのメニュー要素は自身で削除する必要があります。
• Next UIに初期登録されていない認証UIを設定しないでください。初期登録されていない認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

[詳細3]追加コンポーネント

追加コンポーネントとはアプリバー上に表示できるコンポーネントのことです。
デフォルトの状態は追加コンポーネントは登録されていません。[ADD]ボタンから登録します。
削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	アイコン	ラベル	タイプ	位置	色	クリックイベント	バッジコンテンツ	バッジ色	Next UI	URL	検索フィールド幅
チェックボックス

表示可能なコンポーネントは以下の通りです。

• アイコンボタン
• テキストボタン
• 検索フィールド

ノート

• 追加コンポーネントのラベルはコンポーネントよって以下の役割を果たします。
  • アイコンボタン：ツールチップの表示内容
  • テキストボタン：ラベルの表示内容
  • 検索フィールド：プレースホルダの表示内容
• 追加コンポーネントの色はコンポーネントによって以下の役割を果たします。
  • アイコンボタン：アイコン色
  • テキストボタン：文字色
  • 検索フィールド：アイコン色、プレースホルダ文字色
• 追加コンポーネントの位置は[左]、[中央]、[右]から選択することができます。
• 追加コンポーネントは追加された順番でアプリバーの左から並びます。
• 位置で不整合が発生した場合は、最初に追加されたコンポーネントの位置が優先されます。
• 追加コンポーネントのクリックイベントで[メニュー]を選択した場合は、プロパティダイアログにその追加コンポーネントのIDを名称とする、メニューアイテムプロパティが表示されます。
• モバイルアプリケーションの場合は、以下の動作となります。
  • アバターとアイコンボタンを合わせた数が2つ以上の場合は、メニューアイコンとしてまとめて表示されます。
  • タイトルと検索フィールドが存在する場合は、検索フィールドが最大幅で表示されます。

イベント

なし