Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(DropdownMenuItem): add placement props #484

Merged
merged 1 commit into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ const props: TdDropdownItemProps = {
type: null,
value: 1,
},
/** 复选框和内容相对位置,仅单选菜单栏有效 */
placement: {
type: String,
value: 'left',
},
/** 选中值 */
value: {
type: null,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ export interface TdDropdownItemProps {
type: null;
value?: string | number;
};
/**
* 复选框和内容相对位置,仅单选菜单栏有效
* @default left
*/
placement?: {
type: StringConstructor;
value?: 'left' | 'right';
};
/**
* 选中值
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ name | params | description
-- | -- | --
close | \- | \-
open | \- | \-

### DropdownMenu External Classes

className | Description
Expand All @@ -44,6 +45,7 @@ multiple | Boolean | false | \- | N
options | Array | [] | Typescript:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
options-columns | String / Number | 1 | \- | N
options-layout | String | columns | `deprecated` | N
placement | String | left | options: left/right | N
value | String / Number / Array | undefined | Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
default-value | String / Number / Array | undefined | uncontrolled property。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N

Expand All @@ -55,6 +57,7 @@ change | `(value: DropdownValue)` | \-
close | \- | \-
confirm | `(value: DropdownValue)` | \-
reset | \- | \-

### DropdownItem External Classes

className | Description
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ z-index | Number | 11600 | 菜单栏 z-index 层级 | N
-- | -- | --
close | \- | 菜单关闭时触发
open | \- | 菜单展开时触发

### DropdownMenu External Classes

类名 | 描述
Expand All @@ -44,6 +45,7 @@ multiple | Boolean | false | 是否多选 | N
options | Array | [] | 选项数据。TS 类型:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
options-columns | String / Number | 1 | 选项分栏(1-3) | N
options-layout | String | columns | 已废弃。选项排列;不再支持 tree 布局,可与 treeSelect 配合使用 | N
placement | String | left | 复选框和内容相对位置,仅单选菜单栏有效。可选项:left/right | N
value | String / Number / Array | undefined | 选中值。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N

Expand All @@ -55,6 +57,7 @@ change | `(value: DropdownValue)` | 值改变时触发
close | \- | 关闭时触发
confirm | `(value: DropdownValue)` | 点击确认时触发
reset | \- | 点击重置时触发

### DropdownItem External Classes

类名 | 描述
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@ export const dropdownItemDefaultProps: TdDropdownItemProps = {
multiple: false,
options: [],
optionsColumns: 1,
placement: 'left',
defaultValue: undefined,
};
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ label | String | - | \- | N
multiple | Boolean | false | \- | N
options | Array | [] | Typescript:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
optionsColumns | String / Number | 1 | \- | N
placement | String | left | options: left/right | N
value | String / Number / Array | undefined | Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
onChange | Function | | Typescript:`(value: DropdownValue) => void`<br/> | N
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ label | String | - | 标题 | N
multiple | Boolean | false | 是否多选 | N
options | Array | [] | 选项数据。TS 类型:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
optionsColumns | String / Number | 1 | 选项分栏(1-3) | N
placement | String | left | 复选框和内容相对位置,仅单选菜单栏有效。可选项:left/right | N
value | String / Number / Array | undefined | 选中值。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
defaultValue | String / Number / Array | undefined | 选中值。非受控属性。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
onChange | Function | | TS 类型:`(value: DropdownValue) => void`<br/>值改变时触发 | N
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
* @default 1
*/
optionsColumns?: string | number;
/**
* 复选框和内容相对位置,仅单选菜单栏有效
* @default left
*/
placement?: 'left' | 'right';
/**
* 选中值
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ export default {
type: [String, Number] as PropType<TdDropdownItemProps['optionsColumns']>,
default: 1,
},
/** 复选框和内容相对位置,仅单选菜单栏有效 */
placement: {
type: String as PropType<TdDropdownItemProps['placement']>,
default: 'left' as TdDropdownItemProps['placement'],
validator(val: TdDropdownItemProps['placement']): boolean {
if (!val) return true;
return ['left', 'right'].includes(val);
},
},
/** 选中值 */
value: {
type: [String, Number, Array] as PropType<TdDropdownItemProps['value']>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ label | String | - | \- | N
multiple | Boolean | false | \- | N
options | Array | [] | Typescript:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
optionsColumns | String / Number | 1 | \- | N
placement | String | left | options: left/right | N
value | String / Number / Array | undefined | `v-model` and `v-model:value` is supported。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
onChange | Function | | Typescript:`(value: DropdownValue) => void`<br/> | N
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ label | String | - | 标题 | N
multiple | Boolean | false | 是否多选 | N
options | Array | [] | 选项数据。TS 类型:`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
optionsColumns | String / Number | 1 | 选项分栏(1-3) | N
placement | String | left | 复选框和内容相对位置,仅单选菜单栏有效。可选项:left/right | N
value | String / Number / Array | undefined | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
defaultValue | String / Number / Array | undefined | 选中值。非受控属性。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
onChange | Function | | TS 类型:`(value: DropdownValue) => void`<br/>值改变时触发 | N
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
* @default 1
*/
optionsColumns?: string | number;
/**
* 复选框和内容相对位置,仅单选菜单栏有效
* @default left
*/
placement?: 'left' | 'right';
/**
* 选中值
*/
Expand Down
43 changes: 43 additions & 0 deletions packages/scripts/api.json
Original file line number Diff line number Diff line change
Expand Up @@ -45477,6 +45477,49 @@
"String"
]
},
{
"id": 1733309141,
"platform_framework": [
"8",
"16",
"32",
"64"
],
"component": "DropdownItem",
"field_category": 1,
"field_name": "placement",
"field_type": [
"1"
],
"field_default_value": "left",
"field_enum": "left/right",
"field_desc_zh": "复选框和内容相对位置,仅单选菜单栏有效",
"field_desc_en": null,
"field_required": 0,
"event_input": "",
"create_time": "2024-12-04 10:45:41",
"update_time": "2024-12-04 10:45:41",
"event_output": null,
"custom_field_type": null,
"syntactic_sugar": null,
"readonly": 1,
"html_attribute": 0,
"trigger_elements": "",
"deprecated": 0,
"version": "",
"test_description": null,
"support_default_value": 0,
"field_category_text": "Props",
"platform_framework_text": [
"Vue(Mobile)",
"React(Mobile)",
"Angular(Mobile)",
"Miniprogram"
],
"field_type_text": [
"String"
]
},
{
"id": 2912,
"platform_framework": [
Expand Down
Loading