diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index 881c50079..6234d6f29 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -1,4 +1,86 @@ -:: BASE_DOC :: +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。 +spline: data +isComponent: true +--- + + + +
+ + + + 该组件于 0.9.0 版本上线,请留意版本。 +
+ +## 引入 + +全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet", +} +``` + +## 代码演示 + +### 组件类型 + +列表型动作面板 + +{{ list }} + +宫格型动作面板 + +{{ grid }} + +### 组件状态 + +宫格型动作面板 + +{{ status }} + +### 组件样式 + +列表型对齐方式 + +{{ align }} + +### 支持指令调用 + +```javascript +import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index'; + +// 指令调用不同于组件引用不需要传入visible +const basicListOption: ActionSheetShowOption = { + theme: ActionSheetTheme.List, + selector: '#t-action-sheet', + items: [ + { + label: '默认选项', + }, + { + label: '失效选项', + disabled: true, + }, + { + label: '警告选项', + color: '#e34d59', + }, + ], +}; + +const handler = ActionSheet.show(basicListOption); +``` + +指令调用的关闭如下 + +```javascript +handler.close(); +``` + ## API ### ActionSheet Props