cxc/points-mall-miniprogram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug fix and performance improvements

Browse Source
This commit is contained in:
quantulr
2023-08-18 17:32:18 +08:00
parent 3c6ab550cf
commit e750b9be9c
923 changed files with 46650 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/README.en-US.md Normal file
View File

@ -0,0 +1,72 @@
:: BASE_DOC ::
## API
### Checkbox Props
name | type | default | description | required
-- | -- | -- | -- | --
block | Boolean | true | \- | N
borderless | Boolean | false | \- | N
check-all | Boolean | false | \- | N
checked | Boolean | false | \- | N
default-checked | Boolean | undefined | uncontrolled property | N
content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content-disabled | Boolean | - | \- | N
disabled | Boolean | undefined | \- | N
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
indeterminate | Boolean | false | \- | N
label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max-content-row | Number | 5 | \- | N
max-label-row | Number | 3 | \- | N
name | String | - | \- | N
placement | String | left | options：left/right | N
readonly | Boolean | false | \- | N
value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
### Checkbox Events
name | params | description
-- | -- | --
change | `(checked: boolean)` | \-
### CheckboxGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
borderless | Boolean | false | \- | N
disabled | Boolean | - | \- | N
max | Number | undefined | \- | N
name | String | - | \- | N
options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
default-value | Array | undefined | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
### CheckboxGroup Events
name | params | description
-- | -- | --
change | `(value: CheckboxGroupValue)` | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-checkbox-bg-color | @bg-color-container | -
--td-checkbox-border-color | @component-stroke | -
--td-checkbox-description-color | @font-gray-2 | -
--td-checkbox-description-disabled-color | @font-gray-4 | -
--td-checkbox-description-line-height | 44rpx | -
--td-checkbox-font-size | 32rpx | -
--td-checkbox-icon-checked-color | @brand-color | -
--td-checkbox-icon-color | @gray-color-4 | -
--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-checkbox-icon-disabled-color | @brand-color-disabled | -
--td-checkbox-icon-size | 48rpx | -
--td-checkbox-tag-active-bg-color | @brand-color-light | -
--td-checkbox-tag-active-color | @brand-color | -
--td-checkbox-title-color | @font-gray-1 | -
--td-checkbox-title-disabled-color | @font-gray-4 | -
--td-checkbox-title-line-height | 48rpx | -
--td-checkbox-vertical-padding | 32rpx | -

139
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/README.md Normal file
View File

@ -0,0 +1,139 @@
---
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"
}
```
## 代码演示
### 组件类型
纵向多选框
{{ base }}
横向多选框
{{ horizontal }}
带全选多选框
{{ all }}
### 组件状态
多选框状态
{{ status }}
### 组件样式
勾选样式
{{ type }}
勾选显示位置
{{ right }}
非通栏多选样式
{{ card }}
### 组件规格
多选框尺寸规格
{{ special }}
## API
### Checkbox Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
block | Boolean | true | 是否为块级元素 | N
borderless | Boolean | false | 是否开启无边框模式 | N
check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
checked | Boolean | false | 是否选中 | N
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
content | String / Slot | - | 多选框内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
indeterminate | Boolean | false | 是否为半选 | N
label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max-content-row | Number | 5 | 内容最大行数限制 | N
max-label-row | Number | 3 | 主文案最大行数限制 | N
name | String | - | HTML 元素原生属性 | N
placement | String | left | 多选框和内容相对位置。可选项：left/right | N
readonly | Boolean | false | 只读状态 | N
value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
### Checkbox Events
名称 | 参数 | 描述
-- | -- | --
change | `(checked: boolean)` | 值变化时触发
### Checkbox 外部样式类
类名 | 说明
-- | --
t-class | 根节点样式类
t-class-label | 标签样式类
t-class-icon | 图标样式类
t-class-content | 内容样式类
t-class-border | 边框样式类
### CheckboxGroup Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
borderless | Boolean | false | 是否开启无边框模式 | N
disabled | Boolean | - | 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 | 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-group/type.ts) | N
value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
### CheckboxGroup Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: CheckboxGroupValue)` | 值变化时触发
### CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-checkbox-bg-color | @bg-color-container | -
--td-checkbox-border-color | @component-stroke | -
--td-checkbox-description-color | @font-gray-2 | -
--td-checkbox-description-disabled-color | @font-gray-4 | -
--td-checkbox-description-line-height | 44rpx | -
--td-checkbox-font-size | 32rpx | -
--td-checkbox-icon-checked-color | @brand-color | -
--td-checkbox-icon-color | @gray-color-4 | -
--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-checkbox-icon-disabled-color | @brand-color-disabled | -
--td-checkbox-icon-size | 48rpx | -
--td-checkbox-tag-active-bg-color | @brand-color-light | -
--td-checkbox-tag-active-color | @brand-color | -
--td-checkbox-title-color | @font-gray-1 | -
--td-checkbox-title-disabled-color | @font-gray-4 | -
--td-checkbox-title-line-height | 48rpx | -
--td-checkbox-vertical-padding | 32rpx | -

96
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/checkbox.d.ts vendored Normal file
View File

@ -0,0 +1,96 @@
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;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
borderless?: {
type: BooleanConstructor;
value?: boolean;
};
checkAll?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
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: null;
value?: string[] | "circle" | "rectangle" | "line";
};
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;
};
placement?: {
type: StringConstructor;
value?: "left" | "right";
};
readonly?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: string | number | boolean;
};
};
data: {
prefix: string;
classPrefix: string;
};
controlledProps: {
key: string;
event: string;
}[];
methods: {
onChange(e: WechatMiniprogram.TouchEvent): void;
};
}

85
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/checkbox.js Normal file
View 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 name = `${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, borderless } = parent.data;
const valueSet = new Set(value);
const data = {
disabled: this.data.disabled == null ? disabled : this.data.disabled,
};
if (borderless) {
data.borderless = true;
}
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',
} });
this.data = {
prefix,
classPrefix: name,
};
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.$parent;
if (parent) {
parent.updateValue(Object.assign(Object.assign({}, this.data), { checked }));
}
else {
this._trigger('change', { checked });
}
},
};
}
};
CheckBox = __decorate([
wxComponent()
], CheckBox);
export default CheckBox;

7
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/checkbox.json Normal file
View File

@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-cell": "../cell/cell",
"t-icon": "../icon/icon"
}
}

61
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/checkbox.wxml Normal file
View File

@ -0,0 +1,61 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="{{_.cls(classPrefix, [placement, theme, ['checked', checked], ['block', block]])}} class {{prefix}}-class"
aria-role="checkbox"
aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
aria-disabled="{{disabled ? true : false}}"
bind:tap="onChange"
tabindex="{{tabindex}}"
>
<view
wx:if="{{theme == 'default'}}"
class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
>
<slot name="icon" wx:if="{{icon === 'slot'}}" />
<view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
<image
src="{{checked ? indeterminate && icon[2] ? icon[2] : icon[0] : icon[1]}}"
class="{{classPrefix}}__icon-image"
webp
/>
</view>
<block wx:else>
<t-icon
wx:if="{{checked && (icon == 'circle' || icon == 'rectangle')}}"
name="{{indeterminate ? ('minus-' + icon + '-filled') : ('check-' + icon + '-filled')}}"
class="{{_.cls(classPrefix + '__icon-wrapper', [])}}"
/>
<t-icon
wx:if="{{checked && icon == 'line'}}"
name="{{indeterminate ? ('minus-' + icon + '-filled') : 'check'}}"
class="{{_.cls(classPrefix + '__icon-wrapper', [])}}"
/>
<view
wx:elif="{{!checked && (icon == 'circle' || icon == 'rectangle')}}"
class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', disabled]])}}"
/>
<view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
</block>
</view>
<view class="{{classPrefix}}__content" data-target="text" catch:tap="onChange">
<view
class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
style="-webkit-line-clamp:{{maxLabelRow}}"
>
{{label}}
<slot />
<slot name="label" />
</view>
<view
class="{{_.cls(classPrefix + '__description', [['disabled', disabled]])}} {{prefix}}-class-content "
style="-webkit-line-clamp:{{maxContentRow}}"
>{{content}}<slot name="content"
/></view>
</view>
<view
wx:if="{{theme == 'default' && !borderless}}"
class="{{_.cls(classPrefix + '__border', [placement])}} {{prefix}}-class-border"
/>
</view>

203
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/checkbox.wxss Normal file
View File

@ -0,0 +1,203 @@
.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: inline-flex;
vertical-align: middle;
position: relative;
font-size: var(--td-checkbox-font-size, 32rpx);
background: var(--td-checkbox-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-checkbox:focus {
outline: 0;
}
.t-checkbox--block {
display: flex;
padding: var(--td-checkbox-vertical-padding, 32rpx);
}
.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: var(--td-checkbox-icon-size, 48rpx);
height: var(--td-checkbox-icon-size, 48rpx);
vertical-align: top;
}
.t-checkbox__icon {
position: relative;
display: block;
width: var(--td-checkbox-icon-size, 48rpx);
height: var(--td-checkbox-icon-size, 48rpx);
color: var(--td-checkbox-icon-color, var(--td-gray-color-4, #dcdcdc));
font-size: var(--td-checkbox-icon-size, 48rpx);
margin-top: calc((var(--td-checkbox-title-line-height, 48rpx) - var(--td-checkbox-icon-size, 48rpx)) / 2);
}
.t-checkbox__icon:empty {
display: none;
}
.t-checkbox__icon--checked {
color: var(--td-checkbox-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-checkbox__icon--disabled {
cursor: not-allowed;
color: var(--td-checkbox-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-checkbox__icon--left {
margin-right: 16rpx;
}
.t-checkbox__icon-circle {
width: calc((var(--td-checkbox-icon-size, 48rpx) - 6rpx) * 2);
height: calc((var(--td-checkbox-icon-size, 48rpx) - 6rpx) * 2);
border: 6rpx solid var(--td-checkbox-icon-color, var(--td-gray-color-4, #dcdcdc));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
}
.t-checkbox__icon-circle--disabled {
background: var(--td-checkbox-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-checkbox__icon-rectangle {
width: calc((var(--td-checkbox-icon-size, 48rpx) - 6rpx * 2) * 2);
height: calc((var(--td-checkbox-icon-size, 48rpx) - 6rpx * 2) * 2);
border: 6rpx solid var(--td-checkbox-icon-color, var(--td-gray-color-4, #dcdcdc));
border-radius: 4rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
}
.t-checkbox__icon-rectangle--disabled {
background: var(--td-checkbox-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-checkbox__icon-line:before,
.t-checkbox__icon-line:after {
content: '';
display: block;
position: absolute;
width: 5rpx;
border-radius: 2rpx;
background: var(--td-checkbox-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
transform-origin: top center;
}
.t-checkbox__icon-line:before {
height: 16rpx;
left: 8rpx;
top: 22rpx;
transform: rotate(-45deg);
}
.t-checkbox__icon-line::after {
height: 26rpx;
right: 8rpx;
top: 14rpx;
transform: rotate(45deg);
}
.t-checkbox__icon-line--disabled::before,
.t-checkbox__icon-line--disabled::after {
background: var(--td-checkbox-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-checkbox__content {
flex: 1;
}
.t-checkbox__title {
color: var(--td-checkbox-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
line-height: var(--td-checkbox-title-line-height, 48rpx);
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-checkbox__title--disabled {
color: var(--td-checkbox-title-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-checkbox__description {
color: var(--td-checkbox-description-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 28rpx;
line-height: var(--td-checkbox-description-line-height, 44rpx);
}
.t-checkbox__description--disabled {
color: var(--td-checkbox-description-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-checkbox__title + .t-checkbox__description:not(:empty) {
margin-top: 8rpx;
}
.t-checkbox__border {
position: absolute;
bottom: 0;
left: 96rpx;
right: 0;
height: 1px;
background: var(--td-checkbox-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
}
.t-checkbox__border--right {
left: 32rpx;
}
.t-checkbox--tag {
font-size: 28rpx;
padding-top: 16rpx;
padding-bottom: 16rpx;
text-align: center;
background-color: #f3f3f3;
border-radius: 12rpx;
}
.t-checkbox--tag.t-checkbox--checked {
color: var(--td-checkbox-tag-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-checkbox-tag-active-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-checkbox--tag .t-checkbox__title--checked {
color: var(--td-checkbox-tag-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-checkbox--tag .t-checkbox__content {
margin-right: 0;
}

3
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/props.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import { TdCheckboxProps } from './type';
declare const props: TdCheckboxProps;
export default props;

70
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/props.js Normal file
View File

@ -0,0 +1,70 @@
const props = {
block: {
type: Boolean,
value: true,
},
borderless: {
type: Boolean,
value: false,
},
checkAll: {
type: Boolean,
value: false,
},
checked: {
type: Boolean,
value: null,
},
defaultChecked: {
type: Boolean,
value: false,
},
content: {
type: String,
},
contentDisabled: {
type: Boolean,
},
disabled: {
type: null,
value: undefined,
},
externalClasses: {
type: Array,
},
icon: {
type: null,
value: 'circle',
},
indeterminate: {
type: Boolean,
value: false,
},
label: {
type: String,
},
maxContentRow: {
type: Number,
value: 5,
},
maxLabelRow: {
type: Number,
value: 3,
},
name: {
type: String,
value: '',
},
placement: {
type: String,
value: 'left',
},
readonly: {
type: Boolean,
value: false,
},
value: {
type: null,
},
};
export default props;

74
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/type.d.ts vendored Normal file
View File

@ -0,0 +1,74 @@
export interface TdCheckboxProps {
block?: {
type: BooleanConstructor;
value?: boolean;
};
borderless?: {
type: BooleanConstructor;
value?: boolean;
};
checkAll?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
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: null;
value?: 'circle' | 'line' | 'rectangle' | 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;
};
placement?: {
type: StringConstructor;
value?: 'left' | 'right';
};
readonly?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: string | number | boolean;
};
}

1
miniprogram/miniprogram_npm/tdesign-miniprogram/checkbox/type.js Normal file
View File

@ -0,0 +1 @@
export {};