From c05e92ddd85ec4d6d53c32ea0bfec3e383290659 Mon Sep 17 00:00:00 2001 From: jin0209 <270246430@qq.com> Date: Tue, 16 Jan 2024 22:28:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(action-sheet):=20action-sheet=20api?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#2541)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/action-sheet/README.en-US.md | 8 +-- src/action-sheet/README.md | 87 ++------------------------------ src/action-sheet/props.ts | 20 ++++---- src/action-sheet/type.ts | 29 ++++++----- 4 files changed, 33 insertions(+), 111 deletions(-) diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md index 5af0d7877..c97973a55 100644 --- a/src/action-sheet/README.en-US.md +++ b/src/action-sheet/README.en-US.md @@ -5,14 +5,15 @@ name | type | default | description | required -- | -- | -- | -- | -- -align | String | center | `0.29.0`。options：center/left | N +align | String | center | `0.29.0`。options: center/left | N cancel-text | String | - | \- | N count | Number | 8 | \- | N description | String | - | `0.29.0` | N -items | Array | - | required。Typescript：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +items | Array | - | required。Typescript：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +popup-props | Object | {} | \- | N show-cancel | Boolean | true | \- | N show-overlay | Boolean | true | \- | N -theme | String | list | options：list/grid | N +theme | String | list | options: list/grid | N visible | Boolean | false | required | Y default-visible | Boolean | undefined | required。uncontrolled property | Y @@ -24,7 +25,6 @@ cancel | \- | \- close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
selected | `(selected: ActionSheetItem \| string, index: number)` | \- - ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index b552212e0..881c50079 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -1,86 +1,4 @@ ---- -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(); -``` - +:: BASE_DOC :: ## API ### ActionSheet Props @@ -91,7 +9,8 @@ align | String | center | `0.29.0`。水平对齐方式。可选项：center/lef cancel-text | String | - | 设置取消按钮的文本 | N count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N description | String | - | `0.29.0`。动作面板描述文字 | N -items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +popup-props | Object | {} | popupProps透传 | N show-cancel | Boolean | true | 是否显示取消按钮 | N show-overlay | Boolean | true | 是否显示遮罩层 | N theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts index 12a82b79f..25985c184 100644 --- a/src/action-sheet/props.ts +++ b/src/action-sheet/props.ts @@ -30,11 +30,21 @@ const props: TdActionSheetProps = { items: { type: Array, }, + /** popupProps透传 */ + popupProps: { + type: Object, + value: {}, + }, /** 是否显示取消按钮 */ showCancel: { type: Boolean, value: true, }, + /** 是否显示遮罩层 */ + showOverlay: { + type: Boolean, + value: true, + }, /** 展示类型，列表和表格形式展示 */ theme: { type: String, @@ -50,16 +60,6 @@ const props: TdActionSheetProps = { type: Boolean, value: false, }, - /** 是否显示遮罩层 */ - showOverlay: { - type: Boolean, - value: true, - }, - /** popupProps透传 */ - popupProps: { - type: Object, - value: {}, - }, }; export default props; diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts index b056c85a9..db484afee 100644 --- a/src/action-sheet/type.ts +++ b/src/action-sheet/type.ts @@ -44,6 +44,14 @@ export interface TdActionSheetProps { type: ArrayConstructor; value?: Array; }; + /** + * popupProps透传 + * @default {} + */ + popupProps?: { + type: ObjectConstructor; + value?: object; + }; /** * 是否显示取消按钮 * @default true @@ -52,6 +60,14 @@ export interface TdActionSheetProps { type: BooleanConstructor; value?: boolean; }; + /** + * 是否显示遮罩层 + * @default true + */ + showOverlay?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 展示类型，列表和表格形式展示 * @default list @@ -76,19 +92,6 @@ export interface TdActionSheetProps { type: BooleanConstructor; value?: boolean; }; - /** - * 是否显示遮罩层 - * @default true - */ - showOverlay: { - type: BooleanConstructor; - value?: boolean; - }; - /** popupProps透传 */ - popupProps: { - type: ObjectConstructor; - value?: object; - }; } export interface ActionSheetItem {