Skip to content

Commit

Permalink
Merge branch 'docs-site-dev' of github.com:ant-design/ant-design-mini…
Browse files Browse the repository at this point in the history 
… into docs-site-dev
  • Loading branch information
@rayhomie
rayhomie committed Nov 20, 2024
2 parents bd04d37 + 5730473 commit 28a924d
Show file tree
Hide file tree
Showing 19 changed files with 46 additions and 84 deletions.
9 changes: 0 additions & 9 deletions compiled/alipay/src/NumberInput/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@
.ant-input-content {
height: 125rpx;
font-size: @sizeFont14;
font-family: AlibabaSans102Ver2-Medium;
line-height: 74rpx;
caret-color: @number-input-caret-color;
}
Expand Down Expand Up @@ -88,13 +87,5 @@
}
}
}

&-remaining {
display: flex;
align-items: baseline;
font-size: @sizeFont5;
gap: @h-spacing-standard;
color: @number-input-remaining-color;
}
}

23 changes: 11 additions & 12 deletions compiled/alipay/src/NumberInput/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,14 @@ supportPlatform: ['alipay']

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------ |
| --number-input-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | 背景颜色 |
| --number-input-title-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 标题颜色 |
| --number-input-link-color | <div style="width: 150px; height: 30px; background-color: #4b6b99; color: #ffffff;">#4b6b99</div> | <div style="width: 150px; height: 30px; background-color: #3f5980; color: #ffffff;">#3f5980</div> | 链接颜色 |
| --number-input-unit-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | 单位颜色 |
| --number-input-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | 边框颜色 |
| --number-input-prefix-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 前缀颜色 |
| --number-input-caret-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 插入符颜色 |
| --number-input-quick-text-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷文本颜色 |
| --number-input-quick-border-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷边框颜色 |
| --number-input-remaining-color | <div style="width: 150px; height: 30px; background-color: #666666; color: #ffffff;">#666666</div> | <div style="width: 150px; height: 30px; background-color: #808080; color: #ffffff;">#808080</div> | 剩余颜色 |
| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| --number-input-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | 背景颜色 |
| --number-input-title-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 标题颜色 |
| --number-input-link-color | <div style="width: 150px; height: 30px; background-color: #4b6b99; color: #ffffff;">#4b6b99</div> | <div style="width: 150px; height: 30px; background-color: #3f5980; color: #ffffff;">#3f5980</div> | 右上角链接颜色 |
| --number-input-unit-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | 输入框上方单位颜色 |
| --number-input-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | 分割线颜色 |
| --number-input-prefix-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 羊角符颜色 |
| --number-input-caret-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 光标颜色 |
| --number-input-quick-text-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷输入文本颜色 |
| --number-input-quick-border-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷输入边框颜色 |
5 changes: 1 addition & 4 deletions compiled/alipay/src/NumberInput/variable.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// 单位文字颜色
@number-input-unit-color: var(--number-input-unit-color, @COLOR_TEXT_ASSIST);

// 边框颜色
// 分割线
@number-input-border-color: var(--number-input-border-color, @COLOR_BORDER);

// 前缀文字颜色
Expand All @@ -27,6 +27,3 @@

// 快捷金额按钮边框颜色
@number-input-quick-border-color: var(--number-input-quick-border-color, @COLOR_BRAND1);

// 剩余额度文字颜色
@number-input-remaining-color: var(--number-input-remaining-color, @COLOR_TEXT_SECONDARY);
3 changes: 2 additions & 1 deletion compiled/alipay/src/Postscript/index.axml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
<!--手动输入区-->
<view class="ant-postscript-input">
<ant-input
value="{{value}}"
value="{{content}}"
maxLength="{{maxLength}}"
allowClear
placeholder="{{placeholder}}"
placeholderClassName="ant-postscript-input-placeholder {{placeholderClassName}}"
Expand Down
13 changes: 6 additions & 7 deletions compiled/alipay/src/Postscript/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,28 @@ Component(
PostscriptProps,
{
checkMaxLength(value) {
const maxLength = getValueFromProps(this, 'maxLength');
const maxLength = Number(getValueFromProps(this, 'maxLength'));
if (value.length > maxLength) {
return value.slice(0, maxLength);
}
return value;
},
handleInput(value) {
const result = this.checkMaxLength(value);
this.setData({ value: result });
triggerEvent(this, 'change', result);
this.setData({ content: value });
triggerEvent(this, 'change', value);
},

handleQuickInput(e) {
const { value } = e.currentTarget.dataset;
const combineSymbol = getValueFromProps(this, 'combineSymbol');
const result = this.checkMaxLength(combineSymbol
? `${this.data.value? `${this.data.value}${combineSymbol}` : ''}${value}`
? `${this.data.content? `${this.data.content}${combineSymbol}` : ''}${value}`
: value);
this.setData({ value: result });
this.setData({ content: result });
triggerEvent(this, 'change', result);
}
},
{
value: ''
content: ''
}
);
1 change: 0 additions & 1 deletion compiled/alipay/src/style/themes/theme-black.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,6 @@ page {
--number-input-caret-color: #3086ff;
--number-input-quick-text-color: #3086ff;
--number-input-quick-border-color: #3086ff;
--number-input-remaining-color: #808080;
// postScript
--postscript-background-color: #1a1a1a;
--postscript-title-color: #c5cad1;
Expand Down
4 changes: 1 addition & 3 deletions compiled/alipay/src/style/themes/theme-mode.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,11 +510,10 @@
--number-input-link-color:#4b6b99;
--number-input-unit-color: #999999;
--number-input-border-color: #eeeeee;
--number-input-prefix-color: #999999;
--number-input-prefix-color: #333333;
--number-input-caret-color: #1677ff;
--number-input-quick-text-color: #1677ff;
--number-input-quick-border-color: #1677ff;
--number-input-remaining-color: #666666;

// postScript
--postscript-background-color: #ffffff;
Expand Down Expand Up @@ -1026,7 +1025,6 @@
--number-input-caret-color: #3086ff;
--number-input-quick-text-color: #3086ff;
--number-input-quick-border-color: #3086ff;
--number-input-remaining-color: #808080;

// postScript
--postscript-background-color: #1a1a1a;
Expand Down
3 changes: 1 addition & 2 deletions compiled/alipay/src/style/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -516,11 +516,10 @@ page {
--number-input-link-color:#4b6b99;
--number-input-unit-color: #999999;
--number-input-border-color: #eeeeee;
--number-input-prefix-color: #999999;
--number-input-prefix-color: #333333;
--number-input-caret-color: #1677ff;
--number-input-quick-text-color: #1677ff;
--number-input-quick-border-color: #1677ff;
--number-input-remaining-color: #666666;

// postScript
--postscript-background-color: #ffffff;
Expand Down
1 change: 0 additions & 1 deletion compiled/wechat/src/style/themes/theme-black.wxss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,6 @@ page {
--number-input-caret-color: #3086ff;
--number-input-quick-text-color: #3086ff;
--number-input-quick-border-color: #3086ff;
--number-input-remaining-color: #808080;
--postscript-background-color: #1a1a1a;
--postscript-title-color: #c5cad1;
--postscript-input-color: #c5cad1;
Expand Down
4 changes: 1 addition & 3 deletions compiled/wechat/src/style/themes/theme-mode.wxss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,11 +388,10 @@
--number-input-link-color: #4b6b99;
--number-input-unit-color: #999999;
--number-input-border-color: #eeeeee;
--number-input-prefix-color: #999999;
--number-input-prefix-color: #333333;
--number-input-caret-color: #1677ff;
--number-input-quick-text-color: #1677ff;
--number-input-quick-border-color: #1677ff;
--number-input-remaining-color: #666666;
--postscript-background-color: #ffffff;
--postscript-title-color: #333;
--postscript-input-color: #333;
Expand Down Expand Up @@ -779,7 +778,6 @@
--number-input-caret-color: #3086ff;
--number-input-quick-text-color: #3086ff;
--number-input-quick-border-color: #3086ff;
--number-input-remaining-color: #808080;
--postscript-background-color: #1a1a1a;
--postscript-title-color: #c5cad1;
--postscript-input-color: #c5cad1;
Expand Down
3 changes: 1 addition & 2 deletions compiled/wechat/src/style/variables.wxss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,11 +386,10 @@ page {
--number-input-link-color: #4b6b99;
--number-input-unit-color: #999999;
--number-input-border-color: #eeeeee;
--number-input-prefix-color: #999999;
--number-input-prefix-color: #333333;
--number-input-caret-color: #1677ff;
--number-input-quick-text-color: #1677ff;
--number-input-quick-border-color: #1677ff;
--number-input-remaining-color: #666666;
--postscript-background-color: #ffffff;
--postscript-title-color: #333;
--postscript-input-color: #333;
Expand Down
9 changes: 0 additions & 9 deletions src/NumberInput/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@
.ant-input-content {
height: 125rpx;
font-size: @sizeFont14;
font-family: AlibabaSans102Ver2-Medium;
line-height: 74rpx;
caret-color: @number-input-caret-color;
}
Expand Down Expand Up @@ -88,13 +87,5 @@
}
}
}

&-remaining {
display: flex;
align-items: baseline;
font-size: @sizeFont5;
gap: @h-spacing-standard;
color: @number-input-remaining-color;
}
}

23 changes: 11 additions & 12 deletions src/NumberInput/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,14 @@ supportPlatform: ['alipay']

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------ |
| --number-input-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | 背景颜色 |
| --number-input-title-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 标题颜色 |
| --number-input-link-color | <div style="width: 150px; height: 30px; background-color: #4b6b99; color: #ffffff;">#4b6b99</div> | <div style="width: 150px; height: 30px; background-color: #3f5980; color: #ffffff;">#3f5980</div> | 链接颜色 |
| --number-input-unit-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | 单位颜色 |
| --number-input-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | 边框颜色 |
| --number-input-prefix-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 前缀颜色 |
| --number-input-caret-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 插入符颜色 |
| --number-input-quick-text-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷文本颜色 |
| --number-input-quick-border-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷边框颜色 |
| --number-input-remaining-color | <div style="width: 150px; height: 30px; background-color: #666666; color: #ffffff;">#666666</div> | <div style="width: 150px; height: 30px; background-color: #808080; color: #ffffff;">#808080</div> | 剩余颜色 |
| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| --number-input-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | 背景颜色 |
| --number-input-title-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 标题颜色 |
| --number-input-link-color | <div style="width: 150px; height: 30px; background-color: #4b6b99; color: #ffffff;">#4b6b99</div> | <div style="width: 150px; height: 30px; background-color: #3f5980; color: #ffffff;">#3f5980</div> | 右上角链接颜色 |
| --number-input-unit-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | 输入框上方单位颜色 |
| --number-input-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">#eeeeee</div> | <div style="width: 150px; height: 30px; background-color: #2b2b2b; color: #ffffff;">#2b2b2b</div> | 分割线颜色 |
| --number-input-prefix-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 羊角符颜色 |
| --number-input-caret-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 光标颜色 |
| --number-input-quick-text-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷输入文本颜色 |
| --number-input-quick-border-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 快捷输入边框颜色 |
5 changes: 1 addition & 4 deletions src/NumberInput/variable.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// 单位文字颜色
@number-input-unit-color: var(--number-input-unit-color, @COLOR_TEXT_ASSIST);

// 边框颜色
// 分割线
@number-input-border-color: var(--number-input-border-color, @COLOR_BORDER);

// 前缀文字颜色
Expand All @@ -27,6 +27,3 @@

// 快捷金额按钮边框颜色
@number-input-quick-border-color: var(--number-input-quick-border-color, @COLOR_BRAND1);

// 剩余额度文字颜色
@number-input-remaining-color: var(--number-input-remaining-color, @COLOR_TEXT_SECONDARY);
3 changes: 2 additions & 1 deletion src/Postscript/index.axml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<!-- 手动输入区 -->
<view class="ant-postscript-input">
<ant-input
value="{{value}}"
value="{{content}}"
maxLength="{{maxLength}}"
allowClear
placeholder="{{placeholder}}"
placeholderClassName="ant-postscript-input-placeholder {{placeholderClassName}}"
Expand Down
Loading

0 comments on commit 28a924d

Please sign in to comment.