project init
This commit is contained in:
limqhz
96
components/checkbox/README.md
Normal file
96
components/checkbox/README.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Checkbox 复选框
|
||||
description: 用于预设的一组选项中执行多项选择，并呈现选择结果。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-85%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-76%25-red" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础复选框
|
||||
|
||||
<img src="https://tdesign.gtimg.com/miniprogram/readme/checkbox.png" width="375px" height="50%">
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 右侧多选框
|
||||
|
||||
{{ right }}
|
||||
|
||||
### 带全选多选框
|
||||
|
||||
{{ all }}
|
||||
|
||||
### 限制最多可选数量
|
||||
|
||||
{{ num }}
|
||||
|
||||
### 状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 特殊类型
|
||||
|
||||
{{ type }}
|
||||
|
||||
### 规格
|
||||
|
||||
{{ size }}
|
||||
|
||||
## API
|
||||
### Checkbox Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | 多选框和内容相对位置。可选项：left/right | N
|
||||
check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
|
||||
checked | Boolean | false | 是否选中 | N
|
||||
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
|
||||
color | String | #0052d9 | 多选框颜色 | N
|
||||
content | String / Slot | - | 多选框内容 | N
|
||||
content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
|
||||
disabled | Boolean | undefined | 是否禁用组件 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
|
||||
icon | Array | - | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。TS 类型：`Array<string>` | N
|
||||
indeterminate | Boolean | false | 是否为半选 | N
|
||||
label | String / Slot | - | 主文案 | N
|
||||
max-content-row | Number | 5 | 内容最大行数限制 | N
|
||||
max-label-row | Number | 3 | 主文案最大行数限制 | N
|
||||
name | String | - | HTML 元素原生属性 | N
|
||||
readonly | Boolean | false | 只读状态 | N
|
||||
value | String / Number | - | 多选框的值。TS 类型：`string | number` | N
|
||||
|
||||
### Checkbox Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(checked: boolean)` | 值变化时触发
|
||||
|
||||
### CheckboxGroup Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
disabled | Boolean | false | 是否禁用组件 | N
|
||||
max | Number | undefined | 支持最多选中的数量 | N
|
||||
name | String | - | 统一设置内部复选框 HTML 属性 | N
|
||||
options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string | number | CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string | number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
|
||||
value | Array | [] | 选中值。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
|
||||
default-value | Array | undefined | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`<br/>
|
||||
3
components/checkbox/checkbox-group-props.d.ts
vendored
Normal file
3
components/checkbox/checkbox-group-props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdCheckboxGroupProps } from './type';
|
||||
declare const props: TdCheckboxGroupProps;
|
||||
export default props;
|
||||
27
components/checkbox/checkbox-group-props.js
Normal file
27
components/checkbox/checkbox-group-props.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const props = {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
value: undefined,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
98
components/checkbox/checkbox.d.ts
vendored
Normal file
98
components/checkbox/checkbox.d.ts
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
import { SuperComponent, ComponentsOptionsType, RelationsOptions } from '../common/src/index';
|
||||
export default class CheckBox extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
relations: RelationsOptions;
|
||||
options: ComponentsOptionsType;
|
||||
properties: {
|
||||
theme: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
borderless: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "left" | "right";
|
||||
};
|
||||
checkAll?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultChecked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
color?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
contentDisabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"];
|
||||
};
|
||||
icon?: {
|
||||
type: ArrayConstructor;
|
||||
value?: string[];
|
||||
};
|
||||
indeterminate?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: NumberConstructor[];
|
||||
value?: string | number;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
methods: {
|
||||
// @ts-ignore
|
||||
onChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
};
|
||||
}
|
||||
85
components/checkbox/checkbox.js
Normal file
85
components/checkbox/checkbox.js
Normal file
@@ -0,0 +1,85 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import Props from './props';
|
||||
const { prefix } = config;
|
||||
const classPrefix = `${prefix}-checkbox`;
|
||||
let CheckBox = class CheckBox extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-label`,
|
||||
`${prefix}-class-icon`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-border`,
|
||||
];
|
||||
this.behaviors = ['wx://form-field'];
|
||||
this.relations = {
|
||||
'../checkbox-group/checkbox-group': {
|
||||
type: 'ancestor',
|
||||
linked(parent) {
|
||||
const { value, disabled } = parent.data;
|
||||
const valueSet = new Set(value);
|
||||
const data = {
|
||||
disabled: disabled || this.data.disabled,
|
||||
};
|
||||
data.checked = valueSet.has(this.data.value);
|
||||
if (this.data.checkAll) {
|
||||
data.checked = valueSet.size > 0;
|
||||
}
|
||||
this.setData(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = Object.assign(Object.assign({}, Props), { theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
}, borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
} });
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'checked',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.methods = {
|
||||
onChange(e) {
|
||||
const { disabled, readonly } = this.data;
|
||||
if (disabled || readonly)
|
||||
return;
|
||||
const { target } = e.currentTarget.dataset;
|
||||
const { contentDisabled } = this.data;
|
||||
if (target === 'text' && contentDisabled) {
|
||||
return;
|
||||
}
|
||||
const checked = !this.data.checked;
|
||||
const [parent] = this.getRelationNodes('../checkbox-group/checkbox-group');
|
||||
if (parent) {
|
||||
parent.updateValue(Object.assign(Object.assign({}, this.data), { checked }));
|
||||
}
|
||||
else {
|
||||
this._trigger('change', { checked });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CheckBox = __decorate([
|
||||
wxComponent()
|
||||
], CheckBox);
|
||||
export default CheckBox;
|
||||
6
components/checkbox/checkbox.json
Normal file
6
components/checkbox/checkbox.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
47
components/checkbox/checkbox.wxml
Normal file
47
components/checkbox/checkbox.wxml
Normal file
@@ -0,0 +1,47 @@
|
||||
<view
|
||||
class="{{classPrefix}} {{prefix}}-class {{classPrefix}}--{{align}} {{classPrefix}}--{{theme}} {{checked ? prefix + '-is-actived' : ''}}"
|
||||
>
|
||||
<!-- icon -->
|
||||
<view
|
||||
wx:if="{{theme == 'default'}}"
|
||||
class="{{classPrefix}}__icon-{{align}} {{prefix}}-class-icon"
|
||||
data-target="icon"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<block wx:if="{{icon.length > 0}}">
|
||||
<view class="{{classPrefix}}__icon">
|
||||
<image src="{{checked ? icon[0] : icon[1]}}" class="{{classPrefix}}__icon-image" webp />
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<t-icon
|
||||
color="{{checked && !disabled ? color : ''}}"
|
||||
name="{{checked ? (indeterminate ? 'minus-circle-filled' : 'check-circle-filled') : 'circle'}}"
|
||||
class="{{classPrefix}}__btn {{checked ? prefix + '-is-checked' : ''}} {{disabled ? prefix + '-is-disabled' : ''}}"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 文本内容 -->
|
||||
<view
|
||||
class="{{classPrefix}}__content {{disabled ? prefix + '-is-disabled' : ''}}"
|
||||
data-target="text"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<!-- title -->
|
||||
<view class="{{classPrefix}}__title {{prefix}}-class-label" style="-webkit-line-clamp:{{maxLabelRow}}">
|
||||
{{label}}
|
||||
<slot />
|
||||
<slot name="label" />
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="{{classPrefix}}__description {{prefix}}-class-content " style="-webkit-line-clamp:{{maxContentRow}}">
|
||||
{{content}}
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内置下边框 -->
|
||||
<view
|
||||
wx:if="{{theme == 'default' && !borderless}}"
|
||||
class="{{classPrefix}}__border {{classPrefix}}__border--{{align}} {{prefix}}-class-border"
|
||||
/>
|
||||
</view>
|
||||
131
components/checkbox/checkbox.wxss
Normal file
131
components/checkbox/checkbox.wxss
Normal file
@@ -0,0 +1,131 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-checkbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
.t-checkbox--right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.t-checkbox .limit-title-row {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-checkbox .image-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.t-checkbox__icon-left {
|
||||
margin-right: 20rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
.t-checkbox__icon-right {
|
||||
right: 0px;
|
||||
display: contents;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.t-checkbox__icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: sub;
|
||||
}
|
||||
.t-checkbox__icon {
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.t-checkbox__btn {
|
||||
font-size: 48rpx;
|
||||
display: block;
|
||||
line-height: 40rpx;
|
||||
color: #dcdcdc;
|
||||
width: 48rpx;
|
||||
}
|
||||
.t-checkbox__content {
|
||||
flex: 1;
|
||||
line-height: 48rpx;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.t-checkbox__title {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-checkbox__description {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.t-checkbox__btn.t-is-checked {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-checkbox__btn.t-is-disabled {
|
||||
cursor: not-allowed;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
.t-checkbox__content.t-is-disabled {
|
||||
cursor: not-allowed;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.t-checkbox__border {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-top: 1rpx solid #e7e7e7;
|
||||
width: 100%;
|
||||
}
|
||||
.t-checkbox__border--left {
|
||||
left: 80rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
}
|
||||
.t-checkbox__border--right {
|
||||
right: 80rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
}
|
||||
.t-checkbox--tag {
|
||||
font-size: 28rpx;
|
||||
padding-top: 16rpx;
|
||||
padding-bottom: 16rpx;
|
||||
text-align: center;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.t-checkbox--tag.t-is-actived {
|
||||
color: #0052d9;
|
||||
background-color: #ecf2fe;
|
||||
}
|
||||
.t-checkbox--tag .t-checkbox__content {
|
||||
margin-right: 0;
|
||||
}
|
||||
3
components/checkbox/props.d.ts
vendored
Normal file
3
components/checkbox/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdCheckboxProps } from './type';
|
||||
declare const props: TdCheckboxProps;
|
||||
export default props;
|
||||
66
components/checkbox/props.js
Normal file
66
components/checkbox/props.js
Normal file
@@ -0,0 +1,66 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
},
|
||||
checkAll: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
value: null,
|
||||
},
|
||||
defaultChecked: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: '#0052d9',
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
contentDisabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: Array,
|
||||
},
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
maxContentRow: {
|
||||
type: Number,
|
||||
value: 5,
|
||||
},
|
||||
maxLabelRow: {
|
||||
type: Number,
|
||||
value: 3,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
optionalTypes: [Number],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
105
components/checkbox/type.d.ts
vendored
Normal file
105
components/checkbox/type.d.ts
vendored
Normal file
@@ -0,0 +1,105 @@
|
||||
export interface TdCheckboxProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'right';
|
||||
};
|
||||
checkAll?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultChecked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
color?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
contentDisabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
|
||||
};
|
||||
icon?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string>;
|
||||
};
|
||||
indeterminate?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<NumberConstructor>;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
export interface TdCheckboxGroupProps {
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
max?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<CheckboxOption>;
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CheckboxGroupValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CheckboxGroupValue;
|
||||
};
|
||||
}
|
||||
export declare type CheckboxOption = string | number | CheckboxOptionObj;
|
||||
export interface CheckboxOptionObj {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
disabled?: boolean;
|
||||
checkAll?: true;
|
||||
}
|
||||
export declare type CheckboxGroupValue = Array<string | number>;
|
||||
1
components/checkbox/type.js
Normal file
1
components/checkbox/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user