limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

白色主题

Browse Source
This commit is contained in:
limqhz
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
miniprogram_npm/tdesign-miniprogram/input/README.md
View File

@@ -72,7 +72,7 @@ isComponent: true
-- | -- | -- | -- | --
align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
borderless | Boolean | true | 是否开启无边框模式 | N
borderless | Boolean | false | 是否开启无边框模式 | N
clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
disabled | Boolean | false | 是否禁用输入框 | N
@@ -85,7 +85,7 @@ maxlength | Number | - | 用户最多可以输入的文本长度，一个中文
placeholder | String | undefined | 占位符 | N
prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`。 | N
readonly | Boolean | false | 【开发中】只读状态 | N
size | String | medium | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
size | String | medium | 【已废弃】输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
status | String | - | 输入框状态。可选项：success/warning/error | N
suffix | String / Slot | - | 后置图标前的后置内容 | N
suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`。 | N

1
miniprogram_npm/tdesign-miniprogram/input/input.js
View File

@@ -17,6 +17,7 @@ let Input = class Input extends SuperComponent {
multipleSlots: true,
};
this.externalClasses = [
'class',
`${prefix}-class`,
`${prefix}-class-prefix-icon`,
`${prefix}-class-label`,

15
miniprogram_npm/tdesign-miniprogram/input/input.wxml
View File

@@ -3,12 +3,11 @@
<wxs src="./input.wxs" module="this" />
<view
style="{{ customStyle }}"
class="{{classPrefix}} {{classPrefix}}--size-{{size}} {{classPrefix}}--layout-{{layout}} {{prefix}}-class"
style="{{ style }}"
class="{{_.cls(classPrefix, [['border', !borderless]])}} {{classPrefix}}--layout-{{layout}} class {{prefix}}-class"
aria-describedby
>
<!-- aria-describedby用于关联该行设置了aria-hidden的元素最近的焦点，解决触发焦点过度上下偏移的问题 -->
<view wx:if="{{prefixIconName || _.isNoEmptyObj(prefixIconData) || label}}" class="{{classPrefix}}__wrap--prefix">
<view wx:if="{{prefixIconName || _.isNoEmptyObj(prefixIconData)}}" class="{{classPrefix}}__icon--prefix">
<slot wx:if="{{prefixIconName === 'slot'}}" name="prefix-icon" />
@@ -25,7 +24,7 @@
</view>
<view class="{{classPrefix}}__wrap">
<view class="{{classPrefix}}__content {{classPrefix}}--{{status}} {{borderless ? '' : classPrefix + '--border'}}">
<view class="{{classPrefix}}__content {{classPrefix}}--{{status}}">
<input
disabled="{{disabled}}"
placeholder="{{placeholder}}"
@@ -62,10 +61,10 @@
aria-roledescription="{{label}}"
/>
<!--
这里aria-role="textbox"和aria-label组合使用实现ios的聚合焦点播报效果。
ios会播报aria-label，不会重复播报aria-roledescription的内容；
安卓不会播报aria-label，会播报aria-roledescription的内容
-->
这里aria-role="textbox"和aria-label组合使用实现ios的聚合焦点播报效果。
ios会播报aria-label，不会重复播报aria-roledescription的内容；
安卓不会播报aria-label，会播报aria-roledescription的内容
-->
<view
wx:if="{{(clearableName || _.isNoEmptyObj(clearableData)) && value.length > 0}}"

68
miniprogram_npm/tdesign-miniprogram/input/input.wxss
View File

@@ -26,9 +26,33 @@
transform: scale(1.5);
}
.t-input {
position: relative;
background-color: var(--td-input-bg-color, var(--td-bg-color-block, #fff));
display: flex;
background: var(--td-input-bg-color, var(--td-bg-color-block, #fff));
flex: 1;
padding: var(--td-input-vertical-padding, 32rpx);
}
.t-input--border {
position: relative;
}
.t-input--border::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-input-border-color, var(--td-gray-color-3, #e7e7e7));
}
.t-input--border::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-input--border:after {
left: var(--td-input-border-left-space, 32rpx);
right: var(--td-input-border-right-space, 0);
}
.t-input--layout-vertical {
flex-direction: column;
@@ -41,8 +65,8 @@
color: var(--td-input-prefix-icon-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
}
.t-input__label:not(:empty) {
min-width: 150rpx;
max-width: 150rpx;
min-width: 2em;
max-width: 5em;
font-size: var(--td-font-size-m, 32rpx);
line-height: 48rpx;
color: var(--td-input-label-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
@@ -56,14 +80,15 @@
}
.t-input__wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: auto;
align-items: center;
justify-content: center;
flex-shrink: 1;
flex: 1;
}
.t-input__wrap .t-input__content {
display: flex;
align-items: center;
width: 100%;
line-height: 48rpx;
font-size: var(--td-font-size-m, 32rpx);
}
@@ -102,6 +127,7 @@
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 48rpx;
margin: 0;
padding: 0;
color: var(--td-input-default-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
@@ -133,36 +159,18 @@
}
.t-input__tips {
font-size: var(--td-font-size-s, 24rpx);
color: var(--td-input-default-tips-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
line-height: 40rpx;
padding-top: 8rpx;
}
.t-input--border {
padding: 24rpx 32rpx;
border-radius: var(--td-input-border-radius, var(--td-radius-default, 12rpx));
border: 3rpx solid var(--td-input-default-border-color, var(--td-border-color, #e7e7e7));
}
.t-input--success.t-input--border {
border-color: var(--td-input-success-border-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
.t-input--default + .t-input__tips {
color: var(--td-input-default-tips-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
}
.t-input--success + .t-input__tips {
color: var(--td-input-success-border-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
}
.t-input--warning.t-input--border {
border-color: var(--td-input-warning-border-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
color: var(--td-input-success-tips-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
}
.t-input--warning + .t-input__tips {
color: var(--td-input-warning-border-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
}
.t-input--error.t-input--border {
border-color: var(--td-input-error-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
color: var(--td-input-warning-tips-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
}
.t-input--error + .t-input__tips {
color: var(--td-input-error-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-input--size-medium {
padding: 32rpx 32rpx;
}
.t-input--size-small {
padding: 24rpx 32rpx;
color: var(--td-input-error-tips-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}

4
miniprogram_npm/tdesign-miniprogram/input/props.js
View File

@@ -9,13 +9,13 @@ const props = {
},
borderless: {
type: Boolean,
value: true,
value: false,
},
clearable: {
type: null,
value: false,
},
customStyle: {
style: {
type: String,
value: '',
},

2
miniprogram_npm/tdesign-miniprogram/input/type.d.ts vendored
View File

@@ -15,7 +15,7 @@ export interface TdInputProps {
type: null;
value?: boolean | object;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};