ドロワー - DingTalk Help Center

使用シーン

ドロワーは補助ウィンドウとして機能し、メインの作業フローを中断せずに、簡単な操作の実行・情報の確認・フィードバックの閲覧を素早く行えるようにします。

コンポーネント例

コンポーネントのプロパティ

属性	説明	タイプ	デフォルト
`afterClose`	ドロワーを閉じた後にトリガーされるイベント。	`() => void`	-
`afterOpen`	ドロワーを開いた後にトリガーされるイベント。	`() => void`	-
`cancelText`	キャンセルボタンのテキスト。	`string`	`'Cancel'`
`closeable`	ドロワーの閉じ方。`esc`：ESC キーで閉じます。`mask`：マスクをクリックして閉じます。	`'esc' \| 'mask'`	`'esc'`
`confirmState`	確認ボタンの状態。	`'NORMAL' \| 'DISABLED' \| 'LOADING'`	`'NORMAL'`
`confirmStyle`	確認ボタンのタイプ。ボタンコンポーネントのドキュメントを参照してください。	`'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'`	`'primary'`
`confirmText`	確認ボタンのテキスト。	`string`	`'Confirm'`
`footer`	フッターボタンを表示するかどうか。	`boolean`	`true`
`footerActions`	フッターボタンのデフォルト配置。`cancel` はキャンセルボタン、`ok` は確認ボタンを表します。	`'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`	`'cancel,ok'`
`footerAlign`	ドロワー内の確認ボタンとキャンセルボタンの配置。	`'left' \| 'center' \| 'right'`	`'right'`
`hasMask`	マスクを表示するかどうか。	`boolean`	`true`
`height`	ドロワーの高さ。	`number`	-
`onCancel`	キャンセルボタンをクリックした際にトリガーされるイベント。	`() => void`	-
`onClose`	ドロワーを閉じた際にトリガーされるイベント。	`() => void`	-
`onOk`	確認ボタンをクリックした際にトリガーされるイベント。	`() => void`	-
`placement`	ドロワーの表示位置。	`'right' \| 'top' \| 'bottom' \| 'left'`	`'right'`
`title`	ドロワーのタイトル。	`string`	`'Drawer Title'`
`visible`	ドロワーを表示するかどうか。	`boolean`	`false`
`width`	ドロワーの幅。	`number`	-