project init & fix ui
This commit is contained in:
22
miniprogram_npm/tdesign-miniprogram/switch/README.en-US.md
Normal file
22
miniprogram_npm/tdesign-miniprogram/switch/README.en-US.md
Normal file
@@ -0,0 +1,22 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Switch Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-value | Array | [true, false] | Typescript：`Array<SwitchValue>` | N
|
||||
disabled | Boolean | false | \- | N
|
||||
icon | Array | [] | Typescript：`string[]` | N
|
||||
label | Array | [] | Typescript：`string[]` | N
|
||||
loading | Boolean | false | \- | N
|
||||
size | String | medium | options：small/medium/large | N
|
||||
style | String | - | \- | N
|
||||
value | String / Number / Boolean | null | Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
|
||||
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
|
||||
|
||||
### Switch Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: SwitchValue)` | \-
|
||||
60
miniprogram_npm/tdesign-miniprogram/switch/README.md
Normal file
60
miniprogram_npm/tdesign-miniprogram/switch/README.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Switch 开关
|
||||
description: 用于控制某个功能的开启和关闭。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-82%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-switch": "tdesign-miniprogram/switch/switch"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础开关
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 带描述开关
|
||||
|
||||
{{ label }}
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
{{ color }}
|
||||
|
||||
### 开关状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 尺寸
|
||||
|
||||
{{ size }}
|
||||
|
||||
## API
|
||||
### Switch Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
custom-value | Array | [true, false] | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array<SwitchValue>` | N
|
||||
disabled | Boolean | false | 是否禁用组件 | N
|
||||
icon `v0.27.0` | Array | [] | 开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N
|
||||
label `v0.27.0` | Array | [] | 开关的标签；[打开时的标签，关闭时的标签]。TS 类型：`string[]` | N
|
||||
loading `v0.27.0` | Boolean | false | 是否处于加载中状态 | N
|
||||
size `v0.27.0` | String | medium | 开关尺寸。可选项：small/medium/large | N
|
||||
value | String / Number / Boolean | null | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
|
||||
default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N
|
||||
|
||||
### Switch Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: SwitchValue)` | 数据发生变化时触发
|
||||
3
miniprogram_npm/tdesign-miniprogram/switch/props.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/switch/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdSwitchProps } from './type';
|
||||
declare const props: TdSwitchProps;
|
||||
export default props;
|
||||
39
miniprogram_npm/tdesign-miniprogram/switch/props.js
Normal file
39
miniprogram_npm/tdesign-miniprogram/switch/props.js
Normal file
@@ -0,0 +1,39 @@
|
||||
const props = {
|
||||
customValue: {
|
||||
type: Array,
|
||||
value: [true, false],
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
icon: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
label: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium',
|
||||
},
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
21
miniprogram_npm/tdesign-miniprogram/switch/switch.d.ts
vendored
Normal file
21
miniprogram_npm/tdesign-miniprogram/switch/switch.d.ts
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Switch extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: import("./type").TdSwitchProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
checked: boolean;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
observers: {
|
||||
value(val: any): void;
|
||||
};
|
||||
methods: {
|
||||
handleSwitch(): void;
|
||||
};
|
||||
}
|
||||
53
miniprogram_npm/tdesign-miniprogram/switch/switch.js
Normal file
53
miniprogram_npm/tdesign-miniprogram/switch/switch.js
Normal file
@@ -0,0 +1,53 @@
|
||||
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 { wxComponent, SuperComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-switch`;
|
||||
let Switch = class Switch extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = ['t-class', 't-class-label', 't-class-body', 't-class-dot'];
|
||||
this.behaviors = ['wx://form-field'];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
checked: false,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.observers = {
|
||||
value(val) {
|
||||
const [activeValue] = this.data.customValue;
|
||||
this.setData({
|
||||
checked: val === activeValue,
|
||||
});
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
handleSwitch() {
|
||||
const { disabled, value, customValue } = this.data;
|
||||
const [activeValue, inactiveValue] = customValue;
|
||||
if (disabled)
|
||||
return;
|
||||
this._trigger('change', {
|
||||
value: value === activeValue ? inactiveValue : activeValue,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Switch = __decorate([
|
||||
wxComponent()
|
||||
], Switch);
|
||||
export default Switch;
|
||||
7
miniprogram_npm/tdesign-miniprogram/switch/switch.json
Normal file
7
miniprogram_npm/tdesign-miniprogram/switch/switch.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading"
|
||||
}
|
||||
}
|
||||
31
miniprogram_npm/tdesign-miniprogram/switch/switch.wxml
Normal file
31
miniprogram_npm/tdesign-miniprogram/switch/switch.wxml
Normal file
@@ -0,0 +1,31 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{ prefix }}-class {{classPrefix}}"
|
||||
bind:tap="handleSwitch"
|
||||
aria-checked="{{checked}}"
|
||||
aria-disabled="{{disabled}}"
|
||||
aria-role="switch"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled], size])}} {{prefix}}-class-body"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot"
|
||||
aria-hidden="{{true}}"
|
||||
>
|
||||
<view
|
||||
wx:if="{{label}}"
|
||||
class="{{_.cls(classPrefix + '__label', [['checked', checked], size])}} {{prefix}}-class-label"
|
||||
>
|
||||
<t-loading wx:if="{{loading}}" inherit-color size="32rpx" class="{{classPrefix}}__loading" />
|
||||
<text wx:elif="{{label.length == 2}}">{{checked ? label[1] : label[0]}}</text>
|
||||
<t-icon
|
||||
wx:elif="{{icon.length == 2}}"
|
||||
name="{{checked ? icon[1] : icon[0]}}"
|
||||
class="{{_.cls(classPrefix + '__icon', [['checked', checked], size])}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
155
miniprogram_npm/tdesign-miniprogram/switch/switch.wxss
Normal file
155
miniprogram_npm/tdesign-miniprogram/switch/switch.wxss
Normal file
@@ -0,0 +1,155 @@
|
||||
.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-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-switch__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
font-size: var(--td-swtich-label-font-size, 28rpx);
|
||||
color: var(--td-switch-label-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-switch__label--checked {
|
||||
color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-primary-color, #0052d9)));
|
||||
}
|
||||
.t-switch__label--large {
|
||||
font-size: var(--td-swtich-label-font-size, 32rpx);
|
||||
}
|
||||
.t-switch__label--small {
|
||||
font-size: var(--td-swtich-label-font-size, 24rpx);
|
||||
}
|
||||
.t-switch__label:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-switch__icon {
|
||||
font-size: var(--td-switch-icon-size, 40rpx);
|
||||
}
|
||||
.t-switch__icon--large {
|
||||
font-size: var(--td-switch-icon-large-size, 48rpx);
|
||||
}
|
||||
.t-switch__icon--small {
|
||||
font-size: var(--td-switch-icon-small-size, 32rpx);
|
||||
}
|
||||
.t-switch__loading {
|
||||
color: var(--td-switch-label-checked-color, var(--td-switch-checked-color, var(--td-primary-color, #0052d9)));
|
||||
}
|
||||
.t-switch__body {
|
||||
vertical-align: middle;
|
||||
width: var(--td-switch-width, 90rpx);
|
||||
height: var(--td-switch-height, 56rpx);
|
||||
border-radius: var(--td-switch-radius, calc(var(--td-switch-height, 56rpx) / 2));
|
||||
background-color: var(--td-switch-unchecked-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-switch__body--checked {
|
||||
background-color: var(--td-switch-checked-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-switch__body--disabled {
|
||||
background-color: var(--td-switch-unchecked-disabled-color, var(--td-gray-color-2, #eeeeee));
|
||||
}
|
||||
.t-switch__body--checked.t-switch__body--disabled {
|
||||
background-color: var(--td-switch-checked-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-switch__body--large {
|
||||
width: var(--td-switch-large-width, 104rpx);
|
||||
height: var(--td-switch-large-height, 64rpx);
|
||||
border-radius: var(--td-switch-large-radius, calc(var(--td-switch-large-height, 64rpx) / 2));
|
||||
}
|
||||
.t-switch__body--small {
|
||||
width: var(--td-switch-small-width, 78rpx);
|
||||
height: var(--td-switch-small-height, 48rpx);
|
||||
border-radius: var(--td-switch-small-radius, calc(var(--td-switch-small-height, 48rpx) / 2));
|
||||
}
|
||||
.t-switch__dot {
|
||||
position: absolute;
|
||||
left: var(--td-switch-dot-horizontal-margin, 6rpx);
|
||||
top: 50%;
|
||||
width: var(--td-switch-dot-size, 44rpx);
|
||||
height: var(--td-switch-dot-size, 44rpx);
|
||||
border-radius: 50%;
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
transition: all 0.3s;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: var(--td-switch-dot-shadow, var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)));
|
||||
}
|
||||
.t-switch__dot:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: 1px solid var(--td-switch-dot-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||
border-radius: 50%;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.t-switch__dot--large {
|
||||
width: var(--td-switch-dot-large-size, 52rpx);
|
||||
height: var(--td-switch-dot-large-size, 52rpx);
|
||||
}
|
||||
.t-switch__dot--small {
|
||||
width: var(--td-switch-dot-small-size, 36rpx);
|
||||
height: var(--td-switch-dot-small-size, 36rpx);
|
||||
}
|
||||
.t-switch__dot--checked {
|
||||
left: calc(var(--td-switch-width, 90rpx) - var(--td-switch-dot-size, 44rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
|
||||
}
|
||||
.t-switch__dot--large.t-switch__dot--checked {
|
||||
left: calc(var(--td-switch-large-width, 104rpx) - var(--td-switch-dot-large-size, 52rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
|
||||
}
|
||||
.t-switch__dot--small.t-switch__dot--checked {
|
||||
left: calc(var(--td-switch-small-width, 78rpx) - var(--td-switch-dot-small-size, 36rpx) - var(--td-switch-dot-horizontal-margin, 6rpx));
|
||||
}
|
||||
.t-switch__dot--plain:not(.t-switch__dot--checked) {
|
||||
width: var(--td-switch-dot-plain-size, 36rpx);
|
||||
height: var(--td-switch-dot-plain-size, 36rpx);
|
||||
left: var(--td-switch-dot-plain-horizontal-margin, 10rpx);
|
||||
}
|
||||
.t-switch__dot--large.t-switch__dot--plain:not(.t-switch__dot--checked) {
|
||||
width: var(--td-switch-dot-plain-large-size, 44rpx);
|
||||
height: var(--td-switch-dot-plain-large-size, 44rpx);
|
||||
}
|
||||
.t-switch__dot--small.t-switch__dot--plain:not(.t-switch__dot--checked) {
|
||||
width: var(--td-switch-dot-plain-small-size, 28rpx);
|
||||
height: var(--td-switch-dot-plain-small-size, 28rpx);
|
||||
}
|
||||
39
miniprogram_npm/tdesign-miniprogram/switch/type.d.ts
vendored
Normal file
39
miniprogram_npm/tdesign-miniprogram/switch/type.d.ts
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
export interface TdSwitchProps {
|
||||
customValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<SwitchValue>;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: ArrayConstructor;
|
||||
value?: string[];
|
||||
};
|
||||
label?: {
|
||||
type: ArrayConstructor;
|
||||
value?: string[];
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'small' | 'medium' | 'large';
|
||||
};
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: SwitchValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: SwitchValue;
|
||||
};
|
||||
}
|
||||
export declare type SwitchValue = string | number | boolean;
|
||||
1
miniprogram_npm/tdesign-miniprogram/switch/type.js
Normal file
1
miniprogram_npm/tdesign-miniprogram/switch/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user