diff --git a/.eslintrc.js b/.eslintrc.js index 3275161601..b70b758921 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,7 +6,7 @@ module.exports = { mocha: true, jest: true, }, - extends: ['eslint-config-airbnb-base'], + extends: ['airbnb-base'], parser: '@typescript-eslint/parser', plugins: [ '@typescript-eslint', diff --git a/.gitignore b/.gitignore index 88272e0e12..f09bacd343 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,8 @@ package-lock.json **/package-lock.json yarn.lock **/yarn.lock +pnpm-lock.yaml +**/pnpm-lock.yaml **/node_modules **/dist dist/ @@ -37,3 +39,7 @@ temp* # test coverage test-report.html + +# lint +.eslintcache +.stylelintcache diff --git a/.stylelintrc b/.stylelintrc index a4f6ae60e7..3fbeb5629e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -27,7 +27,18 @@ "no-descending-specificity": null, "selector-type-no-unknown": null, "color-function-notation": "legacy", - "value-keyword-case": null + "value-keyword-case": null, + "property-no-unknown": [true, { "checkPrefixed": true }] }, - "overrides": [{ "files": ["**/*.less"], "customSyntax": "postcss-less" }] + "overrides": [ + { "files": ["**/*.less"], "customSyntax": "postcss-less" }, + { + "files": ["style/web/components/**/*.less"], + "ignoreFiles": ["**/_docs.less"], + "rules": { + "color-no-hex": true, + "color-named": "never" + } + } + ] } diff --git a/docs/compile/index.js b/docs/compile/index.js index 8b125f4319..3c7c262817 100644 --- a/docs/compile/index.js +++ b/docs/compile/index.js @@ -1,4 +1,5 @@ import fs from 'fs'; +import { spawn } from 'node:child_process'; /** * 渲染 live demo 逻辑，提取 md 头信息生成框架需要的字符串 @@ -26,6 +27,26 @@ export function compileUsage(options) { }; } +/** + * 获取文件 git 最后更新时间 + * @param {string} file + * @returns {Promise} + */ +export function getGitTimestamp(file) { + return new Promise((resolve, reject) => { + const child = spawn('git', ['log', '-1', '--pretty="%ci"', file]); + let output = ''; + child.stdout.on('data', (d) => { + output += String(d); + }); + child.on('close', () => { + resolve(+new Date(output)); + }); + child.on('error', reject); + }); +} + export default { - compileUsage + compileUsage, + getGitTimestamp }; diff --git a/docs/miniprogram/_design/ActionSheet.md b/docs/miniprogram/_design/ActionSheet.md new file mode 100644 index 0000000000..c92df4642e --- /dev/null +++ b/docs/miniprogram/_design/ActionSheet.md @@ -0,0 +1,75 @@ +# 动作面板 ActionSheet + +## 组件设计指南 + +### 何时使用 + +需要提供一组与当前场景操作相关的关联操作时使用。 + +### 组件搭配使用 + +##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。 + +
+ +
+ + +### 常见用法 +##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ +
+ +
+ +##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 动作面板中的操作项不建议用icon完成替代文字。 + +
+
+ + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/Badge.md b/docs/miniprogram/_design/Badge.md new file mode 100644 index 0000000000..019cf6285e --- /dev/null +++ b/docs/miniprogram/_design/Badge.md @@ -0,0 +1,70 @@ +# 徽标 Badge + +## 组件设计指南 + +### 何时使用 + +当需要展示特定对象的状态变化或承载运营性质提示时使用。 + +### 组件搭配使用 + +##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。 + +
+
+ +
+
+ + +### 常见用法 + +##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标；当提示的信息需要精确显示数量时，应使用带数字的徽标。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 建议根据场景和信息类型定义最长字数，不宜出现过长的情况。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------ | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | diff --git a/docs/miniprogram/_design/Button.md b/docs/miniprogram/_design/Button.md new file mode 100644 index 0000000000..e12730d4aa --- /dev/null +++ b/docs/miniprogram/_design/Button.md @@ -0,0 +1,83 @@ +# 按钮 Button + +## 组件设计指南 + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
+
+ + +
+
+ +
+ +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | +| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/_design/Calendar.md b/docs/miniprogram/_design/Calendar.md new file mode 100644 index 0000000000..6d174c5451 --- /dev/null +++ b/docs/miniprogram/_design/Calendar.md @@ -0,0 +1,53 @@ +# 日历 Calendar + +## 组件设计指南 + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。 + +
+ +
+ +### 推荐/慎用 + +##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 区间选择尽量使用在较短时间的场景中，当涉及的时间通常在数月、数年的长度时，建议使用其它方式让用户输入。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------- | :------------------------------------- | +| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/miniprogram/_design/Cell.md b/docs/miniprogram/_design/Cell.md new file mode 100644 index 0000000000..9d07a5ec62 --- /dev/null +++ b/docs/miniprogram/_design/Cell.md @@ -0,0 +1,57 @@ +# 单元格 Cell + +## 组件设计指南 + +### 常见用法 + +##### 常用作内容详情入口或功能入口的平铺陈列。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用作同类型同格式信息项平铺陈列。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 作为入口时，不建议承载过多过复杂的内容。 + +
+
+ + +
+
+ +
+ +##### 作为入口时，不建议在一个单元格内承载其他操作。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。| diff --git a/docs/miniprogram/_design/Checkbox.md b/docs/miniprogram/_design/Checkbox.md new file mode 100644 index 0000000000..efa45d60a0 --- /dev/null +++ b/docs/miniprogram/_design/Checkbox.md @@ -0,0 +1,55 @@ +# 多选框 Checkbox + +## 组件设计指南 + +### 何时使用 + +当用户需要从一组数据选择多个选项时使用。 + +### 组件搭配使用 + +##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 + + +
+ + +
+ + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 | diff --git a/docs/miniprogram/_design/Collapse.md b/docs/miniprogram/_design/Collapse.md new file mode 100644 index 0000000000..3f41991f7c --- /dev/null +++ b/docs/miniprogram/_design/Collapse.md @@ -0,0 +1,65 @@ +# 折叠面板 Collapse + +## 组件设计指南 + +### 何时使用 + +当信息较多，需要进行收纳时使用。 + +### 常见用法 + +##### 经常用于信息种类较多的页面，将相对次要的信息收纳起来，让用户能够关注到页面中的主要信息或流程。 + +
+ +
+ +
+ +##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。 + +
+
+ +
+
+ +
+ +##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 当信息层级较多时，不建议嵌套折叠面板，层级过多时建议审视信息结构或使用其它交互方式展示。 + +
+
+ + +
+
+ +
+ +##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [下拉菜单](./dropdown-menu) |当内容较多时，需要通过筛选快速定位某一类内容时使用。| diff --git a/docs/miniprogram/_design/CountDown.md b/docs/miniprogram/_design/CountDown.md new file mode 100644 index 0000000000..fa50e0b56a --- /dev/null +++ b/docs/miniprogram/_design/CountDown.md @@ -0,0 +1,52 @@ +# 倒计时 CountDown + +## 组件设计指南 + +### 何时使用 + +当需要向用户提示剩余时间时使用。 + +### 常见用法 + +##### 在营销场景下，通过倒计时向用户展示运营活动开始倒计时或距活动结束的剩余时间，从而体现稀缺性吸引目标受众的注意力，勾起足够兴趣以此激励用户参与。 + +
+
+ +
+
+ +
+ +##### 在一些工作流场景下，提示用户还剩余多少时间来完成某项任务或处理某些事项，强化时间概念。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议在同一个页面滥用倒计时，若需要反复使用，建议用较为轻量的样式. + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/miniprogram/_design/DateTimePicker.md b/docs/miniprogram/_design/DateTimePicker.md new file mode 100644 index 0000000000..173b7e5df0 --- /dev/null +++ b/docs/miniprogram/_design/DateTimePicker.md @@ -0,0 +1,44 @@ +# 时间选择器 DateTimePicker + +## 组件设计指南 + +### 何时使用 + +在表单中需要输入单个日期或时间时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。 + +
+ +
+ +### 常见用法 + +##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。 + +
+ +
+ +
+ +
+ +### 推荐/慎用示例 + +##### 选择时间后，建议使用标准化格式在表单中书写日期和时间。 + +
+
+ + +
+
+ + +### 何时使用 +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------- | +| [日历](./Calendar) | 在表单中需要精确输入单个、多个、或区间日期时使用。 | diff --git a/docs/miniprogram/_design/Dialog.md b/docs/miniprogram/_design/Dialog.md new file mode 100644 index 0000000000..98ae7ed66f --- /dev/null +++ b/docs/miniprogram/_design/Dialog.md @@ -0,0 +1,74 @@ +# 对话框 Dialog + +## 组件设计指南 + +### 何时使用 + +需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。 + +### 组件搭配使用 + +##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。 + +
+ +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 用于较为重要的信息提示。 + +
+
+ +
+
+ +
+ +##### 用于较为重要的信息提示，且需要用户决定。 + +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。 + +
+
+ + +
+ +
+ + +
+
+ + +### 何时使用 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [轻提示](./toast) |当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。| +| [消息通知](./message) |当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。| + diff --git a/docs/miniprogram/_design/Divider.md b/docs/miniprogram/_design/Divider.md new file mode 100644 index 0000000000..7c918325f6 --- /dev/null +++ b/docs/miniprogram/_design/Divider.md @@ -0,0 +1,55 @@ +# 分割线 Divider + +## 组件设计指南 + +### 何时使用 + +为了区分内容与内容之间的分组、层级关系时可使用。 + +### 与页面布局相关 + +##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。 + +
+
+ + +
+
+ +
+ +##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 + +
+
+ + +
+
+
+ +##### 组合分割线：通栏分割线与内嵌分割线组合布局。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/miniprogram/_design/Drawer.md b/docs/miniprogram/_design/Drawer.md new file mode 100644 index 0000000000..02db126364 --- /dev/null +++ b/docs/miniprogram/_design/Drawer.md @@ -0,0 +1,57 @@ +# 抽屉 Drawer + +## 组件设计指南 + +### 何时使用 + +需要收折展示一组数量较多的菜单时使用 + +### 组件搭配使用 + +##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 + +
+ +
+ +### 常见用法 + +##### 在网站场景，通常用来收折展示整个网站的菜单导航。 + +
+ +
+ +
+ +##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [动作面板](./action-sheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/DropdownMenu.md b/docs/miniprogram/_design/DropdownMenu.md new file mode 100644 index 0000000000..0312d49913 --- /dev/null +++ b/docs/miniprogram/_design/DropdownMenu.md @@ -0,0 +1,50 @@ +# 下拉菜单 DropdownMenu + +## 组件设计指南 + +### 何时使用 + +当内容较多时，需要通过筛选快速定位某一类内容时使用。 + +### 常见用法 + +##### 常用于单个维度筛选或多个维度复合筛选的场景，可进行单选或多选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在单选的筛选场景内，建议将用户选择项替换标题显示于菜单面板内。 + +
+
+ + +
+
+ +
+ +##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./Cascader) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。| diff --git a/docs/miniprogram/_design/Empty.md b/docs/miniprogram/_design/Empty.md new file mode 100644 index 0000000000..e40a8081da --- /dev/null +++ b/docs/miniprogram/_design/Empty.md @@ -0,0 +1,46 @@ +# 空状态 Empty + +## 组件设计指南 + +### 何时使用 + +当页面或模块数据为空时使用。 + +### 与页面布局相关 + +##### 用于整个页面或某个独立模块的状态展示，在页面、模块内居中。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。 +
+
+ +
+
+ +
+ +##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。 + +
+
+ +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------- | +| [结果](./result) | 当需要向用户展示操作后的结果反馈时使用。 | diff --git a/docs/miniprogram/_design/Fab.md b/docs/miniprogram/_design/Fab.md new file mode 100644 index 0000000000..7d89149464 --- /dev/null +++ b/docs/miniprogram/_design/Fab.md @@ -0,0 +1,82 @@ +# 悬浮按钮 Fab + +## 组件设计指南 + +### 何时使用 + +当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 + +### 与页面布局相关 + +##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 组件搭配使用 + +##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ + +
+ + +### 推荐/慎用示例 + +##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | +| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | + diff --git a/docs/miniprogram/_design/Footer.md b/docs/miniprogram/_design/Footer.md new file mode 100644 index 0000000000..1f309b2644 --- /dev/null +++ b/docs/miniprogram/_design/Footer.md @@ -0,0 +1,63 @@ +# 页脚 Footer + +## 组件设计指南 + +### 何时使用 + +当页面底部需要放置一些补充信息和链接时使用。 + +### 与页面布局相关 + +##### 页脚通常位于网站每个页面底部或主体内容下方的区域。 + +
+
+ +
+
+ +### 常见用法 + +##### 用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。 + +
+
+ +
+
+ +
+ +##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。 + +
+
+ +
+
+ +
+ +##### 用于承载网站导航。 + +
+
+ +
+
+ +
+ +##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。 + +
+
+ +
+ +
+ +
+
+ + diff --git a/docs/miniprogram/_design/Grid.md b/docs/miniprogram/_design/Grid.md new file mode 100644 index 0000000000..177a790e75 --- /dev/null +++ b/docs/miniprogram/_design/Grid.md @@ -0,0 +1,90 @@ +# 宫格 Grid + +## 组件设计指南 + +### 何时使用 + +当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 + +### 组件搭配使用 + +##### 可与徽标组合使用，可作为消息提示、或其它相关的数量提示。 + +
+
+ +
+
+ +### 常见用法 + +##### 通常用于金刚区、或底部标签栏等，在页面中较为醒目的位置承载主要的功能入口。 + +
+
+ +
+
+ +
+ +##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当在金刚区使用宫格承载功能入口时，建议梳理功能的优先级，将金刚区控制在3行以内，一些相对次要的功能可通过左右滑动的方式收纳在第二屏。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单元格](./cell) |用于各个类别行的信息展示。| diff --git a/docs/miniprogram/_design/Image.md b/docs/miniprogram/_design/Image.md new file mode 100644 index 0000000000..92f3c745cb --- /dev/null +++ b/docs/miniprogram/_design/Image.md @@ -0,0 +1,57 @@ +# 图片 Image + +## 组件设计指南 + +### 何时使用 + +当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 + +### 组件搭配使用 + +##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。 + +
+
+ +
+
+ + + +### 推荐/慎用示例 + +##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片预览](./image-viewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/_design/ImageViewer.md b/docs/miniprogram/_design/ImageViewer.md new file mode 100644 index 0000000000..ae98582d3b --- /dev/null +++ b/docs/miniprogram/_design/ImageViewer.md @@ -0,0 +1,42 @@ +# 图片预览 ImageViewer + +## 组件设计指南 + +### 何时使用 + +当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 + +### 组件搭配使用 + +##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。 + +
+ +
+ +
+ +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 | diff --git a/docs/miniprogram/_design/Indexes.md b/docs/miniprogram/_design/Indexes.md new file mode 100644 index 0000000000..4396b37d86 --- /dev/null +++ b/docs/miniprogram/_design/Indexes.md @@ -0,0 +1,56 @@ +# 索引 Indexes + +## 组件设计指南 + +### 何时使用 + +当数据项较多时，为方便用户快速找到目标数据项时使用。 + +### 组件搭配使用 + +##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 索引项排序应具备一定的逻辑相关性。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/miniprogram/_design/Input.md b/docs/miniprogram/_design/Input.md new file mode 100644 index 0000000000..7df39948df --- /dev/null +++ b/docs/miniprogram/_design/Input.md @@ -0,0 +1,74 @@ +# 输入框 Input + +## 组件设计指南 + +### 何时使用 + +需要进行文字输入，且需填写的字数较少时使用。 + +### 组件搭配使用 + +##### 呈现在单元格中，可与按钮组件相结合，点击按钮触发相关功能。 + +
+
+ +
+
+ + +### 常见用法 + +##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。 + +
+ +
+ +
+ +##### 当需要进行较复杂的内容填写，如验证码等，可使用特定类型输入框，结合按钮、图形等辅助元素帮助用户完成流程。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------------- | :------------------------------------------- | +| [多行文本框](./textarea) | 需要进行文字输入，且需填写的字数较多时使用。 | +| [搜索框](./search) | 当需要从海量信息中准确提取准确的内容时使用。 | diff --git a/docs/miniprogram/_design/Loading.md b/docs/miniprogram/_design/Loading.md new file mode 100644 index 0000000000..3da3dde123 --- /dev/null +++ b/docs/miniprogram/_design/Loading.md @@ -0,0 +1,60 @@ +# 加载 loading + +## 组件设计指南 + +### 何时使用 + +当打开新页面或操作完成后，等待加载时使用。 + +### 与页面布局相关 + +##### 当展示整个页面、或模块的加载进度时，通常放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ + +### 组件搭配使用 + +##### 在信息流页面中，可结合下拉刷新使用，对未展示出来的最新内容进行加载。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------ | :--------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。 | diff --git a/docs/miniprogram/_design/Message.md b/docs/miniprogram/_design/Message.md new file mode 100644 index 0000000000..e0a7c42ff2 --- /dev/null +++ b/docs/miniprogram/_design/Message.md @@ -0,0 +1,52 @@ +# 消息通知 Message + +## 组件设计指南 + +### 何时使用 + +当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 + +### 与页面布局相关 + +##### 通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。 + +
+
+ + +
+
+ +
+ +##### 消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 | diff --git a/docs/miniprogram/_design/Picker.md b/docs/miniprogram/_design/Picker.md new file mode 100644 index 0000000000..5375b7e21c --- /dev/null +++ b/docs/miniprogram/_design/Picker.md @@ -0,0 +1,42 @@ +# 选择器 Picker + +## 组件设计指南 + +### 何时使用 + +当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 + +### 推荐/慎用示例 + +##### 选择器若为一组有层级关系的选项时，选项层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 选择器若为一组有层级关系的选项时，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------------- | :----------------------------------------------------------------------- | +| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。 | +| [级联选择器](./Cascader) | 当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/Popup.md b/docs/miniprogram/_design/Popup.md new file mode 100644 index 0000000000..cdafb95b2c --- /dev/null +++ b/docs/miniprogram/_design/Popup.md @@ -0,0 +1,55 @@ +# 弹出层 Popup + +## 组件设计指南 + +### 常见用法 + +##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。 + +
+ +
+ +
+ +
+ +
+ +
+ +##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。 + +
+ +
+ +
+ +##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。 + +
+
+ +
+
diff --git a/docs/miniprogram/_design/Progress.md b/docs/miniprogram/_design/Progress.md new file mode 100644 index 0000000000..d7b048c316 --- /dev/null +++ b/docs/miniprogram/_design/Progress.md @@ -0,0 +1,64 @@ +# 进度条 Progress + +## 组件设计指南 + +### 何时使用 + +当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 + +### 与页面布局相关 + +##### 当展示页面、模块的加载进度时，通常进度条放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。 + +
+
+ +
+
+ +
+ +##### 当任务时间较短、或难以预估剩余时间时，通常弱化进度的百分比信息，如使用隐藏数值进度条、或微型的环形进度条。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 若任务需要等待的时间很长，可以提供大概的时间估计，让用户更有预期。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/miniprogram/_design/PullDownRefresh.md b/docs/miniprogram/_design/PullDownRefresh.md new file mode 100644 index 0000000000..f43851d555 --- /dev/null +++ b/docs/miniprogram/_design/PullDownRefresh.md @@ -0,0 +1,63 @@ +# 下拉刷新 PullDownRefresh + +## 组件设计指南 + +### 何时使用 + +当需要对页面信息进行整体刷新或加载更多同类信息时使用。 + +### 与页面布局相关 + +##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。 + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。 + +
+
+ +
+
+ +
+ +##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。 + +
+
+ + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [加载](./loading) |当打开新页面或操作完成后，等待加载时使用。| + diff --git a/docs/miniprogram/_design/Radio.md b/docs/miniprogram/_design/Radio.md new file mode 100644 index 0000000000..7cd9b6f97a --- /dev/null +++ b/docs/miniprogram/_design/Radio.md @@ -0,0 +1,60 @@ +# 单选框 Radio + +## 组件设计指南 + +### 何时使用 + +当用户需要从一组数据选择一个选项时使用。 + +### 组件搭配使用 + +##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 | diff --git a/docs/miniprogram/_design/Rate.md b/docs/miniprogram/_design/Rate.md new file mode 100644 index 0000000000..849489aa7e --- /dev/null +++ b/docs/miniprogram/_design/Rate.md @@ -0,0 +1,55 @@ +# 评分 Rate + +## 组件设计指南 + +### 何时使用 + +当需要对某行为/事物进行简单的星级评定时使用。 + +### 组件搭配使用 + +##### 通常结合多行文本框、标签使用，常见于评论场景，用户对某事物进行星级评定后，可选择预设的文本标签、或在文本框中撰写内容来进行更详细的评价。 + +
+
+ +
+
+ +### 常见用法 + +##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。 +
+
+ + +
+
+ + diff --git a/docs/miniprogram/_design/Result.md b/docs/miniprogram/_design/Result.md new file mode 100644 index 0000000000..5c6a0997d3 --- /dev/null +++ b/docs/miniprogram/_design/Result.md @@ -0,0 +1,56 @@ +# 结果 Result + +## 组件设计指南 + +### 何时使用 + +当需要向用户展示操作后的结果反馈时使用。 + +### 常见用法 + +##### 任务本身在弹窗中进行或仅需要较为轻量的结果反馈时，可使用弹窗承载结果反馈。 + +
+
+ +
+
+ +
+ +##### 当任务结束并给予反馈后，需要推荐其他内容、任务、商品等给用户时，通常使用页面承载结果和推荐。 + +
+
+ +
+
+ +
+ +##### 当任务结果为失败时，通常会告知用户失败原因，甚至提供解决问题的操作。 + +
+
+ +
+
+ +
+ + +##### 当前操作结束后，若还存在一系列用户需关注的流程进度，通常会结合步骤条将流程展示于结果页。 + +
+
+ +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :--------------------------- | +| [空状态](./empty ) | 当页面或模块数据为空时使用。 | diff --git a/docs/miniprogram/_design/Search.md b/docs/miniprogram/_design/Search.md new file mode 100644 index 0000000000..4b56e46c62 --- /dev/null +++ b/docs/miniprogram/_design/Search.md @@ -0,0 +1,53 @@ +# 搜索框 Search + +## 组件设计指南 + +### 何时使用 + +当需要从海量信息中准确提取准确的内容时使用。 + +### 与页面布局相关 + +##### 位于页面或内容模块的最上方，通过搜索框、搜索icon等方式承载和触发功能。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。 + +
+ +
+ +
+ +##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。 + +
+ +
+ +
+ +##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。 + +
+ +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/miniprogram/_design/SideBar.md b/docs/miniprogram/_design/SideBar.md new file mode 100644 index 0000000000..6c5de1da91 --- /dev/null +++ b/docs/miniprogram/_design/SideBar.md @@ -0,0 +1,52 @@ +# 侧边栏 SideBar + +## 组件设计指南 + +### 何时使用 + +当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 + +### 组件搭配使用 + +##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 + +
+
+ +
+
+ + +### 正确/慎用示例 + +##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :---------------------------------------------------------------------------- | +| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/Slider.md b/docs/miniprogram/_design/Slider.md new file mode 100644 index 0000000000..3f3d43d7df --- /dev/null +++ b/docs/miniprogram/_design/Slider.md @@ -0,0 +1,61 @@ +# 滑动选择器 Slider + +## 组件设计指南 + +### 何时使用 + +当用户需要快捷地进行数值/程度选择时使用。 + +### 组件搭配使用 + +##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。 + +
+
+ +
+
+ + +### 常见用法 + +##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 + +
+
+ +
+
+ +
+ +##### 用于难以量化的对立数据，以此表示程度。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [步进器](./stepper) |需要进行数量选择时使用。| diff --git a/docs/miniprogram/_design/Steps.md b/docs/miniprogram/_design/Steps.md new file mode 100644 index 0000000000..21d64ed8c2 --- /dev/null +++ b/docs/miniprogram/_design/Steps.md @@ -0,0 +1,76 @@ +# 步骤条 Steps + +## 组件设计指南 + +### 何时使用 + +当需要展示较为复杂的线性流程时使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 + +
+ + +
+ +
+ +##### 尽量避免嵌套步骤条。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/_design/SwipeCell.md b/docs/miniprogram/_design/SwipeCell.md new file mode 100644 index 0000000000..ca53df15b6 --- /dev/null +++ b/docs/miniprogram/_design/SwipeCell.md @@ -0,0 +1,77 @@ +# 滑动操作 SwipeCell + +## 组件设计指南 + +### 何时使用 + +需要针对列表项目进行某项低频的辅助操作时使用。 + +### 组件搭配使用 + +##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 + +
+ + +
+ +
+ +##### 按钮的顺序、颜色使用需要符合用户预期。 +
+ + +
+ +
+ +##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。 +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/_design/Switch.md b/docs/miniprogram/_design/Switch.md new file mode 100644 index 0000000000..f11d087fbe --- /dev/null +++ b/docs/miniprogram/_design/Switch.md @@ -0,0 +1,33 @@ +# 开关 Switch + +## 组件设计指南 + +### 何时使用 + +当需要切换某个功能的开启、关闭时使用。 + +### 推荐/慎用示例 + +##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。 +
+
+ + +
+
diff --git a/docs/miniprogram/_design/TabBar.md b/docs/miniprogram/_design/TabBar.md new file mode 100644 index 0000000000..c3e1722bc4 --- /dev/null +++ b/docs/miniprogram/_design/TabBar.md @@ -0,0 +1,79 @@ +# 标签栏 TabBar + +## 组件设计指南 + +### 何时使用 + +目标模块/视图需要从应用的任何地方直接进行访问时使用。 + +### 组件搭配使用 + +##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 避免在同个状态下有不同颜色的文本和图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。 + +
+
+ + +
+
+ +
+ +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选项卡](./tabs) |当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/_design/Tabs.md b/docs/miniprogram/_design/Tabs.md new file mode 100644 index 0000000000..355ddb6761 --- /dev/null +++ b/docs/miniprogram/_design/Tabs.md @@ -0,0 +1,108 @@ +# 选项卡 Tabs + +## 组件设计指南 + +### 何时使用 + +当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。 + +
+
+ +
+
+ + +### 常见用法 + +##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议使用选项卡来实现功能模块间的切换。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。 + +
+ + +
+ +
+ + +
+ +
+ +##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [标签栏](./tab-bar) | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/_design/Tag.md b/docs/miniprogram/_design/Tag.md new file mode 100644 index 0000000000..054ed2642a --- /dev/null +++ b/docs/miniprogram/_design/Tag.md @@ -0,0 +1,88 @@ +# 标签 Tag + +## 组件设计指南 + +### 何时使用 + +当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 + +### 组件搭配使用 + +##### 与[图片](./image)组合使用，图片作为内容、商品等对象的详情入口时，可通过添加标签来展示该对象的属性、状态、类别、营销情况等。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。 + +
+
+ +
+
+ +### 常见用法 + +##### 常用于展示对象本身的属性、状态、类别、营销情况等信息，且仅作为展示使用。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用于内容数据基于某个维度或某些维度的检索、筛选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 标签颜色和字体颜色在明度、色相上要避免难以区分，保证标签的可读性。 + +
+
+ + +
+
+ +
+ +##### 标签文案需要经过概括和提炼，不建议过长。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。| diff --git a/docs/miniprogram/_design/Textarea.md b/docs/miniprogram/_design/Textarea.md new file mode 100644 index 0000000000..75f99e7cea --- /dev/null +++ b/docs/miniprogram/_design/Textarea.md @@ -0,0 +1,61 @@ +# 多行文本框 Textarea + +## 组件设计指南 + +### 何时使用 + +需要进行文字输入，且需填写的字数较多时使用。 + +### 常见用法 + +##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议根据待输入的内容决定多行文本框的高度。 +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | + diff --git a/docs/miniprogram/_design/Toast.md b/docs/miniprogram/_design/Toast.md new file mode 100644 index 0000000000..0846bfe2e9 --- /dev/null +++ b/docs/miniprogram/_design/Toast.md @@ -0,0 +1,53 @@ +# 轻提示 Toast + +## 组件设计指南 + +### 何时使用 + +当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 + +### 与页面布局相关 + +##### 轻提示通常放置在页面正中间，一段时间后自动消失。 + +
+
+ +
+
+ + +### 组件搭配使用 + +##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------------- | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失。 | diff --git a/docs/miniprogram/_design/TreeSelect.md b/docs/miniprogram/_design/TreeSelect.md new file mode 100644 index 0000000000..9b7f4023bd --- /dev/null +++ b/docs/miniprogram/_design/TreeSelect.md @@ -0,0 +1,28 @@ +# 树形选择器 TreeSelect + +## 组件设计指南 + +### 何时使用 + +当一组选项由2-3个层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过3层，层级过多时应调整数据结构或改用级联选择器。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。| +| [级联选择器](./cascader) |当一组选项由递进层级构成，且有每个层级有大量的选项需要用户逐级选择使用时。| diff --git a/docs/miniprogram/_design/Upload.md b/docs/miniprogram/_design/Upload.md new file mode 100644 index 0000000000..58789bdb3a --- /dev/null +++ b/docs/miniprogram/_design/Upload.md @@ -0,0 +1,45 @@ +# 上传 Upload + +## 组件设计指南 + +### 何时使用 + +当需要进行图片上传时使用。 + +### 组件搭配使用 + +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。 + +
+ +
+ +
+ +##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。 + +
+ + +
+ +
+ +##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 + +
+
+ + +
+
diff --git a/docs/miniprogram/_design/avatar.md b/docs/miniprogram/_design/avatar.md new file mode 100644 index 0000000000..f2760c576a --- /dev/null +++ b/docs/miniprogram/_design/avatar.md @@ -0,0 +1,63 @@ +# 头像 Avatar + +## 组件设计指南 + +### 何时使用 + +作为一个用户信息展示，或用来代表某个/某些具体用户。 + +### 组件搭配使用 + +##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 + +
+
+ +
+
+
+ +##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。 + +
+
+ +
+
+ +
+ +##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。 + +
+
+ +
+
+ + +### 常见用法 + +##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/miniprogram/_design/cascader.md b/docs/miniprogram/_design/cascader.md new file mode 100644 index 0000000000..4ca5b5ca66 --- /dev/null +++ b/docs/miniprogram/_design/cascader.md @@ -0,0 +1,61 @@ +# 级联选择器 Cascader + +## 组件设计指南 + +### 何时使用 + +当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 组件搭配使用 + +##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 + +
+ +
+ + +### 常见用法 + +##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/_design/gen-design-docs.js b/docs/miniprogram/_design/gen-design-docs.js new file mode 100644 index 0000000000..d7fa00cf77 --- /dev/null +++ b/docs/miniprogram/_design/gen-design-docs.js @@ -0,0 +1,38 @@ +const fs = require('fs'); +const path = require('path'); + +const list = []; + +function listFile(dir) { + const arr = fs.readdirSync(dir); + arr.forEach((item) => { + const fullpath = path.join(dir, item); + const stats = fs.statSync(fullpath); + if (stats.isDirectory()) { + listFile(fullpath); + } else { + list.push(fullpath); + } + }); + return list; +} + +const docs = listFile(path.join(__dirname, './')); + +function canmelCase(name) { + let [str] = name.match(/[a-zA-Z]+/); + str = str.replace(str[0], str[0].toLowerCase()); + str = str.replace(/([A-Z])/g, '-$1').toLowerCase(); + return str; +} + +docs.forEach((doc) => { + if (doc.includes('gen-design-docs.js')) return; + const fileName = canmelCase(path.basename(doc)); + const data = fs.readFileSync(doc, 'utf-8').toString(); + let [, designContent] = data.split('## 组件设计指南'); + if (!designContent || fileName === 'gen') return; + + designContent = `${designContent}`; + fs.writeFileSync(path.join(__dirname, `../design/${fileName}.md`), designContent); +}); diff --git a/docs/miniprogram/_design/link.md b/docs/miniprogram/_design/link.md new file mode 100644 index 0000000000..2f5bcd4f4a --- /dev/null +++ b/docs/miniprogram/_design/link.md @@ -0,0 +1,46 @@ +# 链接 Link + +## 组件设计指南 + +### 何时使用 + +当需要跳转至外链时使用。 + +### 组件搭配使用 + +##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/_design/navbar.md b/docs/miniprogram/_design/navbar.md new file mode 100644 index 0000000000..c8c7b56e79 --- /dev/null +++ b/docs/miniprogram/_design/navbar.md @@ -0,0 +1,53 @@ +# 导航栏 Navbar + +## 组件设计指南 + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。 + +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。 + +
+ +
+ +
+ +##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 +
+
+ +
+
diff --git a/docs/miniprogram/_design/swiper.md b/docs/miniprogram/_design/swiper.md new file mode 100644 index 0000000000..3a184535f1 --- /dev/null +++ b/docs/miniprogram/_design/swiper.md @@ -0,0 +1,42 @@ +# 轮播图 Swiper + +## 组件设计指南 + +### 何时使用 + +当需要承载一组banner或一组图片时使用。 + +### 常见用法 + +##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。 + +
+
+ +
+ +
+ +
+
+ +
+ + ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+
diff --git a/docs/miniprogram/design/action-sheet.md b/docs/miniprogram/design/action-sheet.md new file mode 100644 index 0000000000..fbe3df06c2 --- /dev/null +++ b/docs/miniprogram/design/action-sheet.md @@ -0,0 +1,73 @@ + + +### 何时使用 + +需要提供一组与当前场景操作相关的关联操作时使用。 + +### 组件搭配使用 + +##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。 + +
+ +
+ + +### 常见用法 +##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ +
+ +
+ +##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 动作面板中的操作项不建议用icon完成替代文字。 + +
+
+ + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/avatar.md b/docs/miniprogram/design/avatar.md new file mode 100644 index 0000000000..eb7220cc4b --- /dev/null +++ b/docs/miniprogram/design/avatar.md @@ -0,0 +1,61 @@ + + +### 何时使用 + +作为一个用户信息展示，或用来代表某个/某些具体用户。 + +### 组件搭配使用 + +##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。 + +
+
+ +
+
+
+ +##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。 + +
+
+ +
+
+ +
+ +##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。 + +
+
+ +
+
+ + +### 常见用法 + +##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/miniprogram/design/badge.md b/docs/miniprogram/design/badge.md new file mode 100644 index 0000000000..173d086096 --- /dev/null +++ b/docs/miniprogram/design/badge.md @@ -0,0 +1,68 @@ + + +### 何时使用 + +当需要展示特定对象的状态变化或承载运营性质提示时使用。 + +### 组件搭配使用 + +##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。 + +
+
+ +
+
+ + +### 常见用法 + +##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标；当提示的信息需要精确显示数量时，应使用带数字的徽标。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 建议根据场景和信息类型定义最长字数，不宜出现过长的情况。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------ | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | diff --git a/docs/miniprogram/design/button.md b/docs/miniprogram/design/button.md new file mode 100644 index 0000000000..3bb7573b20 --- /dev/null +++ b/docs/miniprogram/design/button.md @@ -0,0 +1,81 @@ + + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
+
+ + +
+
+ +
+ +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | +| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | diff --git a/docs/miniprogram/design/calendar.md b/docs/miniprogram/design/calendar.md new file mode 100644 index 0000000000..e606fada96 --- /dev/null +++ b/docs/miniprogram/design/calendar.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。 + +
+ +
+ +### 推荐/慎用 + +##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 区间选择尽量使用在较短时间的场景中，当涉及的时间通常在数月、数年的长度时，建议使用其它方式让用户输入。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------- | :------------------------------------- | +| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 | diff --git a/docs/miniprogram/design/cascader.md b/docs/miniprogram/design/cascader.md new file mode 100644 index 0000000000..1d02f8e3c3 --- /dev/null +++ b/docs/miniprogram/design/cascader.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 组件搭配使用 + +##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。 + +
+ +
+ + +### 常见用法 + +##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------------------------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/cell.md b/docs/miniprogram/design/cell.md new file mode 100644 index 0000000000..965f2bd0a5 --- /dev/null +++ b/docs/miniprogram/design/cell.md @@ -0,0 +1,55 @@ + + +### 常见用法 + +##### 常用作内容详情入口或功能入口的平铺陈列。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用作同类型同格式信息项平铺陈列。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 作为入口时，不建议承载过多过复杂的内容。 + +
+
+ + +
+
+ +
+ +##### 作为入口时，不建议在一个单元格内承载其他操作。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。| diff --git a/docs/miniprogram/design/checkbox.md b/docs/miniprogram/design/checkbox.md new file mode 100644 index 0000000000..40dd0ca0d0 --- /dev/null +++ b/docs/miniprogram/design/checkbox.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +当用户需要从一组数据选择多个选项时使用。 + +### 组件搭配使用 + +##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 在选项较多的场景下执行多选时，建议展示用户已选数量。 + + +
+ + +
+ + + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 | diff --git a/docs/miniprogram/design/collapse.md b/docs/miniprogram/design/collapse.md new file mode 100644 index 0000000000..5ad03d869a --- /dev/null +++ b/docs/miniprogram/design/collapse.md @@ -0,0 +1,63 @@ + + +### 何时使用 + +当信息较多，需要进行收纳时使用。 + +### 常见用法 + +##### 经常用于信息种类较多的页面，将相对次要的信息收纳起来，让用户能够关注到页面中的主要信息或流程。 + +
+ +
+ +
+ +##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。 + +
+
+ +
+
+ +
+ +##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 当信息层级较多时，不建议嵌套折叠面板，层级过多时建议审视信息结构或使用其它交互方式展示。 + +
+
+ + +
+
+ +
+ +##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [下拉菜单](./dropdown-menu) |当内容较多时，需要通过筛选快速定位某一类内容时使用。| diff --git a/docs/miniprogram/design/count-down.md b/docs/miniprogram/design/count-down.md new file mode 100644 index 0000000000..dbb1ad4c22 --- /dev/null +++ b/docs/miniprogram/design/count-down.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要向用户提示剩余时间时使用。 + +### 常见用法 + +##### 在营销场景下，通过倒计时向用户展示运营活动开始倒计时或距活动结束的剩余时间，从而体现稀缺性吸引目标受众的注意力，勾起足够兴趣以此激励用户参与。 + +
+
+ +
+
+ +
+ +##### 在一些工作流场景下，提示用户还剩余多少时间来完成某项任务或处理某些事项，强化时间概念。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议在同一个页面滥用倒计时，若需要反复使用，建议用较为轻量的样式. + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------- | :------------------------------------------------------------------------------------------------------------------- | +| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 | diff --git a/docs/miniprogram/design/date-time-picker.md b/docs/miniprogram/design/date-time-picker.md new file mode 100644 index 0000000000..92a1cf0d48 --- /dev/null +++ b/docs/miniprogram/design/date-time-picker.md @@ -0,0 +1,42 @@ + + +### 何时使用 + +在表单中需要输入单个日期或时间时使用。 + +### 组件搭配使用 + +##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。 + +
+ +
+ +### 常见用法 + +##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。 + +
+ +
+ +
+ +
+ +### 推荐/慎用示例 + +##### 选择时间后，建议使用标准化格式在表单中书写日期和时间。 + +
+
+ + +
+
+ + +### 何时使用 +| 组件名 | 何时使用 | +| :----------------- | :------------------------------------------------- | +| [日历](./Calendar) | 在表单中需要精确输入单个、多个、或区间日期时使用。 | diff --git a/docs/miniprogram/design/dialog.md b/docs/miniprogram/design/dialog.md new file mode 100644 index 0000000000..ddf930d34d --- /dev/null +++ b/docs/miniprogram/design/dialog.md @@ -0,0 +1,72 @@ + + +### 何时使用 + +需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。 + +### 组件搭配使用 + +##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。 + +
+ +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 用于较为重要的信息提示。 + +
+
+ +
+
+ +
+ +##### 用于较为重要的信息提示，且需要用户决定。 + +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。 + +
+
+ + +
+ +
+ + +
+
+ + +### 何时使用 +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [轻提示](./toast) |当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。| +| [消息通知](./message) |当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。| + diff --git a/docs/miniprogram/design/divider.md b/docs/miniprogram/design/divider.md new file mode 100644 index 0000000000..c4ec583cbd --- /dev/null +++ b/docs/miniprogram/design/divider.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +为了区分内容与内容之间的分组、层级关系时可使用。 + +### 与页面布局相关 + +##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。 + +
+
+ + +
+
+ +
+ +##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。 + +
+
+ + +
+
+
+ +##### 组合分割线：通栏分割线与内嵌分割线组合布局。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。 + +
+
+ + +
+ +
+ + +
+
diff --git a/docs/miniprogram/design/drawer.md b/docs/miniprogram/design/drawer.md new file mode 100644 index 0000000000..63d524ca8b --- /dev/null +++ b/docs/miniprogram/design/drawer.md @@ -0,0 +1,55 @@ + + +### 何时使用 + +需要收折展示一组数量较多的菜单时使用 + +### 组件搭配使用 + +##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。 + +
+ +
+ +### 常见用法 + +##### 在网站场景，通常用来收折展示整个网站的菜单导航。 + +
+ +
+ +
+ +##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------- | :------------------------------------------------------------------------------------------- | +| [动作面板](./action-sheet) | 需要提供一组与当前场景操作相关的关联操作时使用。 | +| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 | +| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 | +| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/dropdown-menu.md b/docs/miniprogram/design/dropdown-menu.md new file mode 100644 index 0000000000..12874dd344 --- /dev/null +++ b/docs/miniprogram/design/dropdown-menu.md @@ -0,0 +1,48 @@ + + +### 何时使用 + +当内容较多时，需要通过筛选快速定位某一类内容时使用。 + +### 常见用法 + +##### 常用于单个维度筛选或多个维度复合筛选的场景，可进行单选或多选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在单选的筛选场景内，建议将用户选择项替换标题显示于菜单面板内。 + +
+
+ + +
+
+ +
+ +##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./Cascader) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。| diff --git a/docs/miniprogram/design/empty.md b/docs/miniprogram/design/empty.md new file mode 100644 index 0000000000..3337f15219 --- /dev/null +++ b/docs/miniprogram/design/empty.md @@ -0,0 +1,44 @@ + + +### 何时使用 + +当页面或模块数据为空时使用。 + +### 与页面布局相关 + +##### 用于整个页面或某个独立模块的状态展示，在页面、模块内居中。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。 +
+
+ +
+
+ +
+ +##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。 + +
+
+ +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------- | +| [结果](./result) | 当需要向用户展示操作后的结果反馈时使用。 | diff --git a/docs/miniprogram/design/fab.md b/docs/miniprogram/design/fab.md new file mode 100644 index 0000000000..c873dca237 --- /dev/null +++ b/docs/miniprogram/design/fab.md @@ -0,0 +1,80 @@ + + +### 何时使用 + +当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 + +### 与页面布局相关 + +##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。 + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +### 组件搭配使用 + +##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。 + +
+ + +
+ + +### 推荐/慎用示例 + +##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | +| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 | + diff --git a/docs/miniprogram/design/footer.md b/docs/miniprogram/design/footer.md new file mode 100644 index 0000000000..0aae241a4b --- /dev/null +++ b/docs/miniprogram/design/footer.md @@ -0,0 +1,61 @@ + + +### 何时使用 + +当页面底部需要放置一些补充信息和链接时使用。 + +### 与页面布局相关 + +##### 页脚通常位于网站每个页面底部或主体内容下方的区域。 + +
+
+ +
+
+ +### 常见用法 + +##### 用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。 + +
+
+ +
+
+ +
+ +##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。 + +
+
+ +
+
+ +
+ +##### 用于承载网站导航。 + +
+
+ +
+
+ +
+ +##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。 + +
+
+ +
+ +
+ +
+
+ + diff --git a/docs/miniprogram/design/grid.md b/docs/miniprogram/design/grid.md new file mode 100644 index 0000000000..4e019d23b5 --- /dev/null +++ b/docs/miniprogram/design/grid.md @@ -0,0 +1,88 @@ + + +### 何时使用 + +当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 + +### 组件搭配使用 + +##### 可与徽标组合使用，可作为消息提示、或其它相关的数量提示。 + +
+
+ +
+
+ +### 常见用法 + +##### 通常用于金刚区、或底部标签栏等，在页面中较为醒目的位置承载主要的功能入口。 + +
+
+ +
+
+ +
+ +##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当在金刚区使用宫格承载功能入口时，建议梳理功能的优先级，将金刚区控制在3行以内，一些相对次要的功能可通过左右滑动的方式收纳在第二屏。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [单元格](./cell) |用于各个类别行的信息展示。| diff --git a/docs/miniprogram/design/image-viewer.md b/docs/miniprogram/design/image-viewer.md new file mode 100644 index 0000000000..dd4f1d3a94 --- /dev/null +++ b/docs/miniprogram/design/image-viewer.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 + +### 组件搭配使用 + +##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。 + +
+ +
+ +
+ +##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 | diff --git a/docs/miniprogram/design/image.md b/docs/miniprogram/design/image.md new file mode 100644 index 0000000000..5292350c08 --- /dev/null +++ b/docs/miniprogram/design/image.md @@ -0,0 +1,55 @@ + + +### 何时使用 + +当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 + +### 组件搭配使用 + +##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。 + +
+
+ +
+
+ + + +### 推荐/慎用示例 + +##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [图片预览](./image-viewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 | diff --git a/docs/miniprogram/design/indexes.md b/docs/miniprogram/design/indexes.md new file mode 100644 index 0000000000..a6cef20142 --- /dev/null +++ b/docs/miniprogram/design/indexes.md @@ -0,0 +1,54 @@ + + +### 何时使用 + +当数据项较多时，为方便用户快速找到目标数据项时使用。 + +### 组件搭配使用 + +##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 索引项排序应具备一定的逻辑相关性。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :------------------------------------------------------------- | +| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 | diff --git a/docs/miniprogram/design/input.md b/docs/miniprogram/design/input.md new file mode 100644 index 0000000000..27aa917662 --- /dev/null +++ b/docs/miniprogram/design/input.md @@ -0,0 +1,72 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较少时使用。 + +### 组件搭配使用 + +##### 呈现在单元格中，可与按钮组件相结合，点击按钮触发相关功能。 + +
+
+ +
+
+ + +### 常见用法 + +##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。 + +
+ +
+ +
+ +##### 当需要进行较复杂的内容填写，如验证码等，可使用特定类型输入框，结合按钮、图形等辅助元素帮助用户完成流程。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------------- | :------------------------------------------- | +| [多行文本框](./textarea) | 需要进行文字输入，且需填写的字数较多时使用。 | +| [搜索框](./search) | 当需要从海量信息中准确提取准确的内容时使用。 | diff --git a/docs/miniprogram/design/link.md b/docs/miniprogram/design/link.md new file mode 100644 index 0000000000..1c5231861a --- /dev/null +++ b/docs/miniprogram/design/link.md @@ -0,0 +1,44 @@ + + +### 何时使用 + +当需要跳转至外链时使用。 + +### 组件搭配使用 + +##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/design/loading.md b/docs/miniprogram/design/loading.md new file mode 100644 index 0000000000..a62bd77a06 --- /dev/null +++ b/docs/miniprogram/design/loading.md @@ -0,0 +1,58 @@ + + +### 何时使用 + +当打开新页面或操作完成后，等待加载时使用。 + +### 与页面布局相关 + +##### 当展示整个页面、或模块的加载进度时，通常放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ + +### 组件搭配使用 + +##### 在信息流页面中，可结合下拉刷新使用，对未展示出来的最新内容进行加载。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------------------ | :--------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。 | diff --git a/docs/miniprogram/design/message.md b/docs/miniprogram/design/message.md new file mode 100644 index 0000000000..cfcc35ae63 --- /dev/null +++ b/docs/miniprogram/design/message.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。 + +### 与页面布局相关 + +##### 通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。 + +
+
+ + +
+
+ +
+ +##### 消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------- | +| [轻提示](./toast) | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 | diff --git a/docs/miniprogram/design/navbar.md b/docs/miniprogram/design/navbar.md new file mode 100644 index 0000000000..2812619ef6 --- /dev/null +++ b/docs/miniprogram/design/navbar.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +需要在页面间跳转、返回，或需承载少量辅助功能时使用。 + +### 组件搭配使用 + +##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。 + +
+ +
+ +
+ +
+ +
+ + +### 常见用法 + +##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。 + +
+ +
+ +
+ +##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。 +
+
+ +
+
diff --git a/docs/miniprogram/design/picker.md b/docs/miniprogram/design/picker.md new file mode 100644 index 0000000000..fe98748bc5 --- /dev/null +++ b/docs/miniprogram/design/picker.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 + +### 推荐/慎用示例 + +##### 选择器若为一组有层级关系的选项时，选项层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。 + +
+
+ + +
+
+ +
+ +##### 选择器若为一组有层级关系的选项时，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :-------------------------------- | :----------------------------------------------------------------------- | +| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。 | +| [级联选择器](./Cascader) | 当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 | diff --git a/docs/miniprogram/design/popup.md b/docs/miniprogram/design/popup.md new file mode 100644 index 0000000000..2fd21868f9 --- /dev/null +++ b/docs/miniprogram/design/popup.md @@ -0,0 +1,53 @@ + + +### 常见用法 + +##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。 + +
+ +
+ +
+ +
+ +
+ +
+ +##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。 + +
+ +
+ +
+ +##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。 + +
+
+ +
+
+ +
+ +##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。 + +
+
+ +
+
diff --git a/docs/miniprogram/design/progress.md b/docs/miniprogram/design/progress.md new file mode 100644 index 0000000000..8f5428500c --- /dev/null +++ b/docs/miniprogram/design/progress.md @@ -0,0 +1,62 @@ + + +### 何时使用 + +当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 + +### 与页面布局相关 + +##### 当展示页面、模块的加载进度时，通常进度条放置在页面、模块的正中间。 + +
+
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。 + +
+
+ +
+
+ +
+ +##### 当任务时间较短、或难以预估剩余时间时，通常弱化进度的百分比信息，如使用隐藏数值进度条、或微型的环形进度条。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 若任务需要等待的时间很长，可以提供大概的时间估计，让用户更有预期。 + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :----------------------------------------- | +| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 | diff --git a/docs/miniprogram/design/pull-down-refresh.md b/docs/miniprogram/design/pull-down-refresh.md new file mode 100644 index 0000000000..ded3d1d51c --- /dev/null +++ b/docs/miniprogram/design/pull-down-refresh.md @@ -0,0 +1,61 @@ + + +### 何时使用 + +当需要对页面信息进行整体刷新或加载更多同类信息时使用。 + +### 与页面布局相关 + +##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。 + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +### 常见用法 + +##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。 + +
+
+ +
+
+ +
+ +##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。 + +
+
+ + +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [加载](./loading) |当打开新页面或操作完成后，等待加载时使用。| + diff --git a/docs/miniprogram/design/radio.md b/docs/miniprogram/design/radio.md new file mode 100644 index 0000000000..28141fa0d0 --- /dev/null +++ b/docs/miniprogram/design/radio.md @@ -0,0 +1,58 @@ + + +### 何时使用 + +当用户需要从一组数据选择一个选项时使用。 + +### 组件搭配使用 + +##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。 + + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。 + +
+ + +
+ +
+ + +
+ +
+ +##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 | diff --git a/docs/miniprogram/design/rate.md b/docs/miniprogram/design/rate.md new file mode 100644 index 0000000000..ffcacaedca --- /dev/null +++ b/docs/miniprogram/design/rate.md @@ -0,0 +1,53 @@ + + +### 何时使用 + +当需要对某行为/事物进行简单的星级评定时使用。 + +### 组件搭配使用 + +##### 通常结合多行文本框、标签使用，常见于评论场景，用户对某事物进行星级评定后，可选择预设的文本标签、或在文本框中撰写内容来进行更详细的评价。 + +
+
+ +
+
+ +### 常见用法 + +##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。 + +
+
+ +
+
+ +### 推荐/慎用示例 + +##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。 +
+
+ + +
+
+ + diff --git a/docs/miniprogram/design/result.md b/docs/miniprogram/design/result.md new file mode 100644 index 0000000000..20a43b4678 --- /dev/null +++ b/docs/miniprogram/design/result.md @@ -0,0 +1,54 @@ + + +### 何时使用 + +当需要向用户展示操作后的结果反馈时使用。 + +### 常见用法 + +##### 任务本身在弹窗中进行或仅需要较为轻量的结果反馈时，可使用弹窗承载结果反馈。 + +
+
+ +
+
+ +
+ +##### 当任务结束并给予反馈后，需要推荐其他内容、任务、商品等给用户时，通常使用页面承载结果和推荐。 + +
+
+ +
+
+ +
+ +##### 当任务结果为失败时，通常会告知用户失败原因，甚至提供解决问题的操作。 + +
+
+ +
+
+ +
+ + +##### 当前操作结束后，若还存在一系列用户需关注的流程进度，通常会结合步骤条将流程展示于结果页。 + +
+
+ +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----------------- | :--------------------------- | +| [空状态](./empty ) | 当页面或模块数据为空时使用。 | diff --git a/docs/miniprogram/design/search.md b/docs/miniprogram/design/search.md new file mode 100644 index 0000000000..d3e60af01a --- /dev/null +++ b/docs/miniprogram/design/search.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要从海量信息中准确提取准确的内容时使用。 + +### 与页面布局相关 + +##### 位于页面或内容模块的最上方，通过搜索框、搜索icon等方式承载和触发功能。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。 + +
+ +
+ +
+ +##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。 + +
+ +
+ +
+ +##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。 + +
+ +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 | diff --git a/docs/miniprogram/design/side-bar.md b/docs/miniprogram/design/side-bar.md new file mode 100644 index 0000000000..bf1bbcaf7f --- /dev/null +++ b/docs/miniprogram/design/side-bar.md @@ -0,0 +1,50 @@ + + +### 何时使用 + +当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 + +### 组件搭配使用 + +##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。 + +
+
+ +
+
+ + +### 正确/慎用示例 + +##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------ | :---------------------------------------------------------------------------- | +| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/design/slider.md b/docs/miniprogram/design/slider.md new file mode 100644 index 0000000000..ecea810eb1 --- /dev/null +++ b/docs/miniprogram/design/slider.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +当用户需要快捷地进行数值/程度选择时使用。 + +### 组件搭配使用 + +##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。 + +
+
+ +
+
+ + +### 常见用法 + +##### 用于可量化的数值选择，需要精确到具体某个数值/区间。 + +
+
+ +
+
+ +
+ +##### 用于难以量化的对立数据，以此表示程度。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。 + +
+
+ + +
+ +
+ + +
+
+ +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [步进器](./stepper) |需要进行数量选择时使用。| diff --git a/docs/miniprogram/design/steps.md b/docs/miniprogram/design/steps.md new file mode 100644 index 0000000000..014a2a73cb --- /dev/null +++ b/docs/miniprogram/design/steps.md @@ -0,0 +1,74 @@ + + +### 何时使用 + +当需要展示较为复杂的线性流程时使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。 + +
+ + +
+ +
+ +##### 尽量避免嵌套步骤条。 +
+
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :------------------- | :---------------------------------------------------------------------------- | +| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 | +| [选项卡](./tabs) | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 | diff --git a/docs/miniprogram/design/swipe-cell.md b/docs/miniprogram/design/swipe-cell.md new file mode 100644 index 0000000000..41432cc620 --- /dev/null +++ b/docs/miniprogram/design/swipe-cell.md @@ -0,0 +1,75 @@ + + +### 何时使用 + +需要针对列表项目进行某项低频的辅助操作时使用。 + +### 组件搭配使用 + +##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。 + +
+
+ +
+ +
+ +
+
+ + +### 常见用法 + +##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。 + +
+ +
+ + +### 推荐/慎用示例 + +##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。 + +
+ + +
+ +
+ +##### 按钮的顺序、颜色使用需要符合用户预期。 +
+ + +
+ +
+ +##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。 +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------- | :--------------------------------------------------- | +| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 | diff --git a/docs/miniprogram/design/swiper.md b/docs/miniprogram/design/swiper.md new file mode 100644 index 0000000000..17a00ac8f4 --- /dev/null +++ b/docs/miniprogram/design/swiper.md @@ -0,0 +1,40 @@ + + +### 何时使用 + +当需要承载一组banner或一组图片时使用。 + +### 常见用法 + +##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。 + +
+
+ +
+ +
+ +
+
+ +
+ + ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。 +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 索引项需要跟数据项小标题保持一致。 + +
+
+ + +
+
diff --git a/docs/miniprogram/design/switch.md b/docs/miniprogram/design/switch.md new file mode 100644 index 0000000000..466c5ea5ed --- /dev/null +++ b/docs/miniprogram/design/switch.md @@ -0,0 +1,31 @@ + + +### 何时使用 + +当需要切换某个功能的开启、关闭时使用。 + +### 推荐/慎用示例 + +##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。 +
+
+ + +
+
diff --git a/docs/miniprogram/design/tab-bar.md b/docs/miniprogram/design/tab-bar.md new file mode 100644 index 0000000000..51bf0b0a56 --- /dev/null +++ b/docs/miniprogram/design/tab-bar.md @@ -0,0 +1,77 @@ + + +### 何时使用 + +目标模块/视图需要从应用的任何地方直接进行访问时使用。 + +### 组件搭配使用 + +##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。 + +
+
+ +
+ +
+ +
+
+ +### 推荐/慎用示例 + +##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 避免在同个状态下有不同颜色的文本和图标。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。 + +
+
+ + +
+
+ +
+ +
+ + +
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选项卡](./tabs) |当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/design/tabs.md b/docs/miniprogram/design/tabs.md new file mode 100644 index 0000000000..cecdd26d81 --- /dev/null +++ b/docs/miniprogram/design/tabs.md @@ -0,0 +1,106 @@ + + +### 何时使用 + +当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 + +### 与页面布局相关 + +##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。 + +
+
+ +
+ +
+ +
+
+ +### 组件搭配使用 + +##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。 + +
+
+ +
+
+ + +### 常见用法 + +##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。 + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 不建议使用选项卡来实现功能模块间的切换。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。 + +
+ + +
+ +
+ + +
+ +
+ +##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。 + +
+
+ + +
+ +
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [标签栏](./tab-bar) | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。| +| [侧边栏](./side-bar) |当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。| diff --git a/docs/miniprogram/design/tag.md b/docs/miniprogram/design/tag.md new file mode 100644 index 0000000000..316091d4c8 --- /dev/null +++ b/docs/miniprogram/design/tag.md @@ -0,0 +1,86 @@ + + +### 何时使用 + +当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 + +### 组件搭配使用 + +##### 与[图片](./image)组合使用，图片作为内容、商品等对象的详情入口时，可通过添加标签来展示该对象的属性、状态、类别、营销情况等。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。 + +
+
+ +
+
+ +### 常见用法 + +##### 常用于展示对象本身的属性、状态、类别、营销情况等信息，且仅作为展示使用。 + +
+
+ +
+ +
+ +
+
+ +
+ +##### 常用于内容数据基于某个维度或某些维度的检索、筛选。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 标签颜色和字体颜色在明度、色相上要避免难以区分，保证标签的可读性。 + +
+
+ + +
+
+ +
+ +##### 标签文案需要经过概括和提炼，不建议过长。 + +
+ + +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。| diff --git a/docs/miniprogram/design/textarea.md b/docs/miniprogram/design/textarea.md new file mode 100644 index 0000000000..ce907af8cf --- /dev/null +++ b/docs/miniprogram/design/textarea.md @@ -0,0 +1,59 @@ + + +### 何时使用 + +需要进行文字输入，且需填写的字数较多时使用。 + +### 常见用法 + +##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。 + +
+
+ +
+ +
+ +
+
+ + +### 推荐/慎用示例 + +##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。 + +
+
+ + +
+ +
+ + +
+
+ +
+ +##### 建议根据待输入的内容决定多行文本框的高度。 +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :---------------- | :------------------------------------------- | +| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 | + diff --git a/docs/miniprogram/design/toast.md b/docs/miniprogram/design/toast.md new file mode 100644 index 0000000000..43af7fa315 --- /dev/null +++ b/docs/miniprogram/design/toast.md @@ -0,0 +1,51 @@ + + +### 何时使用 + +当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 + +### 与页面布局相关 + +##### 轻提示通常放置在页面正中间，一段时间后自动消失。 + +
+
+ +
+
+ + +### 组件搭配使用 + +##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。 + +
+
+ +
+
+ + +### 推荐/慎用示例 + +##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。 + +
+
+ + +
+ +
+ + +
+
+ + +### 相似组件 + +| 组件名 | 何时使用 | +| :--------------------- | :----------------------------------------------------------------------------------------------------- | +| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭。 | +| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失。 | diff --git a/docs/miniprogram/design/tree-select.md b/docs/miniprogram/design/tree-select.md new file mode 100644 index 0000000000..b6229eaa51 --- /dev/null +++ b/docs/miniprogram/design/tree-select.md @@ -0,0 +1,26 @@ + + +### 何时使用 + +当一组选项由2-3个层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 + + +### 推荐/慎用示例 + +##### 级联选择器的层级不宜超过3层，层级过多时应调整数据结构或改用级联选择器。 + +
+
+ + +
+
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。| +| [级联选择器](./cascader) |当一组选项由递进层级构成，且有每个层级有大量的选项需要用户逐级选择使用时。| diff --git a/docs/miniprogram/design/upload.md b/docs/miniprogram/design/upload.md new file mode 100644 index 0000000000..5ce2473d2b --- /dev/null +++ b/docs/miniprogram/design/upload.md @@ -0,0 +1,43 @@ + + +### 何时使用 + +当需要进行图片上传时使用。 + +### 组件搭配使用 + +##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。 + +
+ +
+ +
+ +##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。 + +
+ +
+ + + +### 推荐/慎用示例 + +##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。 + +
+ + +
+ +
+ +##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。 + +
+
+ + +
+
diff --git a/docs/miniprogram/overview.md b/docs/miniprogram/overview.md new file mode 100644 index 0000000000..86f965a6be --- /dev/null +++ b/docs/miniprogram/overview.md @@ -0,0 +1,420 @@ +--- +title: 组件概览 +description: 将根据业务实践持续新增组件类型，敬请留意组件库更新日志。 +spline: explain +--- + +

基础5

+
+
+ + + +

Button 按钮

+ +
+ +
+ + + +

Divider 分割线

+ +
+ +
+ + + +

Fab 悬浮按钮

+ +
+ +
+ + + +

Icon 图标

+ +
+ +
+ + + +

Link 链接

+ +
+
+ +

导航8

+
+
+ + + +

BackTop 返回顶部

+ +
+
+ + + +

Drawer 抽屉

+ +
+
+ + + +

Indexes 索引

+ +
+
+ + + +

Navbar 导航条

+ +
+
+ + + +

SideBar 侧边导航栏

+ +
+
+ + + +

Steps 步骤条

+ +
+
+ + + +

TabBar 标签栏

+ +
+
+ + + +

Tabs 选项卡

+ +
+
+ +

输入14

+
+
+ + + +

Calendar 日历

+ +
+
+ + + +

Cascader 级联选择器

+ +
+
+ + + +

CheckBox 多选框

+ +
+
+ + + +

DateTimePicker 日期选择器

+ +
+
+ + + +

Input 输入框

+ +
+
+ + + +

Picker 选择器

+ +
+ +
+ + + +

Radio 单选框

+ +
+
+ + + +

Rate 评分

+ +
+
+ + + +

Search 搜索框

+ +
+
+ + + +

Slider 滑动选择器

+ +
+
+ + + +

Stepper 步进器

+ +
+
+ + + +

Switch 开关

+ +
+
+ + + +

Textarea 多行文本框

+ +
+
+ + + +

Upload 上传

+ +
+
+ +

数据展示16

+
+
+ + + +

Avatar 头像

+ +
+ +
+ + + +

Badge 徽章

+ +
+ +
+ + + +

Cell 单元格

+ +
+ +
+ + + +

Collapse 折叠面板

+ +
+ +
+ + + +

CountDown 倒计时

+ +
+ +
+ + + +

DropdownMenu 下拉菜单

+ +
+ +
+ + + +

Empty 空状态

+ +
+ +
+ + + +

Footer 页脚

+ +
+ +
+ + + +

Grid 宫格

+ +
+ +
+ + + +

Image 图片

+ +
+ +
+ + + +

ImageViewer 图片预览

+ +
+ +
+ + + +

Result 结果

+ +
+ +
+ + + +

Skeleton 骨架屏

+ +
+ +
+ + + +

Sticky 吸顶容器

+ +
+ +
+ + + +

Swiper 轮播图

+ +
+ +
+ + + +

Tag 标签

+ +
+
+ +

反馈10

+
+
+ + + +

ActionSheet 动作面板

+ +
+ +
+ + + +

Dialog 对话框

+ +
+
+ + + +

Loading 加载

+ +
+ +
+ + + +

Message 全局提示

+ +
+ +
+ + + +

NoticeBar 消息提醒

+ +
+ +
+ + + +

Popup 弹出层

+ +
+
+ + + +

Progress 进度条

+ +
+
+ + + +

PullDownRefresh 下拉刷新

+ +
+
+ + + +

SwipeCell 滑动操作

+ +
+
+ + + +

Toast 轻提示

+ +
+
diff --git "a/docs/mobile/_design/\346\214\211\351\222\256Button.md" "b/docs/mobile/_design/\346\214\211\351\222\256Button.md" new file mode 100644 index 0000000000..cd03efc95c --- /dev/null +++ "b/docs/mobile/_design/\346\214\211\351\222\256Button.md" @@ -0,0 +1,80 @@ +# 按钮 Button + +## 组件设计指南 + +### 何时使用 + +当前流程的结束或新流程的开启需要用户点击触发时使用。 + +### 组件搭配使用 + +##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。 + +
+ + +
+ + +##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。 + +
+
+ + +
+ +
+ + +
+
+
+ + +
+ + +
+ +### 常见用法 + +##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。 +
+
+ + +
+
+ + +
+
+ + +### 推荐/慎用示例 + +##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，禁止同时使用多个主按钮。 + +
+
+ + +
+ +
+ + +
+
+ +
+ + + +### 相似组件 + +| 组件名 | 何时使用 | +| :----- | :----------------------------------- | +| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 | + diff --git a/docs/mobile/api/action-sheet.md b/docs/mobile/api/action-sheet.md index bac7934939..7e7518b9f5 100644 --- a/docs/mobile/api/action-sheet.md +++ b/docs/mobile/api/action-sheet.md @@ -1,6 +1,6 @@ --- title: ActionSheet 动作面板 -description: 从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 spline: base isComponent: true toc: false @@ -22,3 +22,7 @@ toc: false 菜单项的数量超过 8 个时，可作翻页处理。 {{ grid }} + +### 宫格型-多页 + +{{ grid-multiple }} diff --git a/docs/mobile/api/back-top.md b/docs/mobile/api/back-top.md index 49e6a710e7..b22cfb6ced 100644 --- a/docs/mobile/api/back-top.md +++ b/docs/mobile/api/back-top.md @@ -1,29 +1,23 @@ --- title: BackTop 返回顶部 -description: 用于当页面过长往下滑动时，帮助用户快速回到顶部。 +description: 当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部。 spline: base isComponent: true toc: false --- -### 基础用法 +### 圆型返回顶部 基础用法默认为白底圆形，固定在页面右下角，点击后返回页面顶部 -{{ base }} - -### 返回按钮形状 - 通过 theme 属性可以设置按钮形状，可选项有 `round` / `half-round` / `round-dark` / `half-round-dark` 通过 `text` 属性可以自定义按钮文案 通过 `icon` 属性可以自定义按钮 icon -{{ theme }} - -#### 返回位置 +{{ round }} -通过 `target` 属性可以自定义页面滚动到某个元素 +### 半圆型返回顶部 -{{ target }} +{{ half-round }} diff --git a/docs/mobile/api/button.md b/docs/mobile/api/button.md index ac17740a95..f2d5726530 100644 --- a/docs/mobile/api/button.md +++ b/docs/mobile/api/button.md @@ -6,64 +6,32 @@ isComponent: true toc: false --- -### 基础按钮 +### 类型 -基础类型分为主按钮、次按钮、文字按钮。 +#### 基础按钮 -#### 次按钮 +##### 次按钮 使用场景：在用户进行的操作为流程中的辅助操作，或者进行不那么重要的交互行为时，选择用次按钮；次要按钮通常和主要按钮一起出现 -#### 主按钮 +##### 主按钮 使用场景：大部分场景都可以使用，例如反馈页、表单页、对话框，一个页面建议最多只出现一个主按钮； -#### 文字按钮 +##### 文字按钮 使用场景：它的操作通常和其旁边内容相关，通常出现在标题旁、字段旁、列表最下方 {{ base }} -### 图标按钮 +### 状态 -图标按钮分为图标加文字形式、纯图标形式 +#### 按钮禁用态 -使用场景：希望增加按钮识别性，图标表意需贴合文字内容；纯icon图标建议只使用已有一定认知共识的操作上 +{{ status }} -{{ icon }} +### 规格 -### 置底按钮 +#### 按钮尺寸 -图标按钮可以分为单按钮形式，主次组合按钮形式，多个文字按钮组合形式 - -使用场景：用于用户在浏览过程中可随时触发的操作，常见于长信息、表单页 - -{{ bottom }} - -### 组件样式 - -### 尺寸 - -提供大、中、小 3 种不同大小按钮 - -{{ size }} - -### 形状 - -提供小、无、大 3 种不同的圆角 - -{{ shape }} - -### 组件使用 - -### 使用规范 - -（1）主按钮通常单独使用，是页面里的最主要的视觉焦点，在一个页面中，建议最多只出现一个主按钮 - -（2）纯 icon 图标建议只使用已有一定认知共识的操作上 - -### 正确/错误范例 - -（1）用户在使用主要按钮次要按钮，需要表达主次关系，不建议同时使用多个主按钮 - -{{ test }} +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api/cascader.md b/docs/mobile/api/cascader.md index 4c5de80d08..7abdbf6754 100644 --- a/docs/mobile/api/cascader.md +++ b/docs/mobile/api/cascader.md @@ -6,6 +6,14 @@ isComponent: true toc: false --- -### 基础级联选择器 +### 基础 + +#### 基本用法 {{ base }} + +### 状态 + +#### 禁用可选项 + +{{ status }} diff --git a/docs/mobile/api/collapse.md b/docs/mobile/api/collapse.md index f419034ad5..daf5649623 100644 --- a/docs/mobile/api/collapse.md +++ b/docs/mobile/api/collapse.md @@ -1,12 +1,12 @@ --- title: Collapse 折叠面板 -description: 可以折叠/展开的内容区域。 +description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等 spline: base isComponent: true toc: false --- -### 基础型 +### 基础折叠面板 主要用于对复杂区域进行分组和隐藏 常用于订单信息展示等 {{ base }} @@ -14,7 +14,8 @@ toc: false ### 带操作说明 {{ action }} -### 手风琴模式 + +### 手风琴式 对信息进行分组展示和隐藏，每次只展示一组信息 -{{ accordion }} \ No newline at end of file +{{ accordion }} diff --git a/docs/mobile/api/image.md b/docs/mobile/api/image.md index a26b3bc5bf..110eb7a187 100644 --- a/docs/mobile/api/image.md +++ b/docs/mobile/api/image.md @@ -6,46 +6,30 @@ isComponent: true toc: false --- -### 基础用法 +### 基础类型 -基础用法和原生 img 标签一样，可以设置 `src`、`alt`、`class` 等原生属性 +图片样式可为圆形、圆角方形、方形 -{{ base }} +#### 裁切样式 -### 图片形状 +{{ crop }} -通过 `shape` 属性可以设置图片形状，可选项有 `circle` | `round` | `square`，分别代表圆形、圆角方形、方形 +#### 圆角样式 -当图片长宽不相等时，无法使用 `circle` 展示一个完整圆形 +{{ rounded }} -{{ shape }} +### 状态 -#### 填充模式 +#### 加载中提示 -通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 +{{ loading-tip }} -{{ fit }} +#### 加载失败提醒 -#### 图片位置 +{{ loading-error }} -通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 +### 规格 -{{ position }} -#### 图片懒加载 +{{ size }} -通过lazy属性来开启图片懒加载 - -{{ lazy }} - -### 加载中提示 - -Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 - -{{ loading }} - -### 加载失败提示 - -Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 - -{{ error }} diff --git a/docs/mobile/api/loading.md b/docs/mobile/api/loading.md index 4788979e9a..e0402657d8 100644 --- a/docs/mobile/api/loading.md +++ b/docs/mobile/api/loading.md @@ -1,6 +1,6 @@ --- title: Loading 加载中 -description: 加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。 +description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 spline: base isComponent: true toc: false @@ -8,19 +8,15 @@ toc: false ### 类型 -#### 纯图标 +#### 纯icon {{ base }} -#### 页面进度条加载 - -{{ bar }} - -#### 图标加文字横向 +#### icon加文字横向 {{ horz }} -#### 图标加文字竖向 +#### icon加文字竖向 {{ vert }} @@ -28,13 +24,19 @@ toc: false {{ pure-text }} +#### 页面进度条加载 + +{{ bar }} + #### 延迟加载 {{ delay }} -### 规格 -图标加文字横向 +### 加载速度 + +{{ speed }} +### 规格 {{ size }} diff --git a/docs/mobile/api/message.md b/docs/mobile/api/message.md index e9a2001215..7c3f0f2b60 100644 --- a/docs/mobile/api/message.md +++ b/docs/mobile/api/message.md @@ -8,7 +8,7 @@ toc: false ### 基础消息通知 -弹窗内容为纯文本、标题和副标题、带操作按钮。 +用于轻量级反馈或提示，不会打断用户操作。 {{ base }} diff --git a/docs/mobile/api/navbar.md b/docs/mobile/api/navbar.md index 6a33140125..2e3e077d20 100644 --- a/docs/mobile/api/navbar.md +++ b/docs/mobile/api/navbar.md @@ -6,15 +6,15 @@ isComponent: true toc: false --- - -### 基础导航栏 +### 类型 +#### 基础导航栏 {{ base }} -### 带图标导航栏 +#### 左侧双操作导航栏 -{{ icon }} +{{ left-icon }} -### 事件反馈 +#### 右侧双操作导航栏 -{{ event }} +{{ right-icon }} diff --git a/docs/mobile/api/progress.md b/docs/mobile/api/progress.md index 45dceb92be..67fcffb4f9 100644 --- a/docs/mobile/api/progress.md +++ b/docs/mobile/api/progress.md @@ -16,12 +16,18 @@ toc: false 相比基础进度条更轻量，一般用于任务提示较短的场景 -{{ text }} +{{ noText }} -### 颜色 +### 自定义样式 -{{ color }} +{{ custom }} + +### 自定义线宽 + +{{ strokeWidth }} + +### 状态 + +{{ status }} -### 自定义样式 -{{ type }} diff --git a/docs/mobile/api/pull-down-refresh.md b/docs/mobile/api/pull-down-refresh.md index 64e19eeb49..def615f79c 100644 --- a/docs/mobile/api/pull-down-refresh.md +++ b/docs/mobile/api/pull-down-refresh.md @@ -6,14 +6,10 @@ isComponent: true toc: false --- -### 基础用法 +### 顶部下拉刷新 下拉刷新会触发 refresh 事件 -{{ base }} - -### 自定义文案和loading属性 - 通过 `loadingTexts` 属性可以自定义多个状态的文案，默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] 通过 `loadingBarHeight` 属性可以自定义下拉区域高度，默认为 50px @@ -22,10 +18,6 @@ toc: false 通过 `loadingProps` 属性可以自定义 loading 图标的属性 -{{ loading-texts }} - -### 超时事件 - 通过 `refreshTimeout` 属性可以自定义加载超时时间，默认为 3000ms。超时后会触发 timeout 事件，可传入回调函数 -{{ timeout }} +{{ base }} diff --git a/docs/mobile/api/upload.md b/docs/mobile/api/upload.md index 840ac6b55f..ec1538fb85 100644 --- a/docs/mobile/api/upload.md +++ b/docs/mobile/api/upload.md @@ -1,12 +1,15 @@ --- title: Upload 上传 -description: 单选、多选上传图片 +description: 用于相册读取或拉起拍照的图片上传功能。 spline: base isComponent: true toc: false --- -### 基础用法 +### 单选上传图片 {{ base }} +### 多选上传图片 + +{{ multiple }} diff --git a/docs/mobile/api_v2/action-sheet.md b/docs/mobile/api_v2/action-sheet.md new file mode 100644 index 0000000000..7e7518b9f5 --- /dev/null +++ b/docs/mobile/api_v2/action-sheet.md @@ -0,0 +1,28 @@ +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 +spline: base +isComponent: true +toc: false +--- + +### 列表型 + +列表选项为左右两端的列表； +选项为纯文字； +对于警示操作（如不可逆的破坏性操作），建议将更改操作放在最后并用红色标识。 +列表型根据选择项内容的差异，可以有以下不同的样式 + +{{ list }} + +### 宫格型 + +面板左右贯通，根据操作数量使用 3 列或 4 列的宫格结构，尽量使菜单内容饱满。 +菜单选项使用图标加文字的形式呈现。 +菜单项的数量超过 8 个时，可作翻页处理。 + +{{ grid }} + +### 宫格型-多页 + +{{ grid-multiple }} diff --git a/docs/mobile/api_v2/avatar.md b/docs/mobile/api_v2/avatar.md new file mode 100644 index 0000000000..53f17a3775 --- /dev/null +++ b/docs/mobile/api_v2/avatar.md @@ -0,0 +1,28 @@ +--- +title: Avatar 头像 +description: 用图标、图片、字符的形式展示用户或事物信息 +spline: data +isComponent: true +toc: false +--- + +### 头像类型 + +头像样式可为默认头像、微信头像圆形、方形、自定义文字 + +{{ shape }} + +### 纯展示 从上往下 + +{{ exhibition }} + +### 带操作 从下往上 + +{{ action }} + +### 头像大小尺寸 + +头像默认支持三种大小：`small`、`medium`、`large`，用户可自定义设置大小 + +{{ size }} + diff --git a/docs/mobile/api_v2/back-top.md b/docs/mobile/api_v2/back-top.md new file mode 100644 index 0000000000..7862ec1b0b --- /dev/null +++ b/docs/mobile/api_v2/back-top.md @@ -0,0 +1,23 @@ +--- +title: BackTop 返回顶部 +description: 当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部。 +spline: base +isComponent: true +toc: false +--- + +### 圆型返回顶部 + +基础用法默认为白底圆形，固定在页面右下角，点击后返回页面顶部 + +通过 theme 属性可以设置按钮形状，可选项有 `round` / `half-round` / `round-dark` / `half-round-dark` + +通过 `text` 属性可以自定义按钮文案 + +通过 `icon` 属性可以自定义按钮 icon + +{{ base }} + +### 半圆型返回顶部 + +{{ half-round }} diff --git a/docs/mobile/api_v2/badge.md b/docs/mobile/api_v2/badge.md new file mode 100644 index 0000000000..e9c86d6a61 --- /dev/null +++ b/docs/mobile/api_v2/badge.md @@ -0,0 +1,19 @@ +--- +title: Badge 徽标 +description: 用于告知用户，该区域的状态变化或者待处理任务的数量。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +{{ base }} + +### 组件样式 + +{{ theme }} + +### 组件尺寸 + +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api_v2/button.md b/docs/mobile/api_v2/button.md new file mode 100644 index 0000000000..aee607069b --- /dev/null +++ b/docs/mobile/api_v2/button.md @@ -0,0 +1,66 @@ +--- +title: Button 按钮 +description: 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +#### 基础按钮 + +##### 次按钮 + +使用场景：在用户进行的操作为流程中的辅助操作，或者进行不那么重要的交互行为时，选择用次按钮；次要按钮通常和主要按钮一起出现 + +##### 主按钮 + +使用场景：大部分场景都可以使用，例如反馈页、表单页、对话框，一个页面建议最多只出现一个主按钮； + +##### 文字按钮 + +使用场景：它的操作通常和其旁边内容相关，通常出现在标题旁、字段旁、列表最下方 + +{{ base }} + +#### 图标按钮 + +图标按钮由图标+文字或图标构成。通过图标可增强识别性，以便直观理解。 + +{{ icon }} + +#### 幽灵按钮 + +幽灵按钮将按钮的内容反色，背景变为透明，一般是底色透明。常用于有色背景上，例如 banner 图等。 + +{{ ghost }} + +#### 组合按钮 + +{{ group }} + +#### 通栏按钮 + +通栏按钮在宽度上充满其所在的父容器（无 padding 和 margin 值）。该按钮常见于移动端和一些表单场景中。 + +{{ block }} + +### 组件状态 + +#### 按钮禁用态 + +{{ status }} + +### 组件样式 +#### 按钮尺寸 + +{{ size }} + +#### 按钮形状 + +{{ shape }} + +#### 按钮主题 + +{{ theme }} \ No newline at end of file diff --git a/docs/mobile/api_v2/calendar.md b/docs/mobile/api_v2/calendar.md new file mode 100644 index 0000000000..ae83f1c945 --- /dev/null +++ b/docs/mobile/api_v2/calendar.md @@ -0,0 +1,31 @@ +--- +title: Calendar 日历 +description: 按照日历形式展示数据或日期的容器。 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 单个选择日期 + +{{ base }} + +### 多个选择日期 + +{{ multiple }} + +### 区间选择日期 + +{{ range }} + +### 自定义文案 + +{{ custom-text }} + +### 自定义按钮 + +{{ custom-button }} + +### 自定义日期区间 + +{{ custom-range }} \ No newline at end of file diff --git a/docs/mobile/api_v2/cascader.md b/docs/mobile/api_v2/cascader.md new file mode 100644 index 0000000000..911e4d4e90 --- /dev/null +++ b/docs/mobile/api_v2/cascader.md @@ -0,0 +1,31 @@ +--- +title: Cascader 级联选择器 +description: 用于多层级数据选择，主要为树形结构，可展示更多的数据。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 基础用法 + +{{ base }} + +### 选项卡风格 + +{{ theme-tab }} + +### 进阶 + +#### 带初始值 + +{{ with-value }} + +#### 自定义 keys + +{{ keys }} + +#### 使用次级标题 + +{{ with-title }} diff --git a/docs/mobile/api_v2/cell.md b/docs/mobile/api_v2/cell.md new file mode 100644 index 0000000000..2808f61074 --- /dev/null +++ b/docs/mobile/api_v2/cell.md @@ -0,0 +1,23 @@ +--- +title: Cell 单元格 +description: 用于各个类别行的信息展示。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +#### 单行单元格 + +{{ single }} + +#### 多行单元格 + +{{ multiple }} + +### 样式 + +#### 卡片单元格 + +{{ group }} diff --git a/docs/mobile/api_v2/checkbox.md b/docs/mobile/api_v2/checkbox.md new file mode 100644 index 0000000000..f653663f20 --- /dev/null +++ b/docs/mobile/api_v2/checkbox.md @@ -0,0 +1,47 @@ +--- +title: Checkbox 多选框 +description: 用于预设的一组选项中执行多项选择，并呈现选择结果。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +纵向多选框 + +{{ base }} + +横向多选框 + +{{ horizontal }} + +带全选多选框 + +{{ all }} + +### 组件状态 + +多选框状态 + +{{ status }} + +### 组件样式 + +勾选样式 + +{{ type }} + +勾选显示位置 + +{{ right }} + +非通栏多选样式 + +{{ card }} + +### 组件规格 + +多选框尺寸规格 + +{{ special }} \ No newline at end of file diff --git a/docs/mobile/api_v2/collapse.md b/docs/mobile/api_v2/collapse.md new file mode 100644 index 0000000000..daf5649623 --- /dev/null +++ b/docs/mobile/api_v2/collapse.md @@ -0,0 +1,21 @@ +--- +title: Collapse 折叠面板 +description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等 +spline: base +isComponent: true +toc: false +--- + +### 基础折叠面板 + +主要用于对复杂区域进行分组和隐藏 常用于订单信息展示等 +{{ base }} + +### 带操作说明 + +{{ action }} + +### 手风琴式 + +对信息进行分组展示和隐藏，每次只展示一组信息 +{{ accordion }} diff --git a/docs/mobile/api_v2/count-down.md b/docs/mobile/api_v2/count-down.md new file mode 100644 index 0000000000..6efccdd9a0 --- /dev/null +++ b/docs/mobile/api_v2/count-down.md @@ -0,0 +1,17 @@ +--- +title: CountDown 倒计时 +description: 用于实时展示倒计时数值。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 基础倒计时 + +{{ base }} + +### 调整尺寸 + +{{ size }} diff --git a/docs/mobile/api_v2/date-time-picker.md b/docs/mobile/api_v2/date-time-picker.md new file mode 100644 index 0000000000..768fa537d5 --- /dev/null +++ b/docs/mobile/api_v2/date-time-picker.md @@ -0,0 +1,23 @@ +--- +title: DateTimePicker 时间选择器 +description: 用于选择一个时间点或者一个时间段。 +spline: data +isComponent: true +toc: false +--- + +### 基础时间选择器 + +{{ base }} + +### 选择年月 + +{{ year-month }} + +### 选择时分 + +{{ time }} + +### 自定义选择范围 + +{{ custom-range }} diff --git a/docs/mobile/api_v2/dialog.md b/docs/mobile/api_v2/dialog.md new file mode 100644 index 0000000000..81891ffc5b --- /dev/null +++ b/docs/mobile/api_v2/dialog.md @@ -0,0 +1,49 @@ +--- +title: Dialog 对话框 +description: 一种打断当前操作的模态视图，用于显示重要提示或请求用户进行重要操作 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。 + +### 组件类型 + +#### 反馈类对话框 + +用于用户进行了一个操作，需传达重要信息，告知用户当前状况的情况。 + +{{ feedback }} + +#### 确认类对话框 + +用于用户进行了一个操作，后果比较严重，需要用户二次确认的情况。 例如 退出、删除、清空等操作 + +{{ confirm }} + +#### 输入对话框 + +用于用户进行了一个操作，需输入下一步操作的必要信息。 例如 输入密码 + +{{ input }} + +#### 带图片对话框 + +对话框中可以插入图片元素，并且自定义位置。 + +{{ image-dialog }} + +### 组件状态 + +文字按钮、水平基础按钮、垂直基础按钮、多按钮、附带关闭按钮 + +{{ multi-state }} + +### 组件用法 + +命令行调用 + +{{ plugin }} \ No newline at end of file diff --git a/docs/mobile/api_v2/divider.md b/docs/mobile/api_v2/divider.md new file mode 100644 index 0000000000..000171b39e --- /dev/null +++ b/docs/mobile/api_v2/divider.md @@ -0,0 +1,17 @@ +--- +title: Divider 分割符 +description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +spline: base +isComponent: true +toc: false +--- + +### 基础分割符 + +分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向 + +{{ base }} + +### 虚线样式 + +{{ theme }} diff --git a/docs/mobile/api_v2/drawer.md b/docs/mobile/api_v2/drawer.md new file mode 100644 index 0000000000..c0afed4763 --- /dev/null +++ b/docs/mobile/api_v2/drawer.md @@ -0,0 +1,15 @@ +--- +title: Drawer 抽屉 +description: 屏幕边缘滑出的浮层面板。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 带图标抽屉 + +{{ icon }} diff --git a/docs/mobile/api_v2/dropdown-menu.md b/docs/mobile/api_v2/dropdown-menu.md new file mode 100644 index 0000000000..89afa89f70 --- /dev/null +++ b/docs/mobile/api_v2/dropdown-menu.md @@ -0,0 +1,38 @@ +--- +title: DropdownMenu 下拉菜单 +description: 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。 +spline: base +isComponent: true +toc: false +--- + +### 单选下拉菜单 + +用于选择项需要单选的场景 + +{{ single }} + +### 多选下拉菜单 + +用于选择项可以进行多选的场景 +选择后标签不改变名称，标题最多展示 4 个字符超出“…”处理 +多选下拉菜单根据选择项内容的差异，可以有以下不同的样式 + +{{ multiple }} + +### 树形下拉菜单 + +用于选择项需要多级选择的场景 例如地区、区域、食物的选择 + +{{ tree }} + +### 禁用菜单/选项 + +{{ disabled }} + + diff --git a/docs/mobile/api_v2/empty.md b/docs/mobile/api_v2/empty.md new file mode 100644 index 0000000000..6a8b4c3f6a --- /dev/null +++ b/docs/mobile/api_v2/empty.md @@ -0,0 +1,23 @@ +--- +title: Empty 空状态 +description: 用于空状态时的占位提示。 +spline: data +isComponent: true +toc: false +--- + +## 代码演示 + +### 类型 + +图标空状态 + +{{ base }} + +自定义图片空状态 + +{{ imageEmpty }} + +带操作空状态 + +{{ buttonEmpty }} diff --git a/docs/mobile/api_v2/fab.md b/docs/mobile/api_v2/fab.md new file mode 100644 index 0000000000..f4b61ad2cf --- /dev/null +++ b/docs/mobile/api_v2/fab.md @@ -0,0 +1,19 @@ +--- +title: Fab 悬浮按钮 +description: 用于承载用户快速执行某个重要/高频的操作 +spline: base +isComponent: true +toc: false +--- + +### 纯图标悬浮按钮 + +使用场景：当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布 + +{{ base }} + +### 图标加文字悬浮按钮 + +使用场景：当功能使用图标无法表意清楚需要文字辅助描述时，可使用图标加文字悬浮按钮 + +{{ advance }} diff --git a/docs/mobile/api_v2/footer.md b/docs/mobile/api_v2/footer.md new file mode 100644 index 0000000000..efa3267114 --- /dev/null +++ b/docs/mobile/api_v2/footer.md @@ -0,0 +1,19 @@ +--- +title: Footer 页脚 +description: 用于基础列表展示，可附带文字、品牌 logo、操作，常用商详、个人中心、设置等页面。 +spline: data +isComponent: true +toc: false +--- + +### 基础页脚 + +{{ base }} + +### 基础加链接页脚 + +{{ link }} + +### 品牌页脚 + +{{ logo }} \ No newline at end of file diff --git a/docs/mobile/api_v2/form.md b/docs/mobile/api_v2/form.md new file mode 100644 index 0000000000..f99d547350 --- /dev/null +++ b/docs/mobile/api_v2/form.md @@ -0,0 +1,15 @@ +--- +title: Form 表单 +description: 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 +spline: base +isComponent: true +toc: false +--- + +### 01 组件类型 + +基础表单 + +{{ horizontal }} + +{{ vertical }} diff --git a/docs/mobile/api_v2/grid.md b/docs/mobile/api_v2/grid.md new file mode 100644 index 0000000000..cc49995906 --- /dev/null +++ b/docs/mobile/api_v2/grid.md @@ -0,0 +1,35 @@ +--- +title: Grid 宫格 +description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。 +spline: base +isComponent: true +toc: false +--- + +### 基础宫格 + +{{ base }} + +### 带描述宫格 + +{{ desc }} + +### 带边框宫格 + +{{ bordered }} + +### 带徽标宫格 + +{{ badge }} + +### 可滑动宫格 + +{{ scroll }} + +### 可传图标宫格 + +{{ icon }} + +### 卡片宫格 + +{{ card }} \ No newline at end of file diff --git a/docs/mobile/api_v2/icon.md b/docs/mobile/api_v2/icon.md new file mode 100644 index 0000000000..45256b0698 --- /dev/null +++ b/docs/mobile/api_v2/icon.md @@ -0,0 +1,7 @@ +--- +title: Icon 图标 +description: Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。 +usage: { title: '', description: '' } +spline: base +toc: true +--- diff --git a/docs/mobile/api_v2/image-viewer.md b/docs/mobile/api_v2/image-viewer.md new file mode 100644 index 0000000000..e2e381276b --- /dev/null +++ b/docs/mobile/api_v2/image-viewer.md @@ -0,0 +1,19 @@ +--- +title: ImageViewer 图片预览 +description: 预览图片内容。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 不展示关闭按钮 + +{{ closeBtn }} + +### 监听关闭事件 + +{{ closeEvent }} diff --git a/docs/mobile/api_v2/image.md b/docs/mobile/api_v2/image.md new file mode 100644 index 0000000000..1f5a94bab9 --- /dev/null +++ b/docs/mobile/api_v2/image.md @@ -0,0 +1,25 @@ +--- +title: Image 图片 +description: 增强版的img标签，提供多种图片填充方式，并且支持图片懒加载、加载中提示、加载失败提示。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +基础用法和原生 img 标签一样，可以设置 `src`、`alt`、`class` 等原生属性 + +{{ base }} + +### 图片形状 + +通过 `shape` 属性可以设置图片形状，可选项有 `circle` | `round` | `square`，分别代表圆形、圆角方形、方形 + +当图片长宽不相等时，无法使用 `circle` 展示一个完整圆形 + +{{ shape }} + +### 组件状态 + +{{ status }} diff --git a/docs/mobile/api_v2/indexes.md b/docs/mobile/api_v2/indexes.md new file mode 100644 index 0000000000..0d49c62fbb --- /dev/null +++ b/docs/mobile/api_v2/indexes.md @@ -0,0 +1,11 @@ +--- +title: Indexes 索引 +description: 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。 +spline: base +isComponent: true +toc: false +--- + +### 基础索引 + +{{ base }} diff --git a/docs/mobile/api_v2/input.md b/docs/mobile/api_v2/input.md new file mode 100644 index 0000000000..9d86e993ed --- /dev/null +++ b/docs/mobile/api_v2/input.md @@ -0,0 +1,63 @@ +--- +title: Input 输入框 +description: 用于文本信息输入。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 01 组件类型 + +基础输入框 + +{{ base }} + +带字数限制输入框 + +{{ maxlength }} + +带操作输入框 + +{{ suffix }} + +带图标输入框 + +{{ prefix }} + +特定类型输入框 + +{{ special }} + +### 02 组件状态 + +输入框状态 + +{{ status }} + +信息超长状态 + +{{ label }} + +### 03 组件样式 + +内容位置 + +{{ align }} + +竖排样式 + +{{ layout }} + +非通栏样式 + +{{ banner }} + +标签外置样式 + +{{ bordered }} + +自定义样式文本框 + +{{ custom }} \ No newline at end of file diff --git a/docs/mobile/api_v2/link.md b/docs/mobile/api_v2/link.md new file mode 100644 index 0000000000..6a9fbbc2f1 --- /dev/null +++ b/docs/mobile/api_v2/link.md @@ -0,0 +1,15 @@ +--- +title: Link 标签 +description: 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。 +spline: base +isComponent: true +toc: false +--- + +### 01 组件类型 + +{{ base }} + +### 02 组件状态 + +{{ status }} diff --git a/docs/mobile/api_v2/list.md b/docs/mobile/api_v2/list.md new file mode 100644 index 0000000000..8723c133f2 --- /dev/null +++ b/docs/mobile/api_v2/list.md @@ -0,0 +1,21 @@ +--- +title: List 列表 +description: 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。 +spline: base +isComponent: true +toc: false +--- + +### 基础列表 + + +{{ base }} + +### 下拉刷新 + +{{ pull-refresh }} + +### 错误提示 + +{{ err-tip }} + diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md new file mode 100644 index 0000000000..2135cb1ba8 --- /dev/null +++ b/docs/mobile/api_v2/loading.md @@ -0,0 +1,33 @@ +--- +title: Loading 加载中 +description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +#### 纯图标 + +{{ base }} + +#### 图标加文字横向 + +{{ horz }} + +#### 图标加文字竖向 + +{{ vert }} + +#### 纯文字 + +{{ pure-text }} + +### 组件尺寸 + +{{ size }} + +### 加载速度 + +{{ speed }} diff --git a/docs/mobile/api_v2/message.md b/docs/mobile/api_v2/message.md new file mode 100644 index 0000000000..7c3f0f2b60 --- /dev/null +++ b/docs/mobile/api_v2/message.md @@ -0,0 +1,21 @@ +--- +title: Message 消息通知 +description: 用于轻量级反馈或提示，不会打断用户操作。 +spline: base +isComponent: true +toc: false +--- + +### 基础消息通知 + +用于轻量级反馈或提示，不会打断用户操作。 + + +{{ base }} + + +### 不同状态的消息通知 + +消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error），用 API `Message.info` 方法调用反馈类对话框 + +{{ theme }} diff --git a/docs/mobile/api_v2/navbar.md b/docs/mobile/api_v2/navbar.md new file mode 100644 index 0000000000..2e3e077d20 --- /dev/null +++ b/docs/mobile/api_v2/navbar.md @@ -0,0 +1,20 @@ +--- +title: Navbar 导航栏 +description: 用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。 +spline: base +isComponent: true +toc: false +--- + +### 类型 +#### 基础导航栏 + +{{ base }} + +#### 左侧双操作导航栏 + +{{ left-icon }} + +#### 右侧双操作导航栏 + +{{ right-icon }} diff --git a/docs/mobile/api_v2/notice-bar.md b/docs/mobile/api_v2/notice-bar.md new file mode 100644 index 0000000000..a6320f46f5 --- /dev/null +++ b/docs/mobile/api_v2/notice-bar.md @@ -0,0 +1,36 @@ +--- +title: Noticebar 公告栏 +description: 在导航栏下方，用于给用户显示提示消息 +spline: base +isComponent: true +toc: false +--- + +### 基础静态公告栏 + +{{ base }} + +### 带图标静态公告栏 + +{{ icon }} + +### 带操作公告栏 + +{{ event }} + +### 滚动公告栏 + +{{ scrolling }} + +### 自定义样式 + +{{ custom }} + +### 不同状态的公告栏 +公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error） + +{{ theme }} + +### 多行文字消息栏 + +{{ customization }} diff --git a/docs/mobile/api_v2/overlay.md b/docs/mobile/api_v2/overlay.md new file mode 100644 index 0000000000..93c8e6e61b --- /dev/null +++ b/docs/mobile/api_v2/overlay.md @@ -0,0 +1,11 @@ +--- +title: Overlay 遮罩层 +description: 通过遮罩层，可以强调部分内容 +spline: base +isComponent: true +toc: false +--- + +### 基础类型 + +{{ base }} \ No newline at end of file diff --git a/docs/mobile/api_v2/picker.md b/docs/mobile/api_v2/picker.md new file mode 100644 index 0000000000..c2b4f0f0c4 --- /dev/null +++ b/docs/mobile/api_v2/picker.md @@ -0,0 +1,19 @@ +--- +title: Picker 选择器 +description: 用于一组预设数据中的选择。 +spline: base +isComponent: true +toc: false +--- + +### 基础类型 + +{{ base }} + +### 多级联动 + +{{ cascade }} + +### 对象选择 + +{{ object }} \ No newline at end of file diff --git a/docs/mobile/api_v2/popup.md b/docs/mobile/api_v2/popup.md new file mode 100644 index 0000000000..0b046ed755 --- /dev/null +++ b/docs/mobile/api_v2/popup.md @@ -0,0 +1,23 @@ +--- +title: Popup 弹出层 +description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。 +spline: base +isComponent: true +toc: false +--- + +### 基础类型 + +#### 基础弹出层 + +{{ base }} + +### 组件示例 + +#### 带标题和操作 + +{{ with-title }} + +#### 带自定义关闭按钮 + +{{ custom-close }} \ No newline at end of file diff --git a/docs/mobile/api_v2/progress.md b/docs/mobile/api_v2/progress.md new file mode 100644 index 0000000000..67fcffb4f9 --- /dev/null +++ b/docs/mobile/api_v2/progress.md @@ -0,0 +1,33 @@ +--- +title: Progress 进度条 +description: 用于需要准确告知某个任务的当前进度 +spline: base +isComponent: true +toc: false +--- + +### 基础进度条 + +一般用于操作任务周期较长时，表示当前任务所处的阶段 + +{{ base }} + +### 隐藏数值进度条 + +相比基础进度条更轻量，一般用于任务提示较短的场景 + +{{ noText }} + +### 自定义样式 + +{{ custom }} + +### 自定义线宽 + +{{ strokeWidth }} + +### 状态 + +{{ status }} + + diff --git a/docs/mobile/api_v2/pull-down-refresh.md b/docs/mobile/api_v2/pull-down-refresh.md new file mode 100644 index 0000000000..def615f79c --- /dev/null +++ b/docs/mobile/api_v2/pull-down-refresh.md @@ -0,0 +1,23 @@ +--- +title: PullDownRefresh 下拉刷新 +description: 用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。 +spline: base +isComponent: true +toc: false +--- + +### 顶部下拉刷新 + +下拉刷新会触发 refresh 事件 + +通过 `loadingTexts` 属性可以自定义多个状态的文案，默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] + +通过 `loadingBarHeight` 属性可以自定义下拉区域高度，默认为 50px + +通过 `maxBarHeight` 属性可以自定义最大下拉高度，默认为 80px + +通过 `loadingProps` 属性可以自定义 loading 图标的属性 + +通过 `refreshTimeout` 属性可以自定义加载超时时间，默认为 3000ms。超时后会触发 timeout 事件，可传入回调函数 + +{{ base }} diff --git a/docs/mobile/api_v2/radio.md b/docs/mobile/api_v2/radio.md new file mode 100644 index 0000000000..8e2fc1e4db --- /dev/null +++ b/docs/mobile/api_v2/radio.md @@ -0,0 +1,35 @@ +--- +title: Radio 单选框 +description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。 +spline: base +isComponent: true +toc: false +--- + +### 纵向单选框 + +{{ base }} + +### 横向单选框 + +{{ horizontal }} + +### 单选框状态 + +{{ status }} + +### 勾选样式 + +{{ icon }} + +### 勾选显示位置 + +{{ placement }} + +### 非通栏单选框 + +{{ card }} + +### 特殊样式 + +{{ custom }} \ No newline at end of file diff --git a/docs/mobile/api_v2/rate.md b/docs/mobile/api_v2/rate.md new file mode 100644 index 0000000000..e292acab67 --- /dev/null +++ b/docs/mobile/api_v2/rate.md @@ -0,0 +1,45 @@ +--- +title: Rate 评分 +description: 用于对某行为/事物进行打分。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +实心评分 + +{{ base }} + +自定义评分 + +{{ custom }} + +自定义评分数量 + +{{ count }} + +带描述评分 + +{{ show-text }} + +### 组件状态 + +{{ action }} + +### 组件样式 + +评分大小 + +{{ size }} + +设置评分颜色 + +{{ color }} + +### 特殊样式 + +竖向带描述评分 + +{{ special }} diff --git a/docs/mobile/api_v2/result.md b/docs/mobile/api_v2/result.md new file mode 100644 index 0000000000..69d842acad --- /dev/null +++ b/docs/mobile/api_v2/result.md @@ -0,0 +1,17 @@ +--- +title: Result 结果 +description: 反馈结果 +spline: base +isComponent: true +toc: false +--- + +### 不同结果状态 + +表示当前任务的结果 + +{{ theme }} + +### 自定义样式 + +{{ custom }} diff --git a/docs/mobile/api_v2/search.md b/docs/mobile/api_v2/search.md new file mode 100644 index 0000000000..ab7e412897 --- /dev/null +++ b/docs/mobile/api_v2/search.md @@ -0,0 +1,31 @@ +--- +title: Search 搜索框 +description: 用于用户输入搜索信息，并进行页面内容搜索。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 01 组件类型 + +基础搜索框 + +{{ base }} + +获取焦点后显示取消按钮 + +{{ action }} + +### 02 组件样式 + +搜索框形状 + +{{ shape }} + +### 03 组件状态 + +默认状态其他对齐方式 + +{{ other }} diff --git a/docs/mobile/api_v2/skeleton.md b/docs/mobile/api_v2/skeleton.md new file mode 100644 index 0000000000..7cc98c08df --- /dev/null +++ b/docs/mobile/api_v2/skeleton.md @@ -0,0 +1,32 @@ +--- +title: Skeleton 骨架屏 +description: 当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 骨架屏类型 + +基础骨架屏 + +{{ theme }} + +单元格骨架屏 + +{{ cell-group }} + + +宫格骨架屏 + +{{ grid }} + +图文组合骨架屏 + +{{ image-group }} + +### 组件动效 + +{{ animation }} \ No newline at end of file diff --git a/docs/mobile/api_v2/slider.md b/docs/mobile/api_v2/slider.md new file mode 100644 index 0000000000..9c1fa4f189 --- /dev/null +++ b/docs/mobile/api_v2/slider.md @@ -0,0 +1,39 @@ +--- +title: Slider 滑动选择器 +description: 用于选择横轴上的数值、区间、档位。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +单游标滑块 + +{{ base }} + +双游标滑块 + +{{ range }} + +带数值滑动选择器 + +{{ label }} + +带刻度滑动选择器 + +{{ step }} + +### 组件状态 + +滑块禁用状态 + +{{ disabled }} + +#### 特殊样式 + +胶囊型滑块 + +{{ capsule }} \ No newline at end of file diff --git a/docs/mobile/api_v2/stepper.md b/docs/mobile/api_v2/stepper.md new file mode 100644 index 0000000000..1f4fe6bd80 --- /dev/null +++ b/docs/mobile/api_v2/stepper.md @@ -0,0 +1,35 @@ +--- +title: Stepper 步进器 +description: 用户通过调整“+”按钮、“-”按钮、数字输入框来调整具体需要的数值，可设置最大值和最小值 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +基础步进器 + +{{ base }} + +### 组件状态 + +最大最小状态 + +{{ min-max }} + +禁用状态 + +{{ status }} + +### 组件样式 + +步进器样式 + +{{ theme }} + +步进器尺寸 + +{{ size }} diff --git a/docs/mobile/api_v2/steps.md b/docs/mobile/api_v2/steps.md new file mode 100644 index 0000000000..2c672103a4 --- /dev/null +++ b/docs/mobile/api_v2/steps.md @@ -0,0 +1,35 @@ +--- +title: Steps 步骤条 +description: 用于任务步骤展示或任务进度展示。 +spline: base +isComponent: true +toc: false +--- + +### 横向可操作步骤条 + +使用场景：常用于表单页，展示线性流程，且步骤支持随意切回/跳过 + +{{ click }} + +### 横向带图标可操作步骤条 + +{{ icon }} + +### 横向只读步骤条 + +使用场景：常用于表单页，展示线性流程，且不能随意切回/跳过步骤 + +{{ horizontal }} + +### 竖向只读步骤条 + +{{ vertical-readonly }} + +### 竖向简化只读步骤条 + +{{ vertical }} + +### 自定义内容步骤条 + +{{ content }} diff --git a/docs/mobile/api_v2/sticky.md b/docs/mobile/api_v2/sticky.md new file mode 100644 index 0000000000..c3a1c18f21 --- /dev/null +++ b/docs/mobile/api_v2/sticky.md @@ -0,0 +1,24 @@ +--- +title: Sticky 吸顶容器 +description: 用于常驻页面顶部的信息、操作展示。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +将内容包裹在 `Sticky` 组件内 + +### 基础吸顶 + +{{ base }} + + +### 吸顶距离 + +{{ offset }} + +### 指定容器 + +{{ container }} diff --git a/docs/mobile/api_v2/swipe-cell.md b/docs/mobile/api_v2/swipe-cell.md new file mode 100644 index 0000000000..b8b1cd8fe0 --- /dev/null +++ b/docs/mobile/api_v2/swipe-cell.md @@ -0,0 +1,53 @@ +--- +title: SwipeCell 滑动单元格 +description: 用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。 +spline: base +isComponent: true +toc: false +--- + +### 左滑单操作 + +{{ left-one-menu }} + +### 左滑双操作 + +{{ left-two-menu }} + +### 左滑多操作 + +{{ left-more-menu }} + +### 左滑大列表 + +{{ left-card }} + +### 右滑单操作 + +{{ right-menu }} + +### 通过 expanded 实现父子组件联动 + +{{ bind }} + +### 通过直接传入内容或者使用 slot#content 来渲染 + +{{ content }} + +### 是否启用滑动功能 + +{{ disabled }} + +### 左右两侧都有菜单 + +{{ btns }} + +### 点击事件 + +{{ event }} + +### css 样式 + +- slot 里面的内容需要自己定义样式 +- 当使用 slot 插入按钮时，插槽第一层包裹组件设置了 height: 100%, 但是第二层内容没有设置，为了实现垂直铺满的效果，需要手动设置 style="height:100%" +- 如果是使用 #right 和#left 属性传递按钮数组，可以使用 theme 快速指定菜单背景颜色，theme 取值为 t-button 组件的 theme 取值 diff --git a/docs/mobile/api_v2/swiper.md b/docs/mobile/api_v2/swiper.md new file mode 100644 index 0000000000..e9ce7bf55a --- /dev/null +++ b/docs/mobile/api_v2/swiper.md @@ -0,0 +1,23 @@ +--- +title: Swiper 轮播 +description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。 +spline: base +isComponent: true +toc: false +--- + +### 基础用法 + +{{ base }} + +### 指定分页器类型 + +{{ pagination-type }} + +### 垂直方向 + +{{ direction }} + +### 受控方式 + +{{ control }} diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md new file mode 100644 index 0000000000..f2afd3507c --- /dev/null +++ b/docs/mobile/api_v2/switch.md @@ -0,0 +1,27 @@ +--- +title: Switch 开关 +description: 用于控制某个功能的开启和关闭。 +spline: base +isComponent: true +toc: false +--- + +### 基础开关 + +使用场景：不需要通过文案强调开关状态时，可用基础开关 + +{{ base }} + +### 带描述开关 + +使用场景：需要通过描述解释、提示结果时，可用带描述开关 + +{{ label }} + +### 组件状态 + +{{ status }} + +### 开关尺寸 + +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api_v2/tab-bar.md b/docs/mobile/api_v2/tab-bar.md new file mode 100644 index 0000000000..b9cbc97199 --- /dev/null +++ b/docs/mobile/api_v2/tab-bar.md @@ -0,0 +1,29 @@ +--- +title: TabBar 标签栏 +description: 用于在不同功能模块之间进行快速切换，位于页面底部。 +spline: base +isComponent: true +toc: false +--- + +### 基础标签栏 + +文本标签栏，分为单层双层，可以自定义标签栏内容 + +{{ base }} + +### 带徽章标签栏 + +{{ badge-props }} + +### 纯文本标签栏 + +{{ text }} + +### 纯图标标签栏 + +{{ pure-icon }} + +### 双层级纯文本标签栏 + +{{ text-spread }} diff --git a/docs/mobile/api_v2/tabs.md b/docs/mobile/api_v2/tabs.md new file mode 100644 index 0000000000..7cac3bd6df --- /dev/null +++ b/docs/mobile/api_v2/tabs.md @@ -0,0 +1,41 @@ +--- +title: Tabs 选项卡 +description: 用于内容分类后的展示切换。 +spline: base +isComponent: true +toc: false +--- + +### 横向选项卡 + +使用场景：常用于某事物不同状态的展示切换，例如购物场景下的订单状态，“待付款”“待发货”等 + +{{ base }} + +### 超过屏幕滑动 + +使用场景：常用于某事物不同类型的展示切换，例如影视场景下的“电影”“电视剧”“综艺”等 + +{{ scroll }} + +### 无下划线 + +{{ underscore }} + +### 无下划线 + +{{ animation }} + +### 选项卡状态 + +{{ disabled }} + +### 竖向选项卡 + +使用场景：常用于全量类目的展示切换，例如购物列表场景下的“服装“”家居“”珠宝“等，且内容区有可能为该类目下的二级分类 + +{{ vertical }} + +### 选中态文字尺寸规格 + +{{ size }} \ No newline at end of file diff --git a/docs/mobile/api_v2/tag.md b/docs/mobile/api_v2/tag.md new file mode 100644 index 0000000000..b8dab274eb --- /dev/null +++ b/docs/mobile/api_v2/tag.md @@ -0,0 +1,31 @@ +--- +title: Tag 标签 +description: 用于表明主体的类目，属性或状态。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +{{ type }} + +可关闭的标签 + +{{ closable }} + +可点击的标签 + +{{ checkable }} + +### 组件状态 + +展示型标签 + +{{ theme }} + +### 组件尺寸 + +{{ size }} diff --git a/docs/mobile/api_v2/textarea.md b/docs/mobile/api_v2/textarea.md new file mode 100644 index 0000000000..215f1b4d88 --- /dev/null +++ b/docs/mobile/api_v2/textarea.md @@ -0,0 +1,43 @@ +--- +title: Textarea 多行文本框 +description: 用于多行文本信息输入。 +spline: form +isComponent: true +toc: false +--- + +## 代码演示 + +### 组件类型 + +基础多行文本框 + +{{ base }} + +带标题多行文本框 + +{{ label }} + +自动增高多行文本框 + +{{ autosize }} + +设置最大字符个数 + +{{ maxlength }} + +设置最大字符个数，一个汉字表示两个字符 + +{{ maxcharacter }} + +### 组件状态 + +禁用多行文本框 + +{{ disabled }} + +### 自定义组件样式 + +标签外置输入框 + +{{ custom }} \ No newline at end of file diff --git a/docs/mobile/api_v2/toast.md b/docs/mobile/api_v2/toast.md new file mode 100644 index 0000000000..af895c59f8 --- /dev/null +++ b/docs/mobile/api_v2/toast.md @@ -0,0 +1,25 @@ +--- +title: Toast 轻提示 +description: 用于轻量级反馈或提示，不会打断用户操作。 +spline: base +isComponent: true +toc: false +--- + +## 代码演示 + +### 基础演示 + +{{ base }} + +### 组件状态 + +{{ theme }} + +### 显示遮罩 + +{{ cover }} + +### 手动关闭 + +{{ close }} diff --git a/docs/mobile/api_v2/upload.md b/docs/mobile/api_v2/upload.md new file mode 100644 index 0000000000..ece49f1f87 --- /dev/null +++ b/docs/mobile/api_v2/upload.md @@ -0,0 +1,19 @@ +--- +title: Upload 上传 +description: 用于相册读取或拉起拍照的图片上传功能。 +spline: base +isComponent: true +toc: false +--- + +### 单选上传图片 + +{{ base }} + +### 多选上传图片 + +{{ multiple }} + +### 组件状态 + +{{ status }} \ No newline at end of file diff --git a/docs/mobile/design/button.md b/docs/mobile/design/button.md new file mode 100644 index 0000000000..139597f9cb --- /dev/null +++ b/docs/mobile/design/button.md @@ -0,0 +1,2 @@ + + diff --git a/docs/mobile/overview.md b/docs/mobile/overview.md index 36f898cf52..03df71ad1a 100644 --- a/docs/mobile/overview.md +++ b/docs/mobile/overview.md @@ -4,7 +4,7 @@ description: 将根据业务实践持续新增组件类型，敬请留意组件 spline: explain --- -

基础3

+

基础5

@@ -22,6 +22,14 @@ spline: explain
+
+ + + +

Fab 悬浮按钮

+ +
+
@@ -29,24 +37,39 @@ spline: explain

Icon 图标
+ +
+ + + +

Link 链接

+ +
-

导航6

+

导航7

- - - -

DropdownMenu 下拉菜单

+ + + +

BackTop 返回顶部

+ +
+
+ + + +

Drawer 抽屉
- +
@@ -76,8 +99,22 @@ spline: explain
-

输入12

+

输入14

+
+ + + +

Calendar 日历

+ +
+
+ + + +

Cascader 级联选择器

+ +
@@ -164,7 +201,7 @@ spline: explain
-

数据展示10

+

数据展示16

@@ -187,6 +224,13 @@ spline: explain

Cell 单元格
+
+ + + +

Collapse 折叠面板

+ +
@@ -194,6 +238,20 @@ spline: explain

CountDown 倒计时
+
+ + + +

Empty 空状态

+ +
+
+ + + +

Footer 页脚

+ +
@@ -208,6 +266,27 @@ spline: explain

Image 图片
+
+ + + +

ImageViewer 图片预览

+ +
+
+ + + +

Progress 进度条

+ +
+
+ + + +

Result 结果

+ +
@@ -238,13 +317,13 @@ spline: explain
-

消息提醒7

+

反馈11

- - - -

BackTop 返回顶部

+ + + +

ActionSheet 动作面板
@@ -254,6 +333,13 @@ spline: explain

Dialog 对话框

+
+ + + +

DropdownMenu 下拉菜单

+ +
@@ -268,6 +354,20 @@ spline: explain

Message 全局提示
+
+ + + +

NoticeBar 消息提醒

+ +
+
+ + + +

Overlay 遮罩层

+ +
@@ -275,6 +375,13 @@ spline: explain

Popup 弹出层
+
+ + + +

PullDownRefresh 下拉刷新

+ +
diff --git "a/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" "b/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" index b4f54b4265..53b074020f 100644 --- "a/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" +++ "b/docs/web/_design/\345\210\206\345\211\262\347\272\277Divider.md" @@ -1,6 +1,6 @@ # Divider 分割线 -分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 +分割线是一个呈线状的轻量化组件，起到分隔、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 ### 基础分割线 diff --git a/docs/web/api/auto-complete.md b/docs/web/api/auto-complete.md new file mode 100644 index 0000000000..acf751a4a1 --- /dev/null +++ b/docs/web/api/auto-complete.md @@ -0,0 +1,36 @@ +--- +title: AutoComplete 自动填充 +description: 用于根据用户输入内容提示更多联想词场景 +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### 基础自动填充 + +{{ base }} + +### 可过滤的自动填充 + +- 设置 `filterable` 后的默认过滤规则为：不区分大小写，文本任意位置。 +- 如果 `filterable` 的默认规则不符合需求，可以使用 `filter` 自定义过滤规则。 + +{{ filter }} + +### 可自定义联想词的自动填充 + +- 使用 `option` 自定义联想词 + +{{ option }} + +### 可自定义触发元素的自动填充 + +{{ trigger-element }} + +### 不同尺寸的自动填充 + +{{ size }} + +### 不同状态的自动填充 + +{{ status }} diff --git a/docs/web/api/avatar.md b/docs/web/api/avatar.md index c993934959..f8afcbfad3 100644 --- a/docs/web/api/avatar.md +++ b/docs/web/api/avatar.md @@ -13,7 +13,7 @@ spline: data ### 头像形状 -头像默认支持两种形状：shape、circle，用户也可自定义设置头像形状 +头像默认支持两种形状：round、circle，用户也可自定义设置头像形状 {{ shape }} ### 头像大小 diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md new file mode 100644 index 0000000000..cd9e9f1394 --- /dev/null +++ b/docs/web/api/back-top.md @@ -0,0 +1,38 @@ +--- +title: BackTop 返回顶部 +description: 用于返回页面顶部 +isComponent: true +usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' } +spline: data +--- + +### 基础的回到顶部 + +默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms + +{{ baseList }} + +### 可设置不同耗时的回到顶部 + +{{ baseListSmall }} + +### 不同组件尺寸的回到顶部 + +提供标准（默认）、小两种尺寸。 + +{{ size }} + +### 不同组件形状的回到顶部 + +提供圆形和方形两种不同形状。 + +{{ shape }} + +### 不同组件主题的回到顶部 + + +{{ theme }} + +### 可自定义内容的回到顶部 + +{{ custom }} \ No newline at end of file diff --git a/docs/web/api/badge.en-US.md b/docs/web/api/badge.en-US.md new file mode 100644 index 0000000000..5c1c171f5e --- /dev/null +++ b/docs/web/api/badge.en-US.md @@ -0,0 +1,41 @@ +--- +title: Badge +description: The badge identifier that appears in the upper right corner of an icon or text. +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### Badge in the style of a red dot. + +It is displayed as a circle and is located in the upper right corner of an icon or after a text title when there is no icon. In scenarios with weak prompts, the number is not displayed and the user needs to manually click to view and clear it. + +{{ base }} + +### Badge in the style of a number. + +The badge containing a number, suitable for scenarios that require strong reminders and directly alerting the user to the number of related information. + +{{ number }} + +### Customized Badge + +The displayed information can be customized, such as displaying as “hot” or “new”. + +{{ custom }} + +### Badges of different sizes. + +Two sizes are provided: standard (default) and small. + +{{ size }} + +### Badges of different shapes. + +wo different shapes of badges are provided: round and square. + +{{ shape }} + +### Control the offset position of the badge display. + +{{ offset }} diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md new file mode 100644 index 0000000000..c9b38a74df --- /dev/null +++ b/docs/web/api/breadcrumb.en-US.md @@ -0,0 +1,36 @@ +--- +title: Breadcrumb +description: Displays the position of the current page in the system hierarchy, and can return to any previous page level. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Basic breadcrumb + +Suitable for a wide range of basic uses, the system has more than two levels of hierarchy for switching up any level of content. + +{{ base }} + +### Breadcrumbs with icons + +Can customize each content, unified icon plus text, icon placed in front of the text. + +{{ icon }} + +### Custom separator breadcrumbs + +Customize`separator`the separator character through the separator property, and it is recommended to use an icon instead of a text symbol. + +{{ custom }} + + + +### Using Options to Configure Breadcrumbs + +Use the `options` property to configure the content of the breadcrumbs. + +{{ options }} diff --git a/docs/web/api/calendar.en-US.md b/docs/web/api/calendar.en-US.md new file mode 100644 index 0000000000..daae512754 --- /dev/null +++ b/docs/web/api/calendar.en-US.md @@ -0,0 +1,91 @@ +--- +title: Calendar +description: Container for displaying data or dates in a calendar format. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Event calendar panel + +A date display container that can display events within dates. It is commonly used when there is enough space and when it is necessary to carry or display event information. + +{{ base }} + +### Card mode calendar + +Using individual dates as units, nested within a container with limited space to display dates and other information. + +{{ card }} + +### Function example + +#### Specify highlighted dates + +Customize specified highlighted dates through component properties. The component defaults to highlighting “today” or “the current month”. The `value` attribute can be used to set this highlighted date. + +{{ value }} + +#### Switch mode Calendar/Monthly + +Specify the display form of the component through component properties. The component is displayed in calendar form by default and provides “Calendar” and “Monthly” mode switching buttons. Developers can switch modes by modifying the `mode` attribute. + +{{ mode }} + +#### Specify the first day of the week in the first column + +Specify the first day of the week in the first column: Specify the first day of the week in the calendar’s first column through component properties. The component defaults to “Monday” in the first column and can be set to other days of the week through the `firstDayOfWeek` attribute (only valid when `mode` is `month`). + +{{ first-day-of-week }} + +#### Control related configuration + +Customize the control of the component through component properties. In some business scenarios, it may be necessary to globally hide or disable controls. This can also be achieved through the `controllerConfig` attribute for local control. + +{{ controller-config }} + +### Customization + +#### Custom calendar range + +Specify the value range of the year and month selection box through component properties. By default, the component allows years to be selected from `1970 - ∞` and there is no restriction on months. The range attribute can be used to set the selectable `range` of the calendar. + +{{ range }} + +#### Customizing the display of weeks + +You can customize the display of weeks through the `week` attribute or slot. By default, the weeks in the calendar are displayed as “Monday” to “Sunday”, but in some scenarios, you may want to customize the display. + +{{ week }} + +### Event example + +Use `methods` to define the execution logic of events. Developers can use these events to implement more customized features. + +{{ events }} + +### Slot example + +#### Header slot (top left corner of the component) + +Display content in the top left corner of the component. In some business scenarios, you may need to display a title or similar content in the top left corner of the component. In this case, you can use the `head` named slot. + +{{ head }} + +#### Cell slot - Append content + +Append content to the existing cell display. By default, the current date is displayed in the calendar cell. If you need to display additional information, you can use the `cellAppend` named slot. + +{{ cell-append }} + +#### Cell slot - Custom content + +Completely rewrite the content displayed in the cell. Unlike the `cellAppend` named slot, the `cell` named slot allows you to fully customize the cell content. + +{{ cell }} + +#### Attribute slot + +Use the `Props API` to use slots. In some scenarios, you may want to render slot content through the `Props API`. `head`, `cell` and`cellAppend` all have their corresponding `Props API`. The following briefly demonstrates the `Props API` for `head` and `cell`. + +{{ slot-props-api }} diff --git a/docs/web/api/card.md b/docs/web/api/card.md index 9cac597f0e..2657242074 100644 --- a/docs/web/api/card.md +++ b/docs/web/api/card.md @@ -52,8 +52,6 @@ spline: data 由顶部栏、底部栏和极简卡片组成的复杂卡片，三个区域内容可根据需要对内容进行配置。 -{{ footer }} - {{ header-subtitle-footer-actions }} {{ header-footer-actions }} diff --git a/docs/web/api/cascader.en-US.md b/docs/web/api/cascader.en-US.md new file mode 100644 index 0000000000..665c40aab8 --- /dev/null +++ b/docs/web/api/cascader.en-US.md @@ -0,0 +1,103 @@ +--- +title: Cascader +description: Cascading selectors are useful for data sets that have a clear hierarchical structure that the user can view and select through. in general, a cascade selector include:Selectors and cascades. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Single Cascaded Selector + +Provide a single cascade selector, after the selection of each level to display the selected content. + +{{ base }} + +### Multi-selection cascade selector + +Provide multi-choice cascading selector, display multi-choice content through label. + +{{ multiple }} + +### Collapsible Options Multi-selector + +In the case of multiple selections, the selected items are collapsed, and the selected items exceeding the value are collapsed. + +{{ collapsed }} + +### Cascade selectors of different size + +Provide large, medium and small three different height, width selector to adapt to different size layout. + +{{ size }} + +### Filterable Cascade Selector + +Enter the Filter option. It is used in business scenarios with specific requirements. Filter text by default. + +{{ filterable }} + +### Disabling Cascading Selectors + +Cascaded selectors that provide a disabled state. + +{{ disabled }} + +### Display only the last cascade selector + +You can display only the label of the last level of the selected item in the input box, rather than the full path of the selected item. + +{{ show-all-levels }} + +### Cascading selector for selecting any item + +When enabled, you can select any level of options. + +{{ check-strictly }} + +### Cascaded selector in full path mode + +The default input/output value type is the value of the leaf node. The full path value is used when `value-type="full"` + +{{ value-type }} + +### Customize Selected Value Mode + +Only valid for multiple-choice conditions.` onlyLeaft`indicates that only leaf nodes are selected in any case;`parentFirst`indicates that only parent nodes are selected when all child nodes are selected;`all`indicates that both parent nodes and child nodes are selected. + +{{ value-mode }} + +### Different Trigger Methods + +Submenus can be loaded by different triggering methods. + +{{ trigger }} + +### Display when the text is too long + +When the data text is too long, use the browser `title` to display the long text. + +{{ ellipsis }} + +### Limit the number of options + +Limits the maximum number of selections for a multi-choice selector. This is typically used when you need to limit the number of multi-choice options. + +{{ max }} + +### Customizing Data Field Aliases + +When using `options` to configure drop-down options, if the data fields are not `label` and `value`, you can use `keys` to define aliases. + +{{ keys }} + +### Dynamic Loading + +The selector contents can be customized according to requirements. It is used in business scenarios with complex logic or specific requirements. + +{{ load }} + +### Cascading Panels + +Cascading panel used alone for combination with other triggers + +{{ panel }} diff --git a/docs/web/api/checkbox.en-US.md b/docs/web/api/checkbox.en-US.md new file mode 100644 index 0000000000..9e52e71b78 --- /dev/null +++ b/docs/web/api/checkbox.en-US.md @@ -0,0 +1,31 @@ +--- +title: Checkbox +description: A check box is a selection control that allows the user to toggle between checked and unchecked with a single click. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Basic multi-selection box + +The simplest form of multi-selection box, often used for multi-selection of data in the form. + +{{ base }} + +### Linked Multi-check Box + +Linked check boxes are check boxes used in conjunction with other components. + +{{ link }} + +### Grouped Multi-check Box Groups + +A group of check boxes that are combined according to certain attributes. + +{{ group }} + +### Controlled Class Checkbox + +The checkbox supports v-model, controlled and uncontrolled usage. + +{{ controlled }} diff --git a/docs/web/api/collapse.en-US.md b/docs/web/api/collapse.en-US.md new file mode 100644 index 0000000000..74c6b09f58 --- /dev/null +++ b/docs/web/api/collapse.en-US.md @@ -0,0 +1,35 @@ +--- +title: Collapse +description: You can group more or more complex content. The grouped content area can be collapsed, expanded or hidden. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Basic collapsible panel + +Basic collapsible panel, with customizable panel content. + +{{ base }} + +### Accordion mode collapsible panel + +Accordion mode collapsible panel, only one panel can be opened at a time. + +{{ mutex }} + +### Collapsible panel with settable icons + +You can set whether to display the expand icon and the position of the icon display. + +{{ icon }} + +### Collapsible panel with settable right-side operation + +You can customize the right-side operation area of the panel. + +{{ rightSlot }} + +### Collapsible panel in different modes + +{{ other }} diff --git a/docs/web/api/color-picker.en-US.md b/docs/web/api/color-picker.en-US.md new file mode 100644 index 0000000000..5512b08338 --- /dev/null +++ b/docs/web/api/color-picker.en-US.md @@ -0,0 +1,51 @@ +--- +title: ColorPicker +description: Used for color selection, supports multiple formats. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Panel Color Selector + +There is no trigger and the color picker panel is displayed directly. + +{{ panel }} + +### Color Picker with Trigger Element + +Trigger the display selector panel through the trigger, and transparently transfer all attributes to the panel selector component. + +{{ trigger }} + +### Color selector for different color modes + +Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorMode` to configure. + +{{ color-mode }} + +### Color picker with transparency adjustment + +Set `enableAlpha=true` to enable the transparency of the selector. + +{{ enable-alpha }} + +### Color Selector with Configurable System Color + +You can configure the system preset colors through `swatchColors`. If the value is null or [], the system colors will not be displayed. + +{{ swatch-color }} + +### Configurable Color Selector for Recently Used Color + +The most recently used color can be configured through `recentColors`. A value of [] indicates that the "Most Recently Used Color" in the component is used as the standard. If the value length is greater than 0, the "Most Recently Used Color" is displayed based on this value. A value of null does not display Recent Colors at all. + +{{ recent-color }} + +### Disabling Color Selector + +{{ status-disabled }} + +### Read-only Color Selector + +{{ status-readonly }} diff --git a/docs/web/api/comment.en-US.md b/docs/web/api/comment.en-US.md new file mode 100644 index 0000000000..393680c05d --- /dev/null +++ b/docs/web/api/comment.en-US.md @@ -0,0 +1,43 @@ +--- +title: Comment +description: Comment is used for feedback, evaluation, discussion, etc. on page content, such as evaluations of articles and discussions on topics. +isComponent: true +usage: { title: "", description: "" } +spline: data +--- + +### Basic comments + +The most basic comment component, including avatar, author, time, and comment content. Suitable for various scenarios where comments need to be displayed. + +{{ base }} + +### Comments with operations + +A component that allows you to perform related operations on comment content. Suitable for scenarios where a custom operation column is needed. + +{{ operation }} + +### List comments + +Comments displayed in list form. + +{{ list }} + +### Comments with replies + +A component that displays the reply content of a comment. Suitable for scenarios where comments need to be replied to. The author’s name can be followed by the name of the reply object. + +{{ reply }} + +### Comments with quotes + +Comments can quote other content to indicate the reference relationship between the comment and other content. + +{{ quote }} + +### Comments with reply form + +A component for replying to comment content. You can directly enter content in the reply form to reply. + +{{ reply-form }} diff --git a/docs/web/api/config-provider.en-US.md b/docs/web/api/config-provider.en-US.md index 230478e4fb..2cd7005aab 100644 --- a/docs/web/api/config-provider.en-US.md +++ b/docs/web/api/config-provider.en-US.md @@ -6,7 +6,20 @@ tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }] spline: 'explain' --- -### global +### Internationalization + +The supported language TDesign provided: + +Language | File +-- | -- +Chinese (Simplified) | `zh_CN` +Chinese (Traditional) | `zh_TW` +English | `en_US` +Korean | `ko_KR` +Japanese | `ja_JP` +Russian | `ru_RU` +Italian | `it_IT` +Arabic | `ar_KW` {{ global }} diff --git a/docs/web/api/config-provider.md b/docs/web/api/config-provider.md index b8148f4d7f..00c1f55cff 100644 --- a/docs/web/api/config-provider.md +++ b/docs/web/api/config-provider.md @@ -6,7 +6,20 @@ tdDocTabs: [{ tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }] spline: 'explain' --- -### 全局配置 +### 国际化配置 + +TDesign 支持国际化/多语言配置，目前支持的语言包括: + +语言 | 对应文件 +-- | -- +简体中文 | `zh_CN` +繁体中文 | `zh_TW` +英语 | `en_US` +韩语 | `ko_KR` +日语 | `ja_JP` +俄语 | `ru_RU` +意大利语 | `it_IT` +阿拉伯语 | `ar_KW` {{ global }} diff --git a/docs/web/api/date-picker.en-US.md b/docs/web/api/date-picker.en-US.md new file mode 100644 index 0000000000..f01ca0defa --- /dev/null +++ b/docs/web/api/date-picker.en-US.md @@ -0,0 +1,97 @@ +--- +title: DatePicker +description: Use to select a specific date or a range of dates. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Year Selector + +Used for year selection. It is used when the user only needs to enter the year information, and is often used in query scenarios where data is recorded by year, such as annual bills. + +{{ year }} + +### Month Selector + +Used for month selection. Use only when the user needs to enter month information. + +{{ month }} + +### Quarter Selector + +Used for quarterly selection. Use only when the user needs to enter quarterly information. + +{{ quarter }} + +### Week Selector + +Used for week selection. Used when the user only needs to enter year + week information. + +{{ week }} + +### Date Picker + +For selection of specific dates. Use only when the user needs to enter very specific date information. + +{{ base }} + +### Date Time Selector + +For date and time associated selections. Used when the user needs to enter a date including a time. + +{{ date-time }} + +### Date Range Selector + +Used for selection of a certain period of time. Used when the user needs to enter a date range. + +{{ date-range }} + +### Date picker with shortcut label + +with a time stamp that can be set in advance. When the date information is regular and needs to be clicked for quick input. + +{{ date-presets-alt }} + +### Date selector can be disabled + +The date that does not support user selection can be disabled from clicking. + +{{ disable-date }} + +### Selector for specifying the start of the week + +You can specify the day of the week from which a week starts through the `firstDayOfWeek` attribute. This is only valid when a date is selected (`mode = date`). The default value is 1, that is, it starts from Monday. You can set it to start from Sunday as follows. + +{{ first-day-of-week }} + +### Custom Icon Selector + +Prefix and suffix icons can be customized through `prefixIcon` and `suffixIcon`. + +{{ custom-icon }} + +### Date Selection Panel Used Alone + +You can use `DatePickerPanel` and `DateRangePickerPanel` separately. You can assemble your own date picker. + +{{ panel }} + +## FAQ + +### The backend data format is special. How can I format the date quickly? + +The `onChange` callback event will return the currently selected date object wrapped in `dayjs`. You can format it with the help of a third-party library or use the provided `dayjs` object for custom conversion. + +```js + { + const data = dayjsValue.format('YYYYMMDD'); + ... +}}> + + { + const data = dayjsValue.map(d => d.format('YYYYMMDD')); + ... +}}> +``` diff --git a/docs/web/api/divider.en-US.md b/docs/web/api/divider.en-US.md new file mode 100644 index 0000000000..b71a570f4d --- /dev/null +++ b/docs/web/api/divider.en-US.md @@ -0,0 +1,30 @@ +--- +title: Divider +description: The divider is a linear lightweight component that serves to separate, organize, and refine. It is used to logically organize element content and page structure. +isComponent: true +usage: { title: '', description: '' } +spline: layout +--- + +### Basic divider + +The basic divider is an independent line without text, divided into horizontal and vertical dividers. + +#### Horizontal divider + +Horizontal dividers are commonly used to separate different element content. + +{{ base }} + +#### Vertical divider + +Vertical dividers are commonly used for inline separation. + +{{ vertical }} + +### Text divider + +The text divider is a divider with embedded text and is used when an explanation of the separated content is needed. + +{{ text }} + diff --git a/docs/web/api/divider.md b/docs/web/api/divider.md index a70a976757..d77975e7f6 100644 --- a/docs/web/api/divider.md +++ b/docs/web/api/divider.md @@ -1,6 +1,6 @@ --- title: Divider 分割线 -description: 分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 +description: 分割线是一个呈线状的轻量化组件，起到分隔、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。 isComponent: true usage: { title: '', description: '' } spline: layout diff --git a/docs/web/api/drawer.en-US.md b/docs/web/api/drawer.en-US.md new file mode 100644 index 0000000000..543af32033 --- /dev/null +++ b/docs/web/api/drawer.en-US.md @@ -0,0 +1,69 @@ +--- + +title: Drawer +description: Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. +isComponent: true +usage: { title: '', description: '' } +spline: message + +--- + +### Visible Drawers + +Carrying the informational content of the presentation. Drawers can be used to increase page scalability when page space is limited. + +{{ base }} + +### Operable Drawer + +The operation drawer carries the forms to be edited or operated in the drawer, and can be used when the user needs to operate. + +{{ operation }} + +### Drawers with no hidden layer + +By setting `showOverlay`, you can control whether to display the drawer overlay. + +{{ no-mask }} + +### Drawers in Different Positions + +With `placement`, the drawer can be displayed in different positions. + +{{ placement }} + +### Drawers of different size + +The width of the drawer display is controlled by the `size` attribute. + +{{ size }} + +### Customizing the Top and Bottom Drawers + +You can adjust the contents at the top and bottom of the drawer by using `header` and `footer`. + +{{ custom }} + +### Eject Mode Drawer + +Drawers can be displayed by covering or pushing the content area. For the `push` mode of the entire page,`attach` needs to be set to body. (The drawer component is mounted by default to the location of the element itself). + +{{ popup }} + +### Rendering and rendering in the drawer of the current parent element + +The `showInAttachedElement` attribute is used to specify the parent container element of the drawer. The parent element must have a positioning attribute, for example:position: relative。 + +{{ attach-parent }} + +### Destroy drawer when closing + +You can use `destroyOnClose` to destroy a drawer from a page node when closing it. + +{{ destroy }} + +### Draggable Drawers + +With `sizeDraggable`, you can drag and drop the edge of the drawer to change the size of the drawer. + +{{ size-draggable }} diff --git a/docs/web/api/dropdown.en-US.md b/docs/web/api/dropdown.en-US.md new file mode 100644 index 0000000000..bd70ffc859 --- /dev/null +++ b/docs/web/api/dropdown.en-US.md @@ -0,0 +1,61 @@ +--- +title: Dropdown +description: It is used to carry too many operation sets and accept more operations through drop-down expansion. +isComponent: true +usage: { title: "", description: "" } +spline: navigation +--- + +### Text drop-down menu + +The text button triggers a drop-down menu. It is commonly used in storage operation scenarios where space is extremely limited, and is generally used to store detailed operations in the form. + +{{ base }} + +### Button drop-down menu + +A normal button triggers a drop-down menu. It is often used to operate storage scenes. + +{{ button }} + +### With Split Line drop-down menu + +The different pull-down menu operations are distinguished by dividing lines. It is often used in scenarios where the results of different operations need to be distinguished. + +{{ split }} + +### Multi-level drop-down menu + +Action drop-down menu with logical hierarchy. It is often used in operational scenarios where multiple layers of logic need to be accommodated. + +{{ multiple }} + +### Drop-down menu with disabled action items + +The operation items of the drop-down menu can be set to be disabled. This is often used to disable some of the action items. + +{{ disabled }} + +### Customize drop-down menus for additional properties + +The drop-down menu depends on the`Popup`component and can pass through`Popup`the properties of the custom Popup component. + +{{ custom }} + +### Drop-down menu to define maximum height + +The drop-down menu supports defining the maximum height. + +{{ long }} + +### Custom theme drop-down menu + +The menu items of the drop-down menu support custom themes, which are used according to specific scenarios. + +{{ theme }} + +### Drop-down menu expanded to the left + +The drop-down menu supports expansion to the left. + +{{ left }} diff --git a/docs/web/api/form.en-US.md b/docs/web/api/form.en-US.md new file mode 100644 index 0000000000..29c71abb28 --- /dev/null +++ b/docs/web/api/form.en-US.md @@ -0,0 +1,97 @@ +--- +title: Form +description: Used to collect, verify and submit data, generally composed of input box, radio box, check box, selector and other controls. +isComponent: true +usage: { title: "", description: "" } +spline: form +--- + +### Typical Form + +A typical form component contains a variety of form items, such as input boxes, selectors, radio boxes, multicheck boxes, switches, text input, and so on. + +- If there is a submit button `
-

导航9

+

导航8

@@ -94,13 +94,6 @@ spline: explain

Dropdown 下拉菜单
-
- - - -

Jumper 跳转

- -
@@ -421,7 +414,7 @@ spline: explain
-

消息提醒7

+

消息提醒8

diff --git a/js/color-picker/color.ts b/js/color-picker/color.ts index d44df1ad5a..1a561cb58f 100644 --- a/js/color-picker/color.ts +++ b/js/color-picker/color.ts @@ -103,6 +103,13 @@ export class Color { if (input === this.originColor) { return; } + if (this.isGradient) { + // 处理gradient模式下切换不同格式时的交互问题 + const colorHsv = tinyColor(input).toHsv(); + this.states = colorHsv; + this.updateCurrentGradientColor(); + return; + } this.originColor = input; this.isGradient = false; const gradientColors = parseGradientString(input); diff --git a/js/color-picker/gradient.ts b/js/color-picker/gradient.ts index ce6de8009d..cf9d0b40d1 100644 --- a/js/color-picker/gradient.ts +++ b/js/color-picker/gradient.ts @@ -1,3 +1,5 @@ +import isString from 'lodash/isString'; +import isNull from 'lodash/isNull'; /* eslint-disable no-param-reassign */ /** * 用于反解析渐变字符串为对象 @@ -14,7 +16,7 @@ import tinyColor from 'tinycolor2'; const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => { let source = ''; for (let i = 0; i < regexpList.length; i++) { - if (typeof regexpList[i] === 'string') { + if (isString(regexpList[i])) { source += regexpList[i]; } else { source += (regexpList[i] as RegExp).source; @@ -107,7 +109,7 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => { regExpLib.gradientSearch.lastIndex = 0; const matchGradient = regExpLib.gradientSearch.exec(input); - if (matchGradient !== null) { + if (!isNull(matchGradient)) { result = { original: matchGradient[0], colorStopList: [], @@ -134,7 +136,7 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => { // Loop though all the color-stops. matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]); - while (matchColorStop !== null) { + while (!isNull(matchColorStop)) { stopResult = { color: matchColorStop[1], }; diff --git a/js/common.ts b/js/common.ts index 51c5580355..78c4e9778d 100644 --- a/js/common.ts +++ b/js/common.ts @@ -1,11 +1,19 @@ +export type PlainObject = { [key: string]: any }; + export type OptionData = { label?: string; value?: string | number; -} & { [key: string]: any }; - -export type TreeOptionData = { - children?: Array; -} & OptionData; +} & PlainObject; + +export type TreeOptionData = { + children?: Array>; + /** option label content */ + label?: any; + /** option search text */ + text?: string; + /** option value */ + value?: T; +} & PlainObject; export type SizeEnum = 'small' | 'medium' | 'large'; diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 027a3dc008..a04926b38d 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -1,31 +1,46 @@ +import isString from 'lodash/isString'; import dayjs from 'dayjs'; +import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'; +import isLeapYear from 'dayjs/plugin/isLeapYear'; import { extractTimeFormat } from './utils'; import log from '../log'; type DateValue = string | number | Date; +dayjs.extend(isoWeeksInYear); +dayjs.extend(isLeapYear); + export const TIME_FORMAT = 'HH:mm:ss'; // 统一解析日期格式字符串成 Dayjs 对象 export function parseToDayjs( value: string | Date | number, format: string, - timeOfDay?: string + timeOfDay?: string, + dayjsLocale?: string, ) { if (value === '') return dayjs(); let dateText = value; // format week if (/[w|W]/g.test(format)) { - if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format) as string; + if (!isString(dateText)) { + dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } - const yearStr = dateText.split(/[-/.]/)[0]; - const weekStr = dateText.split(/[-/.]/)[1]; - const weekFormatStr = format.split(/[-/.]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); - for (let i = 0; i <= 52; i += 1) { + const yearStr = dateText.split(/[-/.\s]/)[0]; + const weekStr = dateText.split(/[-/.\s]/)[1]; + const weekFormatStr = format.split(/[-/.\s]/)[1]; + + let firstWeek = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').startOf('year'); + // 第一周ISO定义: 本年度第一个星期四所在的星期 + // 如果第一年第一天在星期四后, 直接跳到下一周, 下一周必定是第一周 + // 否则本周即为第一周 + if (firstWeek.day() > 4 || firstWeek.day() === 0) firstWeek = firstWeek.add(1, 'week'); + + // 一年有52或者53周, 引入IsoWeeksInYear辅助查询 + const weekCounts = dayjs(yearStr, 'YYYY').locale(dayjsLocale || 'zh-cn').isoWeeksInYear(); + for (let i = 0; i <= weekCounts; i += 1) { let nextWeek = firstWeek.add(i, 'week'); // 重置为周的第一天 if (timeOfDay === 'start') nextWeek = nextWeek.subtract(5, 'day'); @@ -37,16 +52,16 @@ export function parseToDayjs( // format quarter if (/Q/g.test(format)) { - if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format) as string; + if (!isString(dateText)) { + dateText = dayjs(dateText).locale(dayjsLocale || 'zh-cn').format(format) as string; } - const yearStr = dateText.split(/[-/.]/)[0]; - const quarterStr = dateText.split(/[-/.]/)[1]; - const quarterFormatStr = format.split(/[-/.]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); - for (let i = 0; i <= 52; i += 1) { - const nextQuarter = firstWeek.add(i, 'quarter'); + const yearStr = dateText.split(/[-/.\s]/)[0]; + const quarterStr = dateText.split(/[-/.\s]/)[1]; + const quarterFormatStr = format.split(/[-/.\s]/)[1]; + const firstQuarter = dayjs(yearStr, 'YYYY').startOf('year'); + for (let i = 0; i < 4; i += 1) { + const nextQuarter = firstQuarter.add(i, 'quarter'); if (nextQuarter.format(quarterFormatStr) === quarterStr) { return nextQuarter; } @@ -71,17 +86,19 @@ export function parseToDayjs( function formatRange({ newDate, format, + dayjsLocale, targetFormat, autoSwap, }: { newDate: any; format: string; + dayjsLocale?: string; targetFormat?: string; autoSwap?: boolean; }) { if (!newDate || !Array.isArray(newDate)) return []; - let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format)); + let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format).locale(dayjsLocale)); // 保证后面的时间大于前面的时间 if ( @@ -116,14 +133,16 @@ function formatSingle({ newDate, format, targetFormat, + dayjsLocale, }: { newDate: any; format: string; targetFormat?: string; + dayjsLocale?: string; }) { if (!newDate) return ''; - const dayJsDate = parseToDayjs(newDate, format); + const dayJsDate = parseToDayjs(newDate, format).locale(dayjsLocale); // 格式化失败提示 if (!dayJsDate.isValid()) { @@ -145,9 +164,13 @@ function formatSingle({ // 检测日期是否合法 export function isValidDate(value: DateValue | DateValue[], format: string) { if (Array.isArray(value)) { - return value.every((v) => dayjs(v, format).isValid() || dayjs(v).isValid()); + return value.every((v) => { + if (v === '') return true; + return dayjs(v, format).isValid() || dayjs(v).isValid(); + }); } + if (value === '') return true; return dayjs(value, format).isValid() || dayjs(value).isValid(); } @@ -157,31 +180,45 @@ export function formatDate( { format, targetFormat, + dayjsLocale = 'zh-cn', autoSwap, - }: { format: string; targetFormat?: string; autoSwap?: boolean } + }: { format: string; dayjsLocale?: string, targetFormat?: string; autoSwap?: boolean } ) { let result; if (Array.isArray(newDate)) { - result = formatRange({ newDate, format, targetFormat, autoSwap }); + result = formatRange({ newDate, format, dayjsLocale, targetFormat, autoSwap }); } else { - result = formatSingle({ newDate, format, targetFormat }); + result = formatSingle({ newDate, format, dayjsLocale, targetFormat }); } return result; } -// 格式化时间 -export function formatTime(value: DateValue | DateValue[], timeFormat: string) { - let result; - - if (Array.isArray(value)) { - result = value.map((v) => dayjs(v || new Date(new Date().setHours(0, 0, 0, 0))).format(timeFormat)); - } else { - result = dayjs((value || new Date(new Date().setHours(0, 0, 0, 0)))).format(timeFormat); +// 对齐格式化时间 +export function calcFormatTime(time: string, timeFormat: string) { + if (time && timeFormat) { + const timeArr = time.split(':'); + const timeFormatArr = timeFormat.split(':'); + return timeArr.slice(0, timeFormatArr.length).join(':'); } + return time; +} - return result; +// TODO 细化 value 类型 +// 格式化时间 +export function formatTime(value: any, format: string, timeFormat: string, defaultTime: string | string[]) { + // 无论参数是不是数组，统一转成数组处理 + let result = Array.isArray(value) ? value : [value]; + // eslint-disable-next-line no-param-reassign + defaultTime = Array.isArray(defaultTime) ? defaultTime : [defaultTime, defaultTime]; + result = result.map((v, i) => { + // string格式需要用format去解析，其他诸如Date、time-stamp格式则直接dayjs + if (v) return dayjs(v, typeof v === 'string' ? format : undefined).format(timeFormat); + return calcFormatTime(defaultTime[i], timeFormat); + }); + // value是数组就输出数组，不是数组就输出第一个即可 + return Array.isArray(value) ? result : result?.[0]; } // 根据不同 mode 给出格式化默认值 @@ -234,3 +271,47 @@ export function getDefaultFormat({ log.error('DatePicker', `Invalid mode: ${mode}`); return {}; } + +// 初始化面板年份月份 +export function initYearMonthTime({ + value, + mode = 'date', + format, + timeFormat = 'HH:mm:ss', + enableTimePicker, +}: { + value: Array; + mode: string; + format: string; + timeFormat?: string; + enableTimePicker?: boolean; +}) { + const defaultYearMonthTime = { + year: [dayjs().year(), dayjs().year()], + month: [dayjs().month(), dayjs().month()], + time: [dayjs().format(timeFormat), dayjs().format(timeFormat)], + }; + if (mode === 'year') { + defaultYearMonthTime.year[1] += 10; + } else if (mode === 'month' || mode === 'quarter') { + defaultYearMonthTime.year[1] += 1; + } else if ((mode === 'date' || mode === 'week') && !enableTimePicker) { + // 切换至下一年 + if (defaultYearMonthTime.month[0] === 11) { + defaultYearMonthTime.year[1] += 1; + defaultYearMonthTime.month[1] = 0; + } else { + defaultYearMonthTime.month[1] += 1; + } + } + + if (!value || !Array.isArray(value) || !value.length) { + return defaultYearMonthTime; + } + + return { + year: value.map((v) => parseToDayjs(v, format).year()), + month: value.map((v) => parseToDayjs(v, format).month()), + time: value.map((v) => parseToDayjs(v, format).format(timeFormat)), + }; +} diff --git a/js/date-picker/utils.ts b/js/date-picker/utils.ts index f21aaa5cff..dc02df92fb 100644 --- a/js/date-picker/utils.ts +++ b/js/date-picker/utils.ts @@ -1,18 +1,17 @@ +import isFunction from 'lodash/isFunction'; import dayjs from 'dayjs'; import dayJsIsBetween from 'dayjs/plugin/isBetween'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; import weekYear from 'dayjs/plugin/weekYear'; import localeData from 'dayjs/plugin/localeData'; -import weekOfYear from 'dayjs/plugin/weekOfYear'; import quarterOfYear from 'dayjs/plugin/quarterOfYear'; -import isoWeek from 'dayjs/plugin/isoWeek'; import advancedFormat from 'dayjs/plugin/advancedFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import chunk from 'lodash/chunk'; -dayjs.extend(isoWeek); +dayjs.extend(weekOfYear); dayjs.extend(weekYear); dayjs.extend(localeData); -dayjs.extend(weekOfYear); dayjs.extend(quarterOfYear); dayjs.extend(advancedFormat); dayjs.extend(customParseFormat); @@ -72,8 +71,8 @@ function isSameMonth(date1: Date, date2: Date): boolean { return isSameYear(date1, date2) && date1.getMonth() === date2.getMonth(); } -function isSameWeek(date1: Date, date2: Date): boolean { - return isSameMonth(date1, date2) && dayjs(date1).week() === dayjs(date2).week(); +function isSameWeek(date1: Date, date2: Date, dayjsLocale = 'zh-cn'): boolean { + return isSameMonth(date1, date2) && dayjs(date1).locale(dayjsLocale).week() === dayjs(date2).locale(dayjsLocale).week(); } function isSameDate(date1: Date, date2: Date): boolean { @@ -102,7 +101,7 @@ function compareAsc(date1: { getTime: () => any }, date2: Date): number { * @param {String} type 比较类型，默认比较到『日』 date|month|year * @returns {Boolean} */ -export function isSame(date1: Date, date2: Date, type = 'date'): boolean { +export function isSame(date1: Date, date2: Date, type = 'date', dayjsLocale = 'zh-cn'): boolean { const func = { isSameYear, isSameQuarter, @@ -110,7 +109,7 @@ export function isSame(date1: Date, date2: Date, type = 'date'): boolean { isSameWeek, isSameDate, }; - return func[`isSame${firstUpperCase(type)}`](date1, date2); + return func[`isSame${firstUpperCase(type)}`](date1, date2, dayjsLocale); } export function outOfRanges(d: Date, min: any, max: any) { @@ -201,6 +200,7 @@ export interface OptionsType { minDate: Date; maxDate: Date; showWeekOfYear?: Boolean; + dayjsLocale?: string; monthLocal?: string[]; quarterLocal?: string[]; } @@ -213,6 +213,7 @@ export function getWeeks( disableDate = () => false, minDate, maxDate, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const prependDay = getFirstDayOfMonth({ year, month }); @@ -227,12 +228,13 @@ export function getWeeks( text: i, active: false, value: currentDay, - disabled: (typeof disableDate === 'function' && disableDate(currentDay)) + disabled: (isFunction(disableDate) && disableDate(currentDay)) || outOfRanges(currentDay, minDate, maxDate), now: isSame(today, currentDay), firstDayOfMonth: i === 1, lastDayOfMonth: i === maxDays, type: 'current-month', + dayjsObj: dayjs(currentDay).locale(dayjsLocale), }); } @@ -243,9 +245,10 @@ export function getWeeks( text: prependDay.getDate().toString(), active: false, value: new Date(prependDay), - disabled: (typeof disableDate === 'function' && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(prependDay)) || outOfRanges(prependDay, minDate, maxDate), additional: true, // 非当前月 type: 'prev-month', + dayjsObj: dayjs(prependDay).locale(dayjsLocale), }); prependDay.setDate(prependDay.getDate() - 1); if (prependDay.getDay() === Math.abs(firstDayOfWeek + 6) % 7) break; @@ -259,9 +262,10 @@ export function getWeeks( text: appendDay.getDate(), active: false, value: new Date(appendDay), - disabled: (typeof disableDate === 'function' && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(appendDay)) || outOfRanges(appendDay, minDate, maxDate), additional: true, // 非当前月 type: 'next-month', + dayjsObj: dayjs(appendDay).locale(dayjsLocale), }); } @@ -273,7 +277,8 @@ export function getWeeks( ...d[0], active: false, value: d[0].value, - text: dayjs(d[0].value).week(), + text: dayjs(d[0].value).locale(dayjsLocale).week(), + dayjsObj: dayjs(d[0].value).locale(dayjsLocale), }); }); } @@ -287,7 +292,8 @@ export function getQuarters( disableDate = () => false, minDate, maxDate, - quarterLocal + quarterLocal, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const quarterArr = []; @@ -299,9 +305,10 @@ export function getQuarters( quarterArr.push({ value: date, now: isSame(date, today, 'quarter'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: quarterLocal[i - 1], + dayjsObj: dayjs(date).locale(dayjsLocale), }); } @@ -314,6 +321,7 @@ export function getYears( disableDate = () => false, minDate, maxDate, + dayjsLocale = 'zh-cn', }: OptionsType, ) { const startYear = parseInt((year / 10).toString(), 10) * 10; @@ -329,9 +337,10 @@ export function getYears( yearArr.push({ value: date, now: isSame(date, today, 'year'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: `${date.getFullYear()}`, + dayjsObj: dayjs(date).locale(dayjsLocale), }); } @@ -340,7 +349,7 @@ export function getYears( export function getMonths(year: number, params: OptionsType) { const { - disableDate = () => false, minDate, maxDate, monthLocal, + disableDate = () => false, minDate, maxDate, monthLocal, dayjsLocale = 'zh-cn', } = params; const MonthArr = []; const today = getToday(); @@ -351,9 +360,10 @@ export function getMonths(year: number, params: OptionsType) { MonthArr.push({ value: date, now: isSame(date, today, 'month'), - disabled: (typeof disableDate === 'function' && disableDate(date)) || outOfRanges(date, minDate, maxDate), + disabled: (isFunction(disableDate) && disableDate(date)) || outOfRanges(date, minDate, maxDate), active: false, text: monthLocal[date.getMonth()], // `${date.getMonth() + 1} ${monthText || '月'}`, + dayjsObj: dayjs(date).locale(dayjsLocale), }); } @@ -450,15 +460,17 @@ export function isEnabledDate({ format, }: { value: Date; - mode: 'year' | 'month' | 'date'; + mode: 'year' | 'month' | 'date' | 'quarter' | 'week'; format: string; - disableDate: DisableDate; + disableDate: any; }): boolean { if (!disableDate) return true; + const availableMode = mode === 'quarter' ? 'date' : mode; + let isEnabled = true; // 值类型为 Function 则表示返回值为 true 的日期会被禁用 - if (typeof disableDate === 'function') { + if (isFunction(disableDate)) { return !disableDate(value); } @@ -478,7 +490,7 @@ export function isEnabledDate({ const compareMin = dayjs(new Date(from)); const compareMax = dayjs(new Date(to)); - return !dayjs(value).isBetween(compareMin, compareMax, mode, '[]'); + return !dayjs(value).isBetween(compareMin, compareMax, availableMode, '[]'); } const min = before ? new Date(before) : null; @@ -489,13 +501,13 @@ export function isEnabledDate({ const compareMin = dayjs(new Date(min)); const compareMax = dayjs(new Date(max)); - isEnabled = dayjs(value).isBetween(compareMin, compareMax, mode, '[]'); + isEnabled = dayjs(value).isBetween(compareMin, compareMax, availableMode, '[]'); } else if (min) { const compareMin = dayjs(new Date(min)); - isEnabled = !dayjs(value).isBefore(compareMin, mode); + isEnabled = !dayjs(value).isBefore(compareMin, availableMode); } else if (max) { const compareMax = dayjs(new Date(max)); - isEnabled = !dayjs(value).isAfter(compareMax, mode); + isEnabled = !dayjs(value).isAfter(compareMax, availableMode); } return isEnabled; } diff --git a/js/global-config/default-config.ts b/js/global-config/default-config.ts index 3d0b68555a..05961146ce 100644 --- a/js/global-config/default-config.ts +++ b/js/global-config/default-config.ts @@ -26,6 +26,7 @@ export default { success: 'primary', }, }, + message: {}, popconfirm: { confirmBtnTheme: { default: 'primary', @@ -71,4 +72,4 @@ export default { form: { requiredMark: undefined, }, -}; +} as const; diff --git a/js/global-config/locale/ar_KW.ts b/js/global-config/locale/ar_KW.ts new file mode 100644 index 0000000000..bb71acb3d2 --- /dev/null +++ b/js/global-config/locale/ar_KW.ts @@ -0,0 +1,224 @@ +/* eslint-disable no-template-curly-in-string */ +// 文件有效，为国际化做准备 +import 'dayjs/locale/ar'; + +export default { + pagination: { + itemsPerPage: '{size} / الصفحة', + jumpTo: 'القفز إلى', + page: '', + total: '{total} عناصر', + }, + cascader: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + calendar: { + yearSelection: '{year}', + monthSelection: '{month}', + yearRadio: 'عام', + monthRadio: 'شهر', + hideWeekend: 'إخفاء عطلة نهاية الأسبوع', + showWeekend: 'عرض عطلة نهاية الأسبوع', + today: 'اليوم', + thisMonth: 'هذا الشهر', + week: 'الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد', + cellMonth: + 'يناير ، فبراير ، مارس ، أبريل ، مايو ، يونيو ، يوليو ، أغسطس ، سبتمبر ، أكتوبر ، نوفمبر ، ديسمبر', + }, + transfer: { + title: '{checked} / {total}', + empty: 'لا تتوافر بيانات', + placeholder: 'أدخل الكلمة للبحث', + }, + timePicker: { + dayjsLocale: 'ar', + now: 'الآن', + confirm: 'نعم', + anteMeridiem: 'صباحا', + postMeridiem: 'مساءً', + placeholder: 'الرجاء التحديد', + }, + dialog: { + confirm: 'نعم', + cancel: 'يلغي', + }, + drawer: { + confirm: 'نعم', + cancel: 'يلغي', + }, + popconfirm: { + confirm: { content: 'نعم' }, + cancel: { content: 'يلغي' }, + }, + table: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', + filterInputPlaceholder: + 'الرجاء إدخال المحتوى (لا توجد قيمة افتراضية متاحة)', + sortAscendingOperationText: 'انقر للفرز تصاعديًا', + sortCancelOperationText: 'انقر لإلغاء الفرز', + sortDescendingOperationText: 'انقر للفرز تنازليًا', + clearFilterResultButtonText: 'صافي', + columnConfigButtonText: 'تكوين العمود', + columnConfigTitleText: 'تكوين عمود الجدول', + columnConfigDescriptionText: + 'الرجاء تحديد أعمدة البيانات المراد عرضها في الجدول', + confirmText: 'نعم', + cancelText: 'يلغي', + resetText: 'إعادة ضبط', + selectAllText: 'اختر الكل', + searchResultText: "تم العثور على بحث '{result}' و{count} من العناصر.", + }, + + select: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + + tree: { empty: 'لا تتوافر بيانات' }, + + treeSelect: { + empty: 'لا تتوافر بيانات', + loadingText: 'جار التحميل…', + placeholder: 'الرجاء التحديد', + }, + + datePicker: { + dayjsLocale: 'ar', + placeholder: { + date: 'حدد تاريخ', + month: 'اختر الشهر', + year: 'اختر السنة', + }, + weekdays: [ + 'الإثنين', + 'الثلاثاء', + 'الأربعاء', + 'الخميس', + 'الجمعة', + 'السبت', + 'الأحد', + ], + months: [ + 'يناير', + 'فبراير', + 'مارس', + 'أبريل', + 'مايو', + 'يونيو', + 'يوليو', + 'أغسطس', + 'سبتمبر', + 'أكتوبر', + 'نوفمبر', + 'ديسمبر', + ], + quarters: ['Q1', 'Q2', 'Q3', 'Q4'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: 'D', + yearAriaLabel: 'Y', + monthAriaLabel: 'M', + weekAbbreviation: 'W', + confirm: 'نعم', + selectTime: 'حدد الوقت', + selectDate: 'حدد تاريخ', + nextYear: 'العام القادم', + preYear: 'العام الماضي', + nextMonth: 'الشهر القادم', + preMonth: 'الشهر الماضي', + preDecade: 'العقد الماضي', + nextDecade: 'العقد القادم', + now: 'الآن', + }, + + upload: { + sizeLimitMessage: 'لا يمكن أن يتجاوز حجم الملف {sizeLimit}', + cancelUploadText: 'يلغي', + triggerUploadText: { + fileInput: 'حدد الملف', + image: 'انقر لتحميل الصورة', + normal: 'تحميل', + reupload: 'أعد تحميل', + continueUpload: 'تحميل المزيد', + delete: 'حذف', + uploading: 'تحميل', + }, + + dragger: { + dragDropText: 'أسقطها هنا', + draggingText: 'اسحب الملف هنا', + clickAndDragText: 'اختر ملفًا أو اسحبه هنا.', + }, + + file: { + fileNameText: 'اسم الملف', + fileSizeText: 'حجم', + fileStatusText: 'حالة', + fileOperationText: 'عملية', + fileOperationDateText: 'تاريخ', + }, + progress: { + uploadingText: 'تحميل', + waitingText: 'جار التحميل', + failText: 'التحميل فشل', + successText: 'تم التحميل بنجاح.', + }, + }, + + form: { + errorMessage: { + date: 'الرجاء إدخال ${name} الصحيح', + url: 'الرجاء إدخال ${name} الصحيح', + required: 'مطلوب ${name}', + max: 'يمكن أن يحتوي ${name} على ما يصل إلى ${validate} حرفًا', + min: 'لا يمكن أن يكون ${name} أقل من ${validate} حرفًا', + len: 'يجب أن يتكون ${name} من أحرف ${validate} بالضبط', + enum: '${name} يجب أن يكون واحدًا من ${validate} ', + idcard: 'الرجاء إدخال ${name} الصحيح', + telnumber: 'الرجاء إدخال ${name} الصحيح', + pattern: 'الرجاء إدخال ${name} الصحيح', + validator: '${name} غير صالح', + boolean: '${name} ليس منطقيًا', + number: 'يجب أن يكون ${name} رقمًا', + }, + }, + + input: { placeholder: 'الرجاء إدخال' }, + + list: { + loadingText: 'جار التحميل…', + loadingMoreText: 'انقر لتحميل المزيد', + }, + + alert: { + expandText: 'تزسيع', + collapseText: 'انهيار', + }, + + anchor: { + copySuccessText: 'تم نسخ الرابط', + copyText: 'انسخ الرابط', + }, + + colorPicker: { + swatchColorTitle: 'الألوان الافتراضية', + recentColorTitle: 'مستخدم حديثا', + clearConfirmText: 'هل تريد مسح الألوان المستخدمة مؤخرًا؟', + }, + image: { + errorText: 'غير قادر على التحميل', + loadingText: 'جار التحميل', + }, + imageViewer: { + errorText: 'غير قادر على التحميل', + mirrorTipText: 'مرآة', + rotateTipText: 'استدارة', + originalSizeTipText: 'أصلي', + }, +} as const; diff --git a/js/global-config/locale/en_US.ts b/js/global-config/locale/en_US.ts index e5a57b0309..21ff9e1159 100644 --- a/js/global-config/locale/en_US.ts +++ b/js/global-config/locale/en_US.ts @@ -1,5 +1,7 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/en'; + export default { pagination: { itemsPerPage: '{size} / page', @@ -22,7 +24,8 @@ export default { today: 'Today', thisMonth: 'This Month', week: 'Monday,Tuesday,Wedsday,Thuresday,Friday,Staturday,Sunday', - cellMonth: 'January,February,March,April,May,June,July,August,September,October,November,December', + cellMonth: + 'January,February,March,April,May,June,July,August,September,October,November,December', }, transfer: { title: '{checked} / {total}', @@ -30,6 +33,7 @@ export default { placeholder: 'enter keyworkd to search', }, timePicker: { + dayjsLocale: 'en', now: 'Now', confirm: 'Confirm', anteMeridiem: 'AM', @@ -63,7 +67,8 @@ export default { clearFilterResultButtonText: 'Clear', columnConfigButtonText: 'Column Config', columnConfigTitleText: 'Table Column Config', - columnConfigDescriptionText: 'Please select columns to show them in the table', + columnConfigDescriptionText: + 'Please select columns to show them in the table', confirmText: 'Confirm', cancelText: 'Cancel', resetText: 'Reset', @@ -84,13 +89,27 @@ export default { placeholder: 'please select', }, datePicker: { + dayjsLocale: 'en', placeholder: { date: 'select date', month: 'select month', year: 'select year', }, weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + months: [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ], quarters: ['Q1', 'Q2', 'Q3', 'Q4'], rangeSeparator: ' - ', direction: 'ltr', @@ -178,4 +197,32 @@ export default { recentColorTitle: 'Recently Used', clearConfirmText: 'Clear recently used colors?', }, -}; + guide: { + finishButtonProps: { + content: 'Finish', + theme: 'primary', + }, + nextButtonProps: { + content: 'Next Step', + theme: 'primary', + }, + skipButtonProps: { + content: 'Skip', + theme: 'default', + }, + prevButtonProps: { + content: 'Last Step', + theme: 'default', + }, + image: { + errorText: 'unable to load', + loadingText: 'loading', + }, + imageViewer: { + errorText: 'unable to load', + mirrorTipText: 'mirror', + rotateTipText: 'rotate', + originalSizeTipText: 'original', + }, + }, +} as const; diff --git a/js/global-config/locale/it_IT.ts b/js/global-config/locale/it_IT.ts new file mode 100644 index 0000000000..08b009116c --- /dev/null +++ b/js/global-config/locale/it_IT.ts @@ -0,0 +1,227 @@ +/* eslint-disable no-template-curly-in-string */ +// 意大利语-意大利 Italian +import 'dayjs/locale/it'; + +export default { + pagination: { + itemsPerPage: '{size} articoli/pagina', + jumpTo: 'Vai a', + page: 'pagina', + total: 'totale {total} elementi dati', + }, + cascader: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + calendar: { + yearSelection: '{year} anno', + monthSelection: '{month} mese', + yearRadio: 'anno', + monthRadio: 'mese', + hideWeekend: 'Nascondi weekend', + showWeekend: 'Mostra weekend', + today: 'Oggi', + thisMonth: 'Questo mese', + week: 'Lun,Mar,Mer,Gio,Ven,Sab,Dom', + cellMonth: 'Gen,Feb,Mar,Apr,Mag,Giu,Lug,Ago,Set,Ott,Nov,Dic', + }, + transfer: { + title: '{checked} / {total} elementi', + empty: 'Nessun dato', + placeholder: 'Inserisci la parola chiave per la ricerca', + }, + timePicker: { + dayjsLocale: 'it', + now: 'Ora', + confirm: 'Conferma', + anteMeridiem: 'AM', + postMeridiem: 'PM', + placeholder: 'Seleziona ora', + }, + dialog: { + confirm: 'OK', + cancel: 'Annulla', + }, + drawer: { + confirm: 'OK', + cancel: 'Annulla', + }, + popconfirm: { + confirm: { + content: 'OK', + }, + cancel: { + content: 'Annulla', + }, + }, + table: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso, attendere', + loadingMoreText: 'Clicca per caricare di più', + filterInputPlaceholder: 'Inserisci il contenuto (nessun valore predefinito)', + sortAscendingOperationText: 'Clicca per ordinare in modo crescente', + sortCancelOperationText: "Clicca per annullare l'ordinamento", + sortDescendingOperationText: 'Clicca per ordinare in modo decrescente', + clearFilterResultButtonText: 'Pulisci il filtro', + columnConfigButtonText: 'Configurazione delle colonne', + columnConfigTitleText: 'Configurazione delle colonne della tabella', + columnConfigDescriptionText: 'Seleziona le colonne dei dati da visualizzare nella tabella', + confirmText: 'Conferma', + cancelText: 'Annulla', + resetText: 'Ripristina', + selectAllText: 'Seleziona tutto', + searchResultText: 'Ricerca "{result}", trovati {count} risultati', + }, + select: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + tree: { + empty: 'Nessun dato', + }, + treeSelect: { + empty: 'Nessun dato', + loadingText: 'Caricamento in corso', + placeholder: 'Seleziona', + }, + datePicker: { + dayjsLocale: 'it', + placeholder: { + date: 'Seleziona la data', + month: 'Seleziona il mese', + year: "Seleziona l'anno", + }, + weekdays: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'], + months: [ + 'Gen', + 'Feb', + 'Mar', + 'Apr', + 'Mag', + 'Giu', + 'Lug', + 'Ago', + 'Set', + 'Ott', + 'Nov', + 'Dic', + ], + quarters: ['Primo trimestre', 'Secondo trimestre', 'Terzo trimestre', 'Quarto trimestre'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'DD-MM-YYYY', + dayAriaLabel: 'Giorno', + weekAbbreviation: 'Sett.', + yearAriaLabel: 'Anno', + monthAriaLabel: 'Mese', + confirm: 'Conferma', + selectTime: 'Seleziona ora', + selectDate: 'Seleziona data', + nextYear: 'Anno successivo', + preYear: 'Anno precedente', + nextMonth: 'Mese successivo', + preMonth: 'Mese precedente', + preDecade: 'Decennio precedente', + nextDecade: 'Decennio successivo', + now: 'Ora', + }, + upload: { + sizeLimitMessage: 'La dimensione del file non può superare {sizeLimit}', + cancelUploadText: 'Annulla caricamento', + triggerUploadText: { + fileInput: 'Seleziona file', + image: 'Clicca per caricare immagine', + normal: 'Clicca per caricare', + reupload: 'Seleziona di nuovo', + continueUpload: 'Continua a selezionare', + delete: 'Elimina', + uploading: 'Caricamento in corso', + }, + dragger: { + dragDropText: 'Rilascia il mouse', + draggingText: 'Trascina in questa area', + clickAndDragText: + 'Clicca su "Seleziona file" sopra o trascina i file in questa area', + }, + file: { + fileNameText: 'Nome del file', + fileSizeText: 'Dimensione del file', + fileStatusText: 'Stato', + fileOperationText: 'Operazione', + fileOperationDateText: 'Data di caricamento', + }, + progress: { + uploadingText: 'Caricamento in corso', + waitingText: 'In attesa di caricamento', + failText: 'Caricamento fallito', + successText: 'Caricamento riuscito', + }, + }, + form: { + errorMessage: { + date: 'Inserisci la ${name} corretta', + url: 'Inserisci la ${name} corretta', + required: '${name} obbligatorio', + max: 'La lunghezza dei caratteri di ${name} non può superare i ${validate} caratteri', + min: 'La lunghezza dei caratteri di ${name} non può essere inferiore a ${validate} caratteri', + len: 'La lunghezza dei caratteri di ${name} deve essere ${validate}', + enum: '${name} può essere solo ${validate}, ecc.', + idcard: 'Inserisci la ${name} corretta', + telnumber: 'Inserisci la ${name} corretta', + pattern: 'Inserisci la ${name} corretta', + validator: '${name} non conforme ai requisiti', + boolean: 'Il tipo di dati di ${name} deve essere booleano', + number: '${name} deve essere un numero', + }, + }, + input: { + placeholder: 'Inserisci', + }, + list: { + loadingText: 'Caricamento in corso, attendere prego', + loadingMoreText: 'Clicca per caricare di più', + }, + alert: { + expandText: 'Espandi per maggiori dettagli', + collapseText: 'Riduci', + }, + anchor: { + copySuccessText: 'Link copiato con successo', + copyText: 'Copia link', + }, + colorPicker: { + swatchColorTitle: 'Colori predefiniti dal sistema', + recentColorTitle: 'Colori usati di recente', + clearConfirmText: 'Sei sicuro di voler cancellare i colori usati di recente?', + }, + guide: { + finishButtonProps: { + content: 'Finito', + theme: 'primario', + }, + nextButtonProps: { + content: 'Prossimo', + theme: 'primario', + }, + skipButtonProps: { + content: 'Salta', + theme: 'predefinito', + }, + prevButtonProps: { + content: 'Precedente', + theme: 'predefinito', + }, + }, + image: { + errorText: "L'immagine non può essere visualizzata", + loadingText: 'Caricamento immagine in corso', + }, + imageViewer: { + errorText: 'Caricamento immagine fallito, puoi provare a ricaricare', + mirrorTipText: 'Specchio', + rotateTipText: 'Ruota', + originalSizeTipText: 'Dimensione originale', + }, +} as const; diff --git a/js/global-config/locale/ja_JP.ts b/js/global-config/locale/ja_JP.ts index 4b4f89b41a..a49cafd146 100644 --- a/js/global-config/locale/ja_JP.ts +++ b/js/global-config/locale/ja_JP.ts @@ -1,5 +1,7 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/ja'; + export default { pagination: { itemsPerPage: '{size} /ページ', @@ -30,6 +32,7 @@ export default { placeholder: '検索するキーワードを入力してください', }, timePicker: { + dayjsLocale: 'ja', now: 'このとき', confirm: '決定事項', anteMeridiem: 'モーニング', @@ -84,13 +87,27 @@ export default { placeholder: '選択してください', }, datePicker: { + dayjsLocale: 'ja', placeholder: { date: '日付を選択してください', month: '月を選択してください', year: '年度を選択してください', }, - weekdays: ['一', '二', '三', '四', '五', '六', '日'], - months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'], + weekdays: ['月', '火', '水', '木', '金', '土', '日'], + months: [ + '1 月', + '2 月', + '3 月', + '4 月', + '5 月', + '6 月', + '7 月', + '8 月', + '9 月', + '10 月', + '11 月', + '12 月', + ], quarters: ['Q1', 'Q2', 'Q3', 'Q4'], rangeSeparator: ' - ', direction: 'ltr', @@ -125,7 +142,8 @@ export default { dragger: { dragDropText: 'マウスを離す', draggingText: 'この領域にドラッグ＆ドロップする', - clickAndDragText: '上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください', + clickAndDragText: + '上の「ファイルを選択」をクリックするか、このエリアにファイルをドラッグ＆ドロップしてください', }, file: { fileNameText: 'ファイル名', @@ -178,4 +196,32 @@ export default { recentColorTitle: '最近使用した色', clearConfirmText: '最近使用した色をクリアにするのは確実ですか？', }, -}; + guide: { + finishButtonProps: { + content: '終了', + theme: 'primary', + }, + nextButtonProps: { + content: '次のステップ', + theme: 'primary', + }, + skipButtonProps: { + content: 'スキップ', + theme: 'default', + }, + prevButtonProps: { + content: '前へ', + theme: 'default', + }, + }, + image: { + errorText: '画像を表示できません', + loadingText: '画像の読み込み', + }, + imageViewer: { + errorText: '画像の読み込みに失敗しました。再読み込みしてみてください', + mirrorTipText: '鏡像', + rotateTipText: '回転する', + originalSizeTipText: 'オリジナルサイズ', + }, +} as const; diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts index 356eb5b116..75367a988b 100644 --- a/js/global-config/locale/ko_KR.ts +++ b/js/global-config/locale/ko_KR.ts @@ -1,5 +1,7 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/ko'; + export default { pagination: { itemsPerPage: '{size} /페이지', @@ -30,6 +32,7 @@ export default { placeholder: '검색할 키워드를 입력하세요', }, timePicker: { + dayjsLocale: 'ko', now: '지금', confirm: '확신하는', anteMeridiem: '아침', @@ -84,13 +87,27 @@ export default { placeholder: '선택해주세요', }, datePicker: { + dayjsLocale: 'ko', placeholder: { date: '날짜를 선택하세요Z', month: '월을 선택하세요', year: '연도를 선택하세요', }, - weekdays: ['하나', '둘', '삼', '4', '다섯', '여섯', '낮'], - months: ['1 월', '2 월', '3 월', '4 월', '5 월', '6 월', '7 월', '8 월', '9 월', '10 월', '11 월', '12 월'], + weekdays: ['월', '화', '수', '목', '금', '토', '일'], + months: [ + '1 월', + '2 월', + '3 월', + '4 월', + '5 월', + '6 월', + '7 월', + '8 월', + '9 월', + '10 월', + '11 월', + '12 월', + ], quarters: ['Q1', 'Q2', 'Q3', 'Q4'], rangeSeparator: ' - ', direction: 'ltr', @@ -120,12 +137,13 @@ export default { reupload: '재업로드', continueUpload: '계속 업로드', delete: '삭제', - uploading: '업로드' + uploading: '업로드', }, dragger: { dragDropText: '마우스를 놓으십시오', draggingText: '이 영역으로 드래그 앤 드롭', - clickAndDragText: '위의 "파일 선택"을 클릭하거나 파일을 이 영역으로 끌어다 놓습니다', + clickAndDragText: + '위의 "파일 선택"을 클릭하거나 파일을 이 영역으로 끌어다 놓습니다', }, file: { fileNameText: '파일 이름', @@ -178,4 +196,32 @@ export default { recentColorTitle: '최근 사용한 색상', clearConfirmText: '최근에 사용한 색상을 지우시겠습니까?', }, -}; + guide: { + finishButtonProps: { + content: '완료', + theme: 'primary', + }, + nextButtonProps: { + content: '다음 단계', + theme: 'primary', + }, + skipButtonProps: { + content: '건너뛰기', + theme: 'default', + }, + prevButtonProps: { + content: '마지막 단계', + theme: 'default', + }, + }, + image: { + errorText: '사진을 표시할 수 없습니다.', + loadingText: '이미지 로딩', + }, + imageViewer: { + errorText: '이미지를 로드하지 못했습니다. 새로고침해 보세요.', + mirrorTipText: '미러 이미지', + rotateTipText: '회전하다', + originalSizeTipText: '원본 크기', + }, +} as const; diff --git a/js/global-config/locale/ru_RU.ts b/js/global-config/locale/ru_RU.ts new file mode 100644 index 0000000000..44f05d8006 --- /dev/null +++ b/js/global-config/locale/ru_RU.ts @@ -0,0 +1,226 @@ +/* eslint-disable no-template-curly-in-string */ +// 俄语-俄罗斯 Russian +import 'dayjs/locale/ru'; + +export default { + pagination: { + itemsPerPage: '{size} шт./стр.', + jumpTo: 'Перейти к', + page: 'стр.', + total: 'Всего {total} элементов данных', + }, + cascader: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + calendar: { + yearSelection: '{year} год', + monthSelection: '{month} месяц', + yearRadio: 'Год', + monthRadio: 'Месяц', + hideWeekend: 'Скрыть выходные', + showWeekend: 'Показать выходные', + today: 'Сегодня', + thisMonth: 'Этот месяц', + week: 'Пн,Вт,Ср,Чт,Пт,Сб,Вс', + cellMonth: '1 мес.,2 мес.,3 мес.,4 мес.,5 мес.,6 мес.,7 мес.,8 мес.,9 мес.,10 мес.,11 мес.,12 мес.', + }, + transfer: { + title: '{checked} / {total} шт.', + empty: 'Нет данных', + placeholder: 'Введите ключевое слово для поиска', + }, + timePicker: { + dayjsLocale: 'zh-cn', + now: 'Сейчас', + confirm: 'Ок', + anteMeridiem: 'До полудня', + postMeridiem: 'После полудня', + placeholder: 'Выберите время', + }, + dialog: { + confirm: 'Подтвердить', + cancel: 'Отмена', + }, + drawer: { + confirm: 'Подтвердить', + cancel: 'Отмена', + }, + popconfirm: { + confirm: { + content: 'Подтвердить', + }, + cancel: { + content: 'Отмена', + }, + }, + table: { + empty: 'Нет данных', + loadingText: 'Загрузка, пожалуйста, подождите', + loadingMoreText: 'Нажмите, чтобы загрузить больше', + filterInputPlaceholder: 'Введите содержание (нет значения по умолчанию)', + sortAscendingOperationText: 'Сортировать по возрастанию', + sortCancelOperationText: 'Отменить сортировку', + sortDescendingOperationText: 'Сортировать по убыванию', + clearFilterResultButtonText: 'Очистить фильтр', + columnConfigButtonText: 'Настройка столбцов', + columnConfigTitleText: 'Настройка столбцов таблицы', + columnConfigDescriptionText: 'Пожалуйста, выберите столбцы данных, которые нужно отобразить в таблице', + confirmText: 'Подтвердить', + cancelText: 'Отмена', + resetText: 'Сбросить', + selectAllText: 'Выбрать все', + searchResultText: 'Поиск «{result}», найдено {count} результатов', + }, + select: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + tree: { + empty: 'Нет данных', + }, + treeSelect: { + empty: 'Нет данных', + loadingText: 'Загрузка', + placeholder: 'Выберите', + }, + datePicker: { + dayjsLocale: 'ru', + placeholder: { + date: 'Выберите дату', + month: 'Выберите месяц', + year: 'Выберите год', + }, + weekdays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'], + months: [ + 'Январь', + 'Февраль', + 'Март', + 'Апрель', + 'Май', + 'Июнь', + 'Июль', + 'Август', + 'Сентябрь', + 'Октябрь', + 'Ноябрь', + 'Декабрь', + ], + quarters: ['1-й квартал', '2-й квартал', '3-й квартал', '4-й квартал'], + rangeSeparator: '-', + direction: 'ltr', + format: 'DD.MM.YYYY', + dayAriaLabel: 'День', + weekAbbreviation: 'Неделя', + yearAriaLabel: 'Год', + monthAriaLabel: 'Месяц', + confirm: 'Подтвердить', + selectTime: 'Выберите время', + selectDate: 'Выберите дату', + nextYear: 'Следующий год', + preYear: 'Предыдущий год', + nextMonth: 'Следующий месяц', + preMonth: 'Предыдущий месяц', + preDecade: 'Предыдущее десятилетие', + nextDecade: 'Следующее десятилетие', + now: 'Сейчас', + }, + upload: { + sizeLimitMessage: 'Размер файла не должен превышать {sizeLimit}', + cancelUploadText: 'Отменить загрузку', + triggerUploadText: { + fileInput: 'Выбрать файл', + image: 'Нажмите, чтобы загрузить изображение', + normal: 'Нажмите, чтобы загрузить', + reupload: 'Выбрать заново', + continueUpload: 'Продолжить выбор', + delete: 'Удалить', + uploading: 'Загрузка', + }, + dragger: { + dragDropText: 'Отпустите мышь', + draggingText: 'Перетащите в эту область', + clickAndDragText: 'Нажмите на кнопку «Выбрать файл» выше или перетащите файл в эту область', + }, + file: { + fileNameText: 'Имя файла', + fileSizeText: 'Размер файла', + fileStatusText: 'Статус', + fileOperationText: 'Операция', + fileOperationDateText: 'Дата загрузки', + }, + progress: { + uploadingText: 'Загрузка', + waitingText: 'Ожидание загрузки', + failText: 'Загрузка не удалась', + successText: 'Загрузка успешна', + }, + }, + form: { + errorMessage: { + date: 'Введите правильный ${name}', + url: 'Введите правильный ${name}', + required: '${name} обязательно для заполнения', + max: 'Длина символов ${name} не должна превышать ${validate} символов', + min: 'Длина символов ${name} не должна быть меньше ${validate} символов', + len: 'Длина символов ${name} должна быть ${validate}', + enum: '${name} может быть только ${validate} и т.д.', + idcard: 'Введите правильный ${name}', + telnumber: 'Введите правильный ${name}', + pattern: 'Введите правильный ${name}', + validator: '${name} не соответствует требованиям', + boolean: 'Тип данных ${name} должен быть булевым', + number: '${name} должно быть числом', + }, + }, + input: { + placeholder: 'Введите', + }, + list: { + loadingText: 'Загрузка, пожалуйста, подождите', + loadingMoreText: 'Нажмите, чтобы загрузить больше', + }, + alert: { + expandText: 'Развернуть больше', + collapseText: 'Свернуть', + }, + anchor: { + copySuccessText: 'Ссылка скопирована успешно', + copyText: 'Скопировать ссылку', + }, + colorPicker: { + swatchColorTitle: 'Системные предустановленные цвета', + recentColorTitle: 'Недавно использованные цвета', + clearConfirmText: 'Вы уверены, что хотите очистить недавно использованные цвета?', + }, + guide: { + finishButtonProps: { + content: 'Готово', + theme: 'primary', + }, + nextButtonProps: { + content: 'Следующий шаг', + theme: 'primary', + }, + skipButtonProps: { + content: 'Пропустить', + theme: 'default', + }, + prevButtonProps: { + content: 'Предыдущий шаг', + theme: 'default', + }, + }, + image: { + errorText: 'Изображение не может быть отображено', + loadingText: 'Загрузка изображения', + }, + imageViewer: { + errorText: 'Не удалось загрузить изображение, попробуйте перезагрузить', + mirrorTipText: 'Зеркало', + rotateTipText: 'Поворот', + originalSizeTipText: 'Оригинальный размер', + }, +} as const; diff --git a/js/global-config/locale/zh_CN.ts b/js/global-config/locale/zh_CN.ts index 5ed05b41aa..d5a68aa2fb 100644 --- a/js/global-config/locale/zh_CN.ts +++ b/js/global-config/locale/zh_CN.ts @@ -1,5 +1,7 @@ /* eslint-disable no-template-curly-in-string */ // 文件有效，为国际化做准备 +import 'dayjs/locale/zh-cn'; + export default { pagination: { itemsPerPage: '{size} 条/页', @@ -30,6 +32,7 @@ export default { placeholder: '请输入关键词搜索', }, timePicker: { + dayjsLocale: 'zh-cn', now: '此刻', confirm: '确定', anteMeridiem: '上午', @@ -84,13 +87,27 @@ export default { placeholder: '请选择', }, datePicker: { + dayjsLocale: 'zh-cn', placeholder: { date: '请选择日期', month: '请选择月份', year: '请选择年份', }, weekdays: ['一', '二', '三', '四', '五', '六', '日'], - months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'], + months: [ + '1 月', + '2 月', + '3 月', + '4 月', + '5 月', + '6 月', + '7 月', + '8 月', + '9 月', + '10 月', + '11 月', + '12 月', + ], quarters: ['一季度', '二季度', '三季度', '四季度'], rangeSeparator: ' - ', direction: 'ltr', @@ -179,4 +196,32 @@ export default { recentColorTitle: '最近使用颜色', clearConfirmText: '确定清空最近使用的颜色吗？', }, -}; + guide: { + finishButtonProps: { + content: '完成', + theme: 'primary', + }, + nextButtonProps: { + content: '下一步', + theme: 'primary', + }, + skipButtonProps: { + content: '跳过', + theme: 'default', + }, + prevButtonProps: { + content: '上一步', + theme: 'default', + }, + }, + image: { + errorText: '图片无法显示', + loadingText: '图片加载中', + }, + imageViewer: { + errorText: '图片加载失败，可尝试重新加载', + mirrorTipText: '镜像', + rotateTipText: '旋转', + originalSizeTipText: '原始大小', + }, +} as const; diff --git a/js/global-config/locale/zh_TW.ts b/js/global-config/locale/zh_TW.ts new file mode 100644 index 0000000000..ba8cc3c95a --- /dev/null +++ b/js/global-config/locale/zh_TW.ts @@ -0,0 +1,227 @@ +/* eslint-disable no-template-curly-in-string */ +// 文件有效，为国际化做准备 +import 'dayjs/locale/zh-tw'; + +export default { + pagination: { + itemsPerPage: '{size} 條/頁', + jumpTo: '跳至', + page: '頁', + total: '共 {total} 項數據', + }, + cascader: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + calendar: { + yearSelection: '{year} 年', + monthSelection: '{month} 月', + yearRadio: '年', + monthRadio: '月', + hideWeekend: '隱藏周末', + showWeekend: '顯示周末', + today: '今天', + thisMonth: '本月', + week: '一,二,三,四,五,六,日', + cellMonth: '1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月', + }, + transfer: { + title: '{checked} / {total} 項', + empty: '暫無數據', + placeholder: '請輸入關鍵詞搜索', + }, + timePicker: { + dayjsLocale: 'zh-tw', + now: '此刻', + confirm: '確定', + anteMeridiem: '上午', + postMeridiem: '下午', + placeholder: '選擇時間', + }, + dialog: { + confirm: '確定', + cancel: '取消', + }, + drawer: { + confirm: '確定', + cancel: '取消', + }, + popconfirm: { + confirm: { + content: '確定', + }, + cancel: { + content: '取消', + }, + }, + table: { + empty: '暫無數據', + loadingText: '正在加載中，請稍後', + loadingMoreText: '點擊加載更多', + filterInputPlaceholder: '請輸入内容（無默認值）', + sortAscendingOperationText: '點擊升序', + sortCancelOperationText: '點擊取消排序', + sortDescendingOperationText: '點擊降序', + clearFilterResultButtonText: '清空篩選', + columnConfigButtonText: '列配置', + columnConfigTitleText: '表格列配置', + columnConfigDescriptionText: '請選擇需要在表格中顯示的數據列', + confirmText: '確認', + cancelText: '取消', + resetText: '重置', + selectAllText: '全選', + searchResultText: '搜索"{result}"，找到{count}條結果', + }, + select: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + tree: { + empty: '暫無數據', + }, + treeSelect: { + empty: '暫無數據', + loadingText: '加載中', + placeholder: '請選擇', + }, + datePicker: { + dayjsLocale: 'zh-tw', + placeholder: { + date: '請選擇日期', + month: '請選擇月份', + year: '請選擇年份', + }, + weekdays: ['一', '二', '三', '四', '五', '六', '日'], + months: [ + '1月', + '2月', + '3月', + '4月', + '5月', + '6月', + '7月', + '8月', + '9月', + '10月', + '11月', + '12月', + ], + quarters: ['一季度', '二季度', '三季度', '四季度'], + rangeSeparator: ' - ', + direction: 'ltr', + format: 'YYYY-MM-DD', + dayAriaLabel: '日', + weekAbbreviation: '周', + yearAriaLabel: '年', + monthAriaLabel: '月', + comfirm: '確定', + selectTime: '選擇時間', + selectDate: '選擇日期', + nextYear: '下一年', + preYear: '上一年', + nextMonth: '下個月', + preMonth: '上個月', + preDecade: '上十年', + nextDecade: '下十年', + now: '當前', + }, + upload: { + sizeLimitMessage: '文件大小不能超過 {sizeLimit}', + cancelUploadText: '取消上傳', + triggerUploadText: { + fileInput: '選擇文件', + image: '點擊上傳圖片', + normal: '點擊上傳', + // 选择文件和上传文件是 2 个步骤，文本需明确步骤 + reupload: '重新選擇', + continueUpload: '繼續選擇', + delete: '刪除', + uploading: '上傳中', + }, + dragger: { + dragDropText: '釋放鼠標', + draggingText: '拖拽到此區域', + clickAndDragText: '點擊上方“選擇文件”或將文件拖拽到此區域', + }, + file: { + fileNameText: '文件名', + fileSizeText: '文件大小', + fileStatusText: '狀態', + fileOperationText: '操作', + fileOperationDateText: '上傳日期', + }, + progress: { + uploadingText: '正在上傳', + waitingText: '等待上傳', + failText: '上傳失敗', + successText: '上傳成功', + }, + }, + form: { + errorMessage: { + date: '請輸入正確的${name}', + url: '請輸入正確的${name}', + required: '${name}必填', + max: '${name}字符長度不能超過 ${validate} 個字符，一個中文等於兩個字符', + min: '${name}字符長度不能少於 ${validate} 個字符，一個中文等於兩個字符', + len: '${name}字符長度必須是 ${validate}', + enum: '${name}只能是${validate}等', + idcard: '請輸入正確的${name}', + telnumber: '請輸入正確的${name}', + pattern: '請輸入正確的${name}', + validator: '${name}不符合要求', + boolean: '${name}數據類型必須是布爾類型', + number: '${name}必須是數字', + }, + }, + input: { + placeholder: '請輸入', + }, + list: { + loadingText: '正在加載中，請稍後', + loadingMoreText: '點擊加載更多', + }, + alert: { + expandText: '展開更多', + collapseText: '收起', + }, + anchor: { + copySuccessText: '鏈接複製成功', + copyText: '複製鏈接', + }, + colorPicker: { + swatchColorTitle: '系統預設顔色', + recentColorTitle: '最近使用的顔色', + clearConfirmText: '確定清空最近使用的顔色嗎？', + }, + guide: { + finishButtonProps: { + content: '完成', + theme: 'primary', + }, + nextButtonProps: { + content: '下一步', + theme: 'primary', + }, + skipButtonProps: { + content: '跳過', + theme: 'default', + }, + prevButtonProps: { + content: '上一步', + theme: 'default', + }, + }, + image: { + errorText: '圖片無法顯示', + loadingText: '圖片加載中', + }, + imageViewer: { + errorText: '圖片加載失敗，可嘗試重新加載', + mirrorTipText: '鏡像', + rotateTipText: '旋轉', + originalSizeTipText: '原始大小', + }, +} as const; diff --git a/js/input-number/large-number.ts b/js/input-number/large-number.ts index 9c5db00181..1e4b73745a 100644 --- a/js/input-number/large-number.ts +++ b/js/input-number/large-number.ts @@ -1,3 +1,5 @@ +import isString from 'lodash/isString'; +import isNumber from 'lodash/isNumber'; import log from '../log/log'; export function fillZero(length: number) { @@ -9,7 +11,7 @@ export function fillZero(length: number) { */ export function isInputNumber(num: number | string): boolean { if (!num) return true; - if (typeof num === 'number') return Number.isNaN(num); + if (isNumber(num)) return !Number.isNaN(num); const r = /^[0-9|e|E|-]+\.*[0-9|e|E|-]*$/.test(num); if (!r) return false; // only allow one [.e] and two [-] @@ -325,7 +327,7 @@ export function largeNumberToFixed( number: string | number, decimalPlaces: number = 0, largeNumber = true, ): string { if (!largeNumber) return Number(number).toFixed(decimalPlaces); - if (typeof number !== 'string') return String(number); + if (!isString(number)) return String(number); const [num1, num2] = number.split('.'); // 如果不存在小数点，则补足位数 if (!num2) { diff --git a/js/input-number/number.ts b/js/input-number/number.ts index 30af3c08e8..1695342b85 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -1,3 +1,5 @@ +import isUndefined from 'lodash/isUndefined'; +import isNil from 'lodash/isNil'; /** 普通数相关方法 */ import isString from 'lodash/isString'; import isNumber from 'lodash/isNumber'; @@ -53,22 +55,24 @@ export function formatToNumber( largeNumber?: boolean; } ): string | number { - if (num === undefined || num === null || num === '') return num; + if (isNil(num) || num === '') return num; if (num === '-') return 0; - if (num[num.length - 1] === '.') return num.slice(0, -1); + if (num[num.length - 1] === '.') { + return extra?.largeNumber ? num.slice(0, -1) : Number(num.slice(0, -1)); + } const isLargeNumber = extra?.largeNumber && isString(num); let newNumber: string | number = num; if ((isString(num) && num.includes('e')) || isNumber(num)) { newNumber = isLargeNumber ? formatENumber(num) : Number(num); } - if (extra?.decimalPlaces !== undefined) { + if (!isUndefined(extra?.decimalPlaces)) { newNumber = largeNumberToFixed( newNumber, extra.decimalPlaces, extra.largeNumber ); } - const val = isLargeNumber || extra?.decimalPlaces !== undefined + const val = isLargeNumber || !isUndefined(extra?.decimalPlaces) ? newNumber : Number(newNumber); if (String(val) === 'NaN') return undefined; @@ -106,7 +110,7 @@ export function positiveAdd(num1: number, num2: number): number { const r1 = num1.toString().split('.')[1]?.length || 0; const r2 = num2.toString().split('.')[1]?.length || 0; // 整数不存在精度问题，直接返回 - if (!r1 || !r2) return num1 + num2; + if (!r1 && !r2) return num1 + num2; let newNumber1 = num1; let newNumber2 = num2; const diff = Math.abs(r1 - r2); @@ -175,7 +179,7 @@ export function getStepValue(p: { lastValue?: NumberType; largeNumber?: boolean; }) { - const { op, step, lastValue = 0, max, min, largeNumber } = p; + const { op, step, lastValue, max, min, largeNumber } = p; if (step <= 0) { log.error('InputNumber', 'step must be larger than 0.'); return lastValue; @@ -195,7 +199,7 @@ export function getStepValue(p: { newVal = subtract(Number(lastValue || 0), Number(step)); } } - if (lastValue === undefined) { + if (isUndefined(lastValue)) { newVal = putInRangeNumber(newVal, { max, min, lastValue, largeNumber }); } return largeNumber ? newVal : Number(newVal); @@ -216,7 +220,7 @@ export function getMaxOrMinValidateResult(p: { min: NumberType; }): InputNumberErrorType { const { largeNumber, value, max, min } = p; - if (largeNumber === undefined) return undefined; + if (isUndefined(largeNumber)) return undefined; if (largeNumber && isNumber(value)) { log.warn('InputNumber', 'largeNumber value must be a string.'); } @@ -231,12 +235,26 @@ export function getMaxOrMinValidateResult(p: { return error; } +export const specialCode = ['-', '.', 'e', 'E']; + /** * 是否允许输入当前字符，输入字符校验 */ export function canInputNumber(number: string, largeNumber: boolean) { - if (!number && typeof number === 'string') return true; + if (!number && isString(number)) return true; const isNumber = (largeNumber && isInputNumber(number)) || !Number.isNaN(Number(number)); if (!isNumber && !['-', '.', 'e', 'E'].includes(number.slice(-1))) return false; + // 只能出现一个点（.） 和 一个负号（-） + if (String(number).match(/\./g)?.length > 1) return false; + if (String(number).match(/-/g)?.length > 1) return false; return true; } + +/** + * 对千分位进行处理 111,111,222 -> 111111222 + */ +export function formatThousandths(number: string) { + const thousandthsRegExp = /^[-+]?\d{1,3}(,\d{3})*(\.(\d*))?$/; + if (thousandthsRegExp.test(number)) return number.replace(/,/g, ''); + return number; +} diff --git a/js/loading/circle-adapter.ts b/js/loading/circle-adapter.ts index 748c17d6c6..18546be12f 100644 --- a/js/loading/circle-adapter.ts +++ b/js/loading/circle-adapter.ts @@ -4,7 +4,7 @@ import { getIEVersion } from '../utils/helper'; export default function circleAdapter(circleElem: HTMLElement) { let basicStyle = {}; - if (!circleElem) { + if (!circleElem || typeof window === 'undefined') { return; } @@ -16,12 +16,12 @@ export default function circleAdapter(circleElem: HTMLElement) { const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua); // 判断是否为 iOS 下的微信和企业微信 const isIosWechat = /(?=.*iPhone)[?=.*MicroMessenger]/.test(ua) && !/Chrome/.test(ua); - // 判断是否为 Mobile - const isMobile = /Mobile/.test(ua); - if ((isSafari || isIosWechat) && !isMobile) { + + // 注意：chrome上调试mobile/ipad端时，loading出现异常，属于正常现象，不需要修改。 + if (isSafari || isIosWechat) { basicStyle = { - transformOrigin: '-1px -1px', - transform: `scale(${parseInt(fontSize, 10) / 14})`, + transformOrigin: '0px 0px', + transform: `scale(${parseInt(fontSize, 10) / 12})`, }; } // 添加：判断是否为IE浏览器 diff --git a/js/table/recalculate-column-width.ts b/js/table/recalculate-column-width.ts deleted file mode 100644 index 1aef995e2b..0000000000 --- a/js/table/recalculate-column-width.ts +++ /dev/null @@ -1,217 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 填充未设置width属性的列 - * @param columns 当前表格所有列 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - */ -const setMissingColumnWidth = >( - columns: T[], - missingWidthCols: T[], - thWidthList: ThMap, - tableLayout: string, - actualWidth: number, - tableWidth: number -) : void => { - const thMap = thWidthList; - // 当前列宽总宽度小于表宽，将剩余宽度平均分配给未指定宽度的列 - if (actualWidth < tableWidth) { - let widthDiff = tableWidth - actualWidth; - const remainCols: T[] = []; - // 优先保证设置了minWidth的列满足最小宽度 - missingWidthCols.forEach((col) => { - const minWidth = getColWidthAttr(col, 'minWidth'); - if (minWidth) { - thMap[col.colKey] = minWidth; - widthDiff -= minWidth; - } else { - remainCols.push(col); - } - }); - - // 如果剩余宽度 > 0 - if (widthDiff > 0) { - // 如果存在未设置minWidth的列，这些列均分剩余宽度 - if (remainCols.length) { - const avgWidth = widthDiff / remainCols.length; - remainCols.forEach((col) => { - thMap[col.colKey] = avgWidth; - }); - } else { - // 否则所有列均分剩余宽度 - const avgWidth = widthDiff / missingWidthCols.length; - missingWidthCols.forEach((col) => { - thMap[col.colKey] += avgWidth; - }); - } - } else { - // 剩余宽度 <= 0, 所有剩余列默认填充100px - remainCols.forEach((col) => { - thMap[col.colKey] = 100; - }); - } - } else if (tableLayout === 'fixed') { - // 当前列表总宽度大于等于表宽，且当前排版模式为fixed，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); - } else { - // 当前列表总宽度大于等于表宽，且当前排版模式为aut - // 默认填充minWidth || 100px，然后按比例重新分配各列宽度 - let extraWidth = 0; - missingWidthCols.forEach((col) => { - extraWidth += getColWidthAttr(col, 'minWidth') || 100; - }); - const totalWidth = extraWidth + actualWidth; - columns.forEach((col) => { - if (!thMap[col.colKey]) { - const colWidth = getColWidthAttr(col, 'minWidth') || 100; - thMap[col.colKey] = (colWidth / totalWidth) * tableWidth; - } else { - thMap[col.colKey] = (thMap[col.colKey] / totalWidth) * tableWidth; - } - }); - } -}; - -/** - * 设置所有列的宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - * @param notCalculateWidthCols 不需要参与计算的列id - */ -const setNormalColumnWidth = >( - columns: T[], - thWidthList: ThMap, - actualWidth: number, - tableWidth: number, - notCalculateWidthCols: string[] -) : void => { - const thMap = thWidthList; - columns.forEach((col) => { - if (notCalculateWidthCols.includes(col.colKey)) return; - thMap[col.colKey] = (thMap[col.colKey] / actualWidth) * tableWidth; - }); -}; - -/** - * 表格未初始化时默认填充各列宽度 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - */ -const setInitialColumnWidth = >( - missingWidthCols: T[], - thWidthList: { [colKey: string]: number }, -) : void => { - const thMap = thWidthList; - // 表格宽度未初始化，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); -}; - -/** - * 重新按规则分配各列宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param tableElmWidth 表格宽度 - * @param notCalculateWidthCols 不需要参与计算的列 - * @param callback 回调函数 - */ -export default function recalculateColumnWidth>( - columns: T[], - thWidthList: ThMap, - tableLayout: string, - tableElmWidth: number, - notCalculateWidthCols: string[], - callback: (widthMap: { [colKey: string]: number }) => void -): void { - let actualWidth = 0; - const missingWidthCols: T[] = []; - const thMap: ThMap = {}; - - // 计算现有列的列宽总和 - columns.forEach((col) => { - if (!thWidthList[col.colKey]) { - thMap[col.colKey] = getColWidthAttr(col, 'width'); - } else { - thMap[col.colKey] = thWidthList[col.colKey]; - } - const originWidth = thMap[col.colKey]; - if (originWidth) { - actualWidth += originWidth; - } else { - missingWidthCols.push(col); - } - }); - - let tableWidth = tableElmWidth; - let needUpdate = false; - // 表宽没有初始化时，默认给没有指定列宽的列指定宽度为100px - if (tableWidth > 0) { - // 存在没有指定列宽的列 - if (missingWidthCols.length) { - setMissingColumnWidth( - columns, - missingWidthCols, - thMap, - tableLayout, - actualWidth, - tableWidth - ); - needUpdate = true; - } else { - // 所有列都已经指定宽度 - if (notCalculateWidthCols.length) { - // 存在不允许重新计算宽度的列（一般是resize后的两列），这些列不参与后续计算 - let sum = 0; - notCalculateWidthCols.forEach((colKey) => { - sum += thMap[colKey]; - }); - actualWidth -= sum; - tableWidth -= sum; - } - // 重新计算其他列的宽度，按表格剩余宽度进行按比例分配 - if (actualWidth !== tableWidth || notCalculateWidthCols.length) { - setNormalColumnWidth( - columns, - thMap, - actualWidth, - tableWidth, - notCalculateWidthCols - ); - needUpdate = true; - } - } - } else { - setInitialColumnWidth(missingWidthCols, thMap); - needUpdate = true; - } - - // 列宽转为整数 - if (needUpdate) { - let addon = 0; - Object.keys(thMap).forEach((key) => { - const width = thMap[key]; - addon += width - Math.floor(width); - thMap[key] = Math.floor(width) + (addon > 1 ? 1 : 0); - if (addon > 1) { - addon -= 1; - } - }); - if (addon > 0.5) { - thMap[columns[0].colKey] += 1; - } - } - - // 回调处理 - callback(thMap); -} diff --git a/js/table/set-column-width-by-drag.ts b/js/table/set-column-width-by-drag.ts deleted file mode 100644 index dd7e74b61a..0000000000 --- a/js/table/set-column-width-by-drag.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 获取某一列的所有子列 - * @param col 表格某一列 - * @returns 当前列的所有子列 - */ -const findAllChildren = >(col: T): T[] => { - const loopQue: T[] = []; - const result: T[] = []; - if (col.children) { - col.children.forEach((child: T) => loopQue.push(child)); - while (loopQue.length) { - const child = loopQue.shift(); - if (!child.children || !child.children.length) { - result.push(child); - } else { - child.children.forEach((child: T) => loopQue.push(child)); - } - } - } - return result; -}; - -/** - * 更新拖动后的列宽记录 - * @param dragCol 被拖动的列 - * @param dragWidth 拖动大小 - * @param effectCol 受影响的列 - * @param options 配置参数 - * @param callback 回调函数 - */ -export default function setThWidthListByColumnDrag>( - dragCol: T, - dragWidth: number, - effectCol: T, - options: { - getThWidthList: () => ThMap, - DEFAULT_MIN_WIDTH: number - }, - callback: (widthMap: ThMap, colKeys: string[]) => void -): void { - const { getThWidthList, DEFAULT_MIN_WIDTH } = options; - const thWidthList = getThWidthList(); - - // 检测是否有多级表头 - const dragChildrenCols = findAllChildren(dragCol); - const effectChildrenCols = findAllChildren(effectCol); - - // 若有 - if (dragChildrenCols.length || effectChildrenCols.length) { - let oldWidth = 0; - let oldEffectWidth = 0; - const notCalculateCols: string[] = []; - let effectColsMinWidth = 0; - const updateMap: { [key: string]: number } = {}; - - // 将没有多级表头的列添加到列表中方便后续计算 - if (!dragChildrenCols.length) { - dragChildrenCols.push(dragCol); - } - - if (!effectChildrenCols.length) { - effectChildrenCols.push(effectCol); - } - - // 根据多级表头的叶节点计算实际宽度（拖动列） - dragChildrenCols.forEach((child) => { - oldWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - }); - - // 根据多级表头的叶节点计算实际宽度（受影响的列） - effectChildrenCols.forEach((child) => { - oldEffectWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - effectColsMinWidth += Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH - ); - }); - - // 按比例划分新宽度（拖动列） - dragChildrenCols.forEach((child) => { - updateMap[child.colKey] = (thWidthList[child.colKey] / oldWidth) * dragWidth; - }); - - // 按比例划分新宽度（受影响的列） - const remainWidth = Math.max( - effectColsMinWidth, - oldWidth + oldEffectWidth - dragWidth, - Math.max( - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH - ), - ); - effectChildrenCols.forEach((child) => { - updateMap[child.colKey] = Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH, - (thWidthList[child.colKey] / oldEffectWidth) * remainWidth, - ); - }); - - // 更新各列宽度 - callback(updateMap, notCalculateCols); - } else { - const oldWidth = thWidthList[dragCol.colKey] || getColWidthAttr(dragCol, 'width'); - const oldEffectWidth = thWidthList[effectCol.colKey] || getColWidthAttr(effectCol, 'width'); - - callback({ - [dragCol.colKey]: dragWidth, - [effectCol.colKey]: Math.max( - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - oldWidth + oldEffectWidth - dragWidth, - ), - }, [dragCol.colKey, effectCol.colKey]); - } -} diff --git a/js/table/tree-store.ts b/js/table/tree-store.ts index 9922fa4269..5980727037 100644 --- a/js/table/tree-store.ts +++ b/js/table/tree-store.ts @@ -1,3 +1,4 @@ +import isUndefined from 'lodash/isUndefined'; /* eslint-disable class-methods-use-this */ /* eslint-disable no-param-reassign */ /* eslint-disable no-use-before-define */ @@ -81,7 +82,7 @@ class TableTreeStore { return dataSource; } const rowValue = get(p.row, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return []; } @@ -573,7 +574,7 @@ class TableTreeStore { for (let i = 0, len = dataSource.length; i < len; i++) { const item = dataSource[i]; const rowValue = get(item, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return; } @@ -601,7 +602,7 @@ class TableTreeStore { for (let i = 0, len = dataSource.length; i < len; i++) { const item = dataSource[i]; const rowValue = get(item, keys.rowKey); - if (rowValue === undefined) { + if (isUndefined(rowValue)) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); return; } diff --git a/js/tree/tree-node-model.ts b/js/tree/tree-node-model.ts index eaba37510c..eb1303fc11 100644 --- a/js/tree/tree-node-model.ts +++ b/js/tree/tree-node-model.ts @@ -1,3 +1,5 @@ +import isUndefined from 'lodash/isUndefined'; +import isBoolean from 'lodash/isBoolean'; import pick from 'lodash/pick'; import omit from 'lodash/omit'; import { TreeNode } from './tree-node'; @@ -118,7 +120,7 @@ export function createNodeModel(node: TreeNode): TypeTreeNodeModel { } else { childrenModel = false; } - } else if (typeof children === 'boolean') { + } else if (isBoolean(children)) { childrenModel = children; } return childrenModel; @@ -154,8 +156,8 @@ export function createNodeModel(node: TreeNode): TypeTreeNodeModel { const { keys } = node.tree.config; const dataValue = data[keys?.value || 'value']; const dataLabel = data[keys?.label || 'label']; - if (dataValue !== undefined) _data.value = dataValue; - if (dataLabel !== undefined) _data.label = dataLabel; + if (!isUndefined(dataValue)) _data.value = dataValue; + if (!isUndefined(dataLabel)) _data.label = dataLabel; Object.assign(node.data, _data); Object.assign(node, _data); diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index 012525ff70..1d999946c8 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -1,3 +1,6 @@ +import isNull from 'lodash/isNull'; +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; import uniqueId from 'lodash/uniqueId'; import isNil from 'lodash/isNil'; import get from 'lodash/get'; @@ -15,10 +18,11 @@ import { createNodeModel, updateNodeModel, } from './tree-node-model'; +import log from '../log'; const { hasOwnProperty } = Object.prototype; -const defaultStatus = { +export const defaultStatus = { expandMutex: false, activable: false, checkable: false, @@ -27,6 +31,8 @@ const defaultStatus = { loading: false, }; +export const privateKey = '__tdesign_id__'; + // vm 开头为视图属性，不可以外部设置 // 用于触发视图更新 export class TreeNode { @@ -120,28 +126,40 @@ export class TreeNode { const propLabel = keys.label || 'label'; const propValue = keys.value || 'value'; + // 初始化状态 this.model = null; this.children = null; this.vmCheckable = false; this.vmIsLeaf = false; this.vmIsFirst = false; this.vmIsLast = false; - this.vmIsRest = true; + this.vmIsRest = false; this.vmIsLocked = false; + this.level = 0; + this.visible = true; + + // 为节点设置唯一 id + // tree 数据替换时，value 相同有可能导致节点状态渲染冲突 + // 用这个 唯一 id 来解决，用于类似 vue 组件的唯一 key 指定场景 + this[privateKey] = uniqueId(prefix); const spec = { ...defaultStatus, - actived: false, - expanded: false, - checked: false, ...data, }; const children = spec[propChildren]; this.set(spec); this.label = spec[propLabel] || ''; - this.value = isNil(spec[propValue]) ? uniqueId(prefix) : spec[propValue]; - this.tree.nodeMap.set(this.value, this); + // 没有 value 的时候，value 默认使用自动生成的 唯一 id + this.value = isNil(spec[propValue]) ? this[privateKey] : spec[propValue]; + + const { nodeMap, privateMap } = tree; + if (nodeMap.get(this.value)) { + log.warn('Tree', `Dulplicate value: ${this.value}`); + } + nodeMap.set(this.value, this); + privateMap.set(this[privateKey], this); if (parent && parent instanceof TreeNode) { this.parent = parent; @@ -155,17 +173,22 @@ export class TreeNode { this.children = children; } - // 初始化状态计算 - this.level = 0; - this.visible = true; - - this.actived = spec.actived; + this.actived = false; + if (typeof spec.actived !== 'undefined') { + this.actived = spec.actived; + } this.initActived(); - this.expanded = spec.expanded; + this.expanded = config.expandAll; + if (typeof spec.expanded !== 'undefined') { + this.expanded = spec.expanded; + } this.initExpanded(); - this.checked = spec.checked; + this.checked = false; + if (typeof spec.checked !== 'undefined') { + this.checked = spec.checked; + } this.initChecked(); this.update(); @@ -206,15 +229,12 @@ export class TreeNode { let { expanded } = this; const { config } = tree; if ( - typeof config.expandLevel === 'number' + isNumber(config.expandLevel) && this.getLevel() < config.expandLevel ) { tree.expandedMap.set(this.value, true); expanded = true; } - if (config.expandAll) { - expanded = true; - } if (this.children === true && config.lazy) { expanded = false; } @@ -273,7 +293,7 @@ export class TreeNode { ): void { const parentNode = parent; let targetIndex = -1; - if (typeof index === 'number') { + if (isNumber(index)) { targetIndex = index; } @@ -283,6 +303,10 @@ export class TreeNode { throw new Error('无法将父节点插入到子节点'); } + if (parentNode === this) { + throw new Error('无法将节点插入到本节点'); + } + if (Array.isArray(parentNode?.children)) { const targetPosNode = parentNode?.children[targetIndex]; if (targetPosNode && targetPosNode === this) { @@ -312,7 +336,7 @@ export class TreeNode { this.remove(); - if (typeof index === 'number') { + if (isNumber(index)) { let targetIndex = index; if (parentNode === this.parent) { // 前置节点被拔出后再插入到同一个 siblings 时，会引起目标 index 的变化 @@ -340,6 +364,7 @@ export class TreeNode { const node = item; node.tree = tree; tree.nodeMap.set(node.value, node); + tree.privateMap.set(node[privateKey], node); if (node.expanded) { tree.expandedMap.set(node.value, true); } @@ -367,7 +392,7 @@ export class TreeNode { node.appendTo(tree, parent, index); } else if (item) { node = new TreeNode(tree, item, parent); - if (typeof index === 'number') { + if (isNumber(index)) { siblings.splice(index, 0, node); } siblings.forEach((sibling) => { @@ -421,13 +446,14 @@ export class TreeNode { tree.checkedMap.delete(value); tree.expandedMap.delete(value); tree.nodeMap.delete(value); + tree.privateMap.delete(this[privateKey]); } // 异步加载子节点数据 public async loadChildren(): Promise { const config = get(this, 'tree.config') || {}; if (this.children === true && !this.loading) { - if (typeof config.load === 'function') { + if (isFunction(config.load)) { this.loading = true; this.update(); let list = []; @@ -524,10 +550,12 @@ export class TreeNode { const { config, filterMap, + hasFilter, } = this.tree; - let rest = true; - if (typeof config.filter === 'function') { + let rest = false; + if (hasFilter) { + // 仅在存在过滤条件时，过滤命中才有效 const nodeModel = this.getModel(); rest = config.filter(nodeModel); } @@ -545,40 +573,47 @@ export class TreeNode { public isVisible(): boolean { const { nodeMap, + hasFilter, + config, } = this.tree; + const { allowFoldNodeOnFilter } = config; let visible = true; - // 锁定状态，直接呈现 - if (this.vmIsLocked) { - return true; + if (!nodeMap.get(this.value)) { + // 节点不在当前树上，所以不可见 + return false; } - // 在当前树上，未被移除 - if (nodeMap.get(this.value)) { - // 节点未被过滤 - const filterVisible = this.isRest(); - - // 所有父节点展开 - let expandVisible = true; - const parents = this.getParents(); - if (parents.length > 0) { - expandVisible = parents.every((node: TreeNode) => node.isExpanded()); - } + if (hasFilter && !allowFoldNodeOnFilter) { + // 如果存在过滤条件 + // 锁定状态和过滤命中状态，直接呈现 + visible = (this.vmIsLocked || this.vmIsRest); + return visible; + } + + // 标志所有父节点展开导致的可见状态 + let expandVisible = true; + const parents = this.getParents(); + if (parents.length > 0) { + expandVisible = parents.every((node: TreeNode) => node.expanded); + } - // 节点为未被过滤节点的父节点 - visible = expandVisible && filterVisible; + if (hasFilter) { + visible = expandVisible && (this.vmIsRest || this.vmIsLocked); } else { - visible = false; + visible = expandVisible; } return visible; } // 判断节点是否被禁用 public isDisabled() { - if (this.vmIsLocked) return true; - const treeDisabled = get(this, 'tree.config.disabled'); - return !!(treeDisabled || this.disabled); + const { tree } = this; + const { hasFilter, config } = tree; + const { disabled, allowFoldNodeOnFilter } = config; + if (hasFilter && !allowFoldNodeOnFilter && this.vmIsLocked && !this.vmIsRest) return true; + return !!(disabled || this.disabled); } // 判断节点是否能拖拽 @@ -611,7 +646,9 @@ export class TreeNode { // 检查节点是否已展开 public isExpanded(map?: Map): boolean { const { tree, value, vmIsLocked } = this; - if (vmIsLocked) return true; + const { hasFilter, config } = tree; + const { allowFoldNodeOnFilter } = config; + if (hasFilter && !allowFoldNodeOnFilter && vmIsLocked) return true; const expandedMap = map || tree.expandedMap; return !!(tree.nodeMap.get(value) && expandedMap.get(value)); } @@ -663,7 +700,7 @@ export class TreeNode { // 子节点有任意一个半选，则其为半选状态 return true; } - if (childChecked === null) { + if (isNull(childChecked)) { childChecked = node.isChecked(); } if (childChecked !== node.isChecked()) { @@ -724,6 +761,7 @@ export class TreeNode { // 设置节点展开状态 public setExpanded(expanded: boolean, opts?: TypeSettingOptions): TreeNodeValue[] { const { tree } = this; + const { config } = tree; const options = { directly: false, ...opts, @@ -736,27 +774,37 @@ export class TreeNode { // 手风琴效果，先折叠同级节点 if (expanded) { + // 列举需要展开的节点 const shouldExpandNodes = []; + // 自己一定在展开列表中 shouldExpandNodes.push(this); - if (get(tree, 'config.expandParent')) { + if (config.expandParent) { + // expandParent 为 true，则父节点都要展开 this.getParents().forEach((node) => { shouldExpandNodes.push(node); }); } shouldExpandNodes.forEach((node) => { let isExpandMutex = false; + // 对于每一个节点，都需要判断是否启用手风琴效果 if (node.parent) { isExpandMutex = node.parent.isExpandMutex(); } else { isExpandMutex = tree?.config?.expandMutex; } if (isExpandMutex) { + // 折叠列表中，先移除同级节点 const siblings = node.getSiblings(); siblings.forEach((snode) => { map.delete(snode.value); + // 同级节点相关状态更新 + snode.update(); + snode.updateChildren(); }); } + // 最后设置自己的折叠状态 map.set(node.value, true); + node.update(); }); } else { map.delete(this.value); @@ -790,17 +838,20 @@ export class TreeNode { } if (this.isActivable()) { if (actived) { + const prevKeys = Array.from(map.keys()); if (!config.activeMultiple) { map.clear(); } + prevKeys.forEach((value) => { + const node = tree.getNode(value); + node?.update(); + }); map.set(this.value, true); } else { map.delete(this.value); } } - if (options.directly) { - this.update(); - } + this.update(); return tree.getActived(map); } @@ -865,14 +916,14 @@ export class TreeNode { // 更新节点状态 public update(): void { this.level = this.getLevel(); - this.actived = this.isActived(); - this.expanded = this.isExpanded(); - this.vmCheckable = this.isCheckable(); - this.visible = this.isVisible(); - this.vmIsRest = this.isRest(); this.vmIsFirst = this.isFirst(); this.vmIsLast = this.isLast(); this.vmIsLeaf = this.isLeaf(); + this.vmCheckable = this.isCheckable(); + this.vmIsRest = this.isRest(); + this.actived = this.isActived(); + this.expanded = this.isExpanded(); + this.visible = this.isVisible(); this.tree.updated(this); } diff --git a/js/tree/tree-store.ts b/js/tree/tree-store.ts index 30c950b426..8d78c2d713 100644 --- a/js/tree/tree-store.ts +++ b/js/tree/tree-store.ts @@ -1,6 +1,12 @@ +import isArray from 'lodash/isArray'; +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; +import isString from 'lodash/isString'; import difference from 'lodash/difference'; import camelCase from 'lodash/camelCase'; import isPlainObject from 'lodash/isPlainObject'; +import mitt from 'mitt'; + import { TreeNode } from './tree-node'; import { TreeNodeValue, @@ -8,12 +14,12 @@ import { TypeTimer, TypeTargetNode, TypeTreeNodeData, + TypeTreeItem, TypeTreeStoreOptions, TypeTreeFilter, TypeTreeFilterOptions, TypeRelatedNodesOptions, TypeTreeEventState, - TypeTreeNodeModel, } from './types'; // 构建一个树的数据模型 @@ -29,6 +35,9 @@ export class TreeStore { // 所有节点映射 public nodeMap: Map; + // 节点 私有 ID 映射 + public privateMap: Map; + // 配置选项 public config: TypeTreeStoreOptions; @@ -53,11 +62,14 @@ export class TreeStore { // 识别是否需要重排 public shouldReflow: boolean; + // 存在过滤器标志 + public hasFilter: boolean; + // 树节点过滤器 public prevFilter: TypeTreeFilter; - // 一个空节点 model - public nullNodeModel: TypeTreeNodeModel; + // 事件派发器 + public emitter: ReturnType; public constructor(options: TypeTreeStoreOptions) { const config: TypeTreeStoreOptions = { @@ -80,6 +92,9 @@ export class TreeStore { onLoad: null, onReflow: null, onUpdate: null, + // 每次搜索条件变更，重置展开状态，路径节点展开，显示命中节点 + // allowFoldNodeOnFilter 为 true 时，搜索条件不变的情况下，允许折叠路径节点 + // 默认状态，allowFoldNodeOnFilter 为 false 时，路径节点无法折叠 allowFoldNodeOnFilter: false, ...options, }; @@ -87,6 +102,7 @@ export class TreeStore { this.nodes = []; this.children = []; this.nodeMap = new Map(); + this.privateMap = new Map(); this.activedMap = new Map(); this.expandedMap = new Map(); this.checkedMap = new Map(); @@ -97,29 +113,23 @@ export class TreeStore { this.updateTimer = null; // 在子节点增删改查时，将此属性设置为 true，来触发视图更新 this.shouldReflow = false; - this.initNullNodeModel(); - } - - // 初始化空节点 model - public initNullNodeModel() { - // 空节点，用于判定当前的 filterText 是否为空，如果 filter(nullNode) 为 true, 那么可以判定 filterText 为空 - // 这里初始化空节点的方式似乎不是很完美 - const nullNode = new TreeNode(this, { value: '', label: '', children: [] }); - this.nullNodeModel = nullNode.getModel(); - // 需要将节点从树中移除 - nullNode.remove(); + // 这个标志会被大量用到 + this.hasFilter = isFunction(config.filter); + this.emitter = mitt(); } // 配置选项 public setConfig(options: TypeTreeStoreOptions) { + const { config } = this; let hasChanged = false; Object.keys(options).forEach((key) => { const val = options[key]; - if (val !== this.config[key]) { + if (val !== config[key]) { hasChanged = true; - this.config[key] = val; + config[key] = val; } }); + this.hasFilter = isFunction(config.filter); if (hasChanged) { // 在 td-tree 的 render 方法中调用 setConfig // 这样减少了 watch 属性 @@ -137,7 +147,7 @@ export class TreeStore { // 获取节点对象 public getNode(item: TypeTargetNode): TreeNode { let node = null; - if (typeof item === 'string' || typeof item === 'number') { + if (isString(item) || isNumber(item)) { node = this.nodeMap.get(item); } else if (item instanceof TreeNode) { node = this.nodeMap.get(item.value); @@ -187,7 +197,7 @@ export class TreeStore { ): TreeNode[] { let nodes: TreeNode[] = []; let val: TreeNodeValue = ''; - if (typeof item === 'string' || typeof item === 'number') { + if (isString(item) || isNumber(item)) { val = item; } else if (item instanceof TreeNode) { val = item.value; @@ -207,10 +217,10 @@ export class TreeStore { level: Infinity, ...options, }; - if (typeof conf.level === 'number' && conf.level !== Infinity) { + if (isNumber(conf.level) && conf.level !== Infinity) { nodes = nodes.filter((node) => node.level <= conf.level); } - if (typeof conf.filter === 'function') { + if (isFunction(conf.filter)) { nodes = nodes.filter((node) => { const nodeModel = node.getModel(); return conf.filter(nodeModel); @@ -257,7 +267,7 @@ export class TreeStore { let node = null; let data = null; - if (typeof para === 'string' || typeof para === 'number') { + if (isString(para) || isNumber(para)) { value = para; data = item; node = this.getNode(value); @@ -304,7 +314,7 @@ export class TreeStore { // 插入到目标节点之下 if (spec.data instanceof TreeNode) { spec.data.appendTo(this, spec.node); - } else if (Array.isArray(spec.data)) { + } else if (isArray(spec.data)) { spec.node.append(spec.data); } else { spec.node.append([spec.data]); @@ -315,7 +325,7 @@ export class TreeStore { } // 在目标节点之前插入节点 - public insertBefore(value: TypeTargetNode, item: TypeTreeNodeData): void { + public insertBefore(value: TypeTargetNode, item: TypeTreeItem): void { const node = this.getNode(value); if (node) { node.insertBefore(item); @@ -323,7 +333,7 @@ export class TreeStore { } // 在目标节点之后插入节点 - public insertAfter(value: TypeTargetNode, item: TypeTreeNodeData): void { + public insertAfter(value: TypeTargetNode, item: TypeTreeItem): void { const node = this.getNode(value); if (node) { node.insertAfter(item); @@ -364,7 +374,7 @@ export class TreeStore { this.updatedMap.set(node.value, true); } if (this.updateTimer) return; - this.updateTimer = +setTimeout(() => { + this.updateTimer = setTimeout(() => { clearTimeout(this.updateTimer); this.updateTimer = null; @@ -377,7 +387,7 @@ export class TreeStore { // 检查节点是否有被过滤，锁定路径节点 // 在此之前要遍历节点生成一个经过排序的节点数组 // 以便于优化锁定检查算法 - if (!this.config?.allowFoldNodeOnFilter) this.lockFilterPathNodes(); + this.lockFilterPathNodes(); const updatedList = Array.from(this.updatedMap.keys()); if (updatedList.length > 0) { @@ -633,67 +643,59 @@ export class TreeStore { // 触发绑定的事件 public emit(name: string, state?: TypeTreeEventState): void { - const config = this.config || {}; + const { config, emitter } = this; const methodName = camelCase(`on-${name}`); const method = config[methodName]; - if (typeof method === 'function') { + if (isFunction(method)) { method(state); } + emitter.emit(name, state); } // 锁定过滤节点的路径节点 - // 使得路径节点展开，可见，且不可操作 + // 使得路径节点展开，可见 public lockFilterPathNodes() { const { config } = this; const allNodes = this.getNodes(); - // 如果之前有进行过滤，则先解锁所有节点 if (this.prevFilter) { + // 过滤条件清空时，也需要清理锁定节点 + // 所在判断过滤条件是否存在之前，就要调用这里的清理逻辑 + // 不想在每次渲染时都做这个清空判断 + // 所以判断一下之前是否有进行过滤 allNodes.forEach((node: TreeNode) => { - node.lock(false); + // 先清空所有锁定状态 + if (node.vmIsLocked) { + // lock 方法内部有状态计算 + // 所以要减少 lock 方法调用次数 + node.lock(false); + } }); } const currentFilter = config.filter; // 当前没有过滤器 // 则无需处理锁定节点 - if (!currentFilter || typeof currentFilter !== 'function') return; - - if (currentFilter(this.nullNodeModel)) return; - + if (!currentFilter || !isFunction(currentFilter)) return; this.prevFilter = config.filter; - // 构造路径节点map - const map = new Map(); - // 全部节点要经过排序，才能使用这个算法 + // 全部节点要经过排序，才能使用这个遍历 // 比起每个过滤节点调用 getParents 方法检查父节点状态 - // 算法复杂度 O(N*log(N)) => O(N) - allNodes.reverse().forEach((item: TreeNode) => { - const node = item; - - // 被过滤节点父节点固定为展开状态 + // 复杂度 O(N*log(N)) => O(N) + allNodes.reverse().forEach((node: TreeNode) => { + // 数组颠倒后，等于是从每个节点的子节点开始判断 + // 想象为从展开树的最底部向上遍历 const parent = node.getParent(); - if (node.vmIsRest) { - if (parent) { - // 被过滤节点的父节点固定为展开状态 - parent.expanded = true; + if (!parent) return; + if (node.vmIsRest || node.vmIsLocked) { + // 当前节点被过滤条件命中 + // 或者当前节点被锁定 + // 则需要判定父节点状态 + if (!parent.vmIsLocked) { + // 父节点已被锁定，则忽略动作 + // lock 方法有内置状态判断 + parent.lock(true); } - // 被过滤节点固定为展示状态 - node.visible = true; - } - if (node.vmIsRest || map.get(node.value)) { - if (parent && !parent.vmIsRest) { - map.set(parent.value, true); - } - } - }); - - // 锁定路径节点展示样式 - const filterPathValues = Array.from(map.keys()); - filterPathValues.forEach((value: TreeNodeValue) => { - const node = this.getNode(value); - if (node) { - node.lock(true); } }); } diff --git a/js/tree/types.ts b/js/tree/types.ts index d10af2871e..968d3027fb 100644 --- a/js/tree/types.ts +++ b/js/tree/types.ts @@ -55,7 +55,7 @@ export interface TreeNodeState { * 节点标签文案 * @default '' */ - label?: string; + label?: any; /** * 节点是否已展开 * @default false @@ -86,7 +86,7 @@ export interface TreeNodeModelProps; export type TypeValueMode = 'all' | 'parentFirst' | 'onlyLeaf'; -export type TypeTimer = number; +export type TypeTimer = ReturnType; export interface TypeSettingOptions { directly?: boolean; @@ -208,7 +208,7 @@ export interface TypeTreeFilterOptions { export interface TypeTreeNodeData extends TreeNodeState { children?: TypeTreeNodeData[]; - [key: string]: unknown; + [key: string]: any; } export type TypeTreeItem = TypeTreeNodeData | TreeNode; diff --git a/js/upload/main.ts b/js/upload/main.ts index af7c51a83e..c4f43377b9 100644 --- a/js/upload/main.ts +++ b/js/upload/main.ts @@ -1,3 +1,5 @@ +import isFunction from 'lodash/isFunction'; +import isNumber from 'lodash/isNumber'; /* eslint-disable no-param-reassign */ import { isOverSizeLimit } from './utils'; import xhr from './xhr'; @@ -12,6 +14,7 @@ import { SuccessContext, handleSuccessParams, UploadTriggerUploadText, + ErrorContext, } from './types'; export interface BeforeUploadExtra { @@ -31,7 +34,7 @@ export function handleBeforeUpload( const sizePromise = new Promise((resolve) => { let result: SizeLimitObj = null; if (sizeLimit) { - const sizeLimitObj: SizeLimitObj = typeof sizeLimit === 'number' + const sizeLimitObj: SizeLimitObj = isNumber(sizeLimit) ? { size: sizeLimit, unit: 'KB' } : sizeLimit; const limit = isOverSizeLimit(file.size, sizeLimitObj.size, sizeLimitObj.unit); @@ -44,7 +47,7 @@ export function handleBeforeUpload( // 自定义校验 const promiseList: BeforeUploadPromiseList = [sizePromise, undefined]; - if (typeof beforeUpload === 'function') { + if (isFunction(beforeUpload)) { const r = beforeUpload(file); const p = r instanceof Promise ? r : (new Promise((resolve) => resolve(r))); promiseList[1] = p; @@ -58,27 +61,24 @@ export function handleBeforeUpload( }); } -export interface OnErrorParams { - event?: ProgressEvent; - files?: UploadFile[]; - response?: any; +export interface OnErrorParams extends ErrorContext { formatResponse?: HandleUploadParams['formatResponse']; } export function handleError(options: OnErrorParams) { - const { event, files, response, formatResponse } = options; + const { event, files, response, XMLHttpRequest, formatResponse } = options; files.forEach((file) => { file.status = 'fail'; }); let res = response; - if (typeof formatResponse === 'function') { + if (isFunction(formatResponse)) { res = formatResponse(response, { file: files[0], currentFiles: files }); } - return { response: res, event, files }; + return { response: res, event, files, XMLHttpRequest }; } export function handleSuccess(params: handleSuccessParams) { - const { event, files, response } = params; + const { event, files, response, XMLHttpRequest } = params; if (files?.length <= 0) { log.error('Upload', 'Empty File in Success Callback'); } @@ -89,7 +89,7 @@ export function handleSuccess(params: handleSuccessParams) { }); const res = response; files[0].url = res.url || files[0].url; - return { response: res, event, files }; + return { response: res, event, files, XMLHttpRequest }; } export type UploadRequestReturn = { @@ -114,8 +114,8 @@ export function handleRequestMethodResponse(res: RequestMethodResponse) { log.error('Upload', '`requestMethodResponse.status` must be `success` or `fail`, examples `{ status: \'success\', response: { url: \'\' } }`'); return false; } - if (res.status === 'success' && (!res.response || !res.response.url)) { - log.warn('Upload', '`requestMethodResponse.response.url` is required as `status` is `success`'); + if (res.status === 'success' && (!res.response || (!res.response.url && !res.response.files))) { + log.warn('Upload', '`requestMethodResponse.response.url` or `requestMethodResponse.response.files` is required if `status` is `success`'); } return true; } @@ -146,17 +146,38 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { - file.status = res.status; - file.response = response; - file.url = response.url; - }); - const result = { response, file: toUploadFiles[0], files: toUploadFiles }; + let resultFiles: UploadFile[] = []; + // 一个请求上传并返回一个文件 + if ((response.url && !response.files) || res.status === 'fail') { + toUploadFiles.forEach((file) => { + file.status = res.status; + file.response = response; + file.url = response.url; + }); + resultFiles = toUploadFiles; + } else if (response.files) { + // 一个请求上传并返回多个文件 + resultFiles = response.files.map((file: UploadFile) => { + const fileInfo = toUploadFiles.find((toFile) => ( + (file.name && toFile.name === file.name) || (file.raw && toFile.raw === file.raw) + )); + return { + ...fileInfo, + ...file, + status: res.status, + response, + }; + }); + } + const result = { + response, + file: resultFiles[0], + files: resultFiles, + }; if (res.status === 'success') { params.onResponseSuccess?.(result); } else if (res.status === 'fail') { @@ -172,7 +193,8 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { + mockProgressDuration: params.mockProgressDuration, + onError: (p: ErrorContext) => { const r = handleError({ ...p, formatResponse: params.formatResponse }); params.onResponseError?.(r); resolve({ status: 'fail', data: r }); @@ -181,7 +203,7 @@ export function uploadOneRequest(params: HandleUploadParams): Promise { const { formatResponse } = params; let res = p.response; - if (typeof formatResponse === 'function') { + if (isFunction(formatResponse)) { res = formatResponse(p.response, { file: p.file, currentFiles: p.files, @@ -271,13 +293,14 @@ Promise { } export function formatToUploadFile( - tmpFiles: File[], + files: File[], format: FileChangeParams['format'], - autoUpload: boolean, + status: UploadFile['status'] = undefined, + percent = 0, ) { - return tmpFiles.map((fileRaw: File) => { + return files.map((fileRaw: File) => { let file: UploadFile = fileRaw; - if (typeof format === 'function') { + if (isFunction(format)) { file = format(fileRaw); } const uploadFile: UploadFile = { @@ -286,8 +309,8 @@ export function formatToUploadFile( name: fileRaw.name, size: fileRaw.size, type: fileRaw.type, - percent: 0, - status: autoUpload ? 'progress' : 'waiting', + percent, + status, ...file, }; return uploadFile; @@ -310,11 +333,10 @@ export function validateFile( hasSameNameFile = true; } if (!tmpFiles.length) { - const tFiles = formatToUploadFile(files, params.format, params.autoUpload); + const tFiles = formatToUploadFile(files, params.format, params.autoUpload ? 'progress' : 'waiting'); resolve({ hasSameNameFile, file: tFiles?.[0], files: tFiles, validateResult: { type: 'FILTER_FILE_SAME_NAME' } }); return; } - // 上传文件数量限制 let lengthOverLimit = false; if (max && tmpFiles.length && !params.isBatchUpload) { @@ -325,7 +347,7 @@ export function validateFile( } // 格式化文件对象 - const formattedFiles = formatToUploadFile(tmpFiles, params.format, params.autoUpload); + const formattedFiles = formatToUploadFile(tmpFiles, params.format, params.autoUpload ? 'progress' : 'waiting'); // 全量文件，一波校验，整体上传 或 终止上传 let allFileValidatePromise; @@ -350,6 +372,7 @@ export function validateFile( })); Promise.all([allFileValidatePromise].concat(promiseList)).then((results) => { const [allFilesResult, ...others] = results; + // 如果 beforeAllFilesUpload 校验未通过 if (allFilesResult === false) { resolve({ lengthOverLimit, @@ -371,9 +394,13 @@ export function validateFile( export function getFilesAndErrors(fileValidateList: FileChangeReturn[], getError: (p: {[key: string]: any }) => string) { const sizeLimitErrors: FileChangeReturn[] = []; + const beforeUploadErrorFiles: UploadFile[] = []; const toFiles: UploadFile[] = []; fileValidateList.forEach((oneFile) => { - if (oneFile.validateResult?.type === 'CUSTOM_BEFORE_UPLOAD') return; + if (oneFile.validateResult?.type === 'CUSTOM_BEFORE_UPLOAD') { + beforeUploadErrorFiles.push(oneFile.file); + return; + } if (oneFile.validateResult?.type === 'FILE_OVER_SIZE_LIMIT') { if (!oneFile.file.response) { oneFile.file.response = {}; @@ -386,7 +413,7 @@ export function getFilesAndErrors(fileValidateList: FileChangeReturn[], getError toFiles.push(oneFile.file); }); - return { sizeLimitErrors, toFiles }; + return { sizeLimitErrors, beforeUploadErrorFiles, toFiles }; } /** diff --git a/js/upload/types.ts b/js/upload/types.ts index 5c5e59d0ed..e2b7256023 100644 --- a/js/upload/types.ts +++ b/js/upload/types.ts @@ -51,6 +51,9 @@ export interface UploadFile { export interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; + /** + * response.XMLHttpRequest is going to be deprecated + */ response: { url?: string; [key: string]: any } } @@ -71,12 +74,22 @@ export interface InnerProgressContext { files?: UploadFile[]; percent: number; type: ProgressContext['type']; + XMLHttpRequest?: XMLHttpRequest; +} + +export interface ErrorContext { + event?: ProgressEvent; + file?: UploadFile; + files?: UploadFile[]; + response?: any; + XMLHttpRequest?: XMLHttpRequest; } export interface SuccessContext { event?: ProgressEvent; file?: UploadFile; files?: UploadFile[]; + XMLHttpRequest?: XMLHttpRequest; response?: RequestMethodResponse['response']; } @@ -102,14 +115,12 @@ export interface XhrOptions { file?: UploadFile; files?: UploadFile[]; useMockProgress?: boolean; + // 模拟进度间隔时间，默认：300 + mockProgressDuration?: number; name: string; /** 可与 data 共存 */ formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any }; - onError: ({ - event, file, files, response - }: { - event?: ProgressEvent; file?: UploadFile; files?: UploadFile[]; response?: any - }) => void; + onError: (context: ErrorContext) => void; onSuccess: (context: SuccessContext) => void; onProgress: (context: InnerProgressContext) => void; } @@ -191,6 +202,8 @@ export interface HandleUploadParams { name?: string; /** 是否需要真实进度之前的模拟进度 */ useMockProgress?: boolean; + // 模拟进度间隔时间 + mockProgressDuration?: number; multiple?: boolean; headers?: {[key: string]: string}; withCredentials?: boolean; diff --git a/js/upload/utils.ts b/js/upload/utils.ts index 7e295250d9..f5c5eb270a 100644 --- a/js/upload/utils.ts +++ b/js/upload/utils.ts @@ -1,4 +1,4 @@ -import { SizeUnit, TdUploadFile } from './types'; +import { SizeUnit } from './types'; import log from '../log/log'; /** @@ -146,32 +146,6 @@ export function isOverSizeLimit1( export const urlCreator = () => window.webkitURL || window.URL; -/** - * - * @param files 待处理文件 - * @param format 格式化规则 - */ -export function formatFiles( - files: File[] = [], - format?: (file: File) => TdUploadFile -) { - return files.map((fileRaw) => { - const file = typeof format === 'function' ? format(fileRaw) : fileRaw; - const uploadFile: TdUploadFile = { - raw: fileRaw, - lastModified: fileRaw.lastModified, - name: fileRaw.name, - size: fileRaw.size, - type: fileRaw.type, - percent: 0, - status: 'waiting', - ...file, - }; - uploadFile.url = urlCreator()?.createObjectURL(fileRaw); - return uploadFile; - }); -} - export function getFileUrlByFileRaw(fileRaw: File): Promise { return new Promise((resolve) => { if (!fileRaw) { diff --git a/js/upload/xhr.ts b/js/upload/xhr.ts index f48f973c84..614c3d957a 100644 --- a/js/upload/xhr.ts +++ b/js/upload/xhr.ts @@ -1,4 +1,6 @@ +import isFunction from 'lodash/isFunction'; /* eslint-disable no-param-reassign */ +import log from '../log/log'; import { UploadFile, XhrOptions } from './types'; import { getCurrentDate } from './utils'; @@ -12,6 +14,7 @@ export default function xhr({ files = [], name = 'file', useMockProgress = true, + mockProgressDuration = 300, formatRequest, onError, onProgress, @@ -43,26 +46,30 @@ export default function xhr({ file: file || innerFiles[0], files: innerFiles.map((file) => ({ ...file, percent })), type: 'mock', + XMLHttpRequest: xhr, }); } } else { clearInterval(timer1); } - }, 300); + }, mockProgressDuration); clearTimeout(timer2); - }, 300); + }, mockProgressDuration); } let requestData: { [key: string]: any } = {}; if (data) { - const extraData = typeof data === 'function' ? data(file) : data; + const extraData = isFunction(data) ? data(innerFiles) : data; Object.assign(requestData, extraData); } innerFiles.forEach((file, index) => { const fileField = innerFiles.length > 1 ? `${name}[${index}]` : name; requestData[fileField] = file.raw; - requestData[name] = file.raw; }); + if (innerFiles.length === 1) { + requestData[name] = innerFiles[0].raw; + } + requestData.length = innerFiles.length; if (formatRequest) { requestData = formatRequest(requestData); @@ -81,11 +88,15 @@ export default function xhr({ }); xhr.onerror = (event: ProgressEvent) => { - onError({ event, file, files: innerFiles }); + onError({ event, file, files: innerFiles, XMLHttpRequest: xhr, }); clearInterval(timer1); clearTimeout(timer2); }; + xhr.ontimeout = (event) => { + onError({ event, file, files: innerFiles, XMLHttpRequest: xhr, }); + }; + if (xhr.upload) { xhr.upload.onprogress = (event: ProgressEvent) => { let realPercent = 0; @@ -101,6 +112,7 @@ export default function xhr({ file: file || progressFiles[0], files: progressFiles, type: 'real', + XMLHttpRequest: xhr, }); } }; @@ -109,10 +121,15 @@ export default function xhr({ // eslint-disable-next-line consistent-return xhr.onload = (event: ProgressEvent) => { let response: { [key: string]: any } = {}; + response.XMLHttpRequest = xhr; const isFail = xhr.status < 200 || xhr.status >= 300; if (isFail) { return onError({ - event, file, files: innerFiles, response + event, + file, + files: innerFiles, + response, + XMLHttpRequest: xhr, }); } const text = xhr.responseText || xhr.response; @@ -120,6 +137,7 @@ export default function xhr({ response = JSON.parse(text); } catch (e) { response = text; + log.error('Upload', 'response does not a valid json'); } clearInterval(timer1); clearTimeout(timer2); @@ -129,15 +147,23 @@ export default function xhr({ // 如果上传请求返回结果没有上传日期，则使用电脑当前日期显示 file.uploadTime = response?.uploadTime || getCurrentDate(); }); + if (typeof response === 'object') { + response.XMLHttpRequest = xhr; + } onSuccess({ event, file: file || innerFiles[0], files: [...innerFiles], + XMLHttpRequest: xhr, response, }); }; xhr.send(formData); + // @ts-ignore + xhr.upload.requestParams = requestData; + // @ts-ignore + xhr.upload.requestHeaders = headers; return xhr; } diff --git a/js/utils/calcTextareaHeight.ts b/js/utils/calcTextareaHeight.ts index bb51fb0dca..cc78341522 100644 --- a/js/utils/calcTextareaHeight.ts +++ b/js/utils/calcTextareaHeight.ts @@ -1,3 +1,4 @@ +import isNull from 'lodash/isNull'; import { calculateNodeSize } from './helper'; type CalculateStyleType = { @@ -66,12 +67,12 @@ function calcTextareaHeight( return rowsHeight; }; - if (minRows !== null) { + if (!isNull(minRows)) { const minHeight = calcHeight(minRows); height = Math.max(minHeight, height); result.minHeight = `${minHeight}px`; } - if (maxRows !== null) { + if (!isNull(maxRows)) { height = Math.min(calcHeight(maxRows), height); } result.height = `${height}px`; diff --git a/js/utils/getPosition.ts b/js/utils/getPosition.ts index b54839424f..06a92a1ea7 100644 --- a/js/utils/getPosition.ts +++ b/js/utils/getPosition.ts @@ -1,9 +1,10 @@ -type Placement = 'top' | 'bottom' | 'left' | 'right'; +type Placement = 'top' | 'bottom' | 'left' | 'right' | 'mouse'; const getPosition = ( targetEle: HTMLElement, contentEle: HTMLElement, - placement: Partial + placement: Partial, + clientX?: Number, ): { left: number; top: number } => { const targetRect = targetEle.getBoundingClientRect() as DOMRect; const contentRect = contentEle.getBoundingClientRect() as DOMRect; @@ -25,9 +26,33 @@ const getPosition = ( position.left += targetRect.left + dWidth / 2; position.top += targetRect.top + targetRect.height; break; + case 'mouse': + position.left += Number(clientX); + position.top += targetRect.top + targetRect.height + 8; + break; // 后续有需要可以再扩展 } + + if (placement === 'mouse') { + const edges = { + top: document.documentElement.scrollTop, + left: document.documentElement.scrollLeft, + right: document.documentElement.scrollLeft + document.documentElement.clientWidth, + bottom: document.documentElement.scrollTop + document.documentElement.clientHeight, + }; + + // 底部溢出时，定位到元素上方 + if (position.top > edges.bottom - contentRect.height) { + position.top = document.documentElement.scrollTop + targetRect.top - contentRect.height - 8; + } + + // 右侧溢出时，确保元素能完全展示 + if (position.left > edges.right - contentRect.width) { + position.left = edges.right - contentRect.width; + } + } } + return position; }; diff --git a/js/utils/getScrollbarWidth.ts b/js/utils/getScrollbarWidth.ts index 3e2707391d..7d1c0f13f3 100644 --- a/js/utils/getScrollbarWidth.ts +++ b/js/utils/getScrollbarWidth.ts @@ -16,9 +16,9 @@ */ import { getIEVersion } from './helper'; -export default function getScrollbarWidth() { +export function getScrollbarWidthWithCSS() { const defaultScrollbarWidth = 6; - if (!navigator) return defaultScrollbarWidth; + if (typeof navigator === 'undefined' || !navigator) return defaultScrollbarWidth; if (/(Chrome|Safari)/i.test(navigator.userAgent)) return defaultScrollbarWidth; const scrollDiv = document.createElement('div'); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; @@ -34,3 +34,13 @@ export default function getScrollbarWidth() { } return scrollbarWidth; } + +// 获取 body 下滚动条宽度 +export function getScrollbarWidth() { + const scrollDiv = document.createElement('div'); + scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + return scrollbarWidth; +} diff --git a/js/utils/helper.ts b/js/utils/helper.ts index 98d77c0bae..c3c99827d7 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -1,3 +1,9 @@ +import isString from 'lodash/isString'; +import isNull from 'lodash/isNull'; +import isUndefined from 'lodash/isUndefined'; +import isNumber from 'lodash/isNumber'; +import isArray from 'lodash/isArray'; + export function omit(obj: object, fields: string[]): object { const shallowCopy = { ...obj, @@ -13,7 +19,7 @@ export function removeEmptyAttrs(obj: T): Partial { const newObj = {}; Object.keys(obj).forEach((key) => { - if (typeof obj[key] !== 'undefined' || obj[key] === null) { + if (!isUndefined(obj[key]) || isNull(obj[key])) { newObj[key] = obj[key]; } }); @@ -37,10 +43,10 @@ export type Gradients = { [percent: string]: string }; export type FromTo = { from: string; to: string }; export type LinearGradient = { direction?: string } & (Gradients | FromTo); export function getBackgroundColor(color: string | string[] | LinearGradient): string { - if (typeof color === 'string') { + if (isString(color)) { return color; } - if (Array.isArray(color)) { + if (isArray(color)) { if (color[0] && color[0][0] === '#') { color.unshift('90deg'); } @@ -66,6 +72,8 @@ export function getBackgroundColor(color: string | string[] | LinearGradient): s * @returns 获取 ie 浏览器版本 */ export function getIEVersion() { + if (typeof navigator === 'undefined' || !navigator) return Number.MAX_SAFE_INTEGER; + const { userAgent } = navigator; // 判断是否IE<11浏览器 const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; @@ -93,7 +101,7 @@ export function getIEVersion() { * @returns 当没有传入maxCharacter时返回字符串字符长度，当传入maxCharacter时返回截取之后的字符串和长度。 */ export function getCharacterLength(str: string, maxCharacter?: number) { - const hasMaxCharacter = typeof maxCharacter === 'number'; + const hasMaxCharacter = isNumber(maxCharacter); if (!str || str.length === 0) { if (hasMaxCharacter) { return { @@ -154,7 +162,7 @@ export function limitUnicodeMaxLength( oldStr?: string ): string { // 旧字符满足字数要求则返回 - if ([...(oldStr ?? '')].slice().length === maxLength) return oldStr; + if ([...(oldStr ?? '')].slice().length === maxLength) return oldStr || ''; return [...(str ?? '')].slice(0, maxLength).join(''); } @@ -164,7 +172,7 @@ export function limitUnicodeMaxLength( * @returns 可使用的样式值。 */ export function pxCompat(param: string | number) { - return typeof param === 'number' ? `${param}px` : param; + return isNumber(param) ? `${param}px` : param; } /** @@ -192,6 +200,15 @@ const DOM_STYLE_PROPS = [ ]; export function calculateNodeSize(targetElement: HTMLElement) { + if (typeof window === 'undefined') { + return { + paddingSize: 0, + borderSize: 0, + boxSizing: 0, + sizingStyle: '', + }; + } + const style = window.getComputedStyle(targetElement); const boxSizing = style.getPropertyValue('box-sizing') diff --git a/js/utils/observe.ts b/js/utils/observe.ts index 25a544a390..918432b484 100644 --- a/js/utils/observe.ts +++ b/js/utils/observe.ts @@ -4,6 +4,7 @@ export default function observe( callback: Function, marginBottom: number, ): IntersectionObserver { + if (typeof window === 'undefined') return null; if (!window || !window.IntersectionObserver) { callback(); return null; diff --git a/js/watermark/generateBase64Url.ts b/js/watermark/generateBase64Url.ts index 69ed159b88..965ca0bdfa 100644 --- a/js/watermark/generateBase64Url.ts +++ b/js/watermark/generateBase64Url.ts @@ -89,7 +89,7 @@ export default function generateBase64Url({ item.top = top; top += lineSpace; const markSize = Number(fontSize) * ratio; - // TODO 后续完善font 渲染控制 目前font-family 暂时为 undefiend + // TODO 后续完善font 渲染控制 目前font-family 暂时为 undefined ctx.font = `normal normal ${fontWeight} ${markSize}px/${markHeight}px undefined`; ctx.textAlign = 'start'; ctx.textBaseline = 'top'; diff --git a/package.json b/package.json index cf8056b2bc..4ebcbc1fea 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ "main": "", "scripts": { "lint": "npm run lint:css && npm run lint:js", - "lint:css": "stylelint **/*.{css,wxss,less} --allow-empty-input", - "lint:js": "npx eslint . --max-warnings 0 && npx eslint ./js/**/*.* --max-warnings 0", - "lint:fix": "stylelint **/*.{css,wxss,less} --allow-empty-input --fix && npx eslint . --max-warnings 0 --fix", + "lint:css": "stylelint **/*.{css,wxss,less} --allow-empty-input --cache", + "lint:js": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --cache", + "lint:fix": "npm run lint:css -- --fix && npm run lint:js -- --fix", "test": "npm run test:unit", "test:unit": "jest --config test/script/jest.unit.conf.js --coverage", "test:watch": "jest --config test/script/jest.unit.conf.js --watch", @@ -56,10 +56,10 @@ "jest": "^27.5.1", "jest-html-reporter": "^3.1.3", "jest-watch-typeahead": "^2.2.0", - "lint-staged": "~13.0.3", + "lint-staged": "~13.2.0", "min-indent": "^1.0.1", "postcss-less": "^5.0.0", - "stylelint": "~14.13.0", + "stylelint": "~14.16.1", "stylelint-config-standard": "^24.0.0", "ts-jest": "^27.1.3", "typescript": "^4.5.5" @@ -83,6 +83,7 @@ }, "dependencies": { "lodash": "^4.17.15", + "mitt": "^3.0.0", "tinycolor2": "^1.4.2" }, "lint-staged": { @@ -90,7 +91,7 @@ "stylelint" ], "**/*.{js,ts}": [ - "eslint --max-warnings 0" + "eslint --max-warnings 0 --no-ignore" ] } } diff --git a/style/mobile/_variables.less b/style/mobile/_variables.less index c0572de830..dd80555f15 100644 --- a/style/mobile/_variables.less +++ b/style/mobile/_variables.less @@ -2,169 +2,191 @@ @prefix: t; // 颜色色板 - -@primary-color-1: #ECF2FE; -@primary-color-2: #D4E3FC; -@primary-color-3: #BBD3FB; -@primary-color-4: #96BBF8; -@primary-color-5: #699EF5; -@primary-color-6: #4787F0; -@primary-color-7: #266FE8; -@primary-color-8: #0052D9; -@primary-color-9: #0034B5; -@primary-color-10: #001F97; - -@warning-color-1: #FEF3E6; -@warning-color-2: #F9E0C7; -@warning-color-3: #F7C797; -@warning-color-4: #F2995F; -@warning-color-5: #ED7B2F; -@warning-color-6: #D35A21; -@warning-color-7: #BA431B; -@warning-color-8: #9E3610; -@warning-color-9: #842B0B; -@warning-color-10: #5A1907; - -@error-color-1: #FDECEE; -@error-color-2: #F9D7D9; -@error-color-3: #F8B9BE; -@error-color-4: #F78D94; -@error-color-5: #F36D78; -@error-color-6: #E34D59; -@error-color-7: #C9353F; -@error-color-8: #B11F26; -@error-color-9: #951114; -@error-color-10: #680506; - -@success-color-1: #E8F8F2; -@success-color-2: #BCEBDC; -@success-color-3: #85DBBE; -@success-color-4: #48C79C; -@success-color-5: #00A870; -@success-color-6: #078D5C; -@success-color-7: #067945; -@success-color-8: #056334; -@success-color-9: #044F2A; -@success-color-10: #033017; - -@gray-color-1: #F3F3F3; -@gray-color-2: #EEEEEE; -@gray-color-3: #E7E7E7; -@gray-color-4: #DCDCDC; -@gray-color-5: #C5C5C5; -@gray-color-6: #A6A6A6; -@gray-color-7: #8B8B8B; -@gray-color-8: #777777; -@gray-color-9: #5E5E5E; -@gray-color-10: #4B4B4B; -@gray-color-11: #383838; -@gray-color-12: #2C2C2C; -@gray-color-13: #242424; -@gray-color-14: #181818; - -// 基础颜色 -@primary-color: @primary-color-8; // 色彩-品牌-可操作 -@warning-color: @warning-color-5; // 色彩-功能-警告 -@error-color: @error-color-6; // 色彩-功能-失败 -@success-color: @success-color-5; // 色彩-功能-成功 - -// 基础颜色的扩展 用于 hover / 禁用 / 点击 等状态 - -// 主题色扩展 -@primary-color-active: @primary-color-9; -@primary-color-disabled: @primary-color-3; - -// 警告色扩展 -@warning-color-active: @warning-color-6; -@warning-color-disabled: @warning-color-3; - -// 失败/错误色扩展 -@error-color-active: @error-color-7; -@error-color-disabled: @error-color-3; - -// 成功色扩展 -@success-color-active: @success-color-6; -@success-color-disabled: @success-color-3; -// 遮罩 -@mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出 -@mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用 - -// 背景色 -@bg-color: #fbfbfb; // 色彩-背景 -@bg-color-fade: #fbfbfb; // 色彩-中层背景 -@bg-color-active: #f5f5f5; // 色彩-hover / click 背景 / 搜索输入框 -@bg-color-disabled: #ffffff; // 色彩-disabled -@bg-color-block: #fff; // 色彩-模块 - -@bg-color-icon-fade: #cccccc; -@bg-color-icon-dark: #444444; - -// 文本颜色 -@text-level-1-color: rgba(0, 0, 0, .9); // 色彩-文字-一级 -@text-level-2-color: rgba(0, 0, 0, .6); // 色彩-文字-二级 -@text-level-3-color: rgba(0, 0, 0, .4); // 色彩-文字-三级 -@text-level-4-color: rgba(0, 0, 0, .26); // 色彩-文字-四级 -@text-color-disabled: @text-level-4-color; // 文字禁用色 -@text-anti-primary-color: rgba(255, 255, 255, .9); // 色彩-文字-主色反色 -@text-primary-color: @text-level-1-color; // 色彩-文字-主要 - -@placeholder-color: @text-level-3-color; - -// 背景色 -@bg-color-page: @gray-color-2; // 色彩 - page -@bg-color-container: #fff; // 色彩 - 容器 -@bg-color-container-active: @gray-color-3; // 色彩 - 容器 - active - -@bg-color-secondarycontainer: @gray-color-1; // 色彩 - 次级容器 -@bg-color-secondarycontainer-active: @gray-color-4; // 色彩 - 次级容器 - active - -@bg-color-component: @gray-color-3; // 色彩 - 组件 -@bg-color-component-active: @gray-color-6; // 色彩 - 组件 - active -@bg-color-component-disabled: @gray-color-1; // 色彩 - 组件 - disabled +@brand-color-1: var(--td-brand-color-1, #f2f3ff); +@brand-color-2: var(--td-brand-color-2, #d9e1ff); +@brand-color-3: var(--td-brand-color-3, #b5c7ff); +@brand-color-4: var(--td-brand-color-4, #8eabff); +@brand-color-5: var(--td-brand-color-5, #618dff); +@brand-color-6: var(--td-brand-color-6, #366ef4); +@brand-color-7: var(--td-brand-color-7, #0052d9); +@brand-color-8: var(--td-brand-color-8, #003cab); +@brand-color-9: var(--td-brand-color-9, #002a7c); +@brand-color-10: var(--td-brand-color-10, #001a57); + +@error-color-1: var(--td-error-color-1, #fff0ed); +@error-color-2: var(--td-error-color-2, #ffd8d2); +@error-color-3: var(--td-error-color-3, #ffb9b0); +@error-color-4: var(--td-error-color-4, #ff9285); +@error-color-5: var(--td-error-color-5, #f6685d); +@error-color-6: var(--td-error-color-6, #d54941); +@error-color-7: var(--td-error-color-7, #ad352f); +@error-color-8: var(--td-error-color-8, #881f1c); +@error-color-9: var(--td-error-color-9, #68070a); +@error-color-10: var(--td-error-color-10, #490002); + +@warning-color-1: var(--td-warning-color-1, #fff1e9); +@warning-color-2: var(--td-warning-color-2, #ffd9c2); +@warning-color-3: var(--td-warning-color-3, #ffb98c); +@warning-color-4: var(--td-warning-color-4, #fa9550); +@warning-color-5: var(--td-warning-color-5, #e37318); +@warning-color-6: var(--td-warning-color-6, #be5a00); +@warning-color-7: var(--td-warning-color-7, #954500); +@warning-color-8: var(--td-warning-color-8, #713300); +@warning-color-9: var(--td-warning-color-9, #532300); +@warning-color-10: var(--td-warning-color-10, #3b1700); + +@success-color-1: var(--td-success-color-1, #e3f9e9); +@success-color-2: var(--td-success-color-2, #c6f3d7); +@success-color-3: var(--td-success-color-3, #92dab2); +@success-color-4: var(--td-success-color-4, #56c08d); +@success-color-5: var(--td-success-color-5, #2ba471); +@success-color-6: var(--td-success-color-6, #008858); +@success-color-7: var(--td-success-color-7, #006c45); +@success-color-8: var(--td-success-color-8, #005334); +@success-color-9: var(--td-success-color-9, #003b23); +@success-color-10: var(--td-success-color-10, #002515); + +@gray-color-1: var(--td-gray-color-1, #f3f3f3); +@gray-color-2: var(--td-gray-color-2, #eeeeee); +@gray-color-3: var(--td-gray-color-3, #e7e7e7); +@gray-color-4: var(--td-gray-color-4, #dcdcdc); +@gray-color-5: var(--td-gray-color-5, #c5c5c5); +@gray-color-6: var(--td-gray-color-6, #a6a6a6); +@gray-color-7: var(--td-gray-color-7, #8b8b8b); +@gray-color-8: var(--td-gray-color-8, #777777); +@gray-color-9: var(--td-gray-color-9, #5e5e5e); +@gray-color-10: var(--td-gray-color-10, #4b4b4b); +@gray-color-11: var(--td-gray-color-11, #383838); +@gray-color-12: var(--td-gray-color-12, #2c2c2c); +@gray-color-13: var(--td-gray-color-13, #242424); +@gray-color-14: var(--td-gray-color-14, #181818); + +@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, .9)); +@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, .6)); +@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, .4)); +@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, .26)); + +@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1)); +@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, .55)); +@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, .35)); +@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, .22)); // 边框色 -@border-level-1-color: @gray-color-3; -@border-level-2-color: @gray-color-4; +@border-color: var(--td-border-color, @gray-color-3); // Spacer -@spacer: 4px; -@spacer-1: @spacer; // 间距-小-x -@spacer-2: @spacer * 2; // 间距-小 -@spacer-3: @spacer * 3; // 间距-中 -@spacer-4: @spacer * 4; // 间距-大 -@spacer-5: @spacer * 6; // 间距-大-x -@spacer-6: @spacer * 10; // 间距-大-xx +@spacer: var(--td-spacer, 8px); +@spacer-1: var(--td-spacer-1, 12px); // 间距-小-x +@spacer-2: var(--td-spacer-2, 16px); // 间距-小 +@spacer-3: var(--td-spacer-3, 24px); // 间距-中 +@spacer-4: var(--td-spacer-4, 32px); // 间距-大 +@spacer-5: var(--td-spacer-5, 48px); // 间距-大-x +@spacer-6: var(--td-spacer-6, 80px); // 间距-大-xx // Font -@font-size: 10px; -@font-size-xs: @font-size; // 字号-一级字号 -@font-size-s: @font-size * 1.2; // 字号-二级字号 -@font-size-base: @font-size * 1.4; // 字号-三级字号 -@font-size-l: @font-size * 1.6; // 字号-四级字号 -@font-size-xl: @font-size * 1.8; // 字号-五级字号 - -@text-line-height: 1.5; // - -@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规 -@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体 - -// Border Radius -@border-radius: 4px; // 圆角-全局 -@border-radius-50: 50%; // 圆角-全圆角 - -// 表单相关 -@form-height: 30px; -@form-text-color: @text-level-1-color; -@form-bg-color: @bg-color-block; -@form-border-color: @border-level-2-color; - -// shadow -@shadow-1: 1px 1px 5px 1px rgba(0, 0, 0, .03); -@shadow-2: 3px 3px 8px 2px rgba(0, 0, 0, .06); - -// 图标尺寸 -@icon-x: 16px; -@icon-default: 24px; - -// 暗色模式 -@dark-bg-color: #272B30; // 色彩-深色背景 +@font-size: var(--td-font-size, 10px); +@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号 +@font-size-s: var(--td-font-size-s, 12px); // 字号-二级字号 +@font-size-base: var(--td-font-size-base, 14px); // 字号-三级字号 +@font-size-m: var(--td-font-size-m, 16px); // 字号-二级字号 +@font-size-l: var(--td-font-size-l, 20px); // 字号-四级字号 +@font-size-xl: var(--td-font-size-xl, 36px); // 字号-五级字号 + +@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规 +@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体 + +// 圆角 +@radius-small: var(--td-radius-small, 3px); +@radius-default: var(--td-radius-default, 6px); +@radius-large: var(--td-radius-large, 9px); +@radius-extra-large: var(--td-radius-extra-large, 12px); +@radius-round: var(--td-radius-round, 999px); +@radius-circle: var(--td-radius-circle, 50%); + +// 阴影 +@shadow-1: var( + --td-shadow-1, + 0 1px 10px rgba(0, 0, 0, 5%), + 0 4px 5px rgba(0, 0, 0, 8%), + 0 2px 4px -1px rgba(0, 0, 0, 12%) +); +@shadow-2: var( + --td-shadow-2, + 0 3px 14px 2px rgba(0, 0, 0, 5%), + 0 8px 10px 1px rgba(0, 0, 0, 6%), + 0 5px 5px -3px rgba(0, 0, 0, 10%) +); +@shadow-3: var( + --td-shadow-3, + 0 6px 30px 5px rgba(0, 0, 0, 5%), + 0 16px 24px 2px rgba(0, 0, 0, 4%), + 0 8px 10px -5px rgba(0, 0, 0, 8%) +); +@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, .06)); + +// 动画 +@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(.38, 0, .24, 1)); +@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, .15, 1)); +@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(.82, 0, 1, .9)); +@anim-duration-base: var(--td-anim-duration-base, .2s); +@anim-duration-moderate: var(--td-anim-duration-moderate, .24s); +@anim-duration-slow: var(--td-anim-duration-slow, .28s); + +// 背景色 +@bg-color-page: var(--td-bg-color-page, @gray-color-1); // 色彩 - page +@bg-color-container: var(--td-bg-color-container, @font-white-1); // 色彩 - 容器 +@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3); // 色彩 - 容器 - active + +@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1); // 色彩 - 次级容器 +@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4); // 色彩 - 次级容器 - active + +@bg-color-component: var(--td-bg-color-component, @gray-color-3); // 色彩 - 组件 +@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6); // 色彩 - 组件 - active +@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2); // 色彩 - 组件 - disabled + +@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4); +@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6); + +@component-stroke: var(--td-component-stroke, @gray-color-3); +@component-border: var(--td-component-border, @gray-color-4); + +// 主题 +@brand-color: var(--td-brand-color, @brand-color-7); +@brand-color-active: var(--td-brand-color-active, @brand-color-8); +@brand-color-disabled: var(--td-brand-color-disabled, @brand-color-3); +@brand-color-focus: var(--td-brand-color-focus, @brand-color-1); +@brand-color-light: var(--td-brand-color-light, @brand-color-1); +@brand-color-light-active: var(--td-brand-color-light-active, @brand-color-2); + +@error-color: var(--td-error-color, @error-color-6); +@error-color-active: var(--td-error-color-active, @error-color-7); +@error-color-disabled: var(--td-error-color-disabled, @error-color-3); +@error-color-focus: var(--td-error-color-focus, @error-color-2); +@error-color-light: var(--td-error-color-light, @error-color-1); + +@warning-color: var(--td-warning-color, @warning-color-5); +@warning-color-active: var(--td-warning-color-active, @warning-color-6); +@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3); +@warning-color-focus: var(--td-warning-color-focus, @warning-color-2); +@warning-color-light: var(--td-warning-color-light, @warning-color-1); + +@success-color: var(--td-success-color, @success-color-5); +@success-color-active: var(--td-success-color-active, @success-color-6); +@success-color-disabled: var(--td-success-color-disabled, @success-color-3); +@success-color-focus: var(--td-success-color-focus, @success-color-2); +@success-color-light: var(--td-success-color-light, @success-color-1); + +// 文字 +@text-color-primary: var(--td-text-color-primary, @font-gray-1); // 色彩-文字-主要 +@text-color-secondary: var(--td-text-color-secondary, @font-gray-2); // 色彩-文字-次要 +@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3); // 色彩-文字-占位符/说明 +@text-color-disabled: var(--td-text-color-disabled, @font-gray-4); // 色彩-文字-禁用 +@text-color-anti: var(--td-text-color-anti, @font-white-1); // 色彩-文字-反色 +@text-color-brand: var(--td-text-color-brand, @brand-color); // 色彩-文字-品牌 +@text-color-link: var(--td-text-color-link, @brand-color); // 色彩-文字-链接 + +// 遮罩 +@mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出 +@mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用 + +@text-line-height: 1.5; diff --git a/style/mobile/base.less b/style/mobile/base.less index 87949697ac..d0eb387136 100644 --- a/style/mobile/base.less +++ b/style/mobile/base.less @@ -1,3 +1,11 @@ // 变量 @import "./_variables.less"; + +// mixins + +@import "./mixins/_index.less"; + +// 工具类 + +@import "./utilities/_index.less"; diff --git a/style/mobile/components/_index.less b/style/mobile/components/_index.less index 261f17d670..2221534f88 100644 --- a/style/mobile/components/_index.less +++ b/style/mobile/components/_index.less @@ -87,3 +87,130 @@ @import "./pull-down-refresh/_index.less"; @import "./result/_index.less"; + +// mobile vue 临时使用 +@import "./action-sheet/v2/_index.less"; + +@import "./avatar/v2/_index.less"; + +@import "./back-top/v2/_index.less"; + +@import "./badge/v2/_index.less"; + +@import "./button/v2/_index.less"; + +@import "./calendar/v2/_index.less"; + +@import "./cascader/v2/_index.less"; + +@import "./cell/v2/_index.less"; + +@import "./cell-group/v2/_index.less"; + +@import "./check-tag/v2/_index.less"; + +@import "./checkbox/v2/_index.less"; + +@import "./collapse/v2/_index.less"; + +@import "./collapse-panel/v2/_index.less"; + +@import "./count-down/v2/_index.less"; + +@import "./date-time-picker/v2/_index.less"; + +@import "./dialog/v2/_index.less"; + +@import "./divider/v2/_index.less"; + +@import "./drawer/v2/_index.less"; + +@import "./dropdown-item/v2/_index.less"; + +@import "./dropdown-menu/v2/_index.less"; + +@import "./empty/_index.less"; // 新组件 + +@import "./fab/v2/_index.less"; + +@import "./footer/_index.less"; // 新组件 + +@import "./grid/v2/_index.less"; + +@import "./grid-item/v2/_index.less"; + +@import "./image/v2/_index.less"; + +@import "./image-viewer/v2/_index.less"; + +@import "./indexes/v2/_index.less"; + +@import "./indexes-anchor/v2/_index.less"; + +@import "./input/v2/_index.less"; + +@import "./link/_index.less"; // 新组件 + +@import "./loading/v2/_index.less"; + +@import "./message/v2/_index.less"; + +@import "./navbar/v2/_index.less"; + +@import "./notice-bar/v2/_index.less"; + +@import "./overlay/v2/_index.less"; + +@import "./picker/v2/_index.less"; + +@import "./picker-item/v2/_index.less"; + +@import "./popup/v2/_index.less"; + +@import "./progress/v2/_index.less"; + +@import "./pull-down-refresh/v2/_index.less"; + +@import "./rate/v2/_index.less"; + +@import "./result/v2/_index.less"; + +@import "./search/v2/_index.less"; + +@import "./side-bar-item/v2/_index.less"; + +@import "./side-bar/v2/_index.less"; + +@import "./skeleton/v2/_index.less"; + +@import "./slider/v2/_index.less"; + +@import "./step-item/v2/_index.less"; + +@import "./steps/v2/_index.less"; + +@import "./sticky/_index.less"; + +@import "./stepper/v2/_index.less"; + +@import "./swipe-cell/v2/_index.less"; + +@import "./switch/v2/_index.less"; + +@import "./tab-bar-item/v2/_index.less"; + +@import "./tab-bar/v2/_index.less"; + +@import "./tab-panel/v2/_index.less"; + +@import "./tabs/v2/_index.less"; + +@import "./tag/v2/_index.less"; + +@import "./textarea/v2/_index.less"; + +@import "./toast/v2/_index.less"; + +@import "./tree-select/_index.less"; // 新组件 + +@import "./upload/v2/_index.less"; diff --git a/style/mobile/components/action-sheet/_index.less b/style/mobile/components/action-sheet/_index.less index 03aaa60fd4..4ec5954df2 100644 --- a/style/mobile/components/action-sheet/_index.less +++ b/style/mobile/components/action-sheet/_index.less @@ -4,8 +4,6 @@ @import "../../mixins/_index.less"; -@import "../popup/_index.less"; - .@{prefix}-action-sheet { &__panel { background-color: #fff; @@ -129,7 +127,7 @@ } &-item.on { - background-color: @primary-color; + background-color: @brand-color; } } } diff --git a/style/mobile/components/action-sheet/_var.less b/style/mobile/components/action-sheet/_var.less index 271e21c4db..bc3720a169 100644 --- a/style/mobile/components/action-sheet/_var.less +++ b/style/mobile/components/action-sheet/_var.less @@ -30,4 +30,4 @@ @action-sheet-grid-indicator-color: #CCCCCC; -@action-sheet-grid-text-color: @text-level-1-color; +@action-sheet-grid-text-color: @text-color-primary; diff --git a/style/mobile/components/action-sheet/v2/_index.less b/style/mobile/components/action-sheet/v2/_index.less new file mode 100644 index 0000000000..4b69892ede --- /dev/null +++ b/style/mobile/components/action-sheet/v2/_index.less @@ -0,0 +1,145 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{action-sheet} { + &__content { + color: @action-sheet-color; + border-top-left-radius: @action-sheet-border-radius; + border-top-right-radius: @action-sheet-border-radius; + background-color: @bg-color-container; + overflow: hidden; + + &--grid { + padding-top: 16rpx; + } + + &:focus { + outline: 0; + } + } + + .flex-center() { + display: flex; + align-items: center; + justify-content: center; + } + + .ellipsis() { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__grid { + padding-bottom: 16rpx; + + &--swiper { + padding-bottom: 48rpx; + } + } + + &__description { + color: @action-sheet-description-color; + line-height: 44rpx; + font-size: 28rpx; + text-align: @action-sheet-text-align; + padding: 24rpx 32rpx; + + &:focus { + outline: 0; + } + .border(bottom, @action-sheet-border-color); + + &--left { + text-align: left; + + &::after { + left: 32rpx; + } + } + } + + &__list { + &-item { + .flex-center(); + .border(bottom, @action-sheet-border-color); + + height: @action-sheet-list-item-height; + padding: 0 32rpx; + + &:focus { + outline: 0; + } + + &--left { + justify-content: start; + + &::after { + left: 32rpx; + } + } + + &--disabled { + color: @action-sheet-list-item-disabled-color; + } + + &-text { + font-size: @font-size-m; + .ellipsis(); + } + + &-icon { + margin-right: 16rpx; + } + } + } + + &__swiper-wrap { + margin-top: 8rpx; + position: relative; + } + + &__footer { + background-color: @bg-color-container; + } + + &__gap-list { + height: 16rpx; + background-color: @action-sheet-border-color; + } + + &__gap-grid { + height: 1rpx; + background-color: @action-sheet-border-color; + } + + &__cancel { + .flex-center(); + + height: @action-sheet-cancel-height; + } + + &__dots { + position: absolute; + left: 50%; + bottom: 32rpx; + transform: translateX(-50%); + display: flex; + flex-direction: row; + + &-item { + width: 16rpx; + height: 16rpx; + background-color: #dcdcdc; + border-radius: 50%; + margin: 0 16rpx; + transition: all .4s ease-in; + + &.@{prefix}-is-active { + background-color: #0052d9; + } + } + } +} diff --git a/style/mobile/components/action-sheet/v2/_var.less b/style/mobile/components/action-sheet/v2/_var.less new file mode 100644 index 0000000000..b25946f1ac --- /dev/null +++ b/style/mobile/components/action-sheet/v2/_var.less @@ -0,0 +1,10 @@ +@action-sheet: ~"@{prefix}-action-sheet"; + +@action-sheet-list-item-height: var(--td-action-sheet-list-item-height, 56px); +@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @font-gray-4); +@action-sheet-border-color: var(--td-action-sheet-border-color, @gray-color-1); +@action-sheet-color: var(--td-action-sheet-color, @font-gray-1); +@action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extra-large); +@action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3); +@action-sheet-text-align: var(--td-action-sheet-text-align, center); +@action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 48px); diff --git a/style/mobile/components/avatar/_var.less b/style/mobile/components/avatar/_var.less index 5af8d6464d..01580f6da9 100644 --- a/style/mobile/components/avatar/_var.less +++ b/style/mobile/components/avatar/_var.less @@ -1,6 +1,6 @@ //颜色 @avatar-bg-color: rgba(212,227,252,1); -@avatar-text-color: @primary-color; +@avatar-text-color: @brand-color; //头像大小 @avatar-size-small: 32px; @@ -13,12 +13,12 @@ @avatar-font-large: @font-size-l; //图标 -@avatar-icon-small: @icon-x; -@avatar-icon-medium: @icon-default; +@avatar-icon-small: 16px; +@avatar-icon-medium: 24px; @avatar-icon-large: 32px; //边框 -@avatar-border-radius-cicle: @border-radius-50; +@avatar-border-radius-cicle: @radius-circle; @avatar-border-radius-round: 3px; @avatar-border-color: @bg-color-container; diff --git a/style/mobile/components/avatar/v2/_index.less b/style/mobile/components/avatar/v2/_index.less new file mode 100644 index 0000000000..ff3c860039 --- /dev/null +++ b/style/mobile/components/avatar/v2/_index.less @@ -0,0 +1,145 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-avatar { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + background-color: @avatar-bg-color; + color: @avatar-content-color; + + &__wrapper { + display: inline-flex; + position: relative; + vertical-align: top; + margin-left: @avatar-margin-left; + } + + &--large { + width: @avatar-large-width; + height: @avatar-large-width; + font-size: @avatar-text-large-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-large-font-size; + } + } + + &--medium { + width: @avatar-medium-width; + height: @avatar-medium-width; + font-size: @avatar-text-medium-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-medium-font-size; + } + } + + &--small { + width: @avatar-small-width; + height: @avatar-small-width; + font-size: @avatar-text-small-font-size; + + .@{prefix}-avatar__icon { + font-size: @avatar-icon-small-font-size; + } + } + + .@{prefix}-image, + &__image { + width: 100%; + height: 100%; + } + + &--circle { + border-radius: @avatar-circle-border-radius; + overflow: hidden; + } + + &--round { + border-radius: @avatar-round-border-radius; + overflow: hidden; + } + + &__text, + &__icon { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + &:empty { + width: 0; + height: 0; + } + } + + // 头像边框 + &--border { + border-color: @avatar-border-color; + border-style: solid; + + &-small { + border-width: @avatar-border-width-small; + } + + &-medium { + border-width: @avatar-border-width-medium; + } + + &-large { + border-width: @avatar-border-width-large; + } + } +} + +// 头像组 +.@{prefix}-avatar-group { + display: inline-flex; + align-items: center; + + &-offset-left { + &-small { + --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距 + } + + &-medium { + --td-avatar-margin-left: @avatar-group-offset-medium; // ‘medium’尺寸组合头像偏移间距 + } + + &-large { + --td-avatar-margin-left: @avatar-group-offset-large; // ‘large’尺寸组合头像偏移间距 + } + } + + &-offset-right { + &-small { + --td-avatar-margin-left: @avatar-group-offset-small; + } + + &-medium { + --td-avatar-margin-left: @avatar-group-offset-medium; + } + + &-large { + --td-avatar-margin-left: @avatar-group-offset-large; + } + } + + &__collapse--slot { + float: left; + } + + &__collapse--slot:not(:empty) + &__collapse--default { + display: none; + float: left; + } + + &__collapse--slot:empty + &__collapse--default { + display: block; + float: left; + } +} diff --git a/style/mobile/components/avatar/v2/_var.less b/style/mobile/components/avatar/v2/_var.less new file mode 100644 index 0000000000..0b632b067f --- /dev/null +++ b/style/mobile/components/avatar/v2/_var.less @@ -0,0 +1,27 @@ +@avatar-bg-color: var(--td-avatar-bg-color, @brand-color-light-active); +@avatar-content-color: var(--td-avatar-content-color, @brand-color); +@avatar-small-width: var(--td-avatar-small-width, 40px); +@avatar-medium-width: var(--td-avatar-medium-width, 48px); +@avatar-large-width: var(--td-avatar-large-width, 64px); + +@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-s); +@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-base); +@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, 16px); + +@avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 20px); +@avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 24px); +@avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 32px); + +@avatar-border-width-small: var(--td-avatar-border-width-small, 2px); +@avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px); +@avatar-border-width-large: var(--td-avatar-border-width-large, 4px); +@avatar-border-color: var(--td-avatar-border-color, #fff); +@avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle); +@avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default); + +@avatar-margin-left: var(--td-avatar-margin-left, 0); + +//组合头像偏移量 +@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -4px); +@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -6px); +@avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -8px); diff --git a/style/mobile/components/back-top/_index.less b/style/mobile/components/back-top/_index.less index 54c546a6b7..b5dd7079c3 100644 --- a/style/mobile/components/back-top/_index.less +++ b/style/mobile/components/back-top/_index.less @@ -15,7 +15,7 @@ transition: opacity .5s ease; &--round { - border-radius: @border-radius-50; + border-radius: @radius-circle; background-color: @back-top-backgroud-color-white; color: @back-top-text-color-black; border: 1px solid; @@ -43,7 +43,7 @@ &--round-dark { background-color: @back-top-backgroud-color-black; color: @back-top-text-color-white; - border-radius: @border-radius-50; + border-radius: @radius-circle; flex-direction: column; } diff --git a/style/mobile/components/back-top/_var.less b/style/mobile/components/back-top/_var.less index 03fc8ba1ef..2265ab1ef5 100644 --- a/style/mobile/components/back-top/_var.less +++ b/style/mobile/components/back-top/_var.less @@ -12,7 +12,7 @@ @back-top-text-size: @font-size; // 文案颜色 -@back-top-text-color-black: @text-primary-color; +@back-top-text-color-black: @text-color-primary; @back-top-text-color-white: @bg-color-container; // 背景颜色 @@ -20,4 +20,4 @@ @back-top-backgroud-color-white: @bg-color-container; // 边框颜色 -@back-top-border-color: @border-level-2-color; +@back-top-border-color: @component-border; diff --git a/style/mobile/components/back-top/v2/_index.less b/style/mobile/components/back-top/v2/_index.less new file mode 100644 index 0000000000..9cc97129b0 --- /dev/null +++ b/style/mobile/components/back-top/v2/_index.less @@ -0,0 +1,88 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{backtop} { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: transparent; + overflow: hidden; + box-sizing: border-box; + transition: height .2s; + height: auto; + + &--fixed { + position: fixed; + right: @back-top-fixed-right; + bottom: @back-top-fixed-bottom; + } + + &--round, + &--round-dark { + width: @back-top-round-width; + height: @back-top-round-width; + border-radius: @back-top-round-border-radius; + + &::after { + + .hairline(@back-top-round-border-color); + + border-radius: @back-top-round-border-radius; + } + } + + &--round, + &--half-round { + color: @back-top-round-color; + background-color: @back-top-round-bg-color; + } + + &--round-dark, + &--half-round-dark { + color: @back-top-round-dark-color; + background-color: @back-top-round-dark-bg-color; + } + + &--half-round, + &--half-round-dark { + width: @back-top-half-round-width; + height: @back-top-half-round-height; + border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius; + flex-direction: row; + right: 0; + + &::after { + + .hairline(@back-top-round-border-color); + + border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius; + } + } + + &__text--round, + &__text--round-dark, + &__text--half-round, + &__text--half-round-dark { + font-size: @back-top-text-font-size; + line-height: @back-top-text-line-height; + } + + &__text--half-round, + &__text--half-round-dark { + width: 2em; + } + + &__icon:not(:empty) + &__text--half-round, + &__icon:not(:empty) + &__text--half-round-dark { + margin-left: 2px; + } + + &__icon { + display: flex; + justify-content: center; + align-items: center; + font-size: @back-top-icon-font-size; + } +} diff --git a/style/mobile/components/back-top/v2/_var.less b/style/mobile/components/back-top/v2/_var.less new file mode 100644 index 0000000000..24b8a95d48 --- /dev/null +++ b/style/mobile/components/back-top/v2/_var.less @@ -0,0 +1,17 @@ +@backtop: ~"@{prefix}-back-top"; +@back-top-text-font-size: @font-size; +@back-top-text-line-height: 12px; +@back-top-icon-font-size: 22px; +@back-top-round-width: 48px; +@back-top-half-round-width: 60px; +@back-top-half-round-height: 40px; +@back-top-fixed-right: @spacer; +@back-top-fixed-bottom: @spacer-2; + +@back-top-round-color: var(--td-back-top-round-color, @font-gray-1); +@back-top-round-bg-color: var(--td-back-top-round-bg-color, @font-white-1); +@back-top-round-border-color: var(--td-back-top-round-border-color, @component-border); +@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); +@back-top-round-dark-color: var(--td-back-top-round-dark-color, @font-white-1); +@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-14); +@back-top-half-round-border-radius: var(--td-back-top-half-round-border-radius, @radius-round); diff --git a/style/mobile/components/badge/_index.less b/style/mobile/components/badge/_index.less index c43e278c80..740cb5e36d 100644 --- a/style/mobile/components/badge/_index.less +++ b/style/mobile/components/badge/_index.less @@ -36,7 +36,7 @@ &--dot { height: @badge-dot-height; min-width: @badge-dot-height; - border-radius: @border-radius-50; + border-radius: @radius-circle; padding: 0; } diff --git a/style/mobile/components/badge/_var.less b/style/mobile/components/badge/_var.less index 59ec2421f8..510fd6645f 100644 --- a/style/mobile/components/badge/_var.less +++ b/style/mobile/components/badge/_var.less @@ -11,7 +11,7 @@ // 如：@button-line-bg-color-hover // 如：@button-line-height-s -@badge-text-color: @text-anti-primary-color; +@badge-text-color: @text-color-anti; @badge-color: @error-color; @badge-font-size: @font-size-xs; @badge-height: 16px; diff --git a/style/mobile/components/badge/v2/_index.less b/style/mobile/components/badge/v2/_index.less new file mode 100644 index 0000000000..20c2b6ac78 --- /dev/null +++ b/style/mobile/components/badge/v2/_index.less @@ -0,0 +1,103 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-badge { + position: relative; + display: inline-block; + vertical-align: top; + + &--basic { + z-index: 100; + padding: 0 @badge-basic-padding; + font-size: @badge-font-size; + color: @badge-text-color; + background-color: @badge-color; + text-align: center; + height: @badge-basic-height; + line-height: @badge-basic-height; + font-weight: @badge-font-weight; + border-radius: @badge-border-radius; + } + + &--dot { + height: @badge-dot-size; + border-radius: 50%; + min-width: @badge-dot-size; + padding: 0; + } + + &--count { + min-width: @badge-basic-width; + white-space: nowrap; + box-sizing: border-box; + } + + &--circle { + border-radius: calc(@badge-basic-height / 2); + } + + &__ribbon { + &-outer { + position: absolute; + top: 0; + right: 0; + } + + &--before, + &--after { + content: ""; + position: absolute; + width: 0; + height: 0; + bottom: 0; + border-bottom: @badge-basic-height solid @badge-color; + } + + &--before { + left: calc(-1 * @badge-basic-height + .5px); + border-left: @badge-basic-height solid transparent; + } + + &--after { + right: calc(-1 * @badge-basic-height + .5px); + border-right: @badge-basic-height solid transparent; + } + } + + &--ribbon { + display: inline-block; + transform: rotate(45deg); + border-radius: 0; + // padding: 0; + } + + &--bubble { + border-radius: @border-bubble-border-radius; + } + + // size + &--large { + font-size: @badge-large-font-size; + height: @badge-large-height; + min-width: @badge-large-height; + line-height: @badge-large-height; + padding: 0 @badge-large-padding; + } + + &--large&--circle { + border-radius: calc(@badge-large-height / 2); + } + + &__content:not(:empty) + .t-has-count { + transform: translate(50%, -50%); + position: absolute; + right: 0; + top: 0; + } + + &__content-text { + display: block; + line-height: 24px; + } +} diff --git a/style/mobile/components/badge/v2/_var.less b/style/mobile/components/badge/v2/_var.less new file mode 100644 index 0000000000..f1f9d04c3e --- /dev/null +++ b/style/mobile/components/badge/v2/_var.less @@ -0,0 +1,15 @@ +@badge-text-color: var(--td-badge-text-color, @font-white-1); +@badge-color: var(--td-badge-bg-color, @error-color); +@badge-font-size: var(--td-badge-font-size, @font-size-xs); +@badge-basic-height: var(--td-badge-basic-height, 16px); +@badge-basic-width: var(--td-badge-basic-width, 16px); +@badge-basic-padding: var(--td-badge-basic-padding, 4px); +@badge-font-weight: var(--td-badge-font-weight, 600); +@badge-border-radius: var(--td-badge-border-radius, 2px); +@border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px); +@badge-dot-size: var(--td-badge-dot-size, 8px); + +// large +@badge-large-font-size: var(--td-badge-large-font-size, @font-size-s); +@badge-large-height: var(--td-badge-large-height, 20px); +@badge-large-padding: var(--td-badge-large-padding, 5px); diff --git a/style/mobile/components/button-group/_index.less b/style/mobile/components/button-group/_index.less index 4e0480bdc8..c6fdd03097 100644 --- a/style/mobile/components/button-group/_index.less +++ b/style/mobile/components/button-group/_index.less @@ -20,7 +20,7 @@ left: 0; content: ""; width: 0; - border-left: solid @border-level-1-color 1px; + border-left: solid @component-stroke 1px; } } diff --git a/style/mobile/components/button-group/_var.less b/style/mobile/components/button-group/_var.less index e80cb769e4..ce08a0c061 100644 --- a/style/mobile/components/button-group/_var.less +++ b/style/mobile/components/button-group/_var.less @@ -1,4 +1,4 @@ -@button-group-background-color: @bg-color-block; +@button-group-background-color: @bg-color-container; @button-group-default-height: 44px; diff --git a/style/mobile/components/button/_index.less b/style/mobile/components/button/_index.less index 6b8432fa5f..fda92630b3 100644 --- a/style/mobile/components/button/_index.less +++ b/style/mobile/components/button/_index.less @@ -33,7 +33,7 @@ .@{prefix}-icon + .@{prefix}-button__text:not(:empty), .@{prefix}-loading + .@{prefix}-button__text:not(:empty) { - margin-left: @spacer; + margin-left: calc(@spacer / 2); } // 主要按钮 @@ -44,22 +44,22 @@ .button-attr-color("text-gray", color); &.@{prefix}-button--primary { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("primary", background-color); } &.@{prefix}-button--success { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("success", background-color); } &.@{prefix}-button--warning { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("warning", background-color); } &.@{prefix}-button--danger { - color: @text-anti-primary-color; + color: @text-color-anti; .button-attr-color("danger", background-color); } diff --git a/style/mobile/components/button/_var.less b/style/mobile/components/button/_var.less index f48e1a1a72..69d9206aa1 100644 --- a/style/mobile/components/button/_var.less +++ b/style/mobile/components/button/_var.less @@ -8,7 +8,7 @@ // @btn-height-block: 44px; // 圆角 -@btn-border-radius: @border-radius; +@btn-border-radius: @radius-small; @btn-shape-border-radius-s: (@btn-height-s / 2); @btn-shape-border-radius-default: (@btn-height-default / 2); @btn-shape-border-radius-l: (@btn-height-l / 2); @@ -21,7 +21,7 @@ @btn-font-small: @font-size-base; // 图标大小 // @btn-icon-size: 22px; -@btn-loading-size: (@font-size * 1.4); +@btn-loading-size: calc(@font-size * 1.4); // 图标大小 @btn-icon-size-small: 20px; @@ -29,17 +29,14 @@ @btn-icon-size-large: 24px; // padding -@btn-padding-horizontal: (@spacer * 4); -// @btn-padding-horizontal-s: (@spacer * 4); -// @btn-padding-horizontal-default: (@spacer * 5); -// @btn-padding-horizontal-l: (@spacer * 4); +@btn-padding-horizontal: 16px; @btn-border-width: 1px; // 状态色 - 主色 -@btn-color-primary: @primary-color; -@btn-color-primary-active: @primary-color-active; -@btn-color-primary-disabled: @primary-color-disabled; +@btn-color-primary: @brand-color; +@btn-color-primary-active: @brand-color-active; +@btn-color-primary-disabled: @brand-color-disabled; // 状态色 - 成功 @btn-color-success: @success-color; @@ -58,13 +55,13 @@ // 状态色 - 白 背景 @btn-color-white-bg: @btn-bg-color-container; -@btn-color-white-bg-active: @bg-color-active; +@btn-color-white-bg-active: @bg-color-component-active; @btn-color-white-bg-disabled: @bg-color-component-disabled; // 状态色 - 白 ghost @btn-color-white-ghost: @bg-color-container; @btn-color-white-ghost-active: @bg-color-container-active; -@btn-color-white-ghost-disabled: @border-level-2-color; +@btn-color-white-ghost-disabled: @component-border; // 状态色 - 灰 背景 @btn-color-gray-bg: @bg-color-component; @@ -77,22 +74,22 @@ @btn-color-text-bg-disabled: transparent; // 状态色 - border 灰 -@btn-color-border-gray: @border-level-2-color; -@btn-color-border-gray-active: @border-level-2-color; -@btn-color-border-gray-disabled: @border-level-2-color; +@btn-color-border-gray: @component-border; +@btn-color-border-gray-active: @component-border; +@btn-color-border-gray-disabled: @component-border; // 状态色 - 文字 for 描边 -@btn-color-text: @text-primary-color; -@btn-color-text-active: @primary-color-active; +@btn-color-text: @text-color-primary; +@btn-color-text-active: @brand-color-active; @btn-color-text-disabled: @text-color-disabled; // 状态色 - 灰字 for base default | 灰色文字按钮 -@btn-color-text-gray: @text-primary-color; -@btn-color-text-gray-active: @text-primary-color; +@btn-color-text-gray: @text-color-primary; +@btn-color-text-gray-active: @text-color-primary; @btn-color-text-gray-disabled: @text-color-disabled; @btn-color-none: transparent; @btn-color-none-active: transparent; @btn-color-none-disabled: transparent; -@btn-text-variant-base-color: @text-anti-primary-color; +@btn-text-variant-base-color: @text-color-anti; diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less new file mode 100644 index 0000000000..30b2c68b09 --- /dev/null +++ b/style/mobile/components/button/v2/_index.less @@ -0,0 +1,469 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.button-size(@size) { + @fontSize: "button-@{size}-font-size"; + @padding: "button-@{size}-padding-horizontal"; + @height: "button-@{size}-height"; + @iconSize: "button-@{size}-icon-font-size"; + + .@{button}--size-@{size} { + font-size: @@fontSize; + padding-left: @@padding; + padding-right: @@padding; + height: @@height; + line-height: @@height; + + & .@{button}__icon { + font-size: @@iconSize; + } + } +} + +.button-theme(@theme) { + @color: "button-@{theme}-color"; + @bgColor: "button-@{theme}-bg-color"; + @borderColor: "button-@{theme}-border-color"; + @disabledColor: "button-@{theme}-disabled-color"; + @disabledBorderColor: "button-@{theme}-disabled-border-color"; + @disabledBgColor: "button-@{theme}-disabled-bg"; + @activeBgColor: "button-@{theme}-active-bg-color"; + @activeBorderColor: "button-@{theme}-active-border-color"; + + .@{button}--@{theme} { + color: @@color; + background-color: @@bgColor; + + &::after { + border-width: @button-border-width; + border-color: @@borderColor; + } + + &.@{button}--hover { + z-index: 0; + + &::after { + background-color: @@activeBgColor; + border-color: @@activeBorderColor; + } + } + + &.@{button}--disabled { + color: @@disabledColor; + background-color: @@disabledBgColor; + + &::after { + border-color: @@disabledBorderColor; + } + } + } +} + +.button-size(extra-small); +.button-size(small); +.button-size(medium); +.button-size(large); + +.button-theme(default); +.button-theme(primary); +.button-theme(light); +.button-theme(danger); + +.@{button} { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + white-space: nowrap; + text-align: center; + background-image: none; + transition: all .3s; + touch-action: manipulation; + border-radius: @button-border-radius; + outline: none; + /* stylelint-disable-next-line */ + font-family: PingFang SC, Microsoft YaHei, Arial Regular; + font-weight: @button-font-weight; + vertical-align: top; + + .cursor-pointer(); + + /* stylelint-disable-next-line */ + -webkit-appearance: none; + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: 0 0; + border-radius: calc(@button-border-radius * 2); + border-style: solid; + box-sizing: border-box; + } + + &--text { + color: @button-default-color; + background: none; + + &::after { + border: 0; + } + + &.@{button}--hover::after { + background-color: @button-default-text-active-bg-color; + } + + &.@{button}--primary { + color: @button-primary-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-primary-text-active-bg-color; + } + + &.@{button}--disabled { + color: @button-primary-text-disabled-color; + background: none; + } + } + + &.@{button}--danger { + color: @button-danger-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-danger-text-active-bg-color; + } + + &.@{button}--disabled { + color: @button-danger-text-disabled-color; + background: none; + } + } + + &.@{button}--light { + color: @button-light-text-color; + background: none; + + &.@{button}--hover::after { + background-color: @button-light-text-active-bg-color; + } + } + + &.@{button}--disabled { + color: @button-default-disabled-color; + } + } + + &--ghost { + background-color: transparent; + color: @button-ghost-color; + + &::after { + border-color: @button-ghost-border-color; + } + + &.@{button}--hover::after { + background: none; + } + + &.@{button}--primary { + color: @button-ghost-primary-color; + + &::after { + border-color: @button-ghost-primary-border-color; + } + } + + &.@{button}--danger { + color: @button-ghost-danger-color; + + &::after { + border-color: @button-ghost-danger-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-ghost-disabled-color; + + &::after { + border-color: @button-ghost-disabled-color; + } + } + } + + &--outline { + color: @button-default-outline-color; + background-color: transparent; + + &::after { + border-color: @button-default-outline-border-color; + } + + &.@{button}--hover::after { + background-color: @button-default-outline-active-bg-color; + border-color: @button-default-outline-active-border-color; + } + + &.@{button}--disabled { + color: @button-default-outline-disabled-color; + + &::after { + border-color: @button-default-outline-disabled-color; + } + } + + &.@{button}--primary { + color: @button-primary-outline-color; + + &::after { + border-color: @button-primary-outline-border-color; + } + + &.@{button}--hover { + color: @button-primary-outline-active-border-color; + + &::after { + background-color: @button-primary-outline-active-bg-color; + border-color: @button-primary-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-primary-outline-disabled-color; + + &::after { + border-color: @button-primary-outline-disabled-color; + } + } + } + + &.@{button}--danger { + color: @button-danger-outline-color; + + &::after { + border-color: @button-danger-outline-border-color; + } + + &.@{button}--hover { + color: @button-danger-outline-active-border-color; + + &::after { + background-color: @button-danger-outline-active-bg-color; + border-color: @button-danger-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-danger-outline-disabled-color; + + &::after { + border-color: @button-danger-outline-disabled-color; + } + } + } + + &.@{button}--light { + color: @button-light-outline-color; + background-color: @button-light-outline-bg-color; + + &::after { + border-color: @button-light-outline-border-color; + } + + &.@{button}--hover { + color: @button-light-outline-active-border-color; + + &::after { + background-color: @button-light-outline-active-bg-color; + border-color: @button-light-outline-active-border-color; + } + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-light-outline-disabled-color; + + &::after { + border-color: @button-light-outline-disabled-color; + } + } + } + } + + &--dashed { + background-color: transparent; + border-style: dashed; + + &.@{button}--primary { + color: @button-primary-dashed-color; + + &::after { + border-color: @button-primary-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-primary-dashed-disabled-color; + + &::after { + border-color: @button-primary-dashed-disabled-color; + } + } + } + + &.@{button}--danger { + color: @button-danger-dashed-color; + + &::after { + border-color: @button-danger-dashed-border-color; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-danger-dashed-disabled-color; + + &::after { + border-color: @button-danger-dashed-disabled-color; + } + } + } + } + + .@{prefix}-loading + &__content:not(:empty), + .@{prefix}-icon + &__content:not(:empty) { + margin-left: 4px; + } + + // &__icon { + // border-radius: @button-icon-border-radius; + // } + + // 圆角长方形 + &--round { + &.@{button}--size-large { + border-radius: calc(@button-large-height / 2); + + &::after { + border-radius: @button-large-height; + } + } + + &.@{button}--size-medium { + border-radius: calc(@button-medium-height / 2); + + &::after { + border-radius: @button-medium-height; + } + } + + &.@{button}--size-small { + border-radius: calc(@button-small-height / 2); + + &::after { + border-radius: @button-small-height; + } + } + + &.@{button}--size-extra-small { + border-radius: calc(@button-extra-small-height / 2); + + &::after { + border-radius: @button-extra-small-height; + } + } + } + + // 正方形 + &--square { + padding: 0; + + &.@{button}--size-large { + width: @button-large-height; + } + + &.@{button}--size-medium { + width: @button-medium-height; + } + + &.@{button}--size-small { + width: @button-small-height; + } + + &.@{button}--size-extra-small { + width: @button-extra-small-height; + } + } + + // 圆形 + &--circle { + padding: 0; + border-radius: 50%; + + &.@{button}--size-large { + width: @button-large-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-medium { + width: @button-medium-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-small { + width: @button-small-height; + + &::after { + border-radius: 50%; + } + } + + &.@{button}--size-extra-small { + width: @button-extra-small-height; + + &::after { + border-radius: 50%; + } + } + } + + &--block { + display: flex; + width: 100%; + } + + &--disabled { + cursor: not-allowed; + } + + &__loading { + &--wrapper { + display: flex; + align-items: center; + justify-content: center; + } + + &--indicator { + color: @font-white-1; + } + } + + &.@{button}--hover::after { + z-index: -1; + } +} diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less new file mode 100644 index 0000000000..2273968567 --- /dev/null +++ b/style/mobile/components/button/v2/_var.less @@ -0,0 +1,123 @@ +@button-border-width: var(--td-button-border-width, 2px); +@button-border-radius: var(--td-button-border-radius, @radius-default); +@button-font-weight: var(--td-button-font-weight, 600); + +@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base); +@button-small-font-size: var(--td-button-small-font-size, @font-size-base); +@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m); +@button-large-font-size: var(--td-button-large-font-size, @font-size-m); + +@button-extra-small-height: var(--td-button-extra-small-height, 28px); +@button-small-height: var(--td-button-small-height, 32px); +@button-medium-height: var(--td-button-medium-height, 40px); +@button-large-height: var(--td-button-large-height, 48px); + +// button icon +@button-icon-spacer: var(--td-button-icon-spacer, @spacer); +@button-icon-border-radius: var(--td-button-icon-border-radius, 4px); + +// padding +@button-extra-small-padding-horizontal: var(--td-button-extra-small-padding-horizontal, 8px); +@button-small-padding-horizontal: var(--td-button-small-padding-horizontal, 12px); +@button-medium-padding-horizontal: var(--td-button-medium-padding-horizontal, 16px); +@button-large-padding-horizontal: var(--td-button-large-padding-horizontal, 20px); + +// 图标大小 +@button-extra-small-icon-font-size: var(--td-button-extra-small-icon-font-size, 18px); +@button-small-icon-font-size: var(--td-button-small-icon-font-size, 18px); +@button-medium-icon-font-size: var(--td-button-medium-icon-font-size, 20px); +@button-large-icon-font-size: var(--td-button-large-icon-font-size, 24px); + +// default +@button-default-color: var(--td-button-default-color, @font-gray-1); +@button-default-bg-color: var(--td-button-default-bg-color, @bg-color-component); +@button-default-border-color: var(--td-button-default-border-color, @bg-color-component); +@button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4); +@button-default-disabled-bg: var(--td-button-default-disabled-bg, @bg-color-component-disabled); +@button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @bg-color-component-disabled); +// primary +@button-primary-color: var(--td-button-primary-color, @font-white-1); +@button-primary-border-color: var(--td-button-primary-border-color, @brand-color); +@button-primary-bg-color: var(--td-button-primary-bg-color, @brand-color); +@button-primary-disabled-color: var(--td-button-primary-disabled-color, @font-white-1); +@button-primary-disabled-bg: var(--td-button-primary-disabled-bg, @brand-color-disabled); +@button-primary-disabled-border-color: var(--td-button-primary-disabled-border-color, @brand-color-disabled); +// light +@button-light-color: var(--td-button-light-color, @brand-color); +@button-light-border-color: var(--td-button-light-border-color, @brand-color-light); +@button-light-bg-color: var(--td-button-light-bg-color, @brand-color-light); +@button-light-disabled-color: var(--td-button-light-disabled-color, @brand-color-disabled); +@button-light-disabled-bg: var(--td-button-light-disabled-bg, @brand-color-light); +@button-light-disabled-border-color: var(--td-button-light-disabled-border-color, @brand-color-light); +// danger +@button-danger-color: var(--td-button-danger-color, @font-white-1); +@button-danger-border-color: var(--td-button-danger-border-color, @error-color); +@button-danger-bg-color: var(--td-button-danger-bg-color, @error-color); +@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1); +@button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3); +@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3); +// default + outline +@button-default-outline-color: var(--td-button-default-outline-color, @font-gray-1); +@button-default-outline-border-color: var(--td-button-default-outline-border-color, @component-border); +@button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @component-border); +// primary + outline +@button-primary-outline-color: var(--td-button-primary-outline-color, @brand-color); +@button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color); +@button-primary-outline-disabled-color: var(--td-button-primary-outline-disabled-color, @brand-color-disabled); +// danger + outline +@button-danger-outline-color: var(--td-button-danger-outline-color, @error-color); +@button-danger-outline-border-color: var(--td-button-danger-outline-border-color, @button-danger-outline-color); +@button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @error-color-3); +// light + outline +@button-light-outline-color: var(--td-button-light-outline-color, @brand-color); +@button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color); +@button-light-outline-bg-color: var(--td-button-light-outline-bg-color, @brand-color-light); +@button-light-outline-disabled-color: var(--td-button-light-outline-disabled-color, @brand-color-disabled); +// primary + dashed +@button-primary-dashed-color: var(--td-button-primary-dashed-color, @brand-color); +@button-primary-dashed-border-color: var(--td-button-primary-dashed-border-color, @button-primary-dashed-color); +@button-primary-dashed-disabled-color: var(--td-button-primary-dashed-disabled-color, @brand-color-disabled); +// danger + dashed +@button-danger-dashed-color: var(--td-button-danger-dashed-color, @error-color); +@button-danger-dashed-border-color: var(--td-button-danger-dashed-border-color, @button-danger-dashed-color); +@button-danger-dashed-disabled-color: var(--td-button-danger-dashed-disabled-color, @button-danger-disabled-color); +// primary + text +@button-primary-text-color: var(--td-button-primary-text-color, @brand-color); +@button-primary-text-disabled-color: var(--td-button-primary-text-disabled-color, @brand-color-disabled); +// danger + text +@button-danger-text-color: var(--td-button-danger-text-color, @error-color); +@button-danger-text-disabled-color: var(--td-button-danger-text-disabled-color, @button-danger-disabled-color); +// light + text +@button-light-text-color: var(--td-button-light-text-color, @brand-color); +// ghost 优先级高于 theme，固定透明背景，白色边框，白色字体 +@button-ghost-color: var(--td-button-ghost-color, @bg-color-container); +@button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color); +@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, .35)); +@button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color); +@button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color); +@button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color); +@button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color); + +// 激活态背景和边框色 +@button-default-active-bg-color: var(--td-button-default-active-bg-color, @bg-color-component-active); +@button-default-active-border-color: var(--td-button-default-active-border-color, @bg-color-component-active); +@button-light-active-bg-color: var(--td-button-light-active-bg-color, @brand-color-light-active); +@button-light-active-border-color: var(--td-button-light-active-border-color, @brand-color-light-active); +@button-primary-active-bg-color: var(--td-button-primary-active-bg-color, @brand-color-active); +@button-primary-active-border-color: var(--td-button-primary-active-border-color, @brand-color-active); +@button-danger-active-bg-color: var(--td-button-danger-active-bg-color, @error-color-7); +@button-danger-active-border-color: var(--td-button-danger-active-border-color, @error-color-7); +@button-default-outline-active-bg-color: var(--td-button-default-outline-active-bg-color, @bg-color-container-active); +@button-default-outline-active-border-color: var(--td-button-default-outline-active-border-color, @component-border); +@button-primary-outline-active-bg-color: var(--td-button-primary-outline-active-bg-color, @bg-color-container-active); +@button-primary-outline-active-border-color: var(--td-button-primary-outline-active-border-color, @brand-color-active); +@button-danger-outline-active-bg-color: var(--td-button-danger-outline-active-bg-color, @bg-color-container-active); +@button-danger-outline-active-border-color: var(--td-button-danger-outline-active-border-color, @error-color-7); +@button-light-outline-active-bg-color: var(--td-button-light-outline-active-bg-color, @brand-color-light-active); +@button-light-outline-active-border-color: var(--td-button-light-outline-active-border-color, @brand-color-active); +@button-default-text-active-bg-color: var(--td-button-default-text-active-bg-color, @bg-color-container-active); +@button-primary-text-active-bg-color: var(--td-button-primary-text-active-bg-color, @bg-color-container-active); +@button-danger-text-active-bg-color: var(--td-button-danger-text-active-bg-color, @bg-color-container-active); +@button-light-text-active-bg-color: var(--td-button-light-text-active-bg-color, @bg-color-container-active); + +@button: ~"@{prefix}-button"; diff --git a/style/mobile/components/calendar/_index.less b/style/mobile/components/calendar/_index.less index e67c645368..af15037b7d 100644 --- a/style/mobile/components/calendar/_index.less +++ b/style/mobile/components/calendar/_index.less @@ -1,11 +1,11 @@ @import "../../base.less"; @title-font-size: 18px; -@title-color: @text-level-1-color; -@days-item-color: @text-level-2-color; -@dates-item-suffix-color: @text-level-3-color; -@calendar-disabled-color: @text-level-4-color; -@calendar-centre-color: @primary-color-1; +@title-color: @text-color-primary; +@days-item-color: @text-color-secondary; +@dates-item-suffix-color: @text-color-placeholder; +@calendar-disabled-color: @text-color-disabled; +@calendar-centre-color: @brand-color-light; .@{prefix}-calendar { position: relative; diff --git a/style/mobile/components/calendar/v2/_index.less b/style/mobile/components/calendar/v2/_index.less new file mode 100644 index 0000000000..6648975e0c --- /dev/null +++ b/style/mobile/components/calendar/v2/_index.less @@ -0,0 +1,194 @@ +@import "../../../base.less"; + +@import "../../../mixins/_cursor.less"; + +@import "./_var.less"; + +.@{prefix}-calendar { + position: relative; + z-index: 9999; + background: @calendar-bg-color; + overflow-x: hidden; + + &--popup { + border-top-left-radius: @calendar-radius; + border-top-right-radius: @calendar-radius; + } + + &__title { + display: flex; + align-items: center; + justify-content: center; + font-size: @calendar-title-font-size; + font-weight: 600; + color: @calendar-title-color; + height: 26px; + padding: 16px; + + &:focus { + outline: 0; + } + } + + &__close-btn { + position: absolute; + top: 16px; + right: 16px; + margin: -12px; + padding: 12px; + } + + &__days { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-column-gap: 4px; + padding: 0 16px; + text-align: center; + line-height: 46px; + + &-item { + height: 46px; + font-size: 14px; + color: @calendar-days-color; + } + } + + &__content { + min-height: 200px; + display: flex; + flex-direction: column; + } + + &__month { + font-size: 14px; + color: @calendar-title-color; + font-weight: 600; + padding: 16px 0 0; + + &s { + height: 60vh; + padding: 0 16px 16px; + box-sizing: border-box; + + &::-webkit-scrollbar { + display: none; + } + } + } + + &__dates { + flex: 1; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-column-gap: 4px; + + &-item { + position: relative; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + border-radius: 8px; + height: 60px; + line-height: 24px; + font-weight: 600; + margin-top: 8px; + + .cursor-pointer(); + + &-prefix, + &-suffix { + position: absolute; + font-size: 10px; + line-height: 16px; + width: 100%; + text-align: center; + font-weight: 400; + } + + &-prefix { + top: 4px; + } + + &-suffix { + bottom: 4px; + color: @calendar-item-suffix-color; + + &--selected, + &--start, + &--end { + color: @calendar-selected-color; + } + + &--disabled { + color: @calendar-item-disabled-color; + } + } + + &--selected, + &--start, + &--end { + background: @calendar-active-color; + color: @calendar-selected-color; + border-radius: 4px; + } + + &--start { + border-radius: 4px 0 0 4px; + } + + &--end { + border-radius: 0 4px 4px 0; + } + + &--start + &--end { + &::before { + content: ""; + display: block; + position: absolute; + top: 0; + width: 4px; + height: 100%; + background: @calendar-active-color; + } + + &::before { + left: -4px; + } + } + + &--centre { + border-radius: 0; + background-color: @calendar-item-centre-color; + + &::before, + &::after { + content: ""; + display: block; + position: absolute; + top: 0; + width: 4px; + height: 100%; + background-color: @calendar-item-centre-color; + } + + &::before { + left: -4px; + } + + &::after { + right: -4px; + } + } + + &--disabled { + color: @calendar-item-disabled-color; + cursor: default; + } + } + } + + &__footer { + padding: 16px; + } +} diff --git a/style/mobile/components/calendar/v2/_var.less b/style/mobile/components/calendar/v2/_var.less new file mode 100644 index 0000000000..dd10ae09b2 --- /dev/null +++ b/style/mobile/components/calendar/v2/_var.less @@ -0,0 +1,10 @@ +@calendar-radius: var(--td-calendar-radius, 12px); +@calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container); +@calendar-active-color: var(--td-calendar-active-color, @brand-color); +@calendar-selected-color: var(--td-calendar-selected-color, @font-white-1); +@calendar-title-font-size: var(--td-calendar-title-font-size, 18px); +@calendar-title-color: var(--td-calendar-title-color, @font-gray-1); +@calendar-days-color: var(--td-calendar-days-color, @font-gray-2); +@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @font-gray-3); +@calendar-item-centre-color: var(--td-calendar-item-centre-color, @brand-color-light); +@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @font-gray-4); diff --git a/style/mobile/components/cascader/_var.less b/style/mobile/components/cascader/_var.less index 15904d339f..787113d0ed 100644 --- a/style/mobile/components/cascader/_var.less +++ b/style/mobile/components/cascader/_var.less @@ -3,14 +3,14 @@ @wrapper-min-height: 400px; @cascader-disabled-color: #c0c0c0; -@cascader-title-color: @text-level-1-color; -@cascader-options-title-color: @text-level-3-color; +@cascader-title-color: @text-color-primary; +@cascader-options-title-color: @text-color-placeholder; -@cascader-border-color: @border-level-1-color; +@cascader-border-color: @component-stroke; // steps @cascader-step-height: 44px; -@cascader-step-active-color: @primary-color; +@cascader-step-active-color: @brand-color; @cascader-step-dot-size: 8px; -@cascader-step-dot-color: @text-level-4-color; -@cascader-step-line-color: @text-level-4-color; +@cascader-step-dot-color: @text-color-disabled; +@cascader-step-line-color: @text-color-disabled; diff --git a/style/mobile/components/cascader/v2/_index.less b/style/mobile/components/cascader/v2/_index.less new file mode 100644 index 0000000000..cd82d09bad --- /dev/null +++ b/style/mobile/components/cascader/v2/_index.less @@ -0,0 +1,114 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{cascader} { + display: flex; + flex-direction: column; + background-color: #fff; + color: @cascader-title-color; + border-radius: 12px 12px 0 0; + + --td-radio-icon-checked-color: @cascader-active-color; + --td-tab-item-active-color: @cascader-active-color; + --td-tab-track-color: @cascader-active-color; + + &__close-btn { + right: 16px; + top: 12px; + position: absolute; + } + + &__title { + position: relative; + font-weight: 700; + text-align: center; + line-height: 48px; + font-size: @cascder-title-font-size; + } + + &__content { + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + } + + &__options { + width: 100vw; + height: @cascader-options-height; + + &-title { + margin-top: 20px; + color: @cascader-options-title-color; + font-size: 14px; + line-height: 22px; + padding-left: 16px; + } + + &-content { + flex: 1; + height: 100%; + overflow: auto; + padding-left: 16px; + } + + &-container { + display: flex; + transition: all ease .3s; + overflow-y: scroll; + } + } + + &__step { + display: flex; + align-items: center; + height: @cascader-step-height; + + &s { + padding: 0 16px 5px; + .border(bottom, @cascader-border-color); + } + + &-dot { + position: relative; + width: @cascader-step-dot-size; + height: @cascader-step-dot-size; + border-radius: 50%; + border: 1px solid @cascader-active-color; + box-sizing: border-box; + + &:not(.@{cascader}__step-dot--last)::after { + content: ""; + display: block; + position: absolute; + left: 50%; + top: calc(@cascader-step-dot-size + 7px); + height: 18px; + width: 1px; + background: @cascader-active-color; + transform: translateX(-50%); + } + + &--active { + background: @cascader-active-color; + border-color: @cascader-active-color; + } + } + + &-label { + padding-left: 16px; + font-size: 16px; + + &--active { + color: @cascader-active-color; + font-weight: 600; + } + } + + &-arrow { + color: @cascader-step-arrow-color; + margin-left: auto; + } + } +} diff --git a/style/mobile/components/cascader/v2/_var.less b/style/mobile/components/cascader/v2/_var.less new file mode 100644 index 0000000000..420b7b5e5d --- /dev/null +++ b/style/mobile/components/cascader/v2/_var.less @@ -0,0 +1,15 @@ +@cascader: ~"@{prefix}-cascader"; + +@cascader-active-color: var(--td-cascader-active-color, @brand-color); +@cascader-disabled-color: var(--td-cascader-disabled-color, @font-gray-4); +@cascader-title-color: var(--td-cascader-title-color, @font-gray-1); +@cascader-options-title-color: var(--td-cascader-options-title-color, @font-gray-3); +@cascader-border-color: var(--td-cascader-border-color, @border-color); + +@cascader-options-height: var(--td-cascader-options-height, 320px); +@cascder-title-font-size: var(--td-cascder-title-font-size, 18px); + +// steps +@cascader-step-height: var(--td-cascader-step-height, 44px); +@cascader-step-dot-size: var(--td-cascader-step-dot-size, 8px); +@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @font-gray-3); diff --git a/style/mobile/components/cell-group/_var.less b/style/mobile/components/cell-group/_var.less index acbf7d8025..017db6a011 100644 --- a/style/mobile/components/cell-group/_var.less +++ b/style/mobile/components/cell-group/_var.less @@ -1,7 +1,7 @@ // CellGroup -@cell-group-background-color: transparent; //@bg-color-block; -@cell-group-color: @text-level-3-color; +@cell-group-background-color: transparent; //@bg-color-container; +@cell-group-color: @text-color-placeholder; @cell-group-background-color: #F5F5F5; -@cell-group-padding: @spacer-3 16px ; +@cell-group-padding: @spacer-1 16px ; @cell-group-font-size: @font-size-base; @cell-group-line-height: 22px; diff --git a/style/mobile/components/cell-group/v2/_index.less b/style/mobile/components/cell-group/v2/_index.less new file mode 100644 index 0000000000..1137d04ab4 --- /dev/null +++ b/style/mobile/components/cell-group/v2/_index.less @@ -0,0 +1,37 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-cell-group { + position: relative; + + &__title { + font-family: PingFangSC-Regular; + font-size: @cell-group-title-font-size; + color: @cell-group-title-color; + text-align: left; + line-height: @cell-group-title-line-height; + background-color: @cell-group-title-bg-color; + padding-left: @cell-group-title-padding-left; + } + + &--bordered { + &::before { + .hairline-top(@cell-group-border-color); + + z-index: 1; + } + + &::after { + .hairline-bottom(@cell-group-border-color); + + z-index: 1; + } + } + + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/cell-group/v2/_var.less b/style/mobile/components/cell-group/v2/_var.less new file mode 100644 index 0000000000..330ef7aa31 --- /dev/null +++ b/style/mobile/components/cell-group/v2/_var.less @@ -0,0 +1,6 @@ +@cell-group-title-font-size: var(--td-cell-group-title-font-size, 14px); +@cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); +@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); +@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); +@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-border-color: var(--td-cell-group-border-color, @border-color); diff --git a/style/mobile/components/cell/_index.less b/style/mobile/components/cell/_index.less index 3819389e6a..ffbb6d5381 100644 --- a/style/mobile/components/cell/_index.less +++ b/style/mobile/components/cell/_index.less @@ -17,11 +17,11 @@ &__title { flex: 1 1 auto; - color: @text-level-1-color; + color: @text-color-primary; } &__description { - color: @text-level-3-color; + color: @text-color-placeholder; font-size: @cell-summary-font-size; line-height: 22px; margin-top: @spacer; @@ -31,7 +31,7 @@ flex: 1; text-align: right; overflow: hidden; - color: @text-level-3-color; + color: @text-color-placeholder; display: flex; justify-content: flex-end; align-items: center; @@ -45,9 +45,9 @@ &__left-icon { flex-shrink: 0; - color: @text-level-1-color; + color: @text-color-primary; line-height: 24px; - margin-right: @spacer-2; + margin-right: @spacer; font-size: 24px; align-self: flex-start; @@ -57,9 +57,9 @@ } &__right-icon { - color: @text-level-3-color; + color: @text-color-placeholder; line-height: 24px; - margin-left: @spacer-2; + margin-left: @spacer; font-size: 24px; & > .@{prefix}-icon { diff --git a/style/mobile/components/cell/_var.less b/style/mobile/components/cell/_var.less index be029ccea5..5147dce1c3 100644 --- a/style/mobile/components/cell/_var.less +++ b/style/mobile/components/cell/_var.less @@ -4,9 +4,9 @@ @cell-label-width: 80px; -@cell-border-color: @border-level-1-color; +@cell-border-color: @component-stroke; -@cell-background-color: @bg-color-block; +@cell-background-color: @bg-color-container; @cell-font-size: @font-size-l; diff --git a/style/mobile/components/cell/v2/_index.less b/style/mobile/components/cell/v2/_index.less new file mode 100644 index 0000000000..1787e75703 --- /dev/null +++ b/style/mobile/components/cell/v2/_index.less @@ -0,0 +1,150 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-cell { + position: relative; + display: flex; + box-sizing: border-box; + width: 100%; + overflow: hidden; + padding: @cell-vertical-padding @cell-horizontal-padding; + line-height: @cell-line-height; + height: @cell-height; + background-color: @cell-bg-color; + + &::after { + .hairline-bottom(@cell-border-color); + + left: @cell-border-left-space; + right: @cell-border-right-space; + } + + &--borderless::after { + display: none; + } + + &__description { + font-size: @cell-description-font-size; + line-height: @cell-description-line-height; + color: @cell-description-color; + + &-text { + margin-top: calc(@spacer / 2); + } + } + + &__note { + display: flex; + align-items: center; + justify-content: flex-end; + color: @cell-note-color; + font-size: @cell-note-font-size; + } + + &__title, + &__note { + flex: 1 1 auto; + + &:empty { + display: none; + } + } + + &__title-text { + display: flex; + font-size: @cell-title-font-size; + color: @cell-title-color; + font-weight: 400; + } + + &__left, + &__right { + display: flex; + align-items: center; + + .@{prefix}-icon { + display: block; + } + } + + &__left { + &:not(:empty) { + margin-right: @spacer; + } + + &-icon { + color: @cell-left-icon-color; + font-size: @cell-left-icon-font-size; + } + + &-image { + height: @cell-image-height; + width: @cell-image-width; + } + } + + &__right { + margin-left: calc(@spacer / 2); + + &-icon { + color: @cell-right-icon-color; + font-size: @cell-right-icon-font-size; + } + } + + &--hover { + background-color: @cell-hover-color; + } + + &--required { + font-size: @cell-required-font-size; + color: @cell-required-color; + } + + &--middle { + align-items: center; + } + + &--top { + align-items: flex-start; + } + + &--bottom { + align-items: flex-end; + } +} + +.@{prefix}-cell-group { + position: relative; + + &__title { + font-family: PingFangSC-Regular; + font-size: @cell-group-title-font-size; + color: @cell-group-title-color; + text-align: left; + line-height: @cell-group-title-line-height; + background-color: @cell-group-title-bg-color; + padding-left: @cell-group-title-padding-left; + } + + &--bordered { + &::before { + .hairline-top(@cell-group-border-color); + + z-index: 1; + } + + &::after { + .hairline-bottom(@cell-group-border-color); + + z-index: 1; + } + } + + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/cell/v2/_var.less b/style/mobile/components/cell/v2/_var.less new file mode 100644 index 0000000000..a44c940ee8 --- /dev/null +++ b/style/mobile/components/cell/v2/_var.less @@ -0,0 +1,32 @@ +@cell-height: var(--td-cell-height, auto); +@cell-line-height: var(--td-cell-line-height, 24px); +@cell-vertical-padding: var(--td-cell-vertical-padding, 16px); +@cell-horizontal-padding: var(--td-cell-horizontal-padding, 16px); +@cell-bg-color: var(--td-cell-bg-color, @bg-color-container); +@cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer); +@cell-border-color: var(--td-cell-border-color, @component-stroke); +@cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding); +@cell-border-right-space: var(--td-border-right-space, 0); +@cell-description-color: var(--td-cell-description-color, @font-gray-2); +@cell-description-font-size: var(--td-cell-description-font-size, @font-size-base); +@cell-description-line-height: var(--td-cell-description-line-height, 22px); +@cell-note-color: var(--td-cell-note-color, @font-gray-3); +@cell-note-font-size: var(--td-cell-note-font-size, @font-size-m); +@cell-title-color: var(--td-cell-title-color, @font-gray-1); +@cell-title-font-size: var(--td-cell-title-font-size, @font-size-m); +@cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color); +@cell-left-icon-font-size: var(--td-cell-left-icon-font-size, 24px); +@cell-right-icon-color: var(--td-cell-right-icon-color, @font-gray-3); +@cell-right-icon-font-size: var(--td-cell-right-icon-font-size, 24px); +@cell-required-color: var(--td-cell-required-color, @error-color-6); +@cell-required-font-size: var(--td-cell-required-font-size, @font-size-m); +@cell-image-width: var(--td-cell-image-width, 48px); +@cell-image-height: var(--td-cell-image-height, 48px); + +// cell group +@cell-group-title-font-size: var(--td-cell-group-title-font-size, 14px); +@cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); +@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); +@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); +@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-border-color: var(--td-cell-group-border-color, @border-color); diff --git a/style/mobile/components/check-tag/v2/_index.less b/style/mobile/components/check-tag/v2/_index.less new file mode 100644 index 0000000000..10e7ab0291 --- /dev/null +++ b/style/mobile/components/check-tag/v2/_index.less @@ -0,0 +1,135 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); + } + }); +} + +.@{prefix}-tag { + display: inline-flex; + align-items: center; + border: 1px solid transparent; + box-sizing: border-box; + border-radius: @tag-square-border-radius; + font-size: @tag-medium-font-size; + user-select: none; + vertical-align: middle; + + &__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__icon { + display: flex; + align-items: center; + } + + &__icon:not(:empty) + &__text:not(:empty) { + margin-left: 4px; + } + + &--small { + height: @tag-small-height; + line-height: @tag-small-height; + padding: 0 @tag-small-padding; + font-size: @tag-small-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-small-icon-size; + } + } + + &--medium { + height: @tag-medium-height; + line-height: @tag-medium-height; + padding: 0 @tag-medium-padding; + font-size: @tag-medium-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-medium-icon-size; + } + } + + &--large { + height: @tag-large-height; + line-height: @tag-large-height; + padding: 0 @tag-large-padding; + font-size: @tag-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-large-icon-size; + } + } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } + + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; + } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; + } + } + + &.@{prefix}-tag--closable { + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } +} diff --git a/style/mobile/components/check-tag/v2/_var.less b/style/mobile/components/check-tag/v2/_var.less new file mode 100644 index 0000000000..727630ee9d --- /dev/null +++ b/style/mobile/components/check-tag/v2/_var.less @@ -0,0 +1,43 @@ +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); diff --git a/style/mobile/components/checkbox/_index.less b/style/mobile/components/checkbox/_index.less index 84c96ed69f..6940916f12 100644 --- a/style/mobile/components/checkbox/_index.less +++ b/style/mobile/components/checkbox/_index.less @@ -18,7 +18,7 @@ line-height: 24px; &-left { - margin-right: @spacer-2; + margin-right: @spacer; //padding-right: @checkbox-label-wrap-left-padding; } } diff --git a/style/mobile/components/checkbox/_var.less b/style/mobile/components/checkbox/_var.less index 02b044890a..0396fcd268 100644 --- a/style/mobile/components/checkbox/_var.less +++ b/style/mobile/components/checkbox/_var.less @@ -1,15 +1,15 @@ -@checkbox-title-font-size: @font-size * 1.6; -@checkbox-title-color: @text-level-1-color; +@checkbox-title-font-size: calc(@font-size * 1.6); +@checkbox-title-color: @text-color-primary; @checkbox-title-color-disabled: @text-color-disabled; @checkbox-icon-size: 22px; -@checkbox-icon-checked: @font-size * 2.4; +@checkbox-icon-checked: calc(@font-size * 2.4); @checkbox-icon-unchecked-color: @gray-color-4; -@checkbox-icon-checked-color: @primary-color; +@checkbox-icon-checked-color: @brand-color; -@checkbox-icon-margin: @spacer-2; +@checkbox-icon-margin: @spacer; @checkbox-content-inner-top-margin: 4px; diff --git a/style/mobile/components/checkbox/v2/_index.less b/style/mobile/components/checkbox/v2/_index.less new file mode 100644 index 0000000000..613ae62ead --- /dev/null +++ b/style/mobile/components/checkbox/v2/_index.less @@ -0,0 +1,216 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{checkbox} { + display: inline-flex; + vertical-align: middle; + position: relative; + font-size: @checkbox-font-size; + background: @checkbox-bg-color; + + &:focus { + outline: 0; + } + + &--block { + display: flex; + padding: @checkbox-vertical-padding; + } + + &--right { + flex-direction: row-reverse; + } + + .limit-title-row { + /* stylelint-disable-next-line */ + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .image-center { + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + &__icon-wrapper { + display: block; + } + + &__icon-left { + margin-right: 20px; + width: 20px; + } + + &__icon-right { + right: 0; + display: contents; + .image-center(); + } + + &__icon-image { + width: @checkbox-icon-size; + height: @checkbox-icon-size; + vertical-align: top; + } + + &__icon { + position: relative; + display: block; + width: @checkbox-icon-size; + height: @checkbox-icon-size; + color: @checkbox-icon-color; + font-size: @checkbox-icon-size; + + &:empty { + display: none; + } + + &--checked { + color: @checkbox-icon-checked-color; + } + + &--disabled { + cursor: not-allowed; + color: @checkbox-icon-disabled-color; + } + + &--left { + margin-right: 8px; + } + + &-circle { + width: calc((@checkbox-icon-size - @checkbox-border-width) * 2); + height: calc((@checkbox-icon-size - @checkbox-border-width) * 2); + border: @checkbox-border-width solid @checkbox-icon-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @checkbox-icon-disabled-bg-color; + } + } + + &-rectangle { + width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2); + height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2); + border: @checkbox-border-width solid @checkbox-icon-color; + border-radius: 2px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @checkbox-icon-disabled-bg-color; + } + } + + &-line { + &::before, + &::after { + content: ""; + display: block; + position: absolute; + width: 2.5px; + border-radius: 1px; + background: @checkbox-icon-checked-color; + transform-origin: top center; + } + + &::before { + height: 8px; + left: 4px; + top: 11px; + transform: rotate(-45deg); + } + + &::after { + height: 13px; + right: 4px; + top: 7px; + transform: rotate(45deg); + } + + &--disabled { + &::before, + &::after { + background: @checkbox-icon-disabled-color; + } + } + } + } + + &__content { + flex: 1; + } + + &__title { + color: @checkbox-title-color; + line-height: @checkbox-title-line-height; + .limit-title-row(); + + &--disabled { + color: @checkbox-title-disabled-color; + } + } + + &__description { + color: @checkbox-description-color; + .limit-title-row(); + + font-size: 14px; + line-height: @checkbox-description-line-height; + + &--disabled { + color: @checkbox-description-disabled-color; + } + } + + &__title + &__description:not(:empty) { + margin-top: 4px; + } + + &__border { + position: absolute; + bottom: 0; + left: 48px; + right: 0; + height: 1px; + background: @checkbox-border-color; + transform: scaleY(.5); + + &--right { + left: 16px; + } + } + + &--tag { + font-size: 14px; + padding-top: 8px; + padding-bottom: 8px; + text-align: center; + background-color: #f3f3f3; + border-radius: 6px; + + &.@{checkbox}--checked { + color: @checkbox-tag-active-color; + background-color: @checkbox-tag-active-bg-color; + } + + .@{checkbox}__title--checked { + color: @checkbox-tag-active-color; + } + + .@{checkbox}__content { + margin-right: 0; + } + } +} diff --git a/style/mobile/components/checkbox/v2/_var.less b/style/mobile/components/checkbox/v2/_var.less new file mode 100644 index 0000000000..fb696b21ca --- /dev/null +++ b/style/mobile/components/checkbox/v2/_var.less @@ -0,0 +1,20 @@ +@checkbox: ~"@{prefix}-checkbox"; + +@checkbox-border-width: 3px; +@checkbox-icon-size: var(--td-checkbox-icon-size, 24px); +@checkbox-font-size: var(--td-checkbox-font-size, 16px); +@checkbox-title-line-height: var(--td-checkbox-title-line-height, 24px); +@checkbox-description-line-height: var(--td-checkbox-description-line-height, 22px); +@checkbox-vertical-padding: var(--td-checkbox-vertical-padding, 16px); +@checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container); +@checkbox-border-color: var(--td-checkbox-border-color, @component-stroke); +@checkbox-title-color: var(--td-checkbox-title-color, @font-gray-1); +@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @font-gray-4); +@checkbox-description-color: var(--td-checkbox-description-color, @font-gray-2); +@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @font-gray-4); +@checkbox-icon-color: var(--td-checkbox-icon-color, @gray-color-4); +@checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled); +@checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled); +@checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color); +@checkbox-tag-active-bg-color: var(--td-checkbox-tag-active-bg-color, @brand-color-light); +@checkbox-tag-active-color: var(--td-checkbox-tag-active-color, @brand-color); diff --git a/style/mobile/components/collapse-panel/v2/_index.less b/style/mobile/components/collapse-panel/v2/_index.less new file mode 100644 index 0000000000..8ca9cf29d3 --- /dev/null +++ b/style/mobile/components/collapse-panel/v2/_index.less @@ -0,0 +1,113 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-collapse-panel { + .border(bottom, @collapse-border-color); + + background-color: @collapse-panel-bg-color; + + &--disabled { + pointer-events: none; + + .@{prefix}-collapse-panel__content, + .@{prefix}-collapse-panel__header { + opacity: .3; + } + } + + &--top { + display: flex; + flex-direction: column-reverse; + } + + &__header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: @collapse-horizontal-padding; + height: @collapse-header-height; + color: @collapse-header-text-color; + + &--top { + .border(top, @collapse-border-color); + } + + &--bottom { + .border(bottom, @collapse-border-color); + } + + &::after { + display: none; + left: 16px; + } + + &--expanded { + &::after { + display: block; + } + } + + &-right { + display: inline-flex; + align-items: center; + height: 100%; + } + + &-icon { + // 增大热区 + height: 100%; + padding-left: 8px; + width: 44px; + padding-right: 8px; + color: var(--td-collapse-icon-color, @font-gray-3); + } + } + + &__extra { + font-size: @collapse-extra-font-size; + } + + &__body { + .border(bottom, @collapse-border-color); + } + + &__wrapper { + height: 0; + overflow: hidden; + } + + &__content { + color: @collapse-content-text-color; + font-size: @collapse-content-font-size; + padding: @collapse-content-padding; + line-height: @collapse-content-line-height; + } + + &__arrow--top { + transform: rotate(180deg); + } +} + +.class { + &-title { + font-size: @collapse-title-font-size; + + &--disabled { + color: @font-gray-4; + } + } + + &-note { + &--disabled { + color: @font-gray-4; + } + } + + &-right-icon { + &--disabled { + color: @font-gray-4; + } + } +} diff --git a/style/mobile/components/collapse-panel/v2/_var.less b/style/mobile/components/collapse-panel/v2/_var.less new file mode 100644 index 0000000000..b5d42692fa --- /dev/null +++ b/style/mobile/components/collapse-panel/v2/_var.less @@ -0,0 +1,16 @@ +@collapse-header-text-color: var(--td-collapse-header-text-color, @font-gray-1); +@collapse-content-text-color: var(--td-collapse-content-text-color, @font-gray-1); +@collapse-header-text-diabled-color: var(--td-collapse-header-text-diabled-color, @font-gray-4); + +// font-size +@collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m); +@collapse-extra-font-size: var(--td-collapse-extra-font-size, @font-size-m); +@collapse-content-font-size: var(--td-collapse-content-font-size, @font-size-base); + +@collapse-header-height: var(--td-collapse-header-height, 48px); +@collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 16px); +@collapse-content-padding: var(--td-collapse-content-padding, 16px); +@collapse-content-line-height: var(--td-collapse-content-line-height, 1.5); +@collapse-border-color: var(--td-collapse-border-color, @border-color); + +@collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container); diff --git a/style/mobile/components/collapse/_var.less b/style/mobile/components/collapse/_var.less index b70536e16f..eb6fb96afb 100644 --- a/style/mobile/components/collapse/_var.less +++ b/style/mobile/components/collapse/_var.less @@ -1,12 +1,12 @@ -@collapse-header-text-color: @text-level-1-color; -@collapse-content-text-color: @text-level-1-color; -@collapse-header-text-diabled-color: @text-level-4-color; -@collapse-list-content-text-color: @text-level-1-color; +@collapse-header-text-color: @text-color-primary; +@collapse-content-text-color: @text-color-primary; +@collapse-header-text-diabled-color: @text-color-disabled; +@collapse-list-content-text-color: @text-color-primary; // font-size -@collapse-title-font-size: @font-size * 1.6; -@collapse-extra-font-size: @font-size * 1.6; -@collapse-content-font-size: @font-size * 1.4; +@collapse-title-font-size: calc(@font-size * 1.6); +@collapse-extra-font-size: calc(@font-size * 1.6); +@collapse-content-font-size: calc(@font-size * 1.4); @collapse-header-height: 48px; @collapse-horizontal-padding: 16px; diff --git a/style/mobile/components/collapse/v2/_index.less b/style/mobile/components/collapse/v2/_index.less new file mode 100644 index 0000000000..1a6ef60597 --- /dev/null +++ b/style/mobile/components/collapse/v2/_index.less @@ -0,0 +1,11 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-collapse { + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/web/components/dropdown-new/_mixin.less b/style/mobile/components/collapse/v2/_var.less similarity index 100% rename from style/web/components/dropdown-new/_mixin.less rename to style/mobile/components/collapse/v2/_var.less diff --git a/style/mobile/components/count-down/_var.less b/style/mobile/components/count-down/_var.less index 3f3f6eff8a..68a65e8737 100644 --- a/style/mobile/components/count-down/_var.less +++ b/style/mobile/components/count-down/_var.less @@ -17,7 +17,7 @@ // theme="default" && splitWidthUnit={true} @countdown-digit-font-size-default-split-with-unit-small: @font-size-l; @countdown-digit-font-size-default-split-with-unit-medium: @font-size-xl; -@countdown-digit-font-size-default-split-with-unit-large: @font-size * 2; +@countdown-digit-font-size-default-split-with-unit-large: calc(@font-size * 2); // theme="square" @countdown-digit-font-size-square-small: @font-size-s; @countdown-digit-font-size-square-medium: @font-size-base; @@ -39,11 +39,11 @@ // digit border-radius // theme="square" -@countdown-digit-border-radius-square-small: @border-radius; -@countdown-digit-border-radius-square-medium: @border-radius; -@countdown-digit-border-radius-square-large: @border-radius + 2px; +@countdown-digit-border-radius-square-small: @radius-small; +@countdown-digit-border-radius-square-medium: @radius-small; +@countdown-digit-border-radius-square-large: calc(@radius-small + 2px); // theme="round" -@countdown-digit-border-radius-round: @border-radius-50; +@countdown-digit-border-radius-round: @radius-circle; // digit size // theme="square" @countdown-digit-size-square-small: 20px; diff --git a/style/mobile/components/count-down/v2/_index.less b/style/mobile/components/count-down/v2/_index.less new file mode 100644 index 0000000000..aa36830de8 --- /dev/null +++ b/style/mobile/components/count-down/v2/_index.less @@ -0,0 +1,105 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.count-down-size(@size) { + .@{countdown} { + @defaultFontSize: "countdown-@{size}-default-font-size"; + @roundFontSize: "countdown-@{size}-round-font-size"; + @squareFontSize: "countdown-@{size}-square-font-size"; + @width: "countdown-@{size}-bg-width"; + @height: "countdown-@{size}-bg-width"; + @dotMargin: "countdown-@{size}-no-unit-margin"; + @dotFontSize: "countdown-@{size}-no-unit-font-size"; + @textMargin: "countdown-@{size}-unit-margin"; + @textFontSize: "countdown-@{size}-unit-font-size"; + + &--@{size} { + &.@{countdown}--default { + font-size: @@defaultFontSize; + } + + &.@{countdown}--round { + > .@{item} { + font-size: @@roundFontSize; + } + } + + &.@{countdown}--square { + > .@{item} { + font-size: @@squareFontSize; + } + } + + &.@{countdown}--round, + &.@{countdown}--square { + > .@{item} { + width: @@width; + height: @@height; + } + } + + &.@{countdown}--round, + &.@{countdown}--square { + > .@{split}--dot { + margin: 0 @@dotMargin; + font-size: @@dotFontSize; + font-weight: 700; + } + + > .@{split}--text { + margin: 0 @@textMargin; + font-size: @@textFontSize; + } + } + } + } +} + +.count-down-size(small); +.count-down-size(medium); +.count-down-size(large); + +.@{countdown} { + font-family: "DIN Alternate", "Courier New", Courier, monospace; + + .@{item}, + .@{split} { + display: inline-flex; + align-items: center; + justify-content: center; + } + + &--square, + &--round { + > .@{split}--dot { + color: @countdown-no-unit-color; + } + + > .@{split}--text { + color: @countdown-unit-color; + } + } + + &--default { + color: @countdown-default-text-color; + } + + &--square { + color: @countdown-text-color; + + > .@{item} { + border-radius: @countdown-square-border-radius; + background: @countdown-bg-color; + } + } + + &--round { + color: @countdown-text-color; + + > .@{item} { + border-radius: @countdown-round-border-radius; + background: @countdown-bg-color; + } + } +} diff --git a/style/mobile/components/count-down/v2/_var.less b/style/mobile/components/count-down/v2/_var.less new file mode 100644 index 0000000000..942a6d3cc8 --- /dev/null +++ b/style/mobile/components/count-down/v2/_var.less @@ -0,0 +1,41 @@ +@countdown-small-unit-margin: 4px; // 'small'尺寸单位分割文本左右间距 +@countdown-medium-unit-margin: 5px; // 'medium'尺寸单位分割文本左右间距 +@countdown-large-unit-margin: 6px; // 'large'尺寸单位分割文本左右间距 +@countdown-unit-color: @font-gray-1; // 带单位分割线文本颜色 +@countdown-no-unit-color: @error-color-6; // 无单位分割线文本颜色 +@countdown-large-no-unit-margin: 6px; // 'large'尺寸无单位分割文本左右间距 +@countdown-medium-no-unit-margin: 3px; // 'medium'尺寸无单位分割文本左右间距 +@countdown-small-no-unit-margin: 2px; // 'small'尺寸无单位分割文本左右间距 +@countdown-small-bg-width: 20px; // 'small'尺寸方/圆底背景宽高 +@countdown-medium-bg-width: 24px; // 'medium'尺寸方/圆底背景宽高 +@countdown-large-bg-width: 28px; // 'large'尺寸方/圆底背景宽高 +@countdown-small-default-font-size: @font-size-base; // 'small'尺寸纯数字倒计时文本大小 +@countdown-small-square-font-size: @font-size-s; // 'small'尺寸带方形底倒计时文本大小 +@countdown-small-round-font-size: @font-size-s; // 'small'尺寸带圆形底倒计时文本大小 +@countdown-small-unit-font-size: @font-size; // 'small'尺寸单位分割文本大小 +@countdown-small-no-unit-font-size: @font-size-base; // 'small'尺寸无单位分割文本大小 +@countdown-medium-default-font-size: @font-size-m; // 'medium'尺寸纯数字倒计时文本大小 +@countdown-medium-square-font-size: @font-size-base; // 'medium'尺寸带方形底倒计时文本大小 +@countdown-medium-round-font-size: @font-size-base; // 'medium'尺寸带圆形底倒计时文本大小 +@countdown-medium-unit-font-size: @font-size-s; // 'medium'尺寸单位分割文本大小 +@countdown-medium-no-unit-font-size: @font-size-m; // 'medium'尺寸无单位分割文本大小 +@countdown-large-default-font-size: 18px; // 'large'尺寸纯数字倒计时文本大小 +@countdown-large-square-font-size: @font-size-m; // 'large'尺寸带方形底倒计时文本大小 +@countdown-large-round-font-size: @font-size-m; // 'large'尺寸带圆形底倒计时文本大小 +@countdown-large-unit-font-size: @font-size-base; // 'large'尺寸单位分割文本大小 +@countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小 + +// 纯数字倒计时文本颜色 +@countdown-default-text-color: var(--td-countdown-default-color, @font-gray-1); +// 方形/圆形底倒计时文本颜色 +@countdown-text-color: var(--td-countdown-round-color, @font-white-1); +// 方形/圆形底背景颜色 +@countdown-bg-color: var(--td-countdown-bg-color, @error-color-6); +// 带方形底倒计时圆角大小 +@countdown-square-border-radius: var(--td-countdown-square-border-radius, @radius-small); +// 带圆形底倒计时圆角大小 +@countdown-round-border-radius: var(--td-countdown-round-border-radius, @radius-circle); + +@countdown: ~"@{prefix}-count-down"; +@item: ~"@{countdown}__item"; +@split: ~"@{countdown}__split"; diff --git a/style/mobile/components/date-time-picker/v2/_index.less b/style/mobile/components/date-time-picker/v2/_index.less new file mode 100644 index 0000000000..21ecbb6a2a --- /dev/null +++ b/style/mobile/components/date-time-picker/v2/_index.less @@ -0,0 +1,12 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-date-time-picker { + &__item { + &--roomly { + width: @data-time-picker-year-width; + flex: 0 0 @data-time-picker-year-width; + } + } +} diff --git a/style/mobile/components/date-time-picker/v2/_var.less b/style/mobile/components/date-time-picker/v2/_var.less new file mode 100644 index 0000000000..f874ef26ee --- /dev/null +++ b/style/mobile/components/date-time-picker/v2/_var.less @@ -0,0 +1 @@ +@data-time-picker-year-width: var(--td-data-time-picker-year-width, 64px); diff --git a/style/mobile/components/dialog/_index.less b/style/mobile/components/dialog/_index.less index 300ddf0491..0a12272852 100644 --- a/style/mobile/components/dialog/_index.less +++ b/style/mobile/components/dialog/_index.less @@ -95,14 +95,14 @@ flex: 1; &--primary { - color: @primary-color; + color: @brand-color; } } &__text { /* stylelint-disable-line */ & + .@{prefix}-dialog__input { - margin-top: @dialog-input-margin-top * 2; + margin-top: calc(@dialog-input-margin-top * 2); } } diff --git a/style/mobile/components/dialog/_var.less b/style/mobile/components/dialog/_var.less index 9290fe8394..491fc62acb 100644 --- a/style/mobile/components/dialog/_var.less +++ b/style/mobile/components/dialog/_var.less @@ -1,23 +1,23 @@ // color @dialog-bg-color: #fff; -@dialog-title-text-color: @text-primary-color; -@dialog-body-text-color: @text-level-2-color; +@dialog-title-text-color: @text-color-primary; +@dialog-body-text-color: @text-color-secondary; @dialog-btn-border-color: #eee; @dialog-btn-bg-color-active: rgba(0, 0, 0, .05); -@dialog-btn-default-color: @text-level-1-color; -@dialog-btn-primary-color: @primary-color; +@dialog-btn-default-color: @text-color-primary; +@dialog-btn-primary-color: @brand-color; @dialog-btn-success-color: @success-color; @dialog-btn-warning-color: @warning-color; @dialog-btn-error-color: @error-color; @dialog-input-bg-color: #f0f0f0; -@dialog-input-color: @text-level-1-color; -@dialog-input-placeholder-color: @text-level-4-color; +@dialog-input-color: @text-color-primary; +@dialog-input-placeholder-color: @text-color-disabled; // font-size -@dialog-title-font-size: @font-size * 1.6; -@dialog-body-font-size: @font-size * 1.6; -@dialog-btn-font-size: @font-size * 1.6; -@dialog-input-font-size: @font-size * 1.6; +@dialog-title-font-size: calc(@font-size * 1.6); +@dialog-body-font-size: calc(@font-size * 1.6); +@dialog-btn-font-size: calc(@font-size * 1.6); +@dialog-input-font-size: calc(@font-size * 1.6); // size @dialog-btn-height: 56px; @@ -34,17 +34,17 @@ @dialog-body-max-height: 288px; // padding -@dialog-header-padding: 32px @spacer-5 0; -@dialog-body-padding: 0 @spacer-5; +@dialog-header-padding: 32px calc(@spacer * 2.5) 0; +@dialog-body-padding: 0 calc(@spacer * 2.5); -@dialog-body-first-child-padding: 32px @spacer-5; -@dialog-btn-padding: 0 @spacer-3; -@dialog-input-padding: @spacer * 1.5; +@dialog-body-first-child-padding: 32px calc(@spacer * 2.5); +@dialog-btn-padding: 0 @spacer-1; +@dialog-input-padding: calc(@spacer * .75); // margin @dialog-footer-margin-top: 32px; -@dialog-input-margin-top: @spacer * 1.5; +@dialog-input-margin-top: calc(@spacer * .75); // border-radius -@dialog-border-radius: @border-radius; -@dialog-input-radius: @border-radius / 2; +@dialog-border-radius: @radius-small; +@dialog-input-radius: calc(@radius-small / 2); diff --git a/style/mobile/components/dialog/v2/_index.less b/style/mobile/components/dialog/v2/_index.less new file mode 100644 index 0000000000..8610a2a965 --- /dev/null +++ b/style/mobile/components/dialog/v2/_index.less @@ -0,0 +1,119 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{dialog} { + overflow: hidden; + width: @dialog-width; + border-radius: @radius-default; + background-color: @bg-color-container; + + &__close-btn { + position: absolute; + top: 8px; + right: 8px; + font-size: @dialog-close-font-size; + color: @dialog-close-color; + } + + &__content { + padding: @spacer-4 @spacer-3 0; + max-height: @dialog-body-max-height; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + font-size: @font-size-m; + } + + &__header { + text-align: center; + font-weight: bold; + font-size: @dialog-title-font-size; + line-height: @dialog-title-line-height; + color: @dialog-title-color; + } + + &__header + &__body { + margin-top: 8px; + } + + &__body { + overflow-y: scroll; + text-align: center; + -webkit-overflow-scrolling: touch; + font-size: @dialog-content-font-size; + color: @dialog-content-color; + line-height: @dialog-content-line-height; + + &-text { + word-wrap: break-word; + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + } + + &__footer { + display: flex; + padding: 24px; + + &--column { + flex-flow: column-reverse; + + .@{dialog}__button { + width: 100%; + flex: unset; + } + } + + &--full { + padding: 32px 0 0; + } + } + + &__button { + position: relative; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &--horizontal + &--horizontal { + margin-left: 12px; + } + + &--vertical + &--vertical { + margin-bottom: 12px; + } + + &--text { + flex: 1; + + --td-button-border-radius: 0; + --td-button-medium-height: 56px; + + border-radius: 0; + + &::before { + content: " "; + position: absolute; + box-sizing: border-box; + top: 0; + left: 0; + border-top: 1px solid @border-color; + border-left: 1px solid @border-color; + transform: scale(.5); + transform-origin: 0 0; + width: 200%; + height: 200%; + border-radius: 0; + } + } + } +} diff --git a/style/mobile/components/dialog/v2/_var.less b/style/mobile/components/dialog/v2/_var.less new file mode 100644 index 0000000000..ba8be0c7ae --- /dev/null +++ b/style/mobile/components/dialog/v2/_var.less @@ -0,0 +1,18 @@ +@dialog: ~"@{prefix}-dialog"; +@dialogBtn: ~"@{dialog}__button"; + +// size +@dialog-width: var(--td-dialog-width, 311px); +@dialog-body-max-height: var(--td-dialog-body-max-height, 456px); + +// color +@dialog-title-font-size: var(--td-dialog-title-font-size, 18px); +@dialog-title-color: var(--td-dialog-title-color, @font-gray-1); +@dialog-title-line-height: var(--td-dialog-title-line-height, 36px); + +@dialog-content-font-size: var(--td-dialog-content-font-size, 16px); +@dialog-content-color: var(--td-dialog-content-color, @font-gray-2); +@dialog-content-line-height: var(--td-dialog-content-line-height, 24px); + +@dialog-close-font-size: var(--td-dialog-close-font-size, 22px); +@dialog-close-color: var(--td-dialog-close-color, @font-gray-3); diff --git a/style/mobile/components/divider/v2/_index.less b/style/mobile/components/divider/v2/_index.less new file mode 100644 index 0000000000..52f7a2932c --- /dev/null +++ b/style/mobile/components/divider/v2/_index.less @@ -0,0 +1,70 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-divider { + display: flex; + color: @divider-color; + border-color: @divider-color; + border-style: @divider-content-line-style; + border-width: 0; + + &::before, + &::after { + content: ""; + display: block; + flex: 1; + box-sizing: border-box; + border: inherit; + border-color: inherit; + border-style: inherit; + } + + &--horizontal { + align-items: center; + margin-top: 10px; + margin-bottom: 10px; + + &::before, + &::after { + border-top-width: 1px; + transform: scaleY(.5); + } + + .@{prefix}-divider__content:not(:empty) { + margin: 0 12px; + } + } + + &--vertical { + flex-direction: column; + height: 1em; + margin: 0 8px; + + &::before, + &::after { + border-left-width: 1px; + transform: scaleX(.5); + } + + &-center { + align-items: center; + height: 100%; + } + } + + &--dashed { + border-style: dashed; + } + + &__content { + font-size: @divider-content-font-size; + line-height: @divider-content-line-height; + color: @divider-content-color; + } + + &--left::before, + &--right::after { + max-width: 30px; + } +} diff --git a/style/mobile/components/divider/v2/_var.less b/style/mobile/components/divider/v2/_var.less new file mode 100644 index 0000000000..ff548a1269 --- /dev/null +++ b/style/mobile/components/divider/v2/_var.less @@ -0,0 +1,5 @@ +@divider-color: var(--td-divider-color, @bg-color-component); +@divider-content-color: var(--td-divider-content-color, @font-gray-3); +@divider-content-font-size: var(--td-divider-content-font-size, 12px); +@divider-content-line-height: var(--td-divider-content-line-height, 20px); +@divider-content-line-style: var(--td-divider-content-line-style, solid); diff --git a/style/mobile/components/drawer/v2/_index.less b/style/mobile/components/drawer/v2/_index.less new file mode 100644 index 0000000000..922ef0d2f9 --- /dev/null +++ b/style/mobile/components/drawer/v2/_index.less @@ -0,0 +1,56 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-drawer { + background: @drawer-bg-color; + height: 100vh; + width: @drawer-width; + display: flex; + flex-direction: column; + + &--hover { + background-color: @drawer-hover-color; + } + + &__title { + font-weight: 600; + font-size: @drawer-title-font-size; + padding: 24px 16px 8px; + } + + &__sidebar { + height: @drawer-sidebar-height; + + &-item { + display: flex; + align-items: center; + .border(bottom, @drawer-border-color); + + padding: @drawer-item-padding 0 @drawer-item-padding @drawer-item-padding; + line-height: @drawer-item-height; + + &::after { + left: @drawer-item-padding; + } + + &-title { + flex: 1; + color: var(--td-drawer-title-color); + } + + &-icon { + padding-right: 8px; + color: @drawer-icon-color; + font-size: @drawer-item-icon-size; + } + } + } + + &__footer { + flex: 1; + display: flex; + flex-direction: column; + padding-bottom: @drawer-footer-padding-bottom; + } +} diff --git a/style/mobile/components/drawer/v2/_var.less b/style/mobile/components/drawer/v2/_var.less new file mode 100644 index 0000000000..543147deb8 --- /dev/null +++ b/style/mobile/components/drawer/v2/_var.less @@ -0,0 +1,13 @@ +@drawer-width: var(--td-drawer-width, 280px); +@drawer-title-font-size: var(--td-drawer-title-font-size, 18px); +@drawer-title-padding: var(--td-drawer-title-padding, 24px 16px 8px); +@drawer-bg-color: var(--td-drawer-bg-color, @bg-color-container); +@drawer-border-color: var(--td-drawer-border-color, @border-color); +@drawer-title-color: var(--td-drawer-title-color, @font-gray-1); +@drawer-icon-color: var(--td-drawer-title-color, @drawer-title-color); +@drawer-item-padding: var(--td-drawer-item-padding, 16px); +@drawer-item-height: var(--td-drawer-item-height, 24px); +@drawer-item-icon-size: var(--td-drawer-item-icon-size, 24px); +@drawer-sidebar-height: var(--td-drawer-sidebar-height, 70vh); +@drawer-footer-padding-bottom: var(--td-drawer-footer-padding-bottom, 20px); +@drawer-hover-color: var(--td-drawer-hover-color, @bg-color-secondarycontainer); diff --git a/style/mobile/components/dropdown-item/v2/_index.less b/style/mobile/components/dropdown-item/v2/_index.less new file mode 100644 index 0000000000..b15002ce1d --- /dev/null +++ b/style/mobile/components/dropdown-item/v2/_index.less @@ -0,0 +1,94 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +/** dropdown-item */ +.@{item} { + position: fixed; + right: 0; + left: 0; + top: 0; + overflow: hidden; + bottom: 0; + + &__content { + display: flex; + flex-direction: column; + z-index: 11600; + overflow: hidden; + } + + &__popup-host { + // 为了解决虚拟节点偶尔出现的问题 + display: block; + width: 100%; + height: max-content; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + } + + &__body { + flex: 1; + background: @dropdown-menu-bg-color; + overflow: auto; + max-height: @dropdown-body-max-height; + + &--tree { + display: flex; + overflow: hidden; + } + + &--multi { + padding-top: @spacer; + padding-bottom: @spacer; + overflow-y: auto; + } + } + + &__footer { + display: flex; + background: @dropdown-menu-bg-color; + position: relative; + padding: 16px; + .border(top, @component-border); + + &-btn { + flex: 1; + } + + &-btn + &-btn { + margin-left: 32rpx; + } + } + + &__radio, + &__checkbox { + width: 100%; + overflow: scroll; + box-sizing: border-box; + } + + &__checkbox { + &-group { + display: grid; + padding: 16px; + grid-gap: 12px; + } + } + + /** 树形结构 */ + &__tree { + &-item { + height: @tree-item-height; + line-height: @tree-item-height; + font-size: @tree-item-font-size; + padding-left: 16px; + + &--active { + color: @tree-item-active-color; + } + } + } +} diff --git a/style/mobile/components/dropdown-item/v2/_var.less b/style/mobile/components/dropdown-item/v2/_var.less new file mode 100644 index 0000000000..5b1ccbf659 --- /dev/null +++ b/style/mobile/components/dropdown-item/v2/_var.less @@ -0,0 +1,10 @@ +@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-color, @bg-color-container); +@dropdown-body-max-height: var(--td-dropdown-body-max-height, 280px); + +@tree-bg-color: var(--td-tree-bg-color, @bg-color-container); +@tree-root-bg-color: var(--td-tree-root-bg-color, @bg-color-secondarycontainer); +@tree-item-active-color: var(--td-tree-item-active-color, @brand-color); +@tree-item-height: var(--td-tree-item-height, 48px); +@tree-item-font-size: var(--td-tree-item-font-size, 16px); + +@item: ~"@{prefix}-dropdown-item"; diff --git a/style/mobile/components/dropdown-menu/_index.less b/style/mobile/components/dropdown-menu/_index.less index e5a52a59bd..747c219c3e 100644 --- a/style/mobile/components/dropdown-menu/_index.less +++ b/style/mobile/components/dropdown-menu/_index.less @@ -179,7 +179,7 @@ .@{prefix}-radio { &.@{prefix}-is-checked .@{prefix}-radio__content-title { - color: @primary-color; + color: @brand-color; } } } diff --git a/style/mobile/components/dropdown-menu/_var.less b/style/mobile/components/dropdown-menu/_var.less index a89d07e87c..e9e01d55bd 100644 --- a/style/mobile/components/dropdown-menu/_var.less +++ b/style/mobile/components/dropdown-menu/_var.less @@ -1,13 +1,13 @@ -@dropdown-menu-primary-color: @primary-color; -@dropdown-menu-primary-color-1:@primary-color-1; +@dropdown-menu-primary-color: @brand-color; +@dropdown-menu-primary-color-1: @brand-color-light; -@dropdown-menu-color-block: @bg-color-block; +@dropdown-menu-color-block: @bg-color-container; -@dropdown-menu-disabled-color: @text-level-4-color; +@dropdown-menu-disabled-color: @text-color-disabled; -@dropdown-menu-level-2-color: @text-level-2-color; +@dropdown-menu-level-2-color: @text-color-secondary; -@dropdown-menu-level-1-color: @text-level-1-color; +@dropdown-menu-level-1-color: @text-color-primary; @dropdown-menu-tree-col1-color: #f5f5f5; @@ -15,7 +15,7 @@ @dropdown-item-height: 100%; -@dropdown-item-border-radius: @border-radius; +@dropdown-item-border-radius: @radius-small; @cell-vertical-padding: 12px; @cell-horizontal-padding: 16px; -@cell-border-color: @border-level-1-color; +@cell-border-color: @component-stroke; diff --git a/style/mobile/components/dropdown-menu/v2/_index.less b/style/mobile/components/dropdown-menu/v2/_index.less new file mode 100644 index 0000000000..fc76ffef3d --- /dev/null +++ b/style/mobile/components/dropdown-menu/v2/_index.less @@ -0,0 +1,46 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{dropdownMenu} { + position: relative; + display: flex; + height: 48px; + background: @dropdown-menu-bg-color; + .border(bottom); + + &__item { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + padding: 0 @spacer; + position: relative; + overflow: hidden; + color: @dropdown-menu-color; + + &--active { + color: @dropdown-menu-active-color; + } + + &--disabled { + color: @dropdown-menu-disabled-color; + } + } + + &__icon { + font-size: @dropdown-menu-icon-size; + transition: transform 240ms ease; + + &--active { + transform: rotate(180deg); + } + } + + &__title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: @dropdown-menu-font-size; + } +} diff --git a/style/mobile/components/dropdown-menu/v2/_var.less b/style/mobile/components/dropdown-menu/v2/_var.less new file mode 100644 index 0000000000..4843ea3699 --- /dev/null +++ b/style/mobile/components/dropdown-menu/v2/_var.less @@ -0,0 +1,8 @@ +@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-colorm, @bg-color-container); +@dropdown-menu-color: var(--td-dropdown-menu-colorm, @font-gray-1); +@dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color); +@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @font-gray-4); +@dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 14px); +@dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 24px); + +@dropdownMenu: ~"@{prefix}-dropdown-menu"; diff --git a/style/mobile/components/empty/_index.less b/style/mobile/components/empty/_index.less new file mode 100644 index 0000000000..a519540a0a --- /dev/null +++ b/style/mobile/components/empty/_index.less @@ -0,0 +1,29 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-empty { + display: flex; + flex-direction: column; + align-items: center; + + &__icon { + font-size: @empty-icon-font-size; + color: @empty-icon-color; + } + + &__thumb + &__description:not(:empty) { + margin-top: @empty-description-margin-top; // 描述内容顶部间距 + } + + &__description { + text-align: center; + color: @empty-description-color; // 描述内容颜色 + font-size: @empty-description-font-size; // 描述内容字体大小 + line-height: @empty-description-line-height; // 描述内容行高 + } + + &__description + &__actions:not(:empty) { + margin-top: @empty-action-margin-top; // 操作内容顶部间距 + } +} diff --git a/style/mobile/components/empty/_var.less b/style/mobile/components/empty/_var.less new file mode 100644 index 0000000000..2441f32e28 --- /dev/null +++ b/style/mobile/components/empty/_var.less @@ -0,0 +1,8 @@ +@empty-icon-font-size: 96px; + +@empty-description-color: var(--td-empty-description-color, @font-gray-3); +@empty-icon-color: var(--td-empty-icon-color, @font-gray-3); +@empty-description-font-size: var(--td-empty-description-font-size, @font-size-base); +@empty-description-line-height: var(--td-empty-description-line-height, 44rpx); +@empty-description-margin-top: var(--td-empty-description-margin-top, @spacer-2); +@empty-action-margin-top: var(--td-empty-action-margin-top, @spacer-4); diff --git a/style/mobile/components/fab/_index.less b/style/mobile/components/fab/_index.less index c1f4be40ca..f67386bf16 100644 --- a/style/mobile/components/fab/_index.less +++ b/style/mobile/components/fab/_index.less @@ -27,6 +27,6 @@ &--icon-only { padding: 0; - border-radius: @border-radius-50; + border-radius: @radius-circle; } } diff --git a/style/mobile/components/fab/v2/_index.less b/style/mobile/components/fab/v2/_index.less new file mode 100644 index 0000000000..5220fc6a30 --- /dev/null +++ b/style/mobile/components/fab/v2/_index.less @@ -0,0 +1,11 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-fab { + position: fixed; + + &__button { + box-shadow: @fab-shadow; + } +} diff --git a/style/mobile/components/fab/v2/_var.less b/style/mobile/components/fab/v2/_var.less new file mode 100644 index 0000000000..0f78e40655 --- /dev/null +++ b/style/mobile/components/fab/v2/_var.less @@ -0,0 +1 @@ +@fab-shadow: var(--td-fab-shadow, @shadow-2); diff --git a/style/mobile/components/footer/_index.less b/style/mobile/components/footer/_index.less new file mode 100644 index 0000000000..09e39bdd20 --- /dev/null +++ b/style/mobile/components/footer/_index.less @@ -0,0 +1,63 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + &__text { + font-size: @footer-text-font-size; // 版权信息文本大小 + line-height: @footer-text-line-height; // 版权信息文本行高 + color: @footer-text-color; // 版权信息文本颜色 + } + + &__link-list + &__text:not(:empty) { + margin-top: @footer-text-margin-top; // 版权信息顶部间距 + } + + &__link-list { + display: flex; + justify-content: center; + align-items: center; + } + + &__link-item { + color: @footer-link-color; // 链接文本颜色 + font-size: @footer-link-font-size; // 链接文本大小 + line-height: @footer-link-line-height; // 链接文本行高 + text-decoration: underline; + } + + &__link-line { + font-size: 24rpx; + color: @footer-link-dividing-line-color; // 链接分界线颜色 + display: inline-block; + padding: 0 @footer-link-dividing-line-padding; // 链接分界线左右间距 + } + + &__logo { + display: flex; + justify-content: center; + align-items: center; + } + + &__icon { + width: @footer-logo-icon-width; // 图标宽度 + height: @footer-logo-icon-height; // 图标高度 + margin-right: @footer-logo-icon-margin-right; // 图标右部间距 + } + + &__title { + font-weight: bold; + font-size: @footer-logo-title-font-size; // 图标配置，标题文本大小 + line-height: @footer-logo-title-line-height; // 图标配置，标题文本行高 + font-style: italic; + } + + &__title-url { + width: @footer-logo-title-url-width; // 图标配置，链接跳转地址宽度 + } +} diff --git a/style/mobile/components/footer/_var.less b/style/mobile/components/footer/_var.less new file mode 100644 index 0000000000..70b513ce9c --- /dev/null +++ b/style/mobile/components/footer/_var.less @@ -0,0 +1,16 @@ +@footer-text-color: var(--td-footer-text-color, @font-gray-3); +@footer-text-font-size: var(--td-footer-text-font-size, @font-size-s); +@footer-text-line-height: var(--td-footer-text-line-height, 20px); +@footer-text-margin-top: var(--td-footer-text-margin-top, 4px); +@footer-link-color: var(--td-footer-link-color, @brand-color); +@footer-link-font-size: var(--td-footer-link-font-size, @font-size-s); +@footer-link-line-height: var(--td-footer-link-line-height, 20px); + +@footer-link-dividing-line-padding: var(--td-footer-link-dividing-line-padding, @spacer-1); +@footer-link-dividing-line-color: var(--td-footer-link-dividing-line-color, @font-gray-3); +@footer-logo-icon-width: var(--td-footer-logo-icon-width, 24px); +@footer-logo-icon-height: var(--td-footer-logo-icon-height, 24px); +@footer-logo-icon-margin-right: var(--td-footer-logo-icon-margin-right, @spacer); +@footer-logo-title-font-size: var(--td-footer-logo-title-font-size, @font-size-m); +@footer-logo-title-url-width: var(--td-footer-logo-title-url-width, 128px); +@footer-logo-title-line-height: var(--td-footer-logo-title-line-height, 24px); diff --git a/style/mobile/components/form/_index.less b/style/mobile/components/form/_index.less new file mode 100644 index 0000000000..89c889c15f --- /dev/null +++ b/style/mobile/components/form/_index.less @@ -0,0 +1,120 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-form { + background-color: #fff; + + .@{prefix}-form__item { + display: flex; + box-sizing: border-box; + padding: @form-item-vertical-padding @form-item-horizontal-padding; + position: relative; + + &:not(:last-child)::after { + .hairline-bottom(@form-item-border-color); + + left: @form-item-border-left-space; + right: @form-item-border-right-space; + } + + &-help, + &-extra { + display: flex; + font-size: 12px; + margin: 0; + width: 100%; + height: auto; + min-height: 20px; + margin-top: 4px; + } + + &-help { + color: @font-gray-4; + } + + &-extra { + color: @error-color-6; + } + + &-wrap { + width: 100%; + } + + &--top { + display: flex; + flex-direction: column; + } + } + + &--top { + align-items: center; + } + + &__label { + float: left; + padding-right: 16px; + vertical-align: top; + line-height: 22px; + color: @font-gray-1; + box-sizing: border-box; + white-space: nowrap; + + &--top { + padding-bottom: 8px; + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + + &--required { + label::before { + display: inline-block; + margin-right: 2px; + color: @error-color-6; + line-height: 20px; + content: "*"; + } + } + + &--colon { + label::after { + content: ":"; + position: relative; + margin: 0 2px; + } + } + } + + &__controls { + display: flow-root; + position: relative; + + &-content { + display: flex; + align-items: center; + min-height: 24px; + } + + &--left { + justify-content: flex-start; + } + + &--right { + justify-content: flex-end; + } + } + + // 覆盖一些组件样式 + .@{prefix}-cell, + .@{prefix}-input, + .@{prefix}-textarea, + .@{prefix}-upload { + padding: 0; + } +} diff --git a/style/mobile/components/form/_var.less b/style/mobile/components/form/_var.less new file mode 100644 index 0000000000..6be5253f38 --- /dev/null +++ b/style/mobile/components/form/_var.less @@ -0,0 +1,5 @@ +@form-item-vertical-padding: 16px; +@form-item-horizontal-padding: 16px; +@form-item-border-left-space: @form-item-horizontal-padding; +@form-item-border-right-space: 0; +@form-item-border-color: @component-stroke; diff --git a/style/mobile/components/grid-item/_var.less b/style/mobile/components/grid-item/_var.less index 49b70eaeb1..2fab1ef7a9 100644 --- a/style/mobile/components/grid-item/_var.less +++ b/style/mobile/components/grid-item/_var.less @@ -14,4 +14,4 @@ @grid-item-hover-bg-color: #f2f3f5; -@grid-item-border-color: @border-level-1-color; +@grid-item-border-color: @component-stroke; diff --git a/style/mobile/components/grid-item/v2/_index.less b/style/mobile/components/grid-item/v2/_index.less new file mode 100644 index 0000000000..f85afee35d --- /dev/null +++ b/style/mobile/components/grid-item/v2/_index.less @@ -0,0 +1,77 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{item} { + box-sizing: border-box; + display: flex; + align-items: center; + padding: 16px 0 8px; + flex-direction: column; + background: @grid-item-bg-color; + flex-basis: 84px; + flex-shrink: 0; + + &--bordered { + position: relative; + .border(top, @grid-item-border-color); + + &::before { + .hairline-left(@grid-item-border-color); + } + } + + &--horizontal { + flex-direction: row; + justify-content: center; + } + + &--hover { + background-color: @grid-item-hover-bg-color; + } + + &__content { + overflow: hidden; + position: relative; + margin-top: @grid-item-text-padding-top; + + &--horizontal { + margin-top: 0; + margin-left: 12px; + text-align: left; + } + } + + &__image { + width: @grid-item-image-width; + height: @grid-item-image-width; + + &--small { + width: 32px; + height: 32px; + } + + &--middle { + width: 40px; + height: 40px; + } + } + + &__title { + width: inherit; + color: @grid-item-text-color; + font-size: @grid-item-text-font-size; + line-height: @grid-item-text-line-height; + + &--small, + &--middle { + font-size: 12px; + } + } + + &__description { + color: @grid-item-description-color; + font-size: @grid-item-description-font-size; + line-height: @grid-item-description-line-height; + } +} diff --git a/style/mobile/components/grid-item/v2/_var.less b/style/mobile/components/grid-item/v2/_var.less new file mode 100644 index 0000000000..4dada2810f --- /dev/null +++ b/style/mobile/components/grid-item/v2/_var.less @@ -0,0 +1,19 @@ +@item: ~"@{prefix}-grid-item"; + +@grid-item-icon-font-size: 24px; + +@grid-item-padding: var(--td-grid-item-padding, 16px); +@grid-item-bg-color: var(--td-grid-item-bg-color, @bg-color-container); +@grid-item-image-width: var(--td-grid-item-image-width, 48px); +@grid-item-text-color: var(--td-grid-item-text-color, @font-gray-1); +@grid-item-text-font-size: var(--td-grid-item-text-font-size, 14px); +@grid-item-text-line-height: var(--td-grid-item-text-line-height, 22px); +@grid-item-text-padding-top: var(--td-grid-item-text-padding-top, 8px); +@grid-item-description-font-size: var(--td-grid-item-description-font-size, 12px); +@grid-item-description-line-height: var(--td-grid-item-description-line-height, 20px); +@grid-item-description-color: var(--td-grid-item-description-color, @font-gray-3); +@grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 4px); +@grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer); +@grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 12px); +@grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 2px); +@grid-item-border-color: var(--td-grid-item-border-color, @component-stroke); diff --git a/style/mobile/components/grid/v2/_index.less b/style/mobile/components/grid/v2/_index.less new file mode 100644 index 0000000000..60fc77a9a3 --- /dev/null +++ b/style/mobile/components/grid/v2/_index.less @@ -0,0 +1,22 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-grid { + position: relative; + overflow: hidden; + display: grid; + box-sizing: border-box; + + &--card { + margin: 0 16px; + border-radius: @grid-card-radius; + overflow: hidden; + } + + &--auto-size { + overflow: scroll; + flex-wrap: nowrap; + display: flex; + } +} diff --git a/style/mobile/components/grid/v2/_var.less b/style/mobile/components/grid/v2/_var.less new file mode 100644 index 0000000000..db0a8ce536 --- /dev/null +++ b/style/mobile/components/grid/v2/_var.less @@ -0,0 +1,2 @@ +@grid-bg-color: var(--td-grid-bg-color, @bg-color-container); +@grid-card-radius: var(--td-grid-card-radius, @radius-large); diff --git a/style/mobile/components/image-viewer/v2/_index.less b/style/mobile/components/image-viewer/v2/_index.less new file mode 100644 index 0000000000..c322c6b0f3 --- /dev/null +++ b/style/mobile/components/image-viewer/v2/_index.less @@ -0,0 +1,86 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{image-viewer} { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1001; + height: 100%; + transform: translateZ(0); + overflow: hidden; + + &__mask { + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + &__content { + width: 100vw; + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1005; + } + + &__image { + width: 100%; + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + .t-image--external { + width: inherit; + height: inherit; + display: block; + } + + &__nav { + width: 100%; + position: fixed; + display: flex; + align-items: center; + justify-content: space-between; + height: @image-viewer-nav-height; // 操作条高度 + background-color: @image-viewer-nav-bg-color; // 操作条背景色 + left: 0; + color: @image-viewer-nav-color; // 操作条文本颜色 + z-index: 1005; + + &-close { + margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距 + + &:empty { + display: none; + } + } + + &-delete { + margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距 + &:empty { + display: none; + } + } + + &-close, + &-delete { + font-size: @image-viewer-icon-font-size; + } + + &-index { + flex: 1; + font-size: @image-viewer-nav-index-font-size; // 索引文本大小 + text-align: center; + } + } +} diff --git a/style/mobile/components/image-viewer/v2/_var.less b/style/mobile/components/image-viewer/v2/_var.less new file mode 100644 index 0000000000..c86a6a408e --- /dev/null +++ b/style/mobile/components/image-viewer/v2/_var.less @@ -0,0 +1,10 @@ +@image-viewer: ~"@{prefix}-image-viewer"; + +@image-viewer-icon-font-size: 24px; + +@image-viewer-nav-height: var(--td-image-viewer-nav-height, 48px); +@image-viewer-nav-bg-color: var(--td-image-viewer-nav-bg-color, @font-gray-3); +@image-viewer-nav-color: var(--td-image-viewer-nav-color, @font-white-1); +@image-viewer-nav-index-font-size: var(--td-image-viewer-nav-index-font-size, @font-size-base); +@image-viewer-close-margin-left: var(--td-image-viewer-close-margin-left, @spacer-1); +@image-viewer-delete-margin-right: var(--td-image-viewer-delete-margin-right, @spacer-1); diff --git a/style/mobile/components/image/_index.less b/style/mobile/components/image/_index.less index e2db044aaa..91a96f7e98 100644 --- a/style/mobile/components/image/_index.less +++ b/style/mobile/components/image/_index.less @@ -33,11 +33,11 @@ } .@{prefix}-image--circle { - border-radius: @border-radius-50; + border-radius: @radius-circle; } .@{prefix}-image--round { - border-radius: @border-radius; + border-radius: @radius-small; } .@{prefix}-image--square { diff --git a/style/mobile/components/image/_var.less b/style/mobile/components/image/_var.less index 18fdea2b72..6ffb23aae8 100644 --- a/style/mobile/components/image/_var.less +++ b/style/mobile/components/image/_var.less @@ -2,7 +2,7 @@ @image-background-color: @bg-color-page; // 默认提示文字颜色 -@image-text-color: @text-level-3-color; +@image-text-color: @text-color-placeholder; // 图标大小 @image-icon-size: 22px; diff --git a/style/mobile/components/image/v2/_index.less b/style/mobile/components/image/v2/_index.less new file mode 100644 index 0000000000..85a7d712dd --- /dev/null +++ b/style/mobile/components/image/v2/_index.less @@ -0,0 +1,47 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-image { + color: @image-color; + font-size: 0; + + &__img { + vertical-align: middle; + } + + &__mask { + display: flex; + align-items: center; + justify-content: center; + background-color: @image-loading-bg-color; + color: @image-loading-color; + width: 100%; + height: 100%; + } + + &--loading-text { + width: 0; + height: 0; + } + + &__common { + width: 100%; + height: 100%; + } + + &--circle { + border-radius: 50%; + overflow: hidden; + } + + &--round { + border-radius: @image-round-radius; + overflow: hidden; + } + + &--square { + border-radius: 0; + overflow: hidden; + } +} diff --git a/style/mobile/components/image/v2/_var.less b/style/mobile/components/image/v2/_var.less new file mode 100644 index 0000000000..9957952e1d --- /dev/null +++ b/style/mobile/components/image/v2/_var.less @@ -0,0 +1,4 @@ +@image-color: var(--td-image-color, @font-gray-3); +@image-loading-bg-color: var(--td-image-loading-bg-color, @bg-color-secondarycontainer); +@image-loading-color: var(--td-image-loading-color, @font-gray-3); +@image-round-radius: var(--td-image-round-radius, @radius-default); diff --git a/style/mobile/components/indexes-anchor/v2/_index.less b/style/mobile/components/indexes-anchor/v2/_index.less new file mode 100644 index 0000000000..4ecc6b5921 --- /dev/null +++ b/style/mobile/components/indexes-anchor/v2/_index.less @@ -0,0 +1,45 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-indexes-anchor { + color: @indexes-anchor-color; + font-size: @indexes-anchor-font-size; + line-height: @indexes-anchor-line-height; + + &__header { + display: none; + padding: 4px 16px; + background-color: @indexes-anchor-bg-color; + + &--active { + background-color: @indexes-anchor-active-bg-color; + .border(bottom); + } + } + + &__slot { + overflow: hidden; + } + + &__slot:empty + &__header { + display: block; + } + + &__wrapper { + will-change: transform; + + &--sticky { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1; + } + + &--active { + color: @indexes-anchor-active-color; + font-weight: @indexes-anchor-active-font-weight; + } + } +} diff --git a/style/mobile/components/indexes-anchor/v2/_var.less b/style/mobile/components/indexes-anchor/v2/_var.less new file mode 100644 index 0000000000..69220c4391 --- /dev/null +++ b/style/mobile/components/indexes-anchor/v2/_var.less @@ -0,0 +1,7 @@ +@indexes-anchor-color: var(--td-indexes-anchor-color, @font-gray-1); +@indexes-anchor-active-color: var(--td-indexes-anchor-active-color, @brand-color); +@indexes-anchor-bg-color: var(--td-indexes-anchor-bg-color, @bg-color-secondarycontainer); +@indexes-anchor-active-bg-color: var(--td-indexes-anchor-active-bg-color, @bg-color-container); +@indexes-anchor-font-size: var(--td-indexes-anchor-font-size, 14px); +@indexes-anchor-line-height: var(--td-indexes-anchor-line-height, 22px); +@indexes-anchor-active-font-weight: var(--td-indexes-anchor-active-font-weight, 600); diff --git a/style/mobile/components/indexes/_var.less b/style/mobile/components/indexes/_var.less index 83c03f284e..75dff28088 100644 --- a/style/mobile/components/indexes/_var.less +++ b/style/mobile/components/indexes/_var.less @@ -1,7 +1,7 @@ @indexes-bg-color: #F5F5F5; -@indexes-active-color: @primary-color; +@indexes-active-color: @brand-color; -@indexes-anchor-color: @text-level-1-color; +@indexes-anchor-color: @text-color-primary; @indexes-anchor-font-size: @font-size-l; diff --git a/style/mobile/components/indexes/v2/_index.less b/style/mobile/components/indexes/v2/_index.less new file mode 100644 index 0000000000..f351693d32 --- /dev/null +++ b/style/mobile/components/indexes/v2/_index.less @@ -0,0 +1,54 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-indexes { + position: relative; + height: 100vh; + + &__sidebar { + position: fixed; + right: @indexes-sidebar-right; + width: @indexes-sidebar-item-size; + color: @indexes-sidebar-color; + font-size: @indexes-sidebar-font-size; + line-height: @indexes-sidebar-line-height; + display: flex; + flex-flow: column nowrap; + top: 50%; + transform: translateY(-50%); + z-index: 1; + + &-item { + border-radius: 50%; + position: relative; + text-align: center; + + &--active { + background-color: @indexes-sidebar-active-bg-color; + color: @indexes-sidebar-active-color; + } + } + + &-item + &-item { + margin-top: 2px; + } + + &-tips { + width: @indexes-sidebar-tips-size; + height: @indexes-sidebar-tips-size; + line-height: @indexes-sidebar-tips-size; + text-align: center; + font-size: @indexes-sidebar-tips-font-size; + font-weight: 700; + color: @indexes-sidebar-tips-color; + background-color: @indexes-sidebar-tips-bg-color; + border-radius: 50%; + position: absolute; + top: 50%; + bottom: 0; + transform: translateY(-50%); + right: @indexes-sidebar-tips-right; + } + } +} diff --git a/style/mobile/components/indexes/v2/_var.less b/style/mobile/components/indexes/v2/_var.less new file mode 100644 index 0000000000..4a6370b79d --- /dev/null +++ b/style/mobile/components/indexes/v2/_var.less @@ -0,0 +1,13 @@ +@indexes-sidebar-color: var(--td-indexes-sidebar-color, @font-gray-1); +@indexes-sidebar-item-size: var(--td-indexes-sidebar-item-size, 20px); +@indexes-sidebar-font-size: var(--td-indexes-sidebar-font-size, 12px); +@indexes-sidebar-line-height: var(--td-indexes-sidebar-line-height, 20px); +@indexes-sidebar-active-color: var(--td-indexes-sidebar-active-color, @font-white-1); +@indexes-sidebar-active-bg-color: var(--td-indexes-sidebar-active-bg-color, @brand-color); +@indexes-sidebar-right: var(--td-indexes-sidebar-right, 8px); + +@indexes-sidebar-tips-size: var(--td-indexes-sidebar-tips-size, 48px); +@indexes-sidebar-tips-font-size: var(--td-indexes-sidebar-tips-font-size, 20px); +@indexes-sidebar-tips-color: var(--td-indexes-sidebar-tips-color, @brand-color); +@indexes-sidebar-tips-bg-color: var(--td-indexes-sidebar-tips-bg-color, @brand-color-light); +@indexes-sidebar-tips-right: var(--td-indexes-sidebar-tips-right, 38px); diff --git a/style/mobile/components/input/_index.less b/style/mobile/components/input/_index.less index 135d46664c..97f569f980 100644 --- a/style/mobile/components/input/_index.less +++ b/style/mobile/components/input/_index.less @@ -10,7 +10,7 @@ .@{prefix}-cell__title { width: @input-label-width; flex: none; - margin-right: @spacer-4; + margin-right: @spacer-2; display: flex; } diff --git a/style/mobile/components/input/_var.less b/style/mobile/components/input/_var.less index 0c2c974f47..df0c014cf2 100644 --- a/style/mobile/components/input/_var.less +++ b/style/mobile/components/input/_var.less @@ -1,16 +1,16 @@ @input-label-width: 80px; -@input-label-text-color: @text-level-1-color; +@input-label-text-color: @text-color-primary; -@input-text-color: @text-level-1-color; +@input-text-color: @text-color-primary; -@input-placeholder-text-color: @text-level-3-color; +@input-placeholder-text-color: @text-color-placeholder; -@input-disabled-text-color: @text-level-3-color; +@input-disabled-text-color: @text-color-placeholder; -@input-suffix-color: @text-level-1-color; +@input-suffix-color: @text-color-primary; -@input-icon-color: @text-level-3-color; +@input-icon-color: @text-color-placeholder; @input-error-text-color: @error-color; diff --git a/style/mobile/components/input/v2/_index.less b/style/mobile/components/input/v2/_index.less new file mode 100644 index 0000000000..4eabbd0df6 --- /dev/null +++ b/style/mobile/components/input/v2/_index.less @@ -0,0 +1,172 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-input { + background-color: @input-bg-color; + display: flex; + align-items: center; + flex: 1; + padding: @input-vertical-padding; + + &--border { + .border(bottom, @input-border-color); + + &::after { + left: @input-border-left-space; + right: @input-border-right-space; + } + } + + &--layout-vertical { + flex-direction: column; + } + + &__wrap--prefix { + display: flex; + } + + &__icon--prefix { + font-size: 24px; + color: @input-prefix-icon-color; + } + + &__label:not(:empty) { + min-width: 2em; + max-width: 5em; + font-size: @font-size-m; + line-height: 24px; + color: @input-label-text-color; + margin-right: @spacer-2; + .@{prefix}-input--layout-vertical & { + font-size: @font-size-base; + padding-bottom: 4px; + } + } + + &__icon--prefix:not(:empty) + &__label:not(:empty) { + padding-left: 4px; + } + + &__label:not(:empty) + &__wrap { + margin-left: @spacer-2; + } + + &__icon--prefix:not(:empty) + &__label:empty { + margin-right: @spacer-2; + } + + &__wrap { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + flex: 1; + flex-shrink: 1; + + .@{prefix}-input__content { + display: flex; + align-items: center; + line-height: 24px; + font-size: @font-size-m; + } + + &--clearable-icon, + &--suffix-icon, + &--suffix { + flex: 0 0 auto; + padding-left: @spacer-1; + + &:empty { + display: none; + } + } + + &--clearable-icon, + &--suffix-icon { + font-size: 24px; + color: @input-suffix-icon-color; + } + + &--suffix { + font-size: @font-size-m; + color: @input-suffix-text-color; + } + } + + &__icon--prefix, + &__tips, + &__wrap--clearable-icon, + &__wrap--suffix-icon, + &__wrap--suffix { + display: flex; + + &:empty { + display: none; + } + } + + &__control { + display: block; + box-sizing: border-box; + width: 100%; + min-width: 0; // for flex-shrink in field__button + min-height: 24px; + margin: 0; + padding: 0; + color: @input-default-text-color; + line-height: inherit; + background-color: transparent; + border: 0; + resize: none; + font-size: inherit; + + &--disabled { + color: @input-disabled-text-color; + cursor: not-allowed; + opacity: 1; + -webkit-text-fill-color: currentColor; // fix disabled color in iOS + } + + &--read-only { + cursor: default; + } + } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } + + &--center { + text-align: center; + } + + &__placeholder { + color: @input-placeholder-text-color; + font-size: @font-size-m; + } + + &__tips { + font-size: @font-size-s; + line-height: 20px; + padding-top: 4px; + } +} + +.input-status(@status) { + @tipsColor: "input-@{status}-tips-color"; + + .@{prefix}-input--@{status} + .@{prefix}-input__tips { + color: @@tipsColor; + } +} + +// status +.input-status(default); +.input-status(success); +.input-status(warning); +.input-status(error); diff --git a/style/mobile/components/input/v2/_var.less b/style/mobile/components/input/v2/_var.less new file mode 100644 index 0000000000..af3e0f0669 --- /dev/null +++ b/style/mobile/components/input/v2/_var.less @@ -0,0 +1,23 @@ +@input-vertical-padding: var(--td-input-vertical-padding, 16px); //输入框垂直方向内间距 + +@input-default-text-color: var(--td-input-default-text-color, @font-gray-1); // 'default' 状态输入框文本颜色 +@input-success-text-color: var(--td-input-success-text-color, @success-color); // 'success' 状态输入框文本颜色 +@input-warning-text-color: var(--td-input-warning-text-color, @warning-color); // 'warning' 状态输入框文本颜色 +@input-error-text-color: var(--td-input-error-text-color, @error-color); // 'error' 状态输入框文本颜色 + +@input-default-tips-color: var(--td-input-default-tips-color, @font-gray-3); // 'default' 状态辅助文本颜色 +@input-success-tips-color: var(--td-input-success-tips-color, @success-color); // 'success' 状态辅助文本颜色 +@input-warning-tips-color: var(--td-input-warning-tips-color, @warning-color); // 'warning' 状态辅助文本颜色 +@input-error-tips-color: var(--td-input-error-tips-color, @error-color); // 'error' 状态辅助文本颜色 + +@input-bg-color: var(--td-input-bg-color, @bg-color-container); // 输入框背景颜色 +@input-border-color: var(--td-input-border-color, @component-stroke); // 输入框分割线颜色 +@input-border-left-space: var(--td-input-border-left-space, 16px); +@input-border-right-space: var(--td-input-border-right-space, 0); +@input-placeholder-text-color: var(--td-input-placeholder-text-color, @text-color-placeholder); // 输入框占位符文本颜色 +@input-prefix-icon-color: var(--td-input-prefix-icon-color, @font-gray-1); // // 输入框前缀图标颜色 +@input-suffix-icon-color: var(--td-input-suffix-icon-color, @font-gray-3); // 输入框后缀图标颜色 +@input-label-text-color: var(--td-input-label-text-color, @font-gray-1); // 左侧文本颜色 +@input-suffix-text-color: var(--td-input-suffix-text-color, @font-gray-1); // 后置图标前的后置内容文本颜色 +@input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色 +@input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小 diff --git a/style/mobile/components/link/_index.less b/style/mobile/components/link/_index.less new file mode 100644 index 0000000000..d78ac1296d --- /dev/null +++ b/style/mobile/components/link/_index.less @@ -0,0 +1,82 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.link-size(@size) { + @contentFontSize: "link-content-@{size}-font-size"; + @contentLineHeight: "link-content-@{size}-line-height"; + @iconSize: "link-icon-@{size}-font-size"; + + .@{link}--@{size} { + .@{link}__content { + font-size: @@contentFontSize; + line-height: @@contentLineHeight; + } + .@{link}__prefix-icon, + .@{link}__suffix-icon { + font-size: @@iconSize; + } + } +} + +.link-theme(@theme) { + @color: "link-@{theme}-color"; + @activeColor: "link-@{theme}-active-color"; + @disabledColor: "link-@{theme}-disabled-color"; + + .@{link}--@{theme} { + color: @@color; + + &.@{link}--underline::after { + border-color: @@color; + } + + &.@{link}--disabled { + color: @@disabledColor; + } + + &.@{link}--hover { + color: @@activeColor; + + &.@{link}--underline::after { + border-color: @@activeColor; + } + } + } +} + +.link-size(small); +.link-size(medium); +.link-size(large); + +.link-theme(primary); +.link-theme(success); +.link-theme(warning); +.link-theme(default); +.link-theme(danger); + +.@{link} { + position: relative; + display: flex; + align-items: center; + box-sizing: content-box; + + &--underline::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + opacity: 1; + border-bottom: 1px solid rgb(205, 11, 231); + } + + &__prefix-icon:not(:empty) + &__content:not(:empty) { + padding-left: 4px; + } + + &__content:not(:empty) + &__suffix-icon:not(:empty) { + padding-left: 4px; + } +} diff --git a/style/mobile/components/link/_var.less b/style/mobile/components/link/_var.less new file mode 100644 index 0000000000..94cd5fb2cf --- /dev/null +++ b/style/mobile/components/link/_var.less @@ -0,0 +1,42 @@ +// 状态色 - 默认色 + +@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 +@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 +@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 + +// 状态色 - 主色 +@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色 +@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色 +@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色 + +// 状态色 - 成功 +@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色 +@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色 +@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色 + +// 状态色 - 警告 +@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色 +@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色 +@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色 + +// 状态色 - 危险 +@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色 +@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色 +@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色 + +// 字号 +@link-content-small-font-size: 12px; +@link-content-small-line-height: 20px; +@link-icon-small-font-size: 14px; + +@link-content-medium-font-size: 14px; +@link-content-medium-line-height: 22px; +@link-icon-medium-font-size: 16px; + +@link-content-large-font-size: 16px; +@link-content-large-line-height: 24px; +@link-icon-large-font-size: 18px; + +@themes: primary, success, warning, default, danger; + +@link: ~"@{prefix}-link"; diff --git a/style/mobile/components/link/v2/_index.less b/style/mobile/components/link/v2/_index.less new file mode 100644 index 0000000000..5fba832844 --- /dev/null +++ b/style/mobile/components/link/v2/_index.less @@ -0,0 +1,87 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.link-size(@size) { + @contentFontSize: "link-content-@{size}-font-size"; + @contentLineHeight: "link-content-@{size}-line-height"; + @iconSize: "link-icon-@{size}-font-size"; + + .@{link}--@{size} { + .@{link}__content { + font-size: @@contentFontSize; + line-height: @@contentLineHeight; + } + .@{link}__prefix-icon, + .@{link}__suffix-icon { + font-size: @@iconSize; + } + } +} + +.link-theme(@theme) { + @color: "link-@{theme}-color"; + @activeColor: "link-@{theme}-active-color"; + @disabledColor: "link-@{theme}-disabled-color"; + + .@{link}--@{theme} { + color: @@color; + + &.@{link}--underline::after { + border-color: @@color; + } + + &.@{link}--disabled { + color: @@disabledColor; + } + + &:active { + &.@{link}--hover { + color: @@activeColor; + + &.@{link}--underline::after { + border-color: @@activeColor; + } + } + } + } +} + +.link-size(small); +.link-size(medium); +.link-size(large); + +.link-theme(primary); +.link-theme(success); +.link-theme(warning); +.link-theme(default); +.link-theme(danger); + +.@{link} { + position: relative; + display: flex; + align-items: center; + box-sizing: content-box; + text-decoration: none; + + &--underline::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 2px; + opacity: 1; + border-bottom: 1px solid rgb(205, 11, 231); + } + + &__prefix-icon:not(:empty) + &__content:not(:empty) { + padding-left: 4px; + display: inherit; + } + + &__content:not(:empty) + &__suffix-icon:not(:empty) { + padding-left: 4px; + display: inherit; + } +} diff --git a/style/mobile/components/link/v2/_var.less b/style/mobile/components/link/v2/_var.less new file mode 100644 index 0000000000..73a36aa275 --- /dev/null +++ b/style/mobile/components/link/v2/_var.less @@ -0,0 +1,43 @@ +// 状态色 - 默认色 + +@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 +@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 +@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 + +// 状态色 - 主色 +@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色 +@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色 +@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色 + +// 状态色 - 成功 +@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色 +@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色 +@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色 + +// 状态色 - 警告 +@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色 +@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色 +@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色 + +// 状态色 - 危险 +@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色 +@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色 +@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色 + +// 字号 +@link-content-small-font-size: 12px; +@link-content-small-line-height: 20px; +@link-icon-small-font-size: 14px; + +@link-content-medium-font-size: 14px; +@link-content-medium-line-height: 22px; +@link-icon-medium-font-size: 16px; + +@link-content-large-font-size: 16px; +@link-content-large-line-height: 24px; +@link-icon-large-font-size: 18px; + +@link-icon-margin: 6px; +@themes: primary, success, warning, default, danger; + +@link: ~"@{prefix}-link"; diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index ab4eb4dfb9..9c21f0529d 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -4,26 +4,23 @@ @import "../../mixins/_index.less"; -.@{prefix}-loading { +.@{loading} { + display: flex; + align-items: center; position: relative; color: @loading-color; - font-size: @loading-text-size; - .@{prefix}-icon-loading { - font-size: @loading-icon-size; - } + font-size: @loading-size; &--inherit-color { color: inherit; } &--vertical { - display: flex; flex-direction: column; - align-items: center; .@{prefix}-loading__text { margin-left: 0; - margin-top: 6px; + margin-top: 8px; } } @@ -31,31 +28,11 @@ pointer-events: none; } - &.@{prefix}-size-s { - font-size: @loading-text-size-small; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-small; - } - } - - &.@{prefix}-size-l { - font-size: @loading-text-size-large; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-large; - } - } - &__text { color: @loading-text-color; - width: auto; - display: inline-block; - vertical-align: middle; - line-height: @loading-text-line-height; - margin-left: @loading-text-margin-left; - - &--error { - color: rgba(0, 0, 0, 40%); - } + line-height: 20px; + margin-left: 6px; + font-size: @loading-text-font-size; &--only { margin-left: 0; @@ -63,7 +40,7 @@ } &__gradient { - display: inline-flex; + display: flex; justify-content: center; align-items: center; vertical-align: middle; @@ -112,41 +89,27 @@ } } - &__dots { - background-color: @dot-bg-color; - border-radius: @dot-radius; - color: @dot-color; - height: @dot-height; - width: @dotWidth; - position: relative; - left: @dot-left-pos; - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; - animation: t-dot-typing 1.5s infinite linear; - } + &__dot { + width: 20%; + height: 20%; + border-radius: 50%; + background-color: currentColor; + animation-duration: 1.8s; + animation-name: dotting; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-fill-mode: both; - &__bar { - background: @loading-color; - position: fixed; - z-index: 1031; - top: 0; - left: 0; - width: 100%; - height: 2px; - transition: all 200ms ease 0s; - } + &--paused { + animation-play-state: paused; + } - &__shadow { - display: block; - position: absolute; - right: 0; - width: 100px; - height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; - opacity: 1; - transform: rotate(3deg) translate(0, -4px); + &s { + display: flex; + justify-content: space-between; + align-items: center; + animation: none; + } } } @@ -169,32 +132,24 @@ } } -@keyframes t-dot-typing { +@keyframes dotting { 0% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; + } + + 1% { + opacity: .8; } - 33.3333% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; + 33% { + opacity: .8; } - 66.6667% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-after-color, - @dot-x3 0 0 0 @dot-color; + 34% { + opacity: .15; } 100% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; } } diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index 687c1d82ae..1ea28a7e0d 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -1,36 +1,8 @@ -//颜色 -@loading-color: @primary-color-8; - -// 字体 -@loading-text-line-height: @text-line-height; -@loading-text-color: @text-level-1-color; - -@loading-text-size: @font-size-base; -@loading-text-size-small: @font-size-s; -@loading-text-size-large: @font-size-l; - -// icon -@loading-icon-size: 28px; -@loading-icon-size-small: 24px; -@loading-icon-size-large: 32px; - -// 间距 -@loading-text-margin-left: 5px; - -// dots -@dotWidth: 8px; -@dot-height: 8px; -@dot-radius: calc(@dotWidth / 2); - -@dot-color: @primary-color-8; -@dot-bg-color: @dot-color; -@dot-before-color: rgba(@primary-color-8, .15); -@dot-after-color: rgba(@primary-color-8, .15); - -@dot-spacing: calc(@dotWidth * 2); - -@dot-left-pos: -9999px; - -@dot-x1: calc(0px - @dot-left-pos - @dot-spacing); -@dot-x2: -@dot-left-pos; -@dot-x3: calc(0px - @dot-left-pos + @dot-spacing); +@loading: ~"@{prefix}-loading"; + +@loading-color: var(--td-loading-color, @brand-color); +@loading-size: var(--td-loading-size, 20px); +@loading-text-color: var(--td-loading-text-color, @text-color-primary); +@loading-text-font-size: var(--td-loading-text-font-size, 12px); +@loading-text-line-height: var(--td-loading-text-line-height, 20px); +@loading-dot-size: var(--td-loading-dot-size, 8px); diff --git a/style/mobile/components/loading/v2/_index.less b/style/mobile/components/loading/v2/_index.less new file mode 100644 index 0000000000..08b48d97f8 --- /dev/null +++ b/style/mobile/components/loading/v2/_index.less @@ -0,0 +1,193 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{loading} { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + + &__spinner { + position: relative; + box-sizing: border-box; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + animation: rotate .8s linear infinite; + color: @loading-color; + + &.reverse { + animation-name: rotateReverse; + } + + &--spinner { + animation-timing-function: steps(12); + color: @font-gray-1; + + .@{loading}__dot { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + &::before { + display: block; + width: 2.5px; + height: 25%; + margin: 0 auto; + background-color: currentColor; + border-radius: 40%; + content: " "; + } + } + } + + &--circular { + .@{loading}__circular { + border-radius: 100%; + width: 100%; + height: 100%; + background: conic-gradient( + from 180deg at 50% 50%, + rgba(255, 255, 255, 0%) 0deg, + rgba(255, 255, 255, 0%) 60deg, + currentColor 330deg, + rgba(255, 255, 255, 0%) 360deg + ); + mask: radial-gradient(transparent calc(50% - .5px), #fff 50%); + + /* stylelint-disable-next-line */ + -webkit-mask: radial-gradient(transparent calc(50% - .5px), #fff 50%); + } + } + + &--dots { + display: flex; + justify-content: space-between; + align-items: center; + animation: none; + + .@{loading}__dot { + width: 20%; + height: 20%; + border-radius: 50%; + background-color: currentColor; + animation-duration: 1.8s; + animation-name: dotting; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-fill-mode: both; + } + } + } + + &__text { + font-size: @loading-text-font-size; + line-height: @loading-text-line-height; + + &--vertical:not(:first-child):not(:empty) { + margin-top: 6px; + } + + &--horizontal:not(:first-child):not(:empty) { + margin-left: 8px; + } + } + + &--vertical { + flex-direction: column; + } + + &--horizontal { + flex-direction: row; + vertical-align: top; + } +} + +@keyframes t-bar { + 0% { + width: 0; + } + + 50% { + width: 70%; + } + + 100% { + width: 80%; + } +} + +@keyframes t-bar-loaded { + 0% { + height: 3px; + opacity: 1; + width: 90%; + } + + 50% { + height: 3px; + opacity: 1; + width: 100%; + } + + 100% { + height: 0; + opacity: 0; + width: 100%; + } +} + +.generate(@n, @i: 1) when (@i =< @n) { + .@{loading}__dot:nth-of-type(@{i}) { + transform: rotate(@i * 30deg); + opacity: (1 / 12) * (@i - 1); + } + .generate(@n, (@i + 1)); +} +.generate(12); + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes rotateReverse { + from { + transform: rotate(360deg); + } + + to { + transform: rotate(0deg); + } +} + +@keyframes dotting { + 0% { + opacity: .15; + } + + 1% { + opacity: .8; + } + + 33% { + opacity: .8; + } + + 34% { + opacity: .15; + } + + 100% { + opacity: .15; + } +} diff --git a/style/mobile/components/loading/v2/_var.less b/style/mobile/components/loading/v2/_var.less new file mode 100644 index 0000000000..5fea0e575d --- /dev/null +++ b/style/mobile/components/loading/v2/_var.less @@ -0,0 +1,5 @@ +@loading: ~"@{prefix}-loading"; + +@loading-color: var(--td-loading-color, @brand-color); +@loading-text-font-size: var(--td-loading-text-font-size, 12px); +@loading-text-line-height: var(--td-loading-text-line-height, 20px); diff --git a/style/mobile/components/message/_index.less b/style/mobile/components/message/_index.less index 0a038de355..db3f0a27d4 100644 --- a/style/mobile/components/message/_index.less +++ b/style/mobile/components/message/_index.less @@ -56,7 +56,7 @@ } &--info { - color: @primary-color; + color: @brand-color; } &--success { diff --git a/style/mobile/components/message/_var.less b/style/mobile/components/message/_var.less index af34e4a2a9..7e07ec55f9 100644 --- a/style/mobile/components/message/_var.less +++ b/style/mobile/components/message/_var.less @@ -2,7 +2,7 @@ @message-margin-y: @message-margin-x; -@message-text-color: @text-anti-primary-color; +@message-text-color: @text-color-anti; @message-text-font-size: @font-size-base; @@ -26,8 +26,8 @@ @message-icon-margin-left: 8px; -@message-border-radius: @border-radius; +@message-border-radius: @radius-small; @message-z-index: 5000; -@message-color: @primary-color-8; +@message-color: @brand-color-8; diff --git a/style/mobile/components/message/v2/_index.less b/style/mobile/components/message/v2/_index.less new file mode 100644 index 0000000000..09586ffb83 --- /dev/null +++ b/style/mobile/components/message/v2/_index.less @@ -0,0 +1,107 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{message} { + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: @message-align; + height: @message-height; + align-items: center; + z-index: @message-z-index; + padding: 0 @message-horizontal-padding; + box-sizing: border-box; + border-radius: @message-border-radius; + line-height: 1; + background-color: @message-bg-color; + box-shadow: @message-box-shadow; + + &__text { + display: inline-block; + color: @message-content-font-color; + font-size: @message-content-font-size; + line-height: @message-content-height; + } + + &__text-wrap { + flex: 1 1 auto; + overflow-x: hidden; + text-overflow: ellipsis; + } + + &__text-nowrap { + word-break: keep-all; + white-space: nowrap; + } + + &__close-wrap { + display: flex; + align-items: center; + } + + &--info { + color: @message-info-color; + } + + &--success { + color: @message-success-color; + } + + &--warning { + color: @message-warning-color; + } + + &--error { + color: @message-error-color; + } + + &__icon--left, + &__icon--right { + font-size: @message-icon-size; + } + + &__icon--left:not(:empty) { + margin-right: @spacer; + } + + &__icon--right { + color: @message-close-icon-color; + } + + &__icon--right:not(:empty), + &__link { + flex: 0 0 auto; + margin-left: @spacer; + } +} + +.message-enter-active { + animation: messageEnter .5s; +} + +.message-leave-active { + animation: messageOut .2s; +} + +@keyframes messageEnter { + from { + transform: translate3d(0, -@message-height, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes messageOut { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(0, -@message-height, 0); + } +} diff --git a/style/mobile/components/message/v2/_var.less b/style/mobile/components/message/v2/_var.less new file mode 100644 index 0000000000..419652bcc2 --- /dev/null +++ b/style/mobile/components/message/v2/_var.less @@ -0,0 +1,20 @@ +@message-height: 48px; +@message-horizontal-padding: 16px; +@message-z-index: 15000; + +@message-align: flex-start; +@message-icon-size: 22px; +@message-content-height: 22px; +@message-content-font-size: @font-size-base; + +@message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色 +@message-box-shadow: var(--td-message-box-shadow, @shadow-4); // 消息通知阴影 +@message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小 +@message-content-font-color: var(--td-message-content-font-color, @font-gray-1); // 内容文本颜色 +@message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色 +@message-success-color: var(--td-message-success-color, @success-color); // 'success'主题色 +@message-warning-color: var(--td-message-warning-color, @warning-color); // 'warning'主题色 +@message-error-color: var(--td-message-error-color, @error-color); // 'error'主题色 +@message-close-icon-color: var(--td-message-close-icon-color, @font-gray-3); // 关闭按钮图标颜色 + +@message: ~"@{prefix}-message"; diff --git a/style/mobile/components/navbar/_index.less b/style/mobile/components/navbar/_index.less index 89bf9af4c9..a26914f0b6 100644 --- a/style/mobile/components/navbar/_index.less +++ b/style/mobile/components/navbar/_index.less @@ -3,13 +3,16 @@ @import "./_var.less"; .@{prefix}-navbar { - background-color: @bg-color-block; + background-color: @bg-color-container; position: relative; display: flex; height: @navbar-height; align-items: center; justify-content: center; font-size: @navbar-font-size; + top: 0; + left: 0; + width: 100%; & .@{prefix}-icon { font-size: @navbar-icon-font-size; diff --git a/style/mobile/components/navbar/_var.less b/style/mobile/components/navbar/_var.less index 56138e847e..4eec4bc664 100644 --- a/style/mobile/components/navbar/_var.less +++ b/style/mobile/components/navbar/_var.less @@ -12,6 +12,6 @@ @navbar-icon-font-size: 24px; -@navbar-font-color: @text-level-1-color; +@navbar-font-color: @text-color-primary; @navbar-close-marginleft: 12px; diff --git a/style/mobile/components/navbar/v2/_index.less b/style/mobile/components/navbar/v2/_index.less new file mode 100644 index 0000000000..856548153d --- /dev/null +++ b/style/mobile/components/navbar/v2/_index.less @@ -0,0 +1,118 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-navbar { + &--fixed { + .@{prefix}-navbar__content { + position: fixed; + top: 0; + left: 0; + z-index: 5001; + } + } + + &--visible { + display: ""; + } + + &--visible-animation { + opacity: 1; + transition: opacity .3s cubic-bezier(.645, .045, .355, 1); + } + + &--hide-animation { + opacity: 0; + transition: opacity .3s cubic-bezier(.645, .045, .355, 1); + } + + &--hide { + display: none; + } + + &__placeholder { + height: @navbar-height; + padding-top: @navbar-padding-top; + position: relative; + visibility: hidden; + } + + &__content { + position: relative; + z-index: 1; + height: @navbar-height; + width: calc(100% - @navbar-right); + padding-right: @navbar-right; + padding-top: @navbar-padding-top; + color: @navbar-color; + background-color: @navbar-bg-color; + display: flex; + align-items: center; + } + + &__left { + position: relative; + box-sizing: border-box; + // width: @navbar-right; + display: flex; + align-items: center; + margin-left: @spacer-1; + + &-arrow { + font-size: @navbar-left-arrow-size; + } + } + + &__capsule { + box-sizing: border-box; + width: @navbar-capsule-width; + height: @navbar-capsule-height; + display: flex; + align-items: center; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: calc(@navbar-capsule-border-radius * 2); + border: 1px solid @navbar-capsule-border-color; + } + + &:empty { + display: none; + } + } + + &__center { + font-size: 18px; + text-align: center; + position: absolute; + left: @navbar-right; + width: calc(100% - @navbar-right * 2); + height: @navbar-height; + line-height: @navbar-height; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + &:empty { + display: none; + } + + &-title { + font-size: @navbar-title-font-size; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + font-weight: @navbar-title-font-weight; + } + } +} diff --git a/style/mobile/components/navbar/v2/_var.less b/style/mobile/components/navbar/v2/_var.less new file mode 100644 index 0000000000..c8a4ad4e63 --- /dev/null +++ b/style/mobile/components/navbar/v2/_var.less @@ -0,0 +1,14 @@ +@navbar-color: var(--td-navbar-color, @font-gray-1); +@navbar-bg-color: var(--td-navbar-bg-color, @bg-color-container); +@navbar-height: var(--td-navbar-height, 48px); +@navbar-right: var(--td-navbar-right, 95px); // 默认右上角胶囊按钮宽度，组件会在初始化时尝试自动获取胶囊按钮宽度并覆写该值 +@navbar-padding-top: var(--td-navbar-padding-top, 20px); // 导航栏顶部间距，组件会在初始化时尝试取右侧系统胶囊位置进行覆盖 +@navbar-title-font-size: var(--td-navbar-title-font-size, 18px); +@navbar-title-font-weight: var(--td-navbar-title-font-weight, 600); +@navbar-left-arrow-size: var(--td-navbar-left-arrow-size, 24px); + +// capsule +@navbar-capsule-border-color: var(--td-navbar-capsule-border-color, #e3e6ea); +@navbar-capsule-border-radius: var(--td-navbar-capsule-border-radius, 16px); +@navbar-capsule-width: var(--td-navbar-capsule-width, 88px); +@navbar-capsule-height: var(--td-navbar-capsule-height, 32px); diff --git a/style/mobile/components/notice-bar/_index.less b/style/mobile/components/notice-bar/_index.less index 5faa8f79f8..625c1ed5b4 100644 --- a/style/mobile/components/notice-bar/_index.less +++ b/style/mobile/components/notice-bar/_index.less @@ -75,11 +75,11 @@ &__inner { display: flex; - padding: @spacer-3 @spacer-4; + padding: @spacer-1 @spacer-2; } &__hd { - margin-right: @spacer-2; + margin-right: @spacer; } &__bd { @@ -125,7 +125,7 @@ padding-left: @spacer-2; line-height: 1.5; font-size: @noticebar-text-font-size; - color: @primary-color; + color: @brand-color; text-decoration: underline; } @@ -134,7 +134,7 @@ } &__ft { - margin-left: @spacer * 5; + margin-left: calc(@spacer * 2.5); } .@{prefix}-icon, @@ -145,6 +145,6 @@ } & + & { - margin-top: @spacer * 5; + margin-top: calc(@spacer * 2.5); } } diff --git a/style/mobile/components/notice-bar/_var.less b/style/mobile/components/notice-bar/_var.less index 65c8a3c4f7..ee49fcfd73 100644 --- a/style/mobile/components/notice-bar/_var.less +++ b/style/mobile/components/notice-bar/_var.less @@ -18,7 +18,7 @@ @noticebar-bg-color-error: #FDECEE; // 文本色 -@noticebar-text-color-info: @primary-color; +@noticebar-text-color-info: @brand-color; @noticebar-text-color-success: @success-color; @noticebar-text-color-warning: @warning-color; @noticebar-text-color-error: @error-color; @@ -26,7 +26,7 @@ // 文本大小 @noticebar-text-font-size: 14px; -@noticebar-icon-color-info: @primary-color; +@noticebar-icon-color-info: @brand-color; @noticebar-icon-color-success: @success-color; @noticebar-icon-color-warning: @warning-color; @noticebar-icon-color-error: @error-color; diff --git a/style/mobile/components/notice-bar/v2/_index.less b/style/mobile/components/notice-bar/v2/_index.less new file mode 100644 index 0000000000..86b39c5ec9 --- /dev/null +++ b/style/mobile/components/notice-bar/v2/_index.less @@ -0,0 +1,85 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{notice-bar} { + display: flex; + align-items: flex-start; + padding: @notice-bar-vertical-padding @notice-bar-horizontal-padding; + font-size: @notice-bar-font-size; + + &__content-wrap { + flex: 1; + overflow-x: hidden; + line-height: @notice-bar-line-height; + color: @notice-bar-font-color; + } + + &__content { + white-space: nowrap; + } + + &__content-wrapable { + white-space: normal; + } + + &__content--vertical { + height: @notice-bar-line-height; + line-height: @notice-bar-line-height; + + &-item { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &__prefix-icon { + color: inherit; + } + + &__prefix-icon:not(:empty) { + padding-right: @spacer; + } + + &__suffix-icon { + color: @notice-bar-suffix-icon-color; + } + + &__prefix-icon, + &__suffix-icon { + font-size: @notice-bar-icon-font-size; + } + + &__operation { + display: inline-flex; + vertical-align: top; + color: @notice-bar-operation-font-color; + font-weight: 700; + } + + &__suffix-icon:not(:empty) { + padding-left: @spacer; + } + + // theme + &--info { + color: @notice-bar-info-color; + background-color: @notice-bar-info-bg-color; + } + + &--success { + color: @notice-bar-success-color; + background-color: @notice-bar-success-bg-color; + } + + &--warning { + color: @notice-bar-warning-color; + background-color: @notice-bar-warning-bg-color; + } + + &--error { + color: @notice-bar-error-color; + background-color: @notice-bar-error-bg-color; + } +} diff --git a/style/mobile/components/notice-bar/v2/_var.less b/style/mobile/components/notice-bar/v2/_var.less new file mode 100644 index 0000000000..aa00e59f3d --- /dev/null +++ b/style/mobile/components/notice-bar/v2/_var.less @@ -0,0 +1,19 @@ +@notice-bar-font-size: @font-size-base; +@notice-bar-horizontal-padding: 16px; +@notice-bar-vertical-padding: 13px; +@notice-bar-line-height: 22px; +@notice-bar-icon-font-size: 22px; + +@notice-bar-font-color: var(--td-notice-bar-font-color, @font-gray-1); // 公告栏文本颜色 +@notice-bar-info-color: var(--td-notice-bar-info-color, @brand-color); // 'info' 主题色 +@notice-bar-info-bg-color: var(--td-notice-bar-info-bg-color, @brand-color-light); // 'info' 主题背景色 +@notice-bar-success-color: var(--td-notice-bar-success-color, @success-color); // 'success' 主题色 +@notice-bar-success-bg-color: var(--td-notice-bar-success-bg-color, @success-color-1); // 'success' 主题背景色 +@notice-bar-warning-color: var(--td-notice-bar-warning-color, @warning-color); // 'warning' 主题色 +@notice-bar-warning-bg-color: var(--td-notice-bar-warning-bg-color, @warning-color-1); // 'warning' 主题背景色 +@notice-bar-error-color: var(--td-notice-bar-error-color, @error-color-6); // 'error' 主题色 +@notice-bar-error-bg-color: var(--td-notice-bar-error-bg-color, @error-color-1); // 'error' 主题背景色 +@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @font-gray-3); // 后缀图标颜色 +@notice-bar-operation-font-color: var(--td-notice-bar-operation-font-color, @brand-color); // 额外信息文本颜色 + +@notice-bar: ~"@{prefix}-notice-bar"; diff --git a/style/mobile/components/overlay/_index.less b/style/mobile/components/overlay/_index.less index f496e3470f..4c38d59057 100644 --- a/style/mobile/components/overlay/_index.less +++ b/style/mobile/components/overlay/_index.less @@ -8,15 +8,11 @@ position: fixed; top: 0; left: 0; - z-index: @overlay-z-index; - display: block; + bottom: 0; width: 100%; - height: 100%; - background-color: @mask-bg-color; - - &--transparent { - background-color: transparent; - } + z-index: @overlay-zindex; + background-color: @overlay-bg-color; + transition-duration: @overlay-transition-duration; &-enter-from, &-leave-to { @@ -28,18 +24,4 @@ transition-property: background-color; transition-timing-function: ease; } - - &-aria-button { - position: absolute; - top: 0; - left: 0; - z-index: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - &-content { - z-index: 1; - } } diff --git a/style/mobile/components/overlay/_var.less b/style/mobile/components/overlay/_var.less index 17c9686add..287dbdc10c 100644 --- a/style/mobile/components/overlay/_var.less +++ b/style/mobile/components/overlay/_var.less @@ -1,2 +1,3 @@ -@overlay-z-index: 1500; -@mask-bg-color:rgba(0, 0, 0, .6); +@overlay-zindex: var(--td-overlay-zindex, 1000); +@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2); +@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms); diff --git a/style/mobile/components/overlay/v2/_index.less b/style/mobile/components/overlay/v2/_index.less new file mode 100644 index 0000000000..696eb4702d --- /dev/null +++ b/style/mobile/components/overlay/v2/_index.less @@ -0,0 +1,21 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{overlay} { + position: fixed; + top: 0; + left: 0; + width: 100%; + bottom: 0; + background-color: @overlay-bg-color; + transition: opacity @overlay-transition-duration ease; +} + +.t-fade-enter { + opacity: 0; +} + +.t-fade-leave-to { + opacity: 0; +} diff --git a/style/mobile/components/overlay/v2/_var.less b/style/mobile/components/overlay/v2/_var.less new file mode 100644 index 0000000000..62c33856ac --- /dev/null +++ b/style/mobile/components/overlay/v2/_var.less @@ -0,0 +1,3 @@ +@overlay: ~"@{prefix}-overlay"; +@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2); +@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms); diff --git a/style/mobile/components/picker/_index.less b/style/mobile/components/picker/_index.less index 0989644e30..af5be9e9f6 100644 --- a/style/mobile/components/picker/_index.less +++ b/style/mobile/components/picker/_index.less @@ -13,7 +13,7 @@ align-items: center; justify-content: space-between; height: @picker-toolbar--height; - box-shadow: inset 0 -.5px 0 0 @border-level-1-color; + box-shadow: inset 0 -.5px 0 0 @component-stroke; overflow: hidden; button { @@ -29,16 +29,16 @@ } .@{prefix}-picker__title { - color: @text-level-1-color; + color: @text-color-primary; font-weight: @picker--font-weight; } .@{prefix}-picker__cancel { - color: @text-level-2-color; + color: @text-color-secondary; } .@{prefix}-picker__confirm { - color: @primary-color; + color: @brand-color; } .@{prefix}-picker__main { @@ -93,8 +93,8 @@ top: 0; right: 0; height: 1px; - border-top: 1px solid @border-level-1-color; - color: @border-level-1-color; + border-top: 1px solid @component-stroke; + color: @component-stroke; transform-origin: 0 0; transform: scaleY(.5); } @@ -106,8 +106,8 @@ bottom: 0; right: 0; height: 1px; - border-bottom: 1px solid @border-level-1-color; - color: @border-level-1-color; + border-bottom: 1px solid @component-stroke; + color: @component-stroke; transform-origin: 0 100%; transform: scaleY(.5); } @@ -119,5 +119,5 @@ justify-content: center; height: @picker-item--height; line-height: @picker-item--line-height; - color: @text-level-1-color; + color: @text-color-primary; } diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less new file mode 100644 index 0000000000..08982dab87 --- /dev/null +++ b/style/mobile/components/picker/v2/_index.less @@ -0,0 +1,117 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{picker} { + position: relative; + background-color: @picker-bg-color; + border-top-left-radius: @picker-border-radius; + border-top-right-radius: @picker-border-radius; + + &__toolbar { + display: flex; + align-items: center; + justify-content: space-between; + overflow: hidden; + height: @picker-toolbar-height; + } + + &__title { + flex: 1; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: @picker-title-color; + line-height: @picker-title-line-height; + font-weight: @picker-title-font-weight; + font-size: @picker-title-font-size; + } + + &__cancel, + &__confirm { + display: flex; + align-items: center; + justify-content: center; + user-select: none; + font-size: @picker-button-font-size; + height: 100%; + padding: 0 16px; + } + + &__cancel { + color: @picker-cancel-color; + } + + &__confirm { + color: @picker-confirm-color; + } + + &__main { + position: relative; + display: flex; + justify-content: center; + padding-left: 32px; + padding-right: 32px; + } + + &__mask { + position: absolute; + left: 0; + right: 0; + z-index: 3; + backface-visibility: hidden; + pointer-events: none; + height: 48px; + + &--top { + top: 0; + background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + } + + &--bottom { + bottom: 0; + background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0%) 100%); + transform: matrix(1, 0, 0, -1, 0, 0); + } + } + + &__indicator { + height: @picker-item-height; + position: absolute; + left: 16px; + right: 16px; + top: 80px; + pointer-events: none; + background-color: @picker-indicator-bg-color; + border-radius: @picker-indicator-border-radius; + } +} + +.@{item} { + // display: flex; + + &__group { + // padding: 72px 0; + box-sizing: border-box; + height: @picker-group-height; + overflow: hidden; + flex: 1; + z-index: 1; + } + + &__item { + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: @picker-item-height; + line-height: @picker-item-height; + color: @picker-item-color; + + &--active { + color: @picker-item-active-color; + font-weight: 600; + } + } +} diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less new file mode 100644 index 0000000000..d2a98bad10 --- /dev/null +++ b/style/mobile/components/picker/v2/_var.less @@ -0,0 +1,27 @@ +@picker: ~"@{prefix}-picker"; +@item: ~"@{picker}-item"; + +@picker-border-radius: var(--td-picker-border-radius, 12px); +@picker-toolbar-height: var(--td-picker-toolbar-height, 58px); + +@picker-cancel-color: var(--td-picker-cancel-color, @font-gray-2); +@picker-confirm-color: var(--td-picker-confirm-color, @brand-color); +@picker-button-font-size: var(--td-picker-button-font-size, 16px); + +@picker-title-font-size: var(--td-picker-title-font-size, 18px); +@picker-title-font-weight: var(--td-picker-title-font-weight, 600); +@picker-title-line-height: var(--td-picker-title-line-height, 26px); +@picker-title-color: var(--td-picker-title-color, @font-gray-1); + +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-bg-color: var(--td-picker-bg-color, @bg-color-container); +@picker-mask-color-top: var(--td-picker-mask-color-top, hsla(0, 0%, 100%, .92)); +@picker-mask-color-bottom: var(--td-picker-mask-color-bottom, hsla(0, 0%, 100%, .4)); + +@picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer); +@picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 6px); + +@picker-group-height: var(--td-picker-group-height, 200px); +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-item-color: var(--td-picker-item-color, @font-gray-2); +@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); diff --git a/style/mobile/components/popup/_index.less b/style/mobile/components/popup/_index.less index 9bd49e1965..c8cad94eaa 100644 --- a/style/mobile/components/popup/_index.less +++ b/style/mobile/components/popup/_index.less @@ -7,7 +7,7 @@ .@{prefix}-popup { &--content { position: fixed; - z-index: @overlay-z-index; + z-index: 1500; } &--content-top { @@ -41,51 +41,3 @@ transform: translate(-50%, -50%); } } - -.slide-top-enter-active { - animation: @slide-top-in .3s; -} - -.slide-top-leave-active { - animation: @slide-top-out .3s; -} - -.slide-right-enter-active { - animation: @slide-right-in .3s; -} - -.slide-right-leave-active { - animation: @slide-right-out .3s; -} - -.slide-bottom-enter-active { - animation: @slide-bottom-in .3s; -} - -.slide-bottom-leave-active { - animation: @slide-bottom-out .3s; -} - -.slide-left-enter-active { - animation: @slide-left-in .3s; -} - -.slide-left-leave-active { - animation: @slide-left-out .3s; -} - -.fade-zoom-enter-active { - animation: @fade-zoom-in .35s; -} - -.fade-zoom-leave-active { - animation: @fade-zoom-out .35s; -} - -.fade-enter-active { - animation: @fade-in .3s; -} - -.fade-leave-active { - animation: @fade-out .3s; -} diff --git a/style/mobile/components/popup/v2/_index.less b/style/mobile/components/popup/v2/_index.less new file mode 100644 index 0000000000..b029fa60b3 --- /dev/null +++ b/style/mobile/components/popup/v2/_index.less @@ -0,0 +1,72 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +@import "../../../utilities/_transition.less"; + +.@{popup} { + position: fixed; + z-index: 11500; + max-height: 100vh; + transition: all 300ms ease; + background-color: @popup-bg-color; + box-sizing: border-box; + + &__content { + position: relative; + z-index: 1; + } + + &__close { + position: absolute; + top: 0; + right: 0; + padding: 10px; + line-height: 1; + } + + &--top { + top: 0; + left: 0; + width: 100%; + border-bottom-left-radius: @popup-border-radius; + border-bottom-right-radius: @popup-border-radius; + } + + &--bottom { + bottom: 0; + left: 0; + width: 100vw; + border-top-left-radius: @popup-border-radius; + border-top-right-radius: @popup-border-radius; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } + + &--left { + top: 0; + left: 0; + height: 100vh; + } + + &--right { + top: 0; + right: 0; + height: 100vh; + } + + &--center { + top: 50%; + left: 50%; + transform: scale(1) translate3d(-50%, -50%, 0); + border-radius: @popup-border-radius; + } + + &.@{prefix}-dialog-enter, + &.@{prefix}-dialog-leave-to { + &.@{popup}--center { + transform: scale(.6) translate3d(-50%, -50%, 0); + opacity: 0; + } + } +} diff --git a/style/mobile/components/popup/v2/_var.less b/style/mobile/components/popup/v2/_var.less new file mode 100644 index 0000000000..7912bd13bd --- /dev/null +++ b/style/mobile/components/popup/v2/_var.less @@ -0,0 +1,6 @@ +@popup: ~"@{prefix}-popup"; +@popup-position: ~"@{popup}--position"; +@popup-transition: ~"@{popup}--transition"; + +@popup-bg-color: var(--td-popup-bg-color, @bg-color-container); +@popup-border-radius: var(--td-popup-border-radius, @radius-default); diff --git a/style/mobile/components/progress/v2/_index.less b/style/mobile/components/progress/v2/_index.less new file mode 100644 index 0000000000..f97035d8b0 --- /dev/null +++ b/style/mobile/components/progress/v2/_index.less @@ -0,0 +1,178 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +// 进度条基本样式 +.@{progress} { + &__inner { + position: relative; + height: 100%; + background: @progress-inner-bg-color; + border-radius: @radius-round; + transition: @progress-inner-transition; + } + + &__bar { + width: 100%; + height: @progress-line-stroke-width; + overflow: hidden; + background: @progress-track-bg-color; + border-radius: @radius-round; + } + + &__info { + margin-left: @progress-info-spacer; + color: @progress-info-dark-color; + white-space: nowrap; + display: inline-flex; + } +} + +//标准进度条 +.@{progress}--thin { + display: flex; + justify-content: space-between; + align-items: center; + + .@{progress}__icon { + font-size: @progress-line-icon-font-size; + } +} + +//条形进度条 百分比内置 +.@{progress}--plump { + height: @progress-stroke-plump-width; + border-radius: calc(@progress-stroke-plump-width / 2); + display: flex; + align-items: center; + + .@{progress}__info { + font-size: @progress-plump-label-font-size; + } +} + +.@{progress}--over-ten { + .@{progress}__info { + position: absolute; + top: 50%; + right: @progress-info-spacer; + color: @progress-info-light-color; + transform: translateY(-50%); + } +} + +.@{progress}--under-ten { + .@{progress}__info, + .@{progress}__inner { + display: inline-block; + } + + .@{progress}__info { + vertical-align: top; + } +} + +// 环形 +.@{progress}__canvas--circle { + position: relative; + width: @progress-circle-width; + height: @progress-circle-width; + border-radius: @radius-circle; + + .@{progress}__canvas--inner { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: calc(100% - @progress-stroke-circle-width*2); + height: calc(100% - @progress-stroke-circle-width*2); + border-radius: @radius-circle; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: @progress-circle-inner-bg-color; + } + + .@{progress}__info { + margin: 0; + font-size: @progress-circle-label-font-size; + font-weight: @progress-circle-label-font-weight; + line-height: @progress-circle-label-line-height; + overflow: hidden; + text-overflow: ellipsis; + /* stylelint-disable-next-line */ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .@{progress}__icon { + font-size: @progress-circle-icon-font-size; + } +} + +//进度条状态 +.@{progress}--status--active { + .@{progress}__inner { + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + content: ""; + animation: progress-active-animation 2s cubic-bezier(.23, .99, .86, .2) infinite; + background: @progress-inner-bg-color-active; + opacity: .2; + } + } +} + +.@{progress}--status--success { + .@{progress}__inner { + background: @progress-inner-bg-color-success; + } + + .@{progress}__icon { + color: @success-color; + } +} + +.@{progress}--status--warning { + .@{progress}__inner { + background: @progress-inner-bg-color-warning; + } + + .@{progress}__icon { + color: @warning-color; + } +} + +.@{progress}--status--error { + .@{progress}__inner { + background: @progress-inner-bg-color-error; + } + + .@{progress}__icon { + color: @error-color; + } +} + +@keyframes progress-active-animation { + 0% { + width: 0; + opacity: .1; + } + + 35% { + width: 50%; + opacity: .4; + } + + 100% { + width: 100%; + opacity: 0; + } +} diff --git a/style/mobile/components/progress/v2/_var.less b/style/mobile/components/progress/v2/_var.less new file mode 100644 index 0000000000..88fde86e27 --- /dev/null +++ b/style/mobile/components/progress/v2/_var.less @@ -0,0 +1,42 @@ +@progress-line-stroke-width: 6px; // line 进度条线宽 +@progress-stroke-plump-width: 20px; // plump 进度条线宽 +@progress-stroke-circle-width: 6px; // circle 进度条线宽 +@progress-line-icon-font-size: calc(@font-size-base + 2px); +@progress-circle-icon-font-size: 48px; +@progress-plump-label-font-size: @font-size-s; +@progress-circle-width: 112px; +@progress-circle-label-font-size: 20px; +@progress-circle-label-line-height: 28px; +@progress-circle-label-font-weight: 700; +@progress-info-spacer: @spacer; // 间距 +@progress-inner-transition: all @anim-duration-base @anim-time-fn-easing; + +@progress-track-bg-color: var(--td-progress-track-bg-color, @bg-color-component); // 进度条背景色值(未完成部分进度) +@progress-inner-bg-color: var(--td-progress-inner-bg-color, @brand-color); // 进度条已完成进度色值(默认状态) +@progress-inner-bg-color-success: var( + --td-progress-inner-bg-color-success, + @success-color +); // 进度条已完成进度色值(success 状态) +@progress-inner-bg-color-error: var( + --td-progress-inner-bg-color-error, + @error-color +); // 进度条已完成进度色值(error 状态) +@progress-inner-bg-color-warning: var( + --td-progress-inner-bg-color-warning, + @warning-color +); // 进度条已完成进度色值(warning 状态) +@progress-inner-bg-color-active: var( + --td-progress-inner-bg-color-active, + @bg-color-container +); // 进度条已完成进度色值(active 状态) +@progress-info-dark-color: var( + --td-progress-info-dark-color, + @text-color-primary +); // 进度条深色label字体颜色(在进度条外或未完成进度灰色色块里显示的色值) +@progress-info-light-color: var( + --td-progress-info-light-color, + @font-white-1 +); // 进度条浅色label字体颜色(在进度条色块内显示的色值) +@progress-circle-inner-bg-color: var(--td-progress-circle-inner-bg-color, @font-white-1); // 环境进度条内圆背景色 + +@progress: ~"@{prefix}-progress"; diff --git a/style/mobile/components/pull-down-refresh/_var.less b/style/mobile/components/pull-down-refresh/_var.less index f73e948a67..09d34a4666 100644 --- a/style/mobile/components/pull-down-refresh/_var.less +++ b/style/mobile/components/pull-down-refresh/_var.less @@ -1,2 +1,2 @@ // 文案颜色 -@pull-down-refresh-text-color: @text-level-4-color; +@pull-down-refresh-text-color: @text-color-disabled; diff --git a/style/mobile/components/pull-down-refresh/v2/_index.less b/style/mobile/components/pull-down-refresh/v2/_index.less new file mode 100644 index 0000000000..b52c55c733 --- /dev/null +++ b/style/mobile/components/pull-down-refresh/v2/_index.less @@ -0,0 +1,39 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-pull-down-refresh { + overflow: hidden; + max-height: 100vh; + height: 100%; + + &__track { + position: relative; + + &--loosing { + transition: transform ease .24s; + } + } + + &__tips { + position: absolute; + color: @pull-down-refresh-color; + font-size: 12px; + top: 0; + width: 100%; + transform: translateY(-100%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + overflow: hidden; + } + + &__text { + margin: 8px 0 0; + } + + &__wrap { + position: relative; + } +} diff --git a/style/mobile/components/pull-down-refresh/v2/_var.less b/style/mobile/components/pull-down-refresh/v2/_var.less new file mode 100644 index 0000000000..11dbbbd952 --- /dev/null +++ b/style/mobile/components/pull-down-refresh/v2/_var.less @@ -0,0 +1 @@ +@pull-down-refresh-color: var(--td-pull-down-refresh-color, @font-gray-3); diff --git a/style/mobile/components/radio/_index.less b/style/mobile/components/radio/_index.less index 0cc5267e39..8008c5ae2e 100644 --- a/style/mobile/components/radio/_index.less +++ b/style/mobile/components/radio/_index.less @@ -38,8 +38,8 @@ &--checked { color: #fff; - border-color: @primary-color; - background-color: @primary-color; + border-color: @brand-color; + background-color: @brand-color; } &--disabled { diff --git a/style/mobile/components/radio/_var.less b/style/mobile/components/radio/_var.less index 1035e80164..d38008417c 100644 --- a/style/mobile/components/radio/_var.less +++ b/style/mobile/components/radio/_var.less @@ -1,16 +1,16 @@ -@radio-title-font-size: @font-size * 1.6; +@radio-title-font-size: calc(@font-size * 1.6); -@radio-title-font-color: @text-level-1-color; +@radio-title-font-color: @text-color-primary; -@radio-content-font-size: @font-size * 1.4; +@radio-content-font-size: calc(@font-size * 1.4); -@radio-title-color: @text-level-1-color; +@radio-title-color: @text-color-primary; -@radio-content-color: @text-level-3-color; +@radio-content-color: @text-color-placeholder; @radio-border-color: @gray-color-4; -@radio-selected-color: @primary-color; +@radio-selected-color: @brand-color; @radio-disable-color: @gray-color-4; @@ -26,7 +26,7 @@ @radio-icon-wrap-height: 24px; -@radio-icon-wrap-font-size: @font-size * 2.4; +@radio-icon-wrap-font-size: calc(@font-size * 2.4); @radio-icon-wrap-margin-right: 10px; diff --git a/style/mobile/components/radio/v2/_index.less b/style/mobile/components/radio/v2/_index.less new file mode 100644 index 0000000000..64f49134e6 --- /dev/null +++ b/style/mobile/components/radio/v2/_index.less @@ -0,0 +1,174 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-radio { + position: relative; + display: inline-flex; + vertical-align: middle; + font-size: @radio-font-size; + background: @radio-bg-color; + + &:focus { + outline: 0; + } + + &--block { + display: flex; + padding: @radio-vertical-padding; + } + + &--right { + flex-direction: row-reverse; + } + + &__icon { + position: relative; + width: @radio-icon-size; + height: @radio-icon-size; + font-size: @radio-icon-size; + color: @radio-icon-color; + overflow: hidden; + + &:empty { + display: none; + } + + &--left { + margin-right: 8px; + } + + &--checked { + color: @radio-icon-checked-color; + } + + &--disabled { + cursor: not-allowed; + color: @radio-icon-disabled-color; + } + + &-circle { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @radio-icon-disabled-bg-color; + } + } + + &-dot { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-checked-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + &::after { + content: ""; + display: block; + width: 24px; + height: 24px; + background: @radio-icon-checked-color; + border-radius: 50%; + } + + &--disabled { + border-color: @radio-icon-disabled-color; + + &::after { + background: @radio-icon-disabled-color; + } + } + } + } + + &__image { + line-height: @radio-icon-size; + } + + &-icon__image { + height: @radio-icon-size; + width: @radio-icon-size; + vertical-align: sub; + } + + &__content { + flex: 1; + + &:empty { + display: none; + } + } + + &__title { + .limit-title-row(); + + color: @radio-label-color; + line-height: @radio-label-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-label-disabled-color; + } + } + + &__description { + .limit-title-row(); + + color: @radio-content-color; + font-size: 14px; + line-height: @radio-content-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-content-disabled-color; + } + + &:empty { + display: none; + } + } + + &__title + &__description { + margin-top: 4px; + } + + &__border { + position: absolute; + bottom: 0; + height: 1px; + background: @radio-border-color; + left: 48px; + right: 0; + transform: scaleY(.5); + + &--right { + left: 16px; + } + } + + // mobile vue + &__original { + opacity: 0; + width: 0; + height: 0; + } + + &__icon-wrap { + display: block; + } +} diff --git a/style/mobile/components/radio/v2/_var.less b/style/mobile/components/radio/v2/_var.less new file mode 100644 index 0000000000..d0dd6129ff --- /dev/null +++ b/style/mobile/components/radio/v2/_var.less @@ -0,0 +1,15 @@ +@radio-icon-size: var(--td-radio-icon-size, 24px); +@radio-font-size: var(--td-radio-font-size, 16px); +@radio-label-line-height: var(--td-radio-label-line-height, 24px); +@radio-content-line-height: var(--td-radio-content-line-height, 22px); +@radio-vertical-padding: var(--td-radio-vertical-padding, 16px); +@radio-bg-color: var(--td-radio-bg-color, @bg-color-container); +@radio-border-color: var(--td-radio-border-color, @component-stroke); +@radio-label-color: var(--td-radio-label-color, @font-gray-1); +@radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled); +@radio-content-color: var(--td-radio-content-color, @font-gray-2); +@radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled); +@radio-icon-color: var(--td-radio-icon-color, @component-border); +@radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled); +@radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled); +@radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color); diff --git a/style/mobile/components/rate/_var.less b/style/mobile/components/rate/_var.less index 9e0fd0377a..25bc51a9a7 100644 --- a/style/mobile/components/rate/_var.less +++ b/style/mobile/components/rate/_var.less @@ -1,7 +1,7 @@ @rate-bg-color-default: #E3E6EB; @rate-bg-color-selected: #EA7029; @rate-icon-size: 20px; -@rate-space: @spacer-2; +@rate-space: @spacer; @rate-text-font-size: 16px; -@rate-text-color: @text-level-2-color; +@rate-text-color: @text-color-secondary; @rate-text-margin-left: 14px; diff --git a/style/mobile/components/rate/v2/_index.less b/style/mobile/components/rate/v2/_index.less new file mode 100644 index 0000000000..482ba655d7 --- /dev/null +++ b/style/mobile/components/rate/v2/_index.less @@ -0,0 +1,105 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-rate { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + + &__wrapper { + line-height: 1em; + display: inline-flex; + } + + &__icon { + display: block; + line-height: 1em; + width: 1em; + transition: transform .3s ease; + position: relative; + + &-left { + position: absolute; + width: 50%; + overflow: hidden; + top: 0; + left: 0; + + &--selected { + color: @rate-selected-color; + } + + &--unselected { + color: @rate-unselected-color; + } + } + + &--current { + transform: scale(@rate-icon-scale); + } + + &--selected { + color: @rate-selected-color; + + &-half { + color: transparent; + background: linear-gradient( + to right, + @rate-selected-color 0%, + @rate-selected-color 50%, + @rate-unselected-color 51%, + @rate-unselected-color 100% + ); + background-clip: text; + } + } + + &--unselected { + color: @rate-unselected-color; + } + } + + &__text { + font-size: @rate-text-font-size; + color: @rate-text-color; + margin-left: 16px; + vertical-align: middle; + + &--active { + color: @rate-text-active-color; + font-weight: @rate-text-active-font-weight; + } + } + + &__tips { + position: absolute; + display: flex; + align-items: center; + bottom: calc(100% + 8px); + padding: 4px; + border-radius: 6px; + box-shadow: @shadow-1; + background-color: @bg-color-container; + transform: translateX(-50%); + + &-item { + display: flex; + flex-direction: column; + align-items: center; + width: 32px; + border-radius: 3px; + + &--active { + background-color: @bg-color-secondarycontainer; + } + } + + &-text { + text-align: center; + font-size: 12px; + line-height: 20px; + } + } +} diff --git a/style/mobile/components/rate/v2/_var.less b/style/mobile/components/rate/v2/_var.less new file mode 100644 index 0000000000..038231b6a4 --- /dev/null +++ b/style/mobile/components/rate/v2/_var.less @@ -0,0 +1,7 @@ +@rate-text-font-size: var(--td-rate-text-font-size, @font-size-m); +@rate-text-color: var(--td-rate-text-color, @font-gray-4); +@rate-text-active-color: var(--td-rate-text-active-color, @font-gray-1); +@rate-selected-color: var(--td-rate-selected-color, @warning-color); +@rate-unselected-color: var(--td-rate-unselected-color, @bg-color-secondarycomponent); +@rate-text-active-font-weight: var(--td-rate-text-active-font-weight, 600); +@rate-icon-scale: var(--td-rate-icon-scale, 1.33); diff --git a/style/mobile/components/result/_index.less b/style/mobile/components/result/_index.less index d0bfe666eb..6dbb04bf8d 100644 --- a/style/mobile/components/result/_index.less +++ b/style/mobile/components/result/_index.less @@ -19,7 +19,7 @@ } &__thumb + &__title:not(:empty) { - margin-top: @spacer * 2; + margin-top: @spacer; } &__description { @@ -30,7 +30,7 @@ } &__title + &__description:not(:empty) { - margin-top: @spacer * 3; + margin-top: @spacer-1; } // theme diff --git a/style/mobile/components/result/_var.less b/style/mobile/components/result/_var.less index 7ef1e238c4..78ed09a593 100644 --- a/style/mobile/components/result/_var.less +++ b/style/mobile/components/result/_var.less @@ -1,9 +1,9 @@ @result-title-font: @font-size-l; -@result-title-line-height: @font-size * 2.8; +@result-title-line-height: calc(@font-size * 2.8); @result-title-color: rgba(0, 0, 0, .9); -@result-description-font: @font-size * 1.4; -@result-description-line-height: @font-size * 2.2; +@result-description-font: calc(@font-size * 1.4); +@result-description-line-height: calc(@font-size * 2.2); @result-description-color: rgba(0, 0, 0, .6); @result-default-color: #0052d9; diff --git a/style/mobile/components/result/v2/_index.less b/style/mobile/components/result/v2/_index.less new file mode 100644 index 0000000000..85216a982e --- /dev/null +++ b/style/mobile/components/result/v2/_index.less @@ -0,0 +1,54 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-result { + display: flex; + flex-direction: column; + align-items: center; + + &__icon { + font-size: @result-icon-font-size; + } + + &__title { + line-height: @result-title-line-height; // 标题行高 + font-size: @result-title-font-size; // 标题文字大小 + font-weight: 700; + color: @result-title-color; // 标题颜色 + } + + &__thumb:not(:empty) + &__title:not(:empty) { + margin-top: @result-title-margin-top; // 标题内容上边距 + } + + &__description { + text-align: center; + color: @result-description-color; // 描述颜色 + font-size: @result-description-font-size; // 描述文字大小 + line-height: @result-description-line-height; // 描述行高 + } + + &__title + &__description:not(:empty) { + margin-top: @result-description-margin-top; // 描述内容上边距 + } + + // theme + &--theme { + &-default { + color: @result-icon-default-color; // 默认状态图标颜色 + } + + &-success { + color: @result-icon-success-color; // 成功状态图标颜色 + } + + &-warning { + color: @result-icon-warning-color; // 警示状态图标颜色 + } + + &-error { + color: @result-icon-error-color; // 失败状态图标颜色 + } + } +} diff --git a/style/mobile/components/result/v2/_var.less b/style/mobile/components/result/v2/_var.less new file mode 100644 index 0000000000..ea73a42d14 --- /dev/null +++ b/style/mobile/components/result/v2/_var.less @@ -0,0 +1,17 @@ +@result-icon-font-size: 80px; + +@result-title-font-size: var(--td-result-title-font-size, @font-size-l); +@result-title-line-height: var(--td-result-title-line-height, 28px); +@result-title-color: var(--td-result-title-color, @font-gray-1); + +@result-description-font-size: var(--td-result-description-font-size, @font-size-base); +@result-description-line-height: var(--td-result-description-line-height, 22px); +@result-description-color: var(--td-result-description-color, @font-gray-2); + +@result-icon-default-color: var(--td-result-icon-default-color, @brand-color); +@result-icon-success-color: var(--td-result-icon-success-color, @success-color); +@result-icon-warning-color: var(--td-result-icon-warning-color, @warning-color); +@result-icon-error-color: var(--td-result-icon-error-color, @error-color); + +@result-title-margin-top: var(--td-result-title-margin-top, @spacer-1); +@result-description-margin-top: var(--td-result-description-margin-top, @spacer); diff --git a/style/mobile/components/search/_index.less b/style/mobile/components/search/_index.less index 081747f3aa..f659d6fa2d 100644 --- a/style/mobile/components/search/_index.less +++ b/style/mobile/components/search/_index.less @@ -80,7 +80,7 @@ transform: translateX(-100%) translateY(-50%); font-size: 24px; line-height: 1; - color: @text-level-3-color; + color: @text-color-placeholder; } &__label-icon-search { @@ -95,7 +95,7 @@ right: 12px; font-size: 24px; line-height: 1; - color: @text-level-3-color; + color: @text-color-placeholder; } &__cancel-button { @@ -104,7 +104,7 @@ color: @search-cancel-button-text-color; padding: @search-cancel-button-padding; margin-left: @search-cancel-button-margin-left; - margin-right: -@search-cancel-button-margin-left; + margin-right: calc(-@search-cancel-button-margin-left); } &.@{prefix}-is-focused { diff --git a/style/mobile/components/search/_var.less b/style/mobile/components/search/_var.less index 5500fe6463..afe05c3477 100644 --- a/style/mobile/components/search/_var.less +++ b/style/mobile/components/search/_var.less @@ -1,6 +1,6 @@ -@search-vertical-padding: @spacer-2; +@search-vertical-padding: @spacer; -@search-horizontal-padding: @spacer-4; +@search-horizontal-padding: @spacer-2; @search-background-color: #FFFFFF; @@ -8,24 +8,24 @@ @search-input-background-color: #F5F5F5; -@search-input-horizontal-padding: @spacer-2; +@search-input-horizontal-padding: @spacer; @search-input-border-radius: 4px; -@search-text-color: @text-level-1-color; +@search-text-color: @text-color-primary; @search-text-size: 16px; -@search-placeholder-text-color: @text-level-3-color; +@search-placeholder-text-color: @text-color-placeholder; @search-placeholder-text-size: 16px; -@search-placeholder-text-margin-left: @spacer-2; +@search-placeholder-text-margin-left: @spacer; @search-cancel-button-text-size: 16px; -@search-cancel-button-text-color: @primary-color; +@search-cancel-button-text-color: @brand-color; -@search-cancel-button-padding: @spacer-2; +@search-cancel-button-padding: @spacer; -@search-cancel-button-margin-left: @spacer-2; +@search-cancel-button-margin-left: @spacer; diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less new file mode 100644 index 0000000000..64d4af6d45 --- /dev/null +++ b/style/mobile/components/search/v2/_index.less @@ -0,0 +1,86 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-search { + display: flex; + justify-content: space-between; + align-items: center; + + &__label { + padding: 4px; + color: @search-label-color; + } + + &--center { + text-align: center; + } + + &__input-box { + flex: 1; + box-sizing: border-box; + display: flex; + height: @search-height; + align-items: center; + border: 1px solid @search-bg-color; + background: @search-bg-color; + padding: @search-padding; + + &.@{prefix}-is-focused { + border-color: @search-bg-color; + } + + &--round { + border-radius: @search-round-radius; + } + + &--square { + border-radius: @search-square-radius; + } + + .@{prefix}-input__keyword { + display: inline-block; + flex: 1; + color: @search-text-color; + font-size: @search-font-size; + padding-left: 5px; + border: 0; + background: 0; + } + + .@{prefix}-icon { + color: @search-icon-color; + } + } + + &__clear { + position: relative; + margin-left: 10px; + color: @search-clear-icon-color; + .hotspot-expanded(); + } + + &__search-action { + margin-left: 15px; + font-size: @search-font-size; + color: @search-action-color; + } + + &__placeholder { + color: @search-placeholder-color; + } + + // mobile vue + /* stylelint-disable-next-line */ + input::-webkit-input-placeholder, + input::placeholder { + color: @search-placeholder-color; + } + + input::-webkit-search-decoration, + input::-webkit-search-cancel-button, + input::-webkit-search-results-button, + input::-webkit-search-results-decoration { + display: none; + } +} diff --git a/style/mobile/components/search/v2/_var.less b/style/mobile/components/search/v2/_var.less new file mode 100644 index 0000000000..8462a6d075 --- /dev/null +++ b/style/mobile/components/search/v2/_var.less @@ -0,0 +1,12 @@ +@search-bg-color: var(--td-search-bg-color, @bg-color-secondarycontainer); +@search-text-color: var(--td-search-text-color, @font-gray-1); +@search-label-color: var(--search-label-color, @font-gray-1); +@search-font-size: var(--td-search-font-size, @font-size-m); +@search-height: var(--td-search-height, 40px); +@search-padding: var(--td-search-padding, 8px 12px); +@search-placeholder-color: var(--td-search-placeholder-color, @font-gray-3); +@search-icon-color: var(--td-search-icon-color, @font-gray-3); +@search-square-radius: var(--td-search-square-radius, @radius-default); +@search-round-radius: calc(@search-height / 2); +@search-action-color: var(--td-search-action-color, @brand-color); +@search-clear-icon-color: var(--td-search-clear-icon-color, @font-gray-3); diff --git a/style/mobile/components/side-bar-item/v2/_index.less b/style/mobile/components/side-bar-item/v2/_index.less new file mode 100644 index 0000000000..d646a8e0b8 --- /dev/null +++ b/style/mobile/components/side-bar-item/v2/_index.less @@ -0,0 +1,78 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-side-bar-item { + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 16px; + font-size: @side-bar-font-size; + color: @side-bar-color; + background: @side-bar-bg-color; + min-height: @side-bar-item-height; + box-sizing: border-box; + white-space: wrap; + line-height: @side-bar-item-line-height; + + &--active { + font-weight: 600; + background: @bg-color-container; + color: @side-bar-active-color; + } + + &__icon { + font-size: @side-bar-icon-size; + margin-right: 2px; + } + + &__prefix, + &__suffix { + z-index: 1; + position: absolute; + right: 0; + width: calc(@side-bar-border-radius * 2); + height: calc(@side-bar-border-radius * 2); + background: #fff; + + &::after { + content: ""; + display: block; + width: 100%; + height: 100%; + background-color: @side-bar-bg-color; + } + } + + &__prefix { + top: calc(@side-bar-border-radius * -2); + + &::after { + border-bottom-right-radius: @side-bar-border-radius; + } + } + + &__suffix { + bottom: calc(@side-bar-border-radius * -2); + + &::after { + border-top-right-radius: @side-bar-border-radius; + } + } + + &--disabled { + color: @side-bar-disabled-color; + } + + &__line { + width: 3px; + height: 14px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + background: @side-bar-active-color; + border-radius: 4px; + } +} diff --git a/style/mobile/components/side-bar-item/v2/_var.less b/style/mobile/components/side-bar-item/v2/_var.less new file mode 100644 index 0000000000..a79d5e4c42 --- /dev/null +++ b/style/mobile/components/side-bar-item/v2/_var.less @@ -0,0 +1,9 @@ +@side-bar-color: var(--td-side-bar-color, @font-gray-1); +@side-bar-font-size: var(--td-side-bar-font-size, 16px); +@side-bar-item-height: var(--td-side-bar-item-height, 56px); +@side-bar-item-line-height: var(--td-side-bar-item-line-height, 24px); +@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); +@side-bar-disabled-color: var(--td-side-bar-disabled-color, @font-gray-4); +@side-bar-active-color: var(--td-side-bar-active-color, @brand-color); +@side-bar-border-radius: var(--td-side-bar-border-radius, 9px); +@side-bar-icon-size: var(--td-side-bar-icon-size, 20px); diff --git a/style/mobile/components/side-bar/v2/_index.less b/style/mobile/components/side-bar/v2/_index.less new file mode 100644 index 0000000000..64a50f818e --- /dev/null +++ b/style/mobile/components/side-bar/v2/_index.less @@ -0,0 +1,16 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-side-bar { + display: flex; + flex-direction: column; + width: @side-bar-width; + height: @side-bar-height; + overflow-y: auto; + + &__padding { + flex: 1; + background-color: @side-bar-bg-color; + } +} diff --git a/style/mobile/components/side-bar/v2/_var.less b/style/mobile/components/side-bar/v2/_var.less new file mode 100644 index 0000000000..6c275700f8 --- /dev/null +++ b/style/mobile/components/side-bar/v2/_var.less @@ -0,0 +1,3 @@ +@side-bar-width: var(--td-side-bar-width, 103px); +@side-bar-height: var(--td-side-bar-height, 100%); +@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer); diff --git a/style/mobile/components/skeleton/v2/_index.less b/style/mobile/components/skeleton/v2/_index.less new file mode 100644 index 0000000000..e6b131cdad --- /dev/null +++ b/style/mobile/components/skeleton/v2/_index.less @@ -0,0 +1,108 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-skeleton { + box-sizing: border-box; + + &__row { + display: flex; + margin-bottom: @skeleton-row-spacing; // 骨架屏行间距 + align-items: center; + justify-content: space-between; + } + + &__row:only-child, + &__row:last-child { + margin-bottom: 0; + } + + &__col { + background-color: @skeleton-bg-color; // 骨架屏背景颜色 + display: flex; + align-items: center; + justify-content: center; + + &:first-child:last-child, + &:last-child { + margin-right: 0; + } + } + + &--type { + &-text { + width: 100%; + height: @skeleton-text-height; // 'text'类型骨架屏列高 + border-radius: @skeleton-text-border-radius; // 'text'类型骨架屏列圆角 + } + + &-rect { + width: 100%; + height: @skeleton-rect-height; // 'rect'类型骨架屏列高 + border-radius: @skeleton-rect-border-radius; // rect'类型骨架屏列圆角 + } + + &-circle { + width: @skeleton-circle-height; // 'circle'类型骨架屏列宽 + height: @skeleton-circle-height; // 'circle'类型骨架屏列高 + border-radius: var( + --td-skeleton-circle-border-radius, + @skeleton-circle-border-radius + ); // 'circle'类型骨架屏列圆角 + + flex-shrink: 0; + } + } + + &--animation { + &-gradient { + position: relative; + overflow-x: hidden; + + &::after { + content: " "; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0%), + @skeleton-animation-gradient, + rgba(255, 255, 255, 0%) + ); + animation: t-skeleton--gradient 1.5s linear 2s infinite; + } + } + + &-flashed { + animation: t-skeleton--flashed 2s linear 2s infinite; + } + } + + @keyframes t-skeleton--gradient { + 0% { + transform: translateX(-100%) skewX(-15deg); + } + + 100% { + transform: translateX(100%) skewX(-15deg); + } + } + + @keyframes t-skeleton--flashed { + 0% { + opacity: 1; + } + + 50% { + background-color: @skeleton-animation-flashed; + opacity: .3; + } + + 100% { + opacity: 1; + } + } +} diff --git a/style/mobile/components/skeleton/v2/_var.less b/style/mobile/components/skeleton/v2/_var.less new file mode 100644 index 0000000000..b2f02bb1e9 --- /dev/null +++ b/style/mobile/components/skeleton/v2/_var.less @@ -0,0 +1,10 @@ +@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 4%)); +@skeleton-animation-flashed: var(--td-skeleton-animation-flashed, rgba(90%, 90%, 90%, .3)); +@skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-page); +@skeleton-row-spacing: var(--td-skeleton-row-spacing, @spacer-2); +@skeleton-text-height: var(--td-skeleton-text-height, 16px); +@skeleton-rect-height: var(--td-skeleton-rect-height, 16px); +@skeleton-circle-height: var(--td-skeleton-circle-height, 48px); +@skeleton-text-border-radius: var(--td-skeleton-text-border-radius, @radius-small); +@skeleton-rect-border-radius: var(--td-skeleton-rect-border-radius, @radius-default); +@skeleton-circle-border-radius: var(--td-skeleton-circle-border-radius, @radius-circle); diff --git a/style/mobile/components/slider/_index.less b/style/mobile/components/slider/_index.less index e59b355c31..1a8a16167a 100644 --- a/style/mobile/components/slider/_index.less +++ b/style/mobile/components/slider/_index.less @@ -38,7 +38,7 @@ height: @slider-hander-height; margin-top: (-@slider-hander-height / 2); background-color: #fff; - border: solid 2px @primary-color; + border: solid 2px @brand-color; border-radius: 50%; transform: translateX(-50%); transition: border-color .3s, transform .3s cubic-bezier(.18, .89, .32, 1.28); @@ -79,7 +79,7 @@ } &.@{prefix}-is-active::after { - background-color: @primary-color; + background-color: @brand-color; } } } @@ -94,16 +94,16 @@ } &__value { - min-width: @spacer * 3; + min-width: @spacer-1; margin-left: @slider-value-margin-left; flex-shrink: 0; color: @slider-value-color; font-size: @slider-value-font-size; &--left { - min-width: @spacer * 3; + min-width: @spacer-1; margin-left: 0; - margin-right: @spacer * 4; + margin-right: @spacer-2; flex-shrink: 0; color: @slider-value-color; font-size: @slider-value-font-size; diff --git a/style/mobile/components/slider/_var.less b/style/mobile/components/slider/_var.less index d51cded255..8078987717 100644 --- a/style/mobile/components/slider/_var.less +++ b/style/mobile/components/slider/_var.less @@ -1,16 +1,16 @@ -@slider-track-bg-color:@primary-color; -@slider-bar-bg-color: @border-level-1-color; +@slider-track-bg-color: @brand-color; +@slider-bar-bg-color: @component-stroke; @slider-bar-height:2px; @slider-hander-height: 20px; @slider-hander-width: 20px; @slider-font-size-base:@font-size-base; -@slider-value-color: @text-level-1-color; +@slider-value-color: @text-color-primary; @slider-value-font-size: @font-size-l; -@slider-mark-text-color: @text-level-1-color; +@slider-mark-text-color: @text-color-primary; @slider-title-font-size: @font-size-l; -@slider-title-color: @text-level-1-color; -@slider-title-margin-right: @spacer-4; -@slider-value-margin-left: @spacer-4; -@slider-disabled-color: @primary-color-3; +@slider-title-color: @text-color-primary; +@slider-title-margin-right: @spacer-2; +@slider-value-margin-left: @spacer-2; +@slider-disabled-color: @brand-color-3; -@slider-disabled-text-color: @text-level-4-color; +@slider-disabled-text-color: @text-color-disabled; diff --git a/style/mobile/components/slider/v2/_index.less b/style/mobile/components/slider/v2/_index.less new file mode 100644 index 0000000000..cc5229b3cb --- /dev/null +++ b/style/mobile/components/slider/v2/_index.less @@ -0,0 +1,204 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{slider} { + font-size: 14px; + display: flex; + align-items: center; + + &--disabled { + .@{slider}__value, + .@{slider}__range-extreme, + .@{slider}__dot-value, + .@{slider}__scale-desc { + color: @slider-disabled-text-color; + } + } + + &--top { + padding-top: 20px; + } + + &__line { + position: absolute; + top: 0; + height: @slider-bar-height; + border-radius: calc(@slider-bar-height / 2); + background-color: @slider-active-color; + + &--disabled { + background-color: @slider-active-disabled-color; + } + + &--capsule { + height: @slider-capsule-line-heihgt; + } + + &--capsule&--single { + border-top-left-radius: calc(@slider-capsule-line-heihgt / 2); + border-bottom-left-radius: calc(@slider-capsule-line-heihgt / 2); + } + } + + &__dot { + border-radius: 50%; + border: 1px solid @slider-dot-color; + position: absolute; + top: 50%; + right: 0; + transform: translate3d(50%, -50%, 0); + z-index: 2; + background-color: @slider-dot-bg-color; + width: @slider-dot-size; + height: @slider-dot-size; + box-shadow: @shadow-1; + box-sizing: border-box; + + &--left { + left: 0; + transform: translate3d(-50%, -50%, 0); + } + + &-value { + position: relative; + left: 50%; + transform: translateX(-50%); + top: -26px; + text-align: center; + width: 48px; + height: 22px; + line-height: 22px; + } + } + + &__value, + &__range-extreme, + &__dot-value { + color: rgba(0, 0, 0, 90%); + + &--sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; + } + } + + &__dot-slider { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + } + + &__value--min { + margin-left: 16px; + } + + &__value--max { + margin-right: 16px; + } + + &__value--right { + flex-basis: 40px; + + &__value--text { + margin-right: 16px; + text-align: right; + display: block; + } + } + + &__bar { + margin: 8px 16px; + flex: 10; + background-clip: content-box; + height: @slider-bar-height; + border-radius: calc(@slider-bar-height / 2); + position: relative; + background-color: @slider-default-color; + + &--capsule { + height: @slider-capsule-bar-heihgt; + border-radius: calc(@slider-capsule-bar-heihgt / 2); + background-color: @slider-capsule-bar-color; + border: 3px solid @slider-capsule-bar-color; + box-sizing: border-box; + } + + &--marks { + background-color: @slider-default-color; + } + + &--disabled { + background-color: @slider-default-disabled-color; + } + } + + &__range-extreme--min { + margin-left: 16px; + text-align: left; + } + + &__range-extreme--max { + margin-right: 16px; + text-align: right; + } + + // 刻度样式 + &__scale { + &-item { + background-color: @slider-default-color; + height: 8px; + width: 8px; + border-radius: 50%; + position: absolute; + top: 50%; + margin-top: -4px; + z-index: 1; + + &--active { + background-color: @slider-active-color; + } + + &--disabled { + background-color: @slider-default-disabled-color; + } + + &--active&--disabled { + background-color: @slider-active-disabled-color; + } + + &--capsule { + height: @slider-capsule-line-heihgt; + width: 2px; + border-radius: 0; + background-color: @slider-capsule-bar-color; + margin-top: calc(-.5 * @slider-capsule-line-heihgt); + } + + &--hidden { + background-color: transparent; + } + } + + &-desc { + position: absolute; + left: 50%; + color: rgba(0, 0, 0, 90%); + transform: translateX(-50%); + bottom: 16px; + + &--capsule { + bottom: 23px; + } + } + } +} diff --git a/style/mobile/components/slider/v2/_var.less b/style/mobile/components/slider/v2/_var.less new file mode 100644 index 0000000000..63e97413eb --- /dev/null +++ b/style/mobile/components/slider/v2/_var.less @@ -0,0 +1,15 @@ +@slider: ~"@{prefix}-slider"; +@slider-bar-height: var(--td-slider-bar-height, 4px); +@slider-dot-bg-color: var(--td-slider-dot-bg-color, @bg-color-container); +@slider-dot-size: var(--td-slider-dot-size, 20px); +@slider-dot-color: var(--td-slider-dot-color, @bg-color-secondarycontainer); +@slider-default-color: var(--td-slider-default-color, @bg-color-secondarycomponent); +@slider-default-disabled-color: var(--td-slider-default-color, @bg-color-component-disabled); +@slider-active-color: var(--td-slider-active-color, @brand-color); +@slider-active-disabled-color: var(--td-slider-disabled-color, @brand-color-disabled); +@slider-disabled-text-color: var(--td-slider-disabled-text-color, @font-gray-4); + +// capsule +@slider-capsule-bar-heihgt: var(--td-slider-capsule-bar-heihgt, 24px); +@slider-capsule-bar-color: var(--td-slider-capsule-bar-color, @bg-color-component); +@slider-capsule-line-heihgt: var(--td-slider-capsule-line-heihgt, 18px); diff --git a/style/mobile/components/step-item/v2/_index.less b/style/mobile/components/step-item/v2/_index.less new file mode 100644 index 0000000000..c5b0100a1a --- /dev/null +++ b/style/mobile/components/step-item/v2/_index.less @@ -0,0 +1,194 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.color-generate() { + @status: default, process, finish, error; + each(@status, { + @bgVar: ~"step-item-@{value}-circle-bg"; + @colorVar: ~"step-item-@{value}-circle-color"; + @titleColorVar: ~"step-item-@{value}-title-color"; + @iconColorVar: ~"step-item-@{value}-icon-color"; + @dotBorderColorVar: ~"step-item-@{value}-dot-border-color"; + + &__circle--@{value} { + color: @@colorVar; + background-color: @@bgVar; + } + + &__title--@{value} { + color: @@titleColorVar; + } + + &__icon--@{value} { + color: @@iconColorVar; + } + + &__dot--@{value} { + border-color: @@dotBorderColorVar; + } + }); +} + +.@{item} { + flex: 1; + vertical-align: top; + position: relative; + display: flex; + + .color-generate(); + + &--horizontal { + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__anchor { + display: flex; + align-items: center; + justify-content: center; + + &--vertical { + width: @step-item-circle-size; + height: @step-item-circle-size; + } + } + + &__circle { + display: flex; + justify-content: center; + align-items: center; + width: @step-item-circle-size; + height: @step-item-circle-size; + text-align: center; + border-radius: 50%; + font-size: @step-item-circle-font-size; + } + + &__icon { + z-index: 1; + vertical-align: top; + font-size: @font-size-base; + position: relative; + + &--finsh, + &--process { + color: @brand-color; + } + } + + &__dot { + width: @step-item-dot-size; + height: @step-item-dot-size; + border-radius: 50%; + border-width: 1px; + border-style: solid; + box-sizing: border-box; + + &--finish { + background-color: @step-item-process-dot-border-color; + } + + &--error { + background-color: @step-item-error-dot-border-color; + } + } + + &__content { + text-align: center; + + &--horizontal { + max-width: 80px; + margin-top: 8px; + } + + &--vertical { + margin-left: 8px; + flex: 1; + padding-bottom: 16px; + } + + &--vertical&--last { + padding-bottom: 0; + } + } + + &__title { + position: relative; + line-height: @step-item-circle-size; + font-size: @font-size-base; + + &--process { + font-weight: 600; + } + + &--vertical { + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; + } + } + + &__description { + color: @step-item-descrition-color; + line-height: 20px; + font-size: @font-size-s; + + &--vertical { + text-align: left; + } + } + + &__extra { + &:not(:empty) { + margin-top: 8px; + } + } + + &__line { + background-color: @step-item-line-color; + content: ""; + display: block; + position: absolute; + + &--horizontal { + height: 1px; + transform: translateY(-50%); + width: calc(100% - 16px - @step-item-circle-size); + top: calc(@step-item-circle-size / 2 + 1px); + left: calc(50% + @step-item-circle-size / 2 + 8px); + } + + &--horizontal&--dot { + top: calc(@step-item-dot-size / 2); + } + + &--finish { + background-color: @step-item-finish-line-color; + } + + &--vertical { + height: calc(100% - 16px - @step-item-circle-size); + width: 1px; + transform: translateX(-50%); + left: calc(@step-item-circle-size / 2); + top: calc(@step-item-circle-size + 8px); + } + + &--vertical&--dot { + top: @step-item-circle-size; + height: calc(100% - @step-item-circle-size); + } + } +} + +:host { + flex: 1; + vertical-align: top; + position: relative; + align-self: flex-start; + width: inherit; +} diff --git a/style/mobile/components/step-item/v2/_var.less b/style/mobile/components/step-item/v2/_var.less new file mode 100644 index 0000000000..e434e98e24 --- /dev/null +++ b/style/mobile/components/step-item/v2/_var.less @@ -0,0 +1,35 @@ +@step-item-dot-size: var(--td-step-item-dot-size, 8px); +@step-item-circle-size: var(--td-step-item-circle-size, 22px); +@step-item-circle-font-size: var(--td-step-item-circle-font-size, 14px); +@step-item-descrition-color: var(--td-step-item-descrition-color, @font-gray-3); + +@step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer); +@step-item-default-circle-color: var(--td-step-item-default-circle-color, @font-gray-3); +@step-item-default-title-color: var(--td-step-item-default-title-color, @font-gray-3); +@step-item-default-icon-color: var(--td-step-item-default-icon-color, @font-gray-3); +@step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border); + +@step-item-process-circle-color: var(--td-step-item-process-circle-color, @font-white-1); +@step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color); +@step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color); +@step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color); +@step-item-process-dot-border-color: var(--td-step-item-process-dot-border-color, @brand-color); + +@step-item-finish-circle-color: var(--td-step-item-finish-circle-color, @brand-color); +@step-item-finish-circle-bg: var(--td-step-item-finish-circle-bg, @brand-color-light); +@step-item-finish-title-color: var(--td-step-item-finish-title-color, @font-gray-1); +@step-item-finish-icon-color: var(--td-step-item-finish-icon-color, @brand-color); +@step-item-finish-dot-border-color: var(--td-step-item-finish-dot-border-color, @brand-color); + +@step-item-error-circle-color: var(--td-step-item-error-circle-color, @error-color); +@step-item-error-circle-bg: var(--td-step-item-error-circle-bg, @error-color-1); +@step-item-error-title-color: var(--td-step-item-error-title-color, @error-color); +@step-item-error-icon-color: var(--td-step-item-error-icon-color, @error-color); +@step-item-error-dot-border-color: var(--td-step-item-error-dot-border-color, @error-color); + +@step-item-line-color: var(--td-step-item-line-color, @component-border); +@step-item-finish-line-color: var(--td-step-item-finish-line-color, @brand-color); + +@step: ~"@{prefix}-step"; +@steps: ~"@{step}s"; +@item: ~"@{steps}-item"; diff --git a/style/mobile/components/stepper/_var.less b/style/mobile/components/stepper/_var.less index 9dc7c7f0d8..bacae4cee1 100644 --- a/style/mobile/components/stepper/_var.less +++ b/style/mobile/components/stepper/_var.less @@ -8,7 +8,7 @@ @stepper-input-height: 24px; -@stepper-input-color: @text-level-1-color; +@stepper-input-color: @text-color-primary; @stepper-input-font-size: 16px; @@ -16,11 +16,11 @@ @stepper-button-height: 24px; -@stepper-icon-color: @text-level-1-color; +@stepper-icon-color: @text-color-primary; -@stepper-icon-color-disabled: @text-level-4-color; +@stepper-icon-color-disabled: @text-color-disabled; -@stepper-color-disabled: @text-level-4-color; +@stepper-color-disabled: @text-color-disabled; @stepper-pure-icon-width: 9px; diff --git a/style/mobile/components/stepper/v2/_index.less b/style/mobile/components/stepper/v2/_index.less new file mode 100644 index 0000000000..2b5a30277d --- /dev/null +++ b/style/mobile/components/stepper/v2/_index.less @@ -0,0 +1,135 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +@stepper: ~"@{prefix}-stepper"; + +.@{stepper} { + display: flex; + align-items: center; + color: @stepper-input-color; + + &__minus, + &__plus { + padding: 4px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + } + + &__input, + &__minus-icon, + &__plus-icon { + color: inherit; + font-size: inherit; + } + + &__input--normal, + &__input--filled, + &__input--outline { + height: inherit; + box-sizing: border-box; + } + + &--small { + height: @stepper-small-height; + font-size: @stepper-small-font-size; + } + + &--medium { + height: @stepper-medium-height; + font-size: @stepper-medium-font-size; + } + + &--large { + height: @stepper-large-height; + font-size: @stepper-large-font-size; + } + + &__input { + text-align: center; + border: 0; + vertical-align: top; + background: 0; + height: inherit; + min-height: inherit; + } + + &__input--normal, + &__input--filled { + margin: 0 4px; + } + + &__input--small { + width: @stepper-small-input-width; + } + + &__input--medium { + height: @stepper-medium-height; + width: @stepper-medium-input-width; + } + + &__input--large { + width: @stepper-large-input-width; + } + + &__icon--small { + width: @stepper-small-height; + height: @stepper-small-height; + font-size: @stepper-small-icon-size; + } + + &__icon--medium { + width: @stepper-medium-height; + height: @stepper-medium-height; + font-size: @stepper-medium-icon-size; + } + + &__icon--large { + width: @stepper-large-height; + height: @stepper-large-height; + font-size: @stepper-large-icon-size; + } + + &__minus--outline, + &__plus--outline { + border: @stepper-border-width solid @stepper-border-color; + } + + &__input--outline { + padding: 0 4px; + border: none; + border-top: @stepper-border-width solid @stepper-border-color; + border-bottom: @stepper-border-width solid @stepper-border-color; + } + + &__minus--outline, + &__minus--filled { + border-radius: @stepper-border-radius 0 0 @stepper-border-radius; + } + + &__plus--outline, + &__plus--filled { + border-radius: 0 @stepper-border-radius @stepper-border-radius 0; + } + + &__minus--filled, + &__plus--filled { + background-color: @bg-color-secondarycontainer; + } + + &__input--filled { + background-color: @bg-color-secondarycontainer; + } + + &--normal-disabled { + color: @stepper-input-disabled-color; + } + + &--filled-disabled, + &--outline-disabled { + color: @stepper-input-disabled-color; + background-color: @stepper-input-disabled-bg; + } +} diff --git a/style/mobile/components/stepper/v2/_var.less b/style/mobile/components/stepper/v2/_var.less new file mode 100644 index 0000000000..dc41909fed --- /dev/null +++ b/style/mobile/components/stepper/v2/_var.less @@ -0,0 +1,19 @@ +@stepper-small-height: 20px; +@stepper-medium-height: 24px; +@stepper-large-height: 26px; +@stepper-small-font-size: 10px; +@stepper-medium-font-size: 12px; +@stepper-large-font-size: 16px; +@stepper-small-icon-size: 12px; +@stepper-medium-icon-size: 16px; +@stepper-large-icon-size: 20px; +@stepper-small-input-width: 34px; +@stepper-medium-input-width: 38px; +@stepper-large-input-width: 45px; +@stepper-border-width: 1px; + +@stepper-border-radius: var(--td-stepper-border-radius, @radius-small); +@stepper-border-color: var(--td-stepper-border-color, @component-border); +@stepper-input-color: var(--td-stepper-input-color, @font-gray-1); +@stepper-input-disabled-color: var(--td-stepper-input-disabled-color, @font-gray-4); +@stepper-input-disabled-bg: var(--td-stepper-input-disabled-bg, @bg-color-component-disabled); diff --git a/style/mobile/components/steps/_index.less b/style/mobile/components/steps/_index.less index 9e5861c23a..764483dbee 100644 --- a/style/mobile/components/steps/_index.less +++ b/style/mobile/components/steps/_index.less @@ -46,7 +46,7 @@ width: @step-horizontal-icon-width; height: @step-horizontal-icon-width; box-sizing: border-box; - border: 1px solid @primary-color; + border: 1px solid @brand-color; border-radius: 50%; margin-top: 1px; } @@ -59,7 +59,7 @@ content: ""; display: block; height: 1px; - background-color: @primary-color-5; + background-color: @brand-color-5; position: absolute; width: calc(100% - @step-horizontal-icon-width); left: calc(50% + @step-horizontal-icon-width / 2); @@ -138,7 +138,7 @@ width: @step-dot-anchor-width; height: @step-dot-anchor-width; box-sizing: border-box; - border: 1px solid @primary-color; + border: 1px solid @brand-color; border-radius: 50%; margin-top: 1px; } @@ -167,23 +167,23 @@ &--readonly { .@{prefix}-step-title { - color: @text-level-4-color; + color: @text-color-disabled; } .@{prefix}-step-description { - color: @text-level-4-color; + color: @text-color-disabled; } .@{prefix}-step--error, .@{prefix}-step--process, .@{prefix}-step--finish { .@{prefix}-step-description { - color: @text-level-3-color; + color: @text-color-placeholder; } } .@{prefix}-step--finish { .@{prefix}-step-title { - color: @text-level-1-color; + color: @text-color-primary; } } } diff --git a/style/mobile/components/steps/_mixin.less b/style/mobile/components/steps/_mixin.less index 7cbd0b202b..1d4f5f5654 100644 --- a/style/mobile/components/steps/_mixin.less +++ b/style/mobile/components/steps/_mixin.less @@ -17,7 +17,7 @@ vertical-align: top; font-size: @font-size-base; position: relative; - color: @text-level-4-color; + color: @text-color-disabled; &__number { box-sizing: border-box; @@ -27,9 +27,9 @@ width: @step-connector-default-icon-width; height: @step-connector-default-icon-width; text-align: center; - border: 1px solid @text-level-4-color; + border: 1px solid @text-color-disabled; border-radius: 50%; - color: @text-level-4-color; + color: @text-color-disabled; } } @@ -47,7 +47,7 @@ &-title { position: relative; - color: @text-level-1-color; + color: @text-color-primary; text-align: center; line-height: 22px; font-size: @font-size-base; @@ -56,7 +56,7 @@ } &-description { - color: @text-level-3-color; + color: @text-color-placeholder; line-height: 20px; font-size: @font-size-s; margin-bottom: @spacer; @@ -74,7 +74,7 @@ content: ""; display: block; height: 1px; - background-color: @text-level-4-color; + background-color: @text-color-disabled; position: absolute; width: calc(100% - @step-connector-default-icon-width); left: calc(50% + @step-connector-default-icon-width / 2); @@ -91,7 +91,7 @@ .@{prefix}-step--default:not(:last-child) { .@{prefix}-step__inner:after { - background-color: @primary-color-5; + background-color: @brand-color-5; } } } @@ -115,7 +115,7 @@ .@{prefix}-step--default:not(:last-child) { .@{prefix}-step__inner:after { - background-color: @primary-color; + background-color: @brand-color; } } } @@ -125,25 +125,25 @@ & when(@anchor-status = default) { .@{prefix}-step-icon__number { - border-color: @primary-color; - color: @primary-color; + border-color: @brand-color; + color: @brand-color; } }; & when(@anchor-status = finish) { .@{prefix}-step-icon__number { - border-color: @primary-color; - color: @primary-color; + border-color: @brand-color; + color: @brand-color; } }; & when(@anchor-status = process) { .@{prefix}-step-icon__number { - background-color: @primary-color; + background-color: @brand-color; color: #fff; - border-color: @primary-color; + border-color: @brand-color; } .@{prefix}-step-title { - color: @primary-color-8; + color: @brand-color-8; } }; & when(@anchor-status = error) { diff --git a/style/mobile/components/steps/v2/_index.less b/style/mobile/components/steps/v2/_index.less new file mode 100644 index 0000000000..3df1d8ca88 --- /dev/null +++ b/style/mobile/components/steps/v2/_index.less @@ -0,0 +1,23 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +:host { + display: flex; +} + +.@{step} { + &--vertical { + padding-right: 16px; + } +} + +.@{steps} { + display: flex; + width: 100%; + + // 垂直 + &--vertical { + flex-direction: column; + } +} diff --git a/style/mobile/components/steps/v2/_var.less b/style/mobile/components/steps/v2/_var.less new file mode 100644 index 0000000000..a7db479fed --- /dev/null +++ b/style/mobile/components/steps/v2/_var.less @@ -0,0 +1,3 @@ +@step: ~"@{prefix}-step"; +@steps: ~"@{step}s"; +@item: ~"@{step}-item"; diff --git a/style/mobile/components/swipe-cell/v2/_index.less b/style/mobile/components/swipe-cell/v2/_index.less new file mode 100644 index 0000000000..5a0738f569 --- /dev/null +++ b/style/mobile/components/swipe-cell/v2/_index.less @@ -0,0 +1,42 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-swipe-cell { + position: relative; + overflow: hidden; + + &__left, + &__right { + position: absolute; + top: 0; + height: 100%; + } + + &__left { + left: 0; + transform: translate3d(-100%, 0, 0); + } + + &__right { + right: 0; + transform: translate3d(100%, 0, 0); + } + + &__content { + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0 @spacer-2; + } + + &__icon { + font-size: @font-size-l; + } + + &__icon + &__text:not(:empty) { + margin-left: @spacer; + font-size: @font-size-base; + line-height: 22px; + } +} diff --git a/style/mobile/components/swipe-cell/v2/_var.less b/style/mobile/components/swipe-cell/v2/_var.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/mobile/components/swiper/_index.less b/style/mobile/components/swiper/_index.less index fce831e779..bebea6d7f5 100644 --- a/style/mobile/components/swiper/_index.less +++ b/style/mobile/components/swiper/_index.less @@ -17,7 +17,7 @@ display: inline-block; width: @swiper-page-btn-size; height: @swiper-page-btn-size; - background-color: @text-level-2-color; + background-color: @text-color-secondary; border-radius: 50%; position: absolute; top: 50%; @@ -48,7 +48,7 @@ &-fraction { height: @swiper-page-fraction-height; line-height: @swiper-page-fraction-height; - background-color: @text-level-3-color; + background-color: @text-color-placeholder; color: @gray-color-1; padding: 0 12px; border-radius: @swiper-page-fraction-radius; diff --git a/style/mobile/components/switch/_var.less b/style/mobile/components/switch/_var.less index d2f5d3e61b..7e34340fdc 100644 --- a/style/mobile/components/switch/_var.less +++ b/style/mobile/components/switch/_var.less @@ -1,4 +1,4 @@ -@switch-font-size: @font-size * 1.6; +@switch-font-size: calc(@font-size * 1.6); @switch-width: 44px; @switch-height: 24px; @switch-border-radius: 15px; @@ -10,15 +10,15 @@ @switch-node-height: 20px; @switch-node-z-index: 1; -@switch-node-color: @bg-color-block; -@switch-node-background-color: @bg-color-block; +@switch-node-color: @bg-color-container; +@switch-node-background-color: @bg-color-container; @switch-node-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); @switch-checked-translate-x: 22px; -@switch-checked-background-color: @primary-color; -@switch-checked-background-color-disabled: @primary-color-3; +@switch-checked-background-color: @brand-color; +@switch-checked-background-color-disabled: @brand-color-3; -@switch-text-color: @text-level-3-color; +@switch-text-color: @text-color-placeholder; @switch-text-color-disabled: @text-color-disabled; @switch-text-height: 24px; @switch-text-margin: 0 18px; diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less new file mode 100644 index 0000000000..201368ee26 --- /dev/null +++ b/style/mobile/components/switch/v2/_index.less @@ -0,0 +1,161 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-switch { + display: flex; + align-items: center; + vertical-align: middle; + width: @switch-width; + height: @switch-height; + border-radius: @switch-radius; + background-color: @switch-unchecked-color; + position: relative; + transition: all .3s ease; + overflow: hidden; + + &--checked { + background-color: @switch-checked-color; + } + + &--disabled { + background-color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + background-color: @switch-checked-disabled-color; + } + + &--large { + width: @switch-large-width; + height: @switch-large-height; + border-radius: @switch-large-radius; + } + + &--small { + width: @switch-small-width; + height: @switch-small-height; + border-radius: @switch-small-radius; + } + + &__label { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + font-size: @swtich-label-font-size; + color: @switch-label-color; + overflow: hidden; + + &--checked { + color: @switch-label-checked-color; + } + + &--disabled { + color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + color: @switch-checked-disabled-color; + } + + &--large { + font-size: @swtich-label-large-font-size; + } + + &--small { + font-size: @swtich-label-small-font-size; + } + + &:empty { + display: none; + } + } + + &__icon { + font-size: @switch-icon-size; + + &--large { + font-size: @switch-icon-large-size; + } + + &--small { + font-size: @switch-icon-small-size; + } + } + + &__loading { + color: @switch-label-checked-color; + } + + &__dot { + position: absolute; + left: @switch-dot-horizontal-margin; + top: 50%; + width: @switch-dot-size; + height: @switch-dot-size; + border-radius: 50%; + background-color: @bg-color-container; + transition: all .3s; + transform: translateY(-50%); + box-shadow: @switch-dot-shadow; + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + width: 200%; + height: 200%; + border: 1px solid @switch-dot-border-color; + border-radius: 50%; + transform: scale(.5); + transform-origin: 0 0; + box-sizing: border-box; + } + + &--large { + width: @switch-dot-large-size; + height: @switch-dot-large-size; + } + + &--small { + width: @switch-dot-small-size; + height: @switch-dot-small-size; + } + + &--checked { + left: calc(@switch-width - @switch-dot-size - @switch-dot-horizontal-margin); + } + + &--large&--checked { + left: calc(@switch-large-width - @switch-dot-large-size - @switch-dot-horizontal-margin); + } + + &--small&--checked { + left: calc(@switch-small-width - @switch-dot-small-size - @switch-dot-horizontal-margin); + } + + &--plain:not(&--checked) { + width: @switch-dot-plain-size; + height: @switch-dot-plain-size; + left: @switch-dot-plain-horizontal-margin; + } + + &--large&--plain:not(&--checked) { + width: @switch-dot-plain-large-size; + height: @switch-dot-plain-large-size; + } + + &--small&--plain:not(&--checked) { + width: @switch-dot-plain-small-size; + height: @switch-dot-plain-small-size; + } + } +} diff --git a/style/mobile/components/switch/v2/_var.less b/style/mobile/components/switch/v2/_var.less new file mode 100644 index 0000000000..1c88c734ed --- /dev/null +++ b/style/mobile/components/switch/v2/_var.less @@ -0,0 +1,45 @@ +@switch-checked-color: var(--td-switch-checked-color, @brand-color); +@switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled); +@switch-unchecked-color: var(--td-switch-unchecked-color, @font-gray-4); +@switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled); + +@switch-width: var(--td-switch-width, 45px); +@switch-height: var(--td-switch-height, 28px); +@switch-radius: var(--td-switch-radius, calc(@switch-height / 2)); + +// large +@switch-large-width: var(--td-switch-large-width, 52px); +@switch-large-height: var(--td-switch-large-height, 32px); +@switch-large-radius: var(--td-switch-large-radius, calc(@switch-large-height / 2)); + +// small +@switch-small-width: var(--td-switch-small-width, 39px); +@switch-small-height: var(--td-switch-small-height, 24px); +@switch-small-radius: var(--td-switch-small-radius, calc(@switch-small-height / 2)); + +@switch-dot-size: var(--td-switch-dot-size, 22px); +@switch-dot-plain-size: var(--td-switch-dot-plain-size, 18px); +@switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 3px); +@switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 5px); +@switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1); +@switch-dot-border-color: var(--td-switch-dot-border-color, @bg-color-secondarycontainer); + +// large dot +@switch-dot-large-size: var(--td-switch-dot-large-size, 26px); +@switch-dot-plain-large-size: var(--td-switch-dot-plain-large-size, 22px); + +// small dot +@switch-dot-small-size: var(--td-switch-dot-small-size, 18px); +@switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 14px); + +@swtich-label-font-size: var(--td-swtich-label-font-size, 14px); +@swtich-label-large-font-size: var(--td-swtich-label-font-size, 16px); +@swtich-label-small-font-size: var(--td-swtich-label-font-size, 12px); + +@switch-label-color: var(--td-switch-label-color, @font-gray-4); +@switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color); + +// icon +@switch-icon-size: var(--td-switch-icon-size, 20px); +@switch-icon-large-size: var(--td-switch-icon-large-size, 24px); +@switch-icon-small-size: var(--td-switch-icon-small-size, 16px); diff --git a/style/mobile/components/tab-bar-item/v2/_index.less b/style/mobile/components/tab-bar-item/v2/_index.less new file mode 100644 index 0000000000..97fe3411a6 --- /dev/null +++ b/style/mobile/components/tab-bar-item/v2/_index.less @@ -0,0 +1,133 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{item} { + flex: 1; + height: @tab-bar-height; + box-sizing: border-box; + user-select: none; + position: relative; + margin: 8px 0; + background-color: @tab-bar-bg-color; + padding: 0 12px; + + &--text-only { + font-size: 16px; + } + + &--split::before { + .hairline-left(@color: @tab-bar-border-color); + + top: 8px; + bottom: 8px; + } + + &--crowded { + padding: 0 8px; + } + + &--round { + border-radius: 99px; + } + + &__content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 8px; + color: @tab-bar-color; + + &--checked { + color: @tab-bar-active-color; + font-weight: 600; + } + + &--tag { + border-radius: 99px; + } + + &--tag&--checked { + background-color: @tab-bar-active-bg; + } + + // &--active { + // background-color: @tab-bar-hover-bg-color; + // } + } + + .@{prefix}-badge-class { + transform: translate(50%, -10%) !important; // stylelint-disable-line + } + + &__text { + display: flex; + align-items: center; + + &--small { + font-size: 10px; + line-height: 16px; + } + } + + &__icon-menu { + margin-right: 4px; + } + + &__spread { + position: absolute; + top: 0; + left: 7%; + width: 86%; + background-color: @tab-bar-bg-color; + transform: translate3d(0, calc(-100% - 16px), 0); + z-index: 1; + border-radius: 6px; + color: @tab-bar-color; + box-shadow: @tab-bar-spread-shadow; + + &::before { + display: block; + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 0; + border: 8px solid transparent; + border-top: 8px solid @tab-bar-bg-color; + transform: translate3d(-50%, 16px, 0); + } + + &-item { + width: 100%; + height: 48px; + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; + flex-direction: column; + + &--active { + background-color: @tab-bar-hover-bg-color; + } + + &-split { + box-sizing: border-box; + content: " "; + pointer-events: none; + background-color: @tab-bar-spread-border-color; + width: 80%; + height: 1px; + transform: translateY(.5); + } + + &-text { + padding-top: 12px; + } + } + } +} diff --git a/style/mobile/components/tab-bar-item/v2/_var.less b/style/mobile/components/tab-bar-item/v2/_var.less new file mode 100644 index 0000000000..c2a0b70d7d --- /dev/null +++ b/style/mobile/components/tab-bar-item/v2/_var.less @@ -0,0 +1,12 @@ +@item: ~"@{prefix}-tab-bar-item"; + +@tab-bar-height: var(--td-tab-bar-height, 40px); +@tab-bar-color: var(--td-tab-bar-color, @font-gray-1); +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-border-color: var(--td-tab-bar-border-color, @border-color); +@tab-bar-hover-bg-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, .05)); +@tab-bar-active-color: var(--td-tab-bar-active-color, @brand-color); +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-active-bg: var(--td-tab-bar-active-bg, @brand-color-light); +@tab-bar-spread-shadow: var(--td-tab-bar-spread-shadow, @shadow-3); +@tab-bar-spread-border-color: var(--td-tab-bar-spread-border-color, @border-color); diff --git a/style/mobile/components/tab-bar/_var.less b/style/mobile/components/tab-bar/_var.less index a396be5339..a478080e12 100644 --- a/style/mobile/components/tab-bar/_var.less +++ b/style/mobile/components/tab-bar/_var.less @@ -1,11 +1,11 @@ @tab-bar-height: 48px; -@tab-bar-bg-color: @bg-color-block; +@tab-bar-bg-color: @bg-color-container; -@tab-bar-border-color: @border-level-1-color; +@tab-bar-border-color: @component-stroke; @tab-bar-hover-bg-color: rgba(0, 0, 0, .05); -@tab-bar-active-color: @primary-color; +@tab-bar-active-color: @brand-color; -@tab-bar-color: @text-level-2-color; +@tab-bar-color: @text-color-secondary; diff --git a/style/mobile/components/tab-bar/v2/_index.less b/style/mobile/components/tab-bar/v2/_index.less new file mode 100644 index 0000000000..1389586e92 --- /dev/null +++ b/style/mobile/components/tab-bar/v2/_index.less @@ -0,0 +1,47 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{tab-bar-cls} { + display: flex; + flex-wrap: nowrap; + align-items: center; + position: relative; + font-size: 16px; + background-color: @tab-bar-bg-color; + box-sizing: border-box; + + &--normal&--border::before { + z-index: 1; + .hairline-top(@color: @tab-bar-border-color); + } + + &--fixed { + position: fixed; + left: 0; + bottom: 0; + right: 0; + } + + &--normal&--safe { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } + + &--round { + margin-left: 16px; + margin-right: 16px; + border-radius: 999px; + box-shadow: @tab-bar-round-shadow; + } + + &--fixed&--round&--safe { + bottom: constant(safe-area-inset-bottom); + bottom: env(safe-area-inset-bottom); + } + + &--fixed&--round&--safe { + bottom: constant(safe-area-inset-bottom); + bottom: env(safe-area-inset-bottom); + } +} diff --git a/style/mobile/components/tab-bar/v2/_var.less b/style/mobile/components/tab-bar/v2/_var.less new file mode 100644 index 0000000000..bc6b1aa0a5 --- /dev/null +++ b/style/mobile/components/tab-bar/v2/_var.less @@ -0,0 +1,5 @@ +@tab-bar-cls: ~"@{prefix}-tab-bar"; + +@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container); +@tab-bar-border-color: var(--td-tab-bar-border-color, @border-color); +@tab-bar-round-shadow: var(--td-tab-bar-round-shadow, @shadow-3); diff --git a/style/mobile/components/tab-panel/v2/_index.less b/style/mobile/components/tab-panel/v2/_index.less new file mode 100644 index 0000000000..4b075c81d5 --- /dev/null +++ b/style/mobile/components/tab-panel/v2/_index.less @@ -0,0 +1,15 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +:host { + flex-shrink: 0; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.@{prefix}-tab-panel { + height: inherit; + width: inherit; +} diff --git a/style/mobile/components/tab-panel/v2/_var.less b/style/mobile/components/tab-panel/v2/_var.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/style/mobile/components/tabs/_var.less b/style/mobile/components/tabs/_var.less index 0250b06526..8935bf59ae 100644 --- a/style/mobile/components/tabs/_var.less +++ b/style/mobile/components/tabs/_var.less @@ -1,6 +1,6 @@ -@tab-nav-bg-color: @bg-color-block; +@tab-nav-bg-color: @bg-color-container; -@tab-nav-text-color: @text-level-2-color; +@tab-nav-text-color: @text-color-secondary; @tab-nav-disabled-color: rgba(0, 0, 0, .25); @@ -14,7 +14,7 @@ @tab-line-active-color: #0052d9; -@tab-line-color: @border-level-1-color; +@tab-line-color: @component-stroke; @tab-line-height: 2px; @@ -30,4 +30,4 @@ @tab-nav-horizontal-item-padding: 0 0 0 2px; -@tab-panel-bg-color: @bg-color-block; +@tab-panel-bg-color: @bg-color-container; diff --git a/style/mobile/components/tabs/v2/_index.less b/style/mobile/components/tabs/v2/_index.less new file mode 100644 index 0000000000..2eac250bd3 --- /dev/null +++ b/style/mobile/components/tabs/v2/_index.less @@ -0,0 +1,213 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-tabs { + position: relative; + font-size: @tab-font-size; + background: @tab-nav-bg-color; + + &__wrapper { + display: flex; + overflow: hidden; + background: @tab-nav-bg-color; + + &--card { + background: @bg-color-secondarycontainer; + + --td-tab-border-color: transparent; + } + } + + &__item { + position: relative; + display: flex; + flex: none; + align-items: center; + justify-content: center; + font-weight: 400; + color: @tab-item-color; + padding: 0 16px; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + + &--active { + font-weight: 600; + color: @tab-item-active-color; + } + + &--disabled { + color: @tab-item-disabled-color; + } + + &--evenly { + flex: 1; + } + + &--top, + &--bottom { + height: @tab-item-height; + } + + &-inner { + display: flex; + align-items: center; + justify-content: center; + + &--tag { + width: 100%; + text-align: center; + padding: 0 16px; + line-height: @tab-item-tag-height; + border-radius: calc(@tab-item-tag-height / 2); + background-color: @tab-item-tag-bg; + } + + &--active&--tag { + background-color: @tab-item-tag-active-bg; + } + } + + &--tag:not(&--evenly) { + padding: 0 4px; + + &:first-child { + margin-left: 8px; + } + + &:last-child { + padding-right: 12px; + } + } + + &--tag { + padding: 0 8px; + } + + &--card { + &.@{item}--active { + background-color: @bg-color-container; + border-radius: 9px 9px 0 0; + + &:first-child { + border-top-left-radius: 0; + } + + &:last-child { + border-top-right-radius: 0; + } + } + + &.@{item}--pre { + border-bottom-right-radius: 9px; + } + } + + &-prefix, + &-suffix { + position: absolute; + bottom: 0; + width: 18px; + height: 18px; + background: #fff; + + &::after { + content: ""; + display: block; + width: 100%; + height: 100%; + background-color: @bg-color-secondarycontainer; + } + } + + &-prefix { + right: 0; + + &::after { + border-bottom-right-radius: 9px; + } + } + + &-suffix { + left: 0; + + &::after { + border-bottom-left-radius: 9px; + } + } + } + + &__icon { + font-size: @tab-icon-size; + margin-right: 2px; + } + + &__content { + overflow: hidden; + } + + &__nav { + position: relative; + user-select: none; + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + &__track { + position: absolute; + font-weight: 600; + z-index: 1; + transition-duration: .3s; + background-color: @tab-track-color; + + &--top, + &--bottom { + left: 0; + bottom: .5px; + width: @tab-track-width; + height: @tab-track-thickness; + border-radius: @tab-track-radius; + } + } + + &__scroll { + &--top, + &--bottom { + height: @tab-item-height; + position: relative; + } + + &--top { + .border(bottom, @tab-border-color); + } + } + + &__content-inner { + display: block; + } + + &--top, + &--bottom { + flex-wrap: wrap; + + .@{prefix}-tabs__content { + width: 100%; + + &--animated .@{prefix}-tabs__content-inner { + position: relative; + width: 100%; + height: 100%; + display: flex; + will-change: left; + transition-property: transform; + } + } + } + + &--bottom { + flex-direction: column-reverse; + } +} diff --git a/style/mobile/components/tabs/v2/_var.less b/style/mobile/components/tabs/v2/_var.less new file mode 100644 index 0000000000..7c1bb79ca7 --- /dev/null +++ b/style/mobile/components/tabs/v2/_var.less @@ -0,0 +1,27 @@ +@tabs: ~"@{prefix}-tabs"; +@item: ~"@{tabs}__item"; + +@tab-font-size: var(--tab-font-size, 14px); +@tab-nav-bg-color: var(--td-tab-nav-bg-color, @bg-color-container); + +@tab-item-height: var(--td-tab-item-height, 48px); +@tab-item-vertical-height: var(--td-tab-item-vertical-height, 54px); +@tab-item-vertical-width: var(--td-tab-item-vertical-width, 104px); + +@tab-item-color: var(--td-tab-item-color, @font-gray-1); +@tab-item-active-color: var(--td-tab-item-active-color, @brand-color); +@tab-item-disabled-color: var(--td-tab-item-disabled-color, @font-gray-4); +@tab-border-color: var(--td-tab-border-color, @component-stroke); + +// track +@tab-track-color: var(--td-tab-track-color, @brand-color); +@tab-track-thickness: var(--td-tab-track-thickness, 3px); +@tab-track-width: var(--td-tab-track-width, 16px); +@tab-track-radius: var(--td-tab-track-radius, 4px); + +// theme = tag +@tab-item-tag-height: var(--td-tab-item-tag-height, 32px); +@tab-item-tag-bg: var(--td-tab-item-tag-bg, @bg-color-secondarycontainer); +@tab-item-tag-active-bg: var(--td-tab-item-tag-active-bg, @brand-color-light); + +@tab-icon-size: var(--td-tab-icon-size, 16px); diff --git a/style/mobile/components/tag/_index.less b/style/mobile/components/tag/_index.less index 00447d5070..f4f00cf26d 100644 --- a/style/mobile/components/tag/_index.less +++ b/style/mobile/components/tag/_index.less @@ -6,40 +6,35 @@ @themes: primary, success, warning, default, danger; -.genVariant(@fontColorWeight; @borderColorWeight; @backgroundColorWeight) { - .for(@themes, @i: 1) when(@i =< length(@themes)) { - @theme: extract(@themes, @i); - @theme-color: "tag-@{theme}-color"; - @theme-font-color: "tag-@{theme}-font-color"; - - &.@{prefix}-tag--theme-@{theme} { - background-color: mix(@@theme-color, @@theme-font-color, @backgroundColorWeight); - border-color: mix(@@theme-color, @@theme-font-color, @borderColorWeight); - color: mix(@@theme-color, @@theme-font-color, @fontColorWeight); +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); } - - .for(@themes, (@i + 1)); - } - - .for(@themes); + }); } .@{prefix}-tag { - display: flex; + display: inline-flex; align-items: center; border: 1px solid transparent; box-sizing: border-box; - border-radius: @border-radius-square; + border-radius: @tag-square-border-radius; font-size: @tag-medium-font-size; user-select: none; + vertical-align: middle; &__text { word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - height: @tag-medium-height; - line-height: @tag-medium-height; } &__icon, @@ -50,13 +45,13 @@ &__icon:not(:empty) + &__text:not(:empty), &__text:not(:empty) + &__icon-close:not(:empty) { - margin-left: (@spacer / 2); + margin-left: calc(@spacer / 2); } - &.@{prefix}-tag--size { - &-small { + &.@{prefix}-tag { + &--small { height: @tag-small-height; - line-height: @tag-small-height - 2px; + line-height: @tag-small-height; padding: 0 @tag-small-padding; font-size: @tag-small-font-size; @@ -64,11 +59,16 @@ .@{prefix}-icon-close { font-size: @tag-small-icon-size; } + + .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty), + .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) { + margin-left: 4rpx; + } } - &-medium { + &--medium { height: @tag-medium-height; - line-height: @tag-medium-height - 2px; + line-height: @tag-medium-height; padding: 0 @tag-medium-padding; font-size: @tag-medium-font-size; @@ -78,9 +78,9 @@ } } - &-large { + &--large { height: @tag-large-height; - line-height: @tag-large-height - 2px; + line-height: @tag-large-height; padding: 0 @tag-large-padding; font-size: @tag-large-font-size; @@ -89,52 +89,65 @@ font-size: @tag-large-icon-size; } } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } } - &.@{prefix}-tag--shape { - &-square { - border-radius: @border-radius-square; + &.@{prefix}-tag { + &--square { + border-radius: @tag-square-border-radius; } - &-round { - border-radius: @border-radius-round; + &--round { + border-radius: @tag-round-border-radius; } - &-mark { - border-radius: 0 @border-radius-mark @border-radius-mark 0; + &--mark { + border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0; } } - &--variant { - &-dark { - .genVariant(0, 100, 100); + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } + } - &-light { - .genVariant(100, 10, 10); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(243, 243, 243, 100%); - background-color: rgba(243, 243, 243, 100%); - } + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } - - &-outline { - .genVariant(100, 100, 0); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(220, 220, 220, 100%); - background-color: #fff; + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; } + } - &-light-outline { - .genVariant(100, 100, 10); - &.@{prefix}-tag--theme-default { - color: @tag-default-font-color; - border-color: rgba(220, 220, 220, 100%); - background-color: rgba(243, 243, 243, 100%); - } + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; } } @@ -152,7 +165,7 @@ &.@{prefix}-tag--checked.@{prefix}-tag--disabled { color: @color-white; - background-color: @primary-color-disabled; + background-color: @brand-color-disabled; } &.@{prefix}-tag--disabled { diff --git a/style/mobile/components/tag/_var.less b/style/mobile/components/tag/_var.less index 9aed71bb2e..6e5bf53aac 100644 --- a/style/mobile/components/tag/_var.less +++ b/style/mobile/components/tag/_var.less @@ -1,59 +1,54 @@ -// 组件变量 -// 名称可按如下规则定义： -// -[type]-[attrtype]--[status] - -// component:组件名，如button， -// type: 组件类型，如 button 的次要按钮（line） -// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 -// attr: 属性名称，如color、height、radius等 -// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 - -// 如：@button-line-bg-color-hover -// 如：@button-line-height-s - +// checkable @color-white: #fff; - @tag-default-background-color: #e7e7e7; @tag-default-border-color: #e7e7e7; - -@primary-color-disabled: #bbd3fb; - -@tag-default-color: rgba(231, 231, 231, 1); -@tag-primary-color: @primary-color; -@tag-success-color: @success-color; -@tag-warning-color: @warning-color; -@tag-danger-color: @error-color; - -@tag-default-font-color: rgba(0, 0, 0, .9); -@tag-primary-font-color: @color-white; -@tag-success-font-color: @color-white; -@tag-warning-font-color: @color-white; -@tag-danger-font-color: @color-white; - -@tag-disabled-color: rgba(0, 0, 0, 26%); -@tag-disabled-background-color: rgba(231, 231, 231, 1); -@tag-disabled-border-color: rgba(231, 231, 231, 1); - -@tag-checked-color: @primary-color; -@tag-checked-border-color: @primary-color; -@tag-checked-background-color: @primary-color; - -@tag-small-padding: @spacer * 1.5 - 1px; -@tag-medium-padding: @spacer * 2 - 1px; -@tag-large-padding: @spacer * 3 - 1px; - -@tag-small-font-size: @font-size; -@tag-medium-font-size: @font-size-s; -@tag-large-font-size: @font-size-base; - -@tag-small-icon-size: @font-size * 1.2; -@tag-medium-icon-size: @font-size * 1.4; -@tag-large-icon-size: @font-size * 1.8; - -@tag-small-height: 22px; -@tag-medium-height: 24px; -@tag-large-height: 30px; - -@border-radius-square: 4px; -@border-radius-round: 999px; -@border-radius-mark: @border-radius-round; +@tag-checked-color: @brand-color; +@tag-checked-border-color: @brand-color; +@tag-checked-background-color: @brand-color; + +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); +@tag-round-border-radius: var(--td-tag-round-border-radius, 999px); +@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); +@tag-close-icon-color: var(--td-tag-close-icon-color, @font-gray-3); diff --git a/style/mobile/components/tag/v2/_index.less b/style/mobile/components/tag/v2/_index.less new file mode 100644 index 0000000000..2e844b14c1 --- /dev/null +++ b/style/mobile/components/tag/v2/_index.less @@ -0,0 +1,162 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.genVariant(@variant) { + @themes: default, primary, success, warning, danger; + each(@themes, { + @theme-color: "tag-@{value}-color"; + @theme-light-color: "tag-@{value}-light-color"; + + &.@{prefix}-tag--@{value} { + color: if(@variant = dark, @font-white-1, @@theme-color); + border-color: if(@variant = light, @@theme-light-color, @@theme-color); + background-color: if(@variant = dark, @@theme-color, @@theme-light-color); + } + }); +} + +.@{prefix}-tag { + display: inline-flex; + align-items: center; + border: 1px solid transparent; + box-sizing: border-box; + border-radius: @tag-square-border-radius; + font-size: @tag-medium-font-size; + user-select: none; + vertical-align: middle; + + &__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__icon, + &__icon-close { + display: flex; + align-items: center; + } + + &__icon-close { + color: @tag-close-icon-color; + } + + &__icon:not(:empty) + &__text:not(:empty), + &__text:not(:empty) + &__icon-close:not(:empty) { + margin-left: 4px; + } + + &.@{prefix}-tag { + &--small { + height: @tag-small-height; + line-height: @tag-small-height; + padding: 0 @tag-small-padding; + font-size: @tag-small-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-small-icon-size; + } + + .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty), + .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) { + margin-left: 2px; + } + } + + &--medium { + height: @tag-medium-height; + line-height: @tag-medium-height; + padding: 0 @tag-medium-padding; + font-size: @tag-medium-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-medium-icon-size; + } + } + + &--large { + height: @tag-large-height; + line-height: @tag-large-height; + padding: 0 @tag-large-padding; + font-size: @tag-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-large-icon-size; + } + } + + &--extra-large { + height: @tag-extra-large-height; + line-height: @tag-extra-large-height; + padding: 0 @tag-extra-large-padding; + font-size: @tag-extra-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-extra-large-icon-size; + } + } + } + + &.@{prefix}-tag { + &--square { + border-radius: @tag-square-border-radius; + } + + &--round { + border-radius: @tag-round-border-radius; + } + + &--mark { + border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0; + } + } + + &--dark { + .genVariant(dark); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--outline { + .genVariant(outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + each(@themes, { + &.@{prefix}-tag--@{value} { + background-color: @tag-outline-bg-color; + } + }); + } + + &--light { + .genVariant(light); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + } + } + + &--light-outline { + .genVariant(light-outline); + &.@{prefix}-tag--default { + color: @tag-default-font-color; + border-color: @component-border; + } + } + + &.@{prefix}-tag--closable { + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } +} diff --git a/style/mobile/components/tag/v2/_var.less b/style/mobile/components/tag/v2/_var.less new file mode 100644 index 0000000000..c0c0b887e4 --- /dev/null +++ b/style/mobile/components/tag/v2/_var.less @@ -0,0 +1,47 @@ +// themes +@tag-default-color: var(--td-tag-default-color, @bg-color-component); +@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer); +@tag-primary-color: var(--td-tag-primary-color, @brand-color); +@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light); +@tag-success-color: var(--td-tag-success-color, @success-color); +@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1); +@tag-warning-color: var(--td-tag-warning-color, @warning-color); +@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1); +@tag-danger-color: var(--td-tag-danger-color, @error-color); +@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1); + +// variant +@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container); +@tag-default-font-color: var(--td-tag-default-font-color, @font-gray-1); + +// status +@tag-disabled-color: var(--td-tag-disabled-color, @font-gray-4); +@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled); +@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border); + +// size +@tag-small-padding: var(--td-tag-small-padding, 6px - 1px); +@tag-medium-padding: var(--td-tag-medium-padding, 8px - 1px); +@tag-large-padding: var(--td-tag-large-padding, 8px - 1px); +@tag-extra-large-padding: var(--td-tag-extra-large-padding, 16px - 1px); + +@tag-small-font-size: var(--td-tag-small-font-size, @font-size); +@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s); +@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base); +@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base); + +@tag-small-icon-size: var(--td-tag-small-icon-size, 12px); +@tag-medium-icon-size: var(--td-tag-medium-icon-size, 14px); +@tag-large-icon-size: var(--td-tag-large-icon-size, 16px); +@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 16px); + +@tag-small-height: var(--td-tag-small-height, 20px); +@tag-medium-height: var(--td-tag-medium-height, 24px); +@tag-large-height: var(--td-tag-large-height, 28px); +@tag-extra-large-height: var(--td-tag-extra-large-height, 40px); + +@tag-square-border-radius: var(--td-tag-square-border-radius, 4px); +@tag-round-border-radius: var(--td-tag-round-border-radius, 999px); +@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); + +@tag-close-icon-color: var(--td-tag-close-icon-color, @font-gray-3); diff --git a/style/mobile/components/textarea/_var.less b/style/mobile/components/textarea/_var.less index 616acc7f28..dd680b1e02 100644 --- a/style/mobile/components/textarea/_var.less +++ b/style/mobile/components/textarea/_var.less @@ -1,13 +1,13 @@ -@textarea-background-color: @bg-color-block; -@textarea-text-color: @text-level-1-color; -@textarea-placeholder-text-color: @placeholder-color; +@textarea-background-color: @bg-color-container; +@textarea-text-color: @text-color-primary; +@textarea-placeholder-text-color: @text-color-placeholder; @textarea-disabled-text-color: @text-color-disabled; @textarea-font-size: @font-size-l; @textarea-line-height: 24px; -@textarea-counter-color: @text-level-3-color; +@textarea-counter-color: @text-color-placeholder; @textarea-counter-font-size: @font-size-s; @textarea-counter-line-height: 20px; @textarea-height: 96px; // 间距 -@textarea-vertical-padding: @spacer-3; -@textarea-horizontal-padding: @spacer-4; +@textarea-vertical-padding: @spacer-1; +@textarea-horizontal-padding: @spacer-2; diff --git a/style/mobile/components/textarea/v2/_index.less b/style/mobile/components/textarea/v2/_index.less new file mode 100644 index 0000000000..5a7076a9c1 --- /dev/null +++ b/style/mobile/components/textarea/v2/_index.less @@ -0,0 +1,70 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-textarea { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: @textarea-vertical-padding @textarea-horizontal-padding; + background-color: @textarea-background-color; + + &__label:not(:empty) { + font-size: @textarea-label-font-size; + color: @textarea-label-color; + flex-shrink: 0; + line-height: @textarea-label-line-height; + padding-bottom: @textarea-label-padding-bottom; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__wrapper { + display: flex; + flex-direction: column; + width: 100%; + flex: 1 1 auto; + overflow: hidden; + + &-inner { + flex: 1 1 auto; + box-sizing: border-box; + width: inherit; + min-width: 0; + height: 100%; + min-height: 20px; + margin: 0; + padding: 0; + text-align: left; + background-color: transparent; + border: 0; + resize: none; + font-size: @textarea-text-font-size; + color: @textarea-text-color; + line-height: @textarea-text-line-height; + } + } + + &__placeholder { + color: @textarea-placeholder-color; + font-size: @textarea-placeholder-font-size; + } + + &__indicator:not(:empty) { + color: @textarea-indicator-text-color; + font-size: @textarea-indicator-text-font-size; + text-align: @textarea-indicator-text-align; + line-height: @textarea-indicator-text-line-height; + padding-top: @textarea-indicator-text-padding-top; + } + + &--border { + border-radius: @textarea-border-radius; + border: @textarea-border-width solid @textarea-border-color; + } + + &--disabled { + color: @textarea-disabled-text-color; + } +} diff --git a/style/mobile/components/textarea/v2/_var.less b/style/mobile/components/textarea/v2/_var.less new file mode 100644 index 0000000000..c799aa44d1 --- /dev/null +++ b/style/mobile/components/textarea/v2/_var.less @@ -0,0 +1,30 @@ +@textarea-vertical-padding: 16px; // 文本框垂直方向间距 +@textarea-horizontal-padding: 16px; // 文本框水平方向间距 +@textarea-text-line-height: 24px; // 输入框文本行高 +@textarea-label-line-height: 22px; // 标签文本行高 +@textarea-label-padding-bottom: @spacer; +@textarea-indicator-text-line-height: 20px; // 计数器文本行高 +@textarea-indicator-text-padding-top: @spacer; // 计数器文本顶部间距 +@textarea-indicator-text-align: right; // 计数器文本对齐方式 +@textarea-border-width: 1px; // 文本框边框大小 +@textarea-indicator-text-font-size: @spacer-1; // 计数器文本大小 +@textarea-label-font-size: @font-size-base; // 标签文本大小 +@textarea-text-font-size: @font-size-m; // 输入框文本大小 +@textarea-placeholder-font-size: @font-size-m; // 占位符文本大小 + +// 文本框背景颜色 +@textarea-background-color: var(--td-textarea-background-color, @bg-color-container); +// 占位符文本颜色 +@textarea-placeholder-color: var(--td-textarea-placeholder-color, @font-gray-3); +// 输入框文本颜色 +@textarea-text-color: var(--td-textarea-text-color, @font-gray-1); +// 标签文本颜色 +@textarea-label-color: var(--td-textarea-label-color, @font-gray-1); +// 计数器文本颜色 +@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @font-gray-3); +// 文本框圆角大小 +@textarea-border-radius: var(--td-textarea-border-radius, @radius-default); +// 文本框边框颜色 +@textarea-border-color: var(--td-textarea-border-color, rgba(220, 220, 220, 1)); +// 文本框禁用状态时的输入文本颜色 +@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @font-gray-4); diff --git a/style/mobile/components/toast/_index.less b/style/mobile/components/toast/_index.less index 8b9b91e5fd..2b73dec356 100644 --- a/style/mobile/components/toast/_index.less +++ b/style/mobile/components/toast/_index.less @@ -12,15 +12,15 @@ justify-content: center; min-width: 104px; max-width: 188px; - border-radius: @border-radius; + border-radius: @radius-small; color: @toast-text-color; background: rgba(0, 0, 0, 60%); text-align: center; - padding: @spacer-5; + padding: calc(@spacer * 2.5); z-index: @toast-z-index; &:not(&--text)&--column { - border-radius: @border-radius * 2; + border-radius: calc(@radius-small * 2); } .@{prefix}-icon { @@ -33,7 +33,7 @@ white-space: pre-wrap; word-break: break-word; line-height: 22px; - margin-top: @spacer-3; + margin-top: @spacer-1; min-width: 82px; } @@ -50,8 +50,8 @@ /** 有无icon判断 */ &--icononly { - padding-top: @spacer-3; - padding-bottom: @spacer-3; + padding-top: @spacer-1; + padding-bottom: @spacer-1; min-width: 88px; min-height: 88px !important; // stylelint-disable-line flex-direction: initial; @@ -65,13 +65,13 @@ &--top { left: 50%; - top: @spacer-3; + top: @spacer-1; transform: translateX(-50%); } &--bottom { left: 50%; - bottom: @spacer-3; + bottom: @spacer-1; transform: translateX(-50%); } @@ -86,7 +86,7 @@ .@{prefix}-toast__text { margin-top: 0; - margin-left: @spacer-2; + margin-left: @spacer; min-width: auto; line-height: 24px; } diff --git a/style/mobile/components/toast/_var.less b/style/mobile/components/toast/_var.less index c4497d9030..dada709744 100644 --- a/style/mobile/components/toast/_var.less +++ b/style/mobile/components/toast/_var.less @@ -1,4 +1,4 @@ -@toast-text-color:@text-anti-primary-color; +@toast-text-color:@text-color-anti; @toast-font-size-base:@font-size-base; @toast-z-index: 2000; diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less new file mode 100644 index 0000000000..7bf2f1cb9b --- /dev/null +++ b/style/mobile/components/toast/v2/_index.less @@ -0,0 +1,88 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-toast { + position: fixed; + left: 50%; + transform: translate(-50%, -50%); + z-index: 12001; + opacity: 1; + transition: opacity 300ms ease; + background-color: @toast-bg-color; + border-radius: @toast-radius; + font-size: 14px; + color: @toast-color; + max-width: @toast-max-width; + width: fit-content; + box-sizing: border-box; + + &--column { + padding: 24px; + min-width: 80px; + min-height: 80px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + } + + &--loading&--with-text { + min-width: 102px; + min-height: 102px; + padding-top: 0; + padding-bottom: 0; + } + + &__content { + align-items: center; + line-height: 22px; + + &--row { + display: flex; + text-align: left; + padding: 14px 22px; + } + + &--column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + } + + &__icon { + &--row { + display: flex; + font-size: @toast-row-icon-size; + } + + &--column { + font-size: @toast-column-icon-size; + } + } + + &__text { + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + /* stylelint-disable-next-line */ + display: -webkit-box; + -webkit-box-orient: vertical; + white-space: pre-line; + + &--column:not(:empty):not(:only-child) { + margin-top: 8px; + } + + &--row:not(:empty):not(:only-child) { + margin-left: 8px; + } + } + + &.@{prefix}-fade-enter, + &.@{prefix}-fade-leave-to { + opacity: 0; + } +} diff --git a/style/mobile/components/toast/v2/_var.less b/style/mobile/components/toast/v2/_var.less new file mode 100644 index 0000000000..c7c0b45c92 --- /dev/null +++ b/style/mobile/components/toast/v2/_var.less @@ -0,0 +1,6 @@ +@toast-color: var(--td-toast-color, @font-white-1); +@toast-bg-color: var(--td-toast-bg-color, @font-gray-2); +@toast-max-width: var(--td-toast-max-width, 187px); +@toast-radius: var(--td-toast-radius, 4px); +@toast-row-icon-size: var(--td-toast-row-icon-size, 24px); +@toast-column-icon-size: var(--td-toast-column-icon-size, 32px); diff --git a/style/mobile/components/tree-select/_index.less b/style/mobile/components/tree-select/_index.less new file mode 100644 index 0000000000..c2ddfdb47a --- /dev/null +++ b/style/mobile/components/tree-select/_index.less @@ -0,0 +1,43 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-tree-select { + display: flex; + background-color: @tree-bg-color; + + &__column { + width: @tree-colum-width; + + &--left { + background: @tree-root-bg-color; + } + + &--right { + flex: 1; + } + + ::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; + } + } + + &__item { + height: @tree-item-height; + line-height: @tree-item-height; + font-size: @tree-item-font-size; + padding-left: 16px; + + &--active { + font-weight: 600; + color: @tree-item-active-color; + } + } + + &-column { + width: 100%; + } +} diff --git a/style/mobile/components/tree-select/_var.less b/style/mobile/components/tree-select/_var.less new file mode 100644 index 0000000000..a9ca4c3481 --- /dev/null +++ b/style/mobile/components/tree-select/_var.less @@ -0,0 +1,6 @@ +@tree-bg-color: var(--td-tree-bg-color, @bg-color-container); +@tree-root-bg-color: var(--td-tree-root-bg-color, @bg-color-secondarycontainer); +@tree-item-active-color: var(--td-tree-item-active-color, @brand-color); +@tree-item-height: var(--td-tree-item-height, 56px); +@tree-item-font-size: var(--td-tree-item-font-size, 16px); +@tree-colum-width: var(--td-tree-colum-width, 103px); diff --git a/style/mobile/components/upload/_index.less b/style/mobile/components/upload/_index.less index 3d298d26bf..cbea0eb167 100644 --- a/style/mobile/components/upload/_index.less +++ b/style/mobile/components/upload/_index.less @@ -110,7 +110,7 @@ } > p { - color: @placeholder-color; + color: @text-color-placeholder; } } diff --git a/style/mobile/components/upload/_var.less b/style/mobile/components/upload/_var.less index 289cd1c49e..2f2113f8a9 100644 --- a/style/mobile/components/upload/_var.less +++ b/style/mobile/components/upload/_var.less @@ -14,27 +14,27 @@ // 颜色 @upload-icon-check-circle-filled-color: @success-color; @upload-icon-error-circle-filled-color: @error-color; -@upload-icon-loading-color: @primary-color; -@upload-icon-time-filled-color: @placeholder-color; -@upload-highlight-color: @text-primary-color; -@upload-icon-add-color: @text-level-3-color; -@upload-small-color: @placeholder-color; -@upload-placeholder-color: @placeholder-color; -@upload-icon-color: @placeholder-color; -@upload-icon-color-hover: @text-level-2-color; -@upload-list-file-icon-color: @primary-color; +@upload-icon-loading-color: @brand-color; +@upload-icon-time-filled-color: @text-color-placeholder; +@upload-highlight-color: @text-color-primary; +@upload-icon-add-color: @text-color-placeholder; +@upload-small-color: @text-color-placeholder; +@upload-placeholder-color: @text-color-placeholder; +@upload-icon-color: @text-color-placeholder; +@upload-icon-color-hover: @text-color-secondary; +@upload-list-file-icon-color: @brand-color; @upload-list-item-error-color: @error-color; @upload-list-control-color-hover: @error-color; @upload-card-item-error-icon-warning-color: @error-color; @upload-card-item-status-color: @error-color; @upload-card-item-bg-color: @bg-color-page; -@upload-card-item-bg-border-color-hover: @primary-color; -@upload-card-name-color: @text-primary-color; +@upload-card-item-bg-border-color-hover: @brand-color; +@upload-card-name-color: @text-color-primary; @upload-card-box-bg-color: @bg-color-page; @upload-card-container-bg-color: @bg-color-secondarycontainer; @upload-card-status-color: @text-color-disabled; @upload-card-mask-color: @bg-color-container; -@upload-card-mask-bg-color: @text-level-2-color; +@upload-card-mask-bg-color: @text-color-secondary; @upload-tips-error-color: @error-color; // 背景 @upload-card-mask-opacity-disabled: .3; @@ -59,31 +59,31 @@ // @upload-card-mask-item-width: 30px; // @upload-card-mask-item-height: 30px; @upload-icon-size: @font-size-l; -@upload-icon-size-middle: (@font-size * 2); -@upload-icon-size-large: (@font-size * 2.4); +@upload-icon-size-middle: calc(@font-size * 2); +@upload-icon-size-large: calc(@font-size * 2.4); // 边框 -@upload-card-item-bg-border: 1px dashed @border-level-1-color; -@upload-card-box-border: 1px dashed @border-level-1-color; -@upload-card-box-border-radius: @border-radius; -@upload-card-content-border: 1px solid @border-level-1-color; -@upload-card-contariner-border: 1px dashed @border-level-1-color; +@upload-card-item-bg-border: 1px dashed @component-stroke; +@upload-card-box-border: 1px dashed @component-stroke; +@upload-card-box-border-radius: @radius-small; +@upload-card-content-border: 1px solid @component-stroke; +@upload-card-contariner-border: 1px dashed @component-stroke; // 位置 // 间距 -@upload-card-padding: 0 0 0 @spacer-4; +@upload-card-padding: 0 0 0 @spacer; @upload-card-line-height: @text-line-height; -@upload-card-item-padding: 0 @spacer-2 0 0; -@upload-card-item-margin: 0 0 @spacer-2 0; +@upload-card-item-padding: 0 @spacer 0 0; +@upload-card-item-margin: 0 0 @spacer 0; @upload-card-item-error-icon-warning-margin-bottom: 10px; @upload-card-icon-loading-margin-bottom: 10px; -@upload-card-name-margin-top: @spacer-2; -@upload-card-container-icon-add-margin-bottom: @spacer-2; -@upload-card-content-padding: @spacer-2; +@upload-card-name-margin-top: @spacer; +@upload-card-container-icon-add-margin-bottom: @spacer; +@upload-card-content-padding: @spacer; @upload-card-status-wrap-svg-margin-bottom: 6px; @upload-small-line-height: 20px; @upload-display-text-margin-top: 10px; @upload-icon-clear-circle-filled-margin-top: 2px; -@upload-tips-margin-top: @spacer-2; -@upload-card-mask-divider-margin: 0 @spacer-2; +@upload-tips-margin-top: @spacer; +@upload-card-mask-divider-margin: 0 @spacer; diff --git a/style/mobile/components/upload/v2/_index.less b/style/mobile/components/upload/v2/_index.less new file mode 100644 index 0000000000..a72b7a8c68 --- /dev/null +++ b/style/mobile/components/upload/v2/_index.less @@ -0,0 +1,82 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-upload { + display: grid; + grid-template-columns: repeat(@upload-grid-columns, 1fr); + gap: 16px 8px; + padding: 16px; + + &__item { + position: relative; + width: 100%; + + &--add { + padding-top: 100%; + font-size: @upload-add-icon-font-size; + background-color: @upload-add-bg-color; + color: @upload-add-color; + border-radius: @upload-radius; + } + } + + &__add-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + + &__delete-btn { + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + color: @upload-delete-icon-color; + border-top-right-radius: @upload-radius; + border-bottom-left-radius: @upload-radius; + background-color: @font-gray-3; + } + + &__progress { + &-mask { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 100%; + background-color: @font-gray-3; + display: flex; + flex-direction: column; + align-items: center; + border-radius: @upload-radius; + color: @font-white-1; + padding: 16px 0; + } + + &-text { + font-size: 12px; + line-height: 20px; + margin-top: 4px; + } + + &-loading { + animation: spin infinite linear .6s; + } + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/style/mobile/components/upload/v2/_var.less b/style/mobile/components/upload/v2/_var.less new file mode 100644 index 0000000000..9e8d8f4b4e --- /dev/null +++ b/style/mobile/components/upload/v2/_var.less @@ -0,0 +1,6 @@ +@upload-add-color: var(--td-upload-add-color, @font-gray-3); +@upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer); +@upload-radius: var(--td-upload-radius, @radius-default); +@upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 28px); +@upload-delete-icon-color: var(--td-upload-delete-icon-color, @font-white-1); +@upload-grid-columns: var(--td-upload-grid-columns, 4); diff --git a/style/mobile/index.less b/style/mobile/index.less index 883e225d82..60dda73b44 100644 --- a/style/mobile/index.less +++ b/style/mobile/index.less @@ -6,14 +6,6 @@ @import "./theme/_index.less"; -// mixins - -@import "./mixins/_index.less"; - -// 工具类 - -@import "./utilities/_index.less"; - // components @import "./components/_index.less"; diff --git a/style/mobile/mixins/_cursor.less b/style/mobile/mixins/_cursor.less new file mode 100644 index 0000000000..0b8c143268 --- /dev/null +++ b/style/mobile/mixins/_cursor.less @@ -0,0 +1,7 @@ +.cursor-pointer() { + cursor: pointer; + -webkit-tap-highlight-color: transparent; + /* stylelint-disable-next-line */ + -webkit-user-select: none; + user-select: none; +} diff --git a/style/mobile/mixins/_hairline.less b/style/mobile/mixins/_hairline.less index 61ca32099c..2dfef43ed8 100644 --- a/style/mobile/mixins/_hairline.less +++ b/style/mobile/mixins/_hairline.less @@ -7,7 +7,7 @@ pointer-events: none; } -.hairline(@color: @border-level-1-color) { +.hairline(@color: @border-color) { top: -50%; right: -50%; bottom: -50%; @@ -17,7 +17,7 @@ .hairline-base(); } -.hairline-top(@color: @border-level-1-color) { +.hairline-top(@color: @border-color) { right: 0; left: 0; top: 0; @@ -26,7 +26,7 @@ .hairline-base(); } -.hairline-bottom(@color: @border-level-1-color) { +.hairline-bottom(@color: @border-color) { right: 0; left: 0; bottom: 0; @@ -35,7 +35,7 @@ .hairline-base(); } -.hairline-left(@color: @border-level-1-color) { +.hairline-left(@color: @border-color) { top: 0; bottom: 0; left: 0; @@ -44,7 +44,7 @@ .hairline-base(); } -.hairline-right(@color: @border-level-1-color) { +.hairline-right(@color: @border-color) { top: 0; bottom: 0; right: 0; diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index a1ec3edc46..7c1006c678 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -1,3 +1,12 @@ @import "./_clearfix.less"; @import "./_hairline.less"; + +@import "./_cursor.less"; + +.limit-title-row() { + /* stylelint-disable-next-line */ + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/style/mobile/utilities/_animation.less b/style/mobile/utilities/_animation.less index e1a38667b7..3802cd96a5 100644 --- a/style/mobile/utilities/_animation.less +++ b/style/mobile/utilities/_animation.less @@ -139,7 +139,7 @@ @keyframes @fade-zoom-in { 0% { opacity: 0; - transform: translate(-50%, -50%) scale(.8); + transform: translate(-50%, -50%) scale(.6); } 100% { @@ -156,6 +156,6 @@ 100% { opacity: 0; - transform: translate(-50%, -50%) scale(.8); + transform: translate(-50%, -50%) scale(.6); } } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index f8770df6d0..24a8201627 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -2,6 +2,54 @@ @import "./_animation.less"; -.@{prefix}-overflow-hidden { - overflow: hidden; +@import "../_variables.less"; + +.hotspot-expanded { + &.relative { + position: relative; + } + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + transform: scale(1.5); + } +} + +.border(@position: bottom, @border-color: @component-border) { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: if(@position = top, 0, unset); + bottom: if(@position = bottom, 0, unset); + left: if(@position = left, 0, unset); + right: if(@position = right, 0, unset); + background-color: @border-color; + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { + &::after { + height: 1px; + left: 0; + right: 0; + transform: scaleY(.5); + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { + &::after { + width: 1px; + top: 0; + bottom: 0; + transform: scaleX(.5); + } } diff --git a/style/mobile/utilities/_transition.less b/style/mobile/utilities/_transition.less new file mode 100644 index 0000000000..b661e50541 --- /dev/null +++ b/style/mobile/utilities/_transition.less @@ -0,0 +1,47 @@ +.slide-top-enter-active { + animation: @slide-top-in .3s; +} + +.slide-top-leave-active { + animation: @slide-top-out .3s; +} + +.slide-right-enter-active { + animation: @slide-right-in .3s; +} + +.slide-right-leave-active { + animation: @slide-right-out .3s; +} + +.slide-bottom-enter-active { + animation: @slide-bottom-in .3s; +} + +.slide-bottom-leave-active { + animation: @slide-bottom-out .3s; +} + +.slide-left-enter-active { + animation: @slide-left-in .3s; +} + +.slide-left-leave-active { + animation: @slide-left-out .3s; +} + +.fade-zoom-enter-active { + animation: @fade-zoom-in .35s; +} + +.fade-zoom-leave-active { + animation: @fade-zoom-out .35s; +} + +.fade-enter-active { + animation: @fade-in .3s; +} + +.fade-leave-active { + animation: @fade-out .3s; +} diff --git a/style/web/README.md b/style/web/README.md index 182d36dcd5..1ee4e54f42 100644 --- a/style/web/README.md +++ b/style/web/README.md @@ -38,9 +38,7 @@ web ├── _reset.less // 重置标签默认样式 ├── _variables.less // 全局变量 ├── base.less // 基础样式（内含 _reset.less 和 _variable.less） -├── docs.less // 示例的公共样式 -├── index.less // 统一引入 UI 库所有样式的出口文件 -└── index.js // webpack 入口文件，含各组件的主样式 +└── docs.less // 示例的公共样式 ``` ### 开发 @@ -60,32 +58,8 @@ web 几个关键点： - `components` 下创建组件文件夹 -- 修改 `index.html` 开发者信息及 `title` 信息(可在该组件文件夹下搜索 `` 替换)。 -- `components` 下的 `_index.less` 增加组件主样式 （注意依赖顺序关系） -- `index.js` 增加组件样式入口 - 如果有示例样式，添加到 `/docs/.css`，并在 `docs.css` 里引入 -#### 启动 - -`style/web` 目录下，启动项目，主要用于 less 编译。 -html 可通过本地服务的方式实现热更新（如 VS Code 的 Live Server） - -``` -npm run start -``` - -### 如何使用 icon - -首先，在组件 index.html 中引入图标样式表，`` 。可参考 button/index.html。(如果使用初始化脚本，该样式表会自动插入 index.html) - -而后，便可按照如下方式使用图标： - -```html - - - - -``` ### 相关资料 diff --git a/style/web/_global.less b/style/web/_global.less index 0dfb47e1c2..5af17802f8 100644 --- a/style/web/_global.less +++ b/style/web/_global.less @@ -1,5 +1,7 @@ @import "./_variables.less"; +@import "./mixins/_scrollbar.less"; + // 响应式断点 后面支持紧凑模式可以迁移过去 :root { --td-screen-xs: @screen-xs; @@ -12,18 +14,7 @@ // 统一的scrollbar .narrow-scrollbar { - &::-webkit-scrollbar { - width: 8px; - height: 8px; - background: transparent; - } - - &::-webkit-scrollbar-thumb { - border-radius: @border-radius-medium; - border: 2px solid transparent; - background-clip: content-box; - background-color: @scrollbar-color; - } + .scrollbar(8px, 2px); } // 统一的可旋转箭头 diff --git a/style/web/_variables.less b/style/web/_variables.less index 131d02f7ff..6bb5cef5c4 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -85,6 +85,7 @@ @brand-color-active: var(--td-brand-color-active); // 点击态 @brand-color-disabled: var(--td-brand-color-disabled); // 禁用态 @brand-color-light: var(--td-brand-color-light); // 浅色的选中态 +@brand-color-light-hover: var(--td-brand-color-light-hover); // 警告色扩展 @warning-color-hover: var(--td-warning-color-hover); @@ -92,6 +93,7 @@ @warning-color-active: var(--td-warning-color-active); @warning-color-disabled: var(--td-warning-color-disabled); @warning-color-light: var(--td-warning-color-light); +@warning-color-light-hover: var(--td-warning-color-light-hover); // 失败/错误色扩展 @error-color-hover: var(--td-error-color-hover); @@ -99,6 +101,7 @@ @error-color-active: var(--td-error-color-active); @error-color-disabled: var(--td-error-color-disabled); @error-color-light: var(--td-error-color-light); +@error-color-light-hover: var(--td-error-color-light-hover); // 成功色扩展 @success-color-hover: var(--td-success-color-hover); @@ -106,6 +109,7 @@ @success-color-active: var(--td-success-color-active); @success-color-disabled: var(--td-success-color-disabled); @success-color-light: var(--td-success-color-light); +@success-color-light-hover: var(--td-success-color-light-hover); // 遮罩 @mask-active: var(--td-mask-active); // 遮罩-弹出 @@ -141,6 +145,17 @@ @bg-color-component-active: var( --td-bg-color-component-active ); // 色彩 - 组件 - active + +@bg-color-secondarycomponent: var( + --td-bg-color-secondarycomponent +); // 色彩 - 次级组件 +@bg-color-secondarycomponent-hover: var( + --td-bg-color-secondarycomponent-hover +); // 色彩 - 次级组件 - hover +@bg-color-secondarycomponent-active: var( + --td-bg-color-secondarycomponent-active +); // 色彩 - 次级组件 - active + @bg-color-component-disabled: var( --td-bg-color-component-disabled ); // 色彩 - 组件 - disabled @@ -188,7 +203,73 @@ @shadow-2-inset: @shadow-2, @shadow-inset; @shadow-3-inset: @shadow-3, @shadow-inset; -// Spacer +@size-1: var(--td-size-1); +@size-2: var(--td-size-2); +@size-3: var(--td-size-3); +@size-4: var(--td-size-4); +@size-5: var(--td-size-5); +@size-6: var(--td-size-6); +@size-7: var(--td-size-7); +@size-8: var(--td-size-8); +@size-9: var(--td-size-9); +@size-10: var(--td-size-10); +@size-11: var(--td-size-11); +@size-12: var(--td-size-12); +@size-13: var(--td-size-13); +@size-14: var(--td-size-14); +@size-15: var(--td-size-15); +@size-16: var(--td-size-16); + +// component 组件尺寸高度相关 token +@comp-size-xxxs: var(--td-comp-size-xxxs); +@comp-size-xxs: var(--td-comp-size-xxs); +@comp-size-xs: var(--td-comp-size-xs); +@comp-size-s: var(--td-comp-size-s); +@comp-size-m: var(--td-comp-size-m); +@comp-size-l: var(--td-comp-size-l); +@comp-size-xl: var(--td-comp-size-xl); +@comp-size-xxl: var(--td-comp-size-xxl); +@comp-size-xxxl: var(--td-comp-size-xxxl); +@comp-size-xxxxl: var(--td-comp-size-xxxxl); +@comp-size-xxxxxl: var(--td-comp-size-xxxxxl); + +// popup 弹出层整体边距 token +@pop-padding-s: var(--td-pop-padding-s); +@pop-padding-m: var(--td-pop-padding-m); +@pop-padding-l: var(--td-pop-padding-l); +@pop-padding-xl: var(--td-pop-padding-xl); +@pop-padding-xxl: var(--td-pop-padding-xxl); + +// component 组件左右边距 token +@comp-paddingLR-xxs: var(--td-comp-paddingLR-xxs); +@comp-paddingLR-xs: var(--td-comp-paddingLR-xs); +@comp-paddingLR-s: var(--td-comp-paddingLR-s); +@comp-paddingLR-m: var(--td-comp-paddingLR-m); +@comp-paddingLR-l: var(--td-comp-paddingLR-l); +@comp-paddingLR-xl: var(--td-comp-paddingLR-xl); +@comp-paddingLR-xxl: var(--td-comp-paddingLR-xxl); + +// component 组件上下边距 token +@comp-paddingTB-xxs: var(--td-comp-paddingTB-xxs); +@comp-paddingTB-xs: var(--td-comp-paddingTB-xs); +@comp-paddingTB-s: var(--td-comp-paddingTB-s); +@comp-paddingTB-m: var(--td-comp-paddingTB-m); +@comp-paddingTB-l: var(--td-comp-paddingTB-l); +@comp-paddingTB-xl: var(--td-comp-paddingTB-xl); +@comp-paddingTB-xxl: var(--td-comp-paddingTB-xxl); + +// component 组件间距 token +@comp-margin-xxs: var(--td-comp-margin-xxs); +@comp-margin-xs: var(--td-comp-margin-xs); +@comp-margin-s: var(--td-comp-margin-s); +@comp-margin-m: var(--td-comp-margin-m); +@comp-margin-l: var(--td-comp-margin-l); +@comp-margin-xl: var(--td-comp-margin-xl); +@comp-margin-xxl: var(--td-comp-margin-xxl); +@comp-margin-xxxl: var(--td-comp-margin-xxxl); +@comp-margin-xxxxl: var(--td-comp-margin-xxxxl); + +// Spacer 【deprecated】 @spacer: 8px; @spacer-s: @spacer * .5; // 间距-4 @spacer-m: @spacer * .75; // 间距-6 @@ -204,11 +285,11 @@ @spacer-9: @spacer * 9; // 间距-大-48 @spacer-10: @spacer * 10; // 间距-大-80 -@text-line-height-s: 20px; -@text-line-height-base: 22px; -@text-line-height-l: 24px; -@text-line-height-xl: 28px; -@text-line-height-xxl: 44px; +@text-line-height-s: var(--td-line-height-body-small); +@text-line-height-base: var(--td-line-height-body-medium); +@text-line-height-l: var(--td-line-height-body-large); +@text-line-height-xl: var(--td-line-height-title-large); +@text-line-height-xxl: var(--td-line-height-headline-large); // Font @font-size: 10px; @@ -288,9 +369,11 @@ @anim-duration-slow: .28s; // 统一管理各组件层级关系 +@z-index-back-top: 300; @z-index-affix: 500; @z-index-drawer: 1500; @z-index-dialog: 2500; +@z-index-image-viewer: 3000; @z-index-loading: 3500; @z-index-message: 5000; @z-index-Popup: 5500; diff --git a/style/web/components/_index.less b/style/web/components/_index.less index 49fa9b8577..f3f6f6b64a 100644 --- a/style/web/components/_index.less +++ b/style/web/components/_index.less @@ -97,3 +97,5 @@ @import "./timeline/_index.less"; @import "./space/_index.less"; + +@import "./back-top/_index.less"; diff --git a/style/web/components/a-template/index.html b/style/web/components/a-template/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/a-template/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less index 0ddde28c58..a9528f4382 100644 --- a/style/web/components/alert/_index.less +++ b/style/web/components/alert/_index.less @@ -13,6 +13,7 @@ .reset; display: flex; + align-items: flex-start; padding: @alert-padding; opacity: 1; transition: opacity .2s; @@ -105,7 +106,8 @@ .@{prefix}-alert__content { flex: 1 1 0; - font: @font-body-medium; + font-size: @alert-font-size; + line-height: @alert-line-height; overflow: hidden; } @@ -120,7 +122,7 @@ font-weight: bold; + .@{prefix}-alert__message { - margin-top: @spacer; + margin-top: @alert-description-margin-top; } } @@ -132,7 +134,7 @@ .@{prefix}-alert__operation { flex: 0 0 auto; - padding: 0 @spacer; + padding: @alert-operation-padding; color: @brand-color; cursor: pointer; transition: color @anim-duration-base; @@ -147,17 +149,29 @@ } .@{prefix}-alert__icon + .@{prefix}-alert__content { - margin-left: 10px; + margin-left: @alert-margin-left; } .@{prefix}-alert__collapse { - margin-top: 12px; + margin-top: @alert-collapse-margin-top; color: @brand-color; cursor: pointer; } .@{prefix}-alert__close { - font-size: @font-size-base; + display: inline-flex; + align-items: center; + margin-left: @alert-close-margin-left; color: @alert-close-color; cursor: pointer; + transition: color @anim-duration-base; + + &:hover { + color: @alert-close-color-hover; + } + + > .t-icon { + font-size: @alert-close-size; + padding: @alert-close-padding; + } } diff --git a/style/web/components/alert/_var.less b/style/web/components/alert/_var.less index bdadbf5a2d..7071ab500a 100644 --- a/style/web/components/alert/_var.less +++ b/style/web/components/alert/_var.less @@ -12,10 +12,10 @@ // 如：@button-line-height-s // color -@alert-success-bg-color: @success-color-2; +@alert-success-bg-color: @success-color-focus; @alert-info-bg-color: @brand-color-focus; -@alert-warning-bg-color: @warning-color-2; -@alert-error-bg-color: @error-color-2; +@alert-warning-bg-color: @warning-color-focus; +@alert-error-bg-color: @error-color-focus; @alert-title-color: @text-color-primary; @alert-description-color: @text-color-secondary; @@ -25,19 +25,29 @@ @alert-error-icon-color: @error-color; @alert-close-color: @text-color-secondary; +@alert-close-color-hover: @text-color-primary; -@alert-success-trigger-color: @success-color-2; +@alert-success-trigger-color: @success-color-focus; @alert-info-trigger-color: @brand-color; -@alert-warning-trigger-color: @warning-color-2; -@alert-error-trigger-color: @error-color-2; +@alert-warning-trigger-color: @warning-color-focus; +@alert-error-trigger-color: @error-color-focus; @alert-success-trigger-active-color: @success-color; @alert-info-trigger-active-color: @brand-color; @alert-warning-trigger-active-color: @warning-color; @alert-error-trigger-active-color: @error-color; -// 间距 -@alert-padding: 14px 24px; - // size -@alert-icon-size: 20px; +@alert-font-size: @font-size-base; +@alert-line-height: @text-line-height-base; +@alert-icon-size: @alert-line-height; +@alert-close-size: calc(@alert-line-height - 2px); + +// 间距 +@alert-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@alert-operation-padding: 0 @comp-paddingLR-s; +@alert-margin-left: @comp-margin-s; +@alert-close-margin-left: @comp-margin-l; +@alert-close-padding: calc((@alert-line-height - @alert-close-size) / 2 ) 0; +@alert-description-margin-top: @comp-margin-s; +@alert-collapse-margin-top: @comp-margin-s; diff --git a/style/web/components/alert/index.html b/style/web/components/alert/index.html deleted file mode 100644 index 5385cd5c5f..0000000000 --- a/style/web/components/alert/index.html +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - alert - - - - - - - - - -
- - -
-

Alert

-

开发者：yanniswang

-

创建日期：2020-06-01

-

说明：TDesign alert 组件的基本样式

-
- - - - - -
-

基础警告

- - -
- -
-
-
-
-
- 这是一条成功的消息提示 -
-
-
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
-
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
-
-
-
- - -
-
- - -
-

带图标的警告

- - -
- - - -
-
-
- -
-
-
-
- 这是一条成功的消息提示 -
-
-
-
-
-
-
-
- -
-
- 这是一条普通的消息提示 -
-
-
-
-
-
- -
-
-
-
- 这是一条警示信息 -
-
-
-
-
-
-
-
- -
-
-
-
- 高危操作/出错信息提示 -
-
-
-
-
- - - -
-
- - -
-

带操作的警告

-

1)带关闭操作

-
- - -
-
-
-
-
- 这是一条成功的消息提示 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
-
-
- -
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
-
-
- -
-
-
- - - -
-

2)可自定义关闭操作

-
- - -
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- 知道了 -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
-
-
- 不再提醒 -
-
-
- - - -
-

3)带相关操作

-
- - -
-
-
-
-
- 这是一条成功的消息 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条普通的消息提示 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 这是一条警示信息 -
-
- 相关操作 -
-
-
-
- -
-
-
-
-
-
-
-
- 高危操作/出错信息提示 -
-
- 相关操作 -
-
-
-
- -
-
-
- - -
-
- - -
-

带相关描述文字的警告

-
- -
-
-
- -
-
-
- 这是一条普通的消息提示 -
-
-
- 这是一条普通的消息提示描述，这是一条普通的消息提示描述，这是一条普通的消息提示描述，这是一条普通的消息提示描述， -
-
- 相关操作 -
-
-
-
- -
-
-
- -
-
- - -
-

带折叠的警告

-
- -
-
-
- -
-
-
-
-
- 1. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 2. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 展开更多 -
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
- 1. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 2. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 3. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 4. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 5. 小程序云服务器有奖内测中，即刻成为产品体验官 -
-
- 6. 云服务器限时秒杀，首购1C1G仅需99元/年， 还有多款配置供您选择! -
-
- 收起 -
-
-
-
-
- -
-
-
- -
-
- - - - diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less index e64b1f53c2..3a6a882c15 100644 --- a/style/web/components/anchor/_index.less +++ b/style/web/components/anchor/_index.less @@ -13,7 +13,7 @@ background: @anchor-bg-color; width: @anchor-width-default; color: @anchor-text-color-default; - font-size: @anchor-font-size; + font: @anchor-font; //锚点 item 被选中 .@{prefix}-is-active > a { @@ -63,19 +63,14 @@ &__item-link { display: inline-block; position: relative; - line-height: @anchor-item-line-height; - max-height: @anchor-item-max-height; overflow: hidden; word-break: break-all; color: @anchor-text-color-default; text-decoration: none; text-align: justify; - margin-right: -4px; - padding-right: 10px; } a { - line-height: @anchor-item-height; transition: color @anim-duration-base linear; } @@ -99,8 +94,7 @@ .@{prefix}-anchor__target { cursor: pointer; - font-size: @anchor-font-size; - line-height: @anchor-item-height; + font: @anchor-font; color: @anchor-text-color-default; @keyframes fadeOut { @@ -126,8 +120,8 @@ display: inline-block; } - //激活锚点 滚动到指定锚点 标题后边出现定位提示 - //target属性参考文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target + // 激活锚点 滚动到指定锚点 标题后边出现定位提示 + //target属性参考文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target &:target::after { display: inline-block; content: ""; diff --git a/style/web/components/anchor/_var.less b/style/web/components/anchor/_var.less index 3d07063609..a47ffe33f0 100644 --- a/style/web/components/anchor/_var.less +++ b/style/web/components/anchor/_var.less @@ -1,41 +1,27 @@ //颜色 @anchor-text-color-default: @text-color-primary; @anchor-text-color-hover: @brand-color; -@anchor-text-color-current: @brand-color; -// 被选中的字体、左侧竖线色值 +@anchor-text-color-current: @brand-color; // 被选中的字体、左侧竖线色值 @anchor-text-color-active: @brand-color-active; @anchor-bg-color: @bg-color-container; -// anchor左侧竖线颜色 -@anchor-border-color: @component-stroke; - -// 位置 -// 固定模式时的top值 -@anchor-affix-top: 20px; +@anchor-border-color: @component-stroke; // anchor左侧竖线颜色 // 尺寸 @anchor-width-s: 120px; @anchor-width-default: 200px; @anchor-width-l: 320px; -@anchor-item-height: 24px; -// 锚点最大高度，可折行，最大3行 -@anchor-item-max-height: (@anchor-item-height * 3); -@anchor-item-line-height: 22px; -// 选中竖线的宽度 -@anchor-point-width: 1px; -// 选中竖线的高度 -@anchor-point-height: 22px; +@anchor-point-width: 1px; // 选中竖线的宽度 @anchor-target-width: 6px; -//字号 -@anchor-font-size: @font-size-base; +// 字体 +@anchor-font: @font-body-medium; // 间距 -// 一级锚点padding -@anchor-item-padding: 0 @spacer-1 0 @spacer-2; -// 二级锚点padding -@anchor-sub-item-padding: 0 @spacer-1 0 @spacer-2; +@anchor-item-padding: @comp-paddingTB-xxs @comp-paddingTB-l; // 一级锚点padding + +@anchor-sub-item-padding: @comp-paddingTB-xxs @comp-paddingTB-l; // 二级锚点padding -@anchor-target-copy-margin: 0 0 0 4px; +@anchor-target-copy-margin: 0 0 0 @comp-margin-xs; // 动画 @anchor-point-transition: all @anim-duration-base diff --git a/style/web/components/anchor/index.html b/style/web/components/anchor/index.html deleted file mode 100644 index 1a977100f5..0000000000 --- a/style/web/components/anchor/index.html +++ /dev/null @@ -1,306 +0,0 @@ - - - - - - Anchor - - - - - -
- -
-

Anchor

-

开发者：kobejia

-

创建日期：2020-10-16

-

- 说明：
- tdesign Anchor组件的基本样式
- 锚点左侧line的top偏移距离为24的倍数，如 24*n，高度为对应item的高度; -

-
- - - -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-默认 -
-
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- - -
-

默认

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

内容过长换行

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能服务功能 -
-
- 使用说明 -
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

多级锚点

-
- -
-
- -
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
- 定义 -
-
- 服务功能 -
-
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
- -
-

状态-selected

-
- -
-
-
-
-
-
- 定义 -
-
- 服务功能 -
-
- 使用说明 -
- 定义 -
-
- 服务功能 -
-
-
- 保密协议 -
-
- 其他 -
-
-
- -
-
-
-

尺寸

-

尺寸-默认

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
- -
-

尺寸-大

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
- -
-

尺寸-小 - -

-
- -
-
-
-
-
-
- 默认 -
-
- 多级锚点 -
-
状态
-
- 尺寸 -
- 尺寸-大 -
-
- 尺寸-小 -
-
-
-
- -
-
-
- - - diff --git a/style/web/components/auto-complete/_index.less b/style/web/components/auto-complete/_index.less new file mode 100644 index 0000000000..92a24b43a9 --- /dev/null +++ b/style/web/components/auto-complete/_index.less @@ -0,0 +1,21 @@ +@import "../../base.less"; + +@import "./_var.less"; + +.@{prefix}-select-option__highlight-item { + .@{prefix}-is-highlight { + color: @auto-complete-option-highlight-color; + } +} + +.@{prefix}-auto-complete { + .@{prefix}-input__suffix-clear { + display: none; + } + + &:hover { + .@{prefix}-input__suffix-clear { + display: inline-block; + } + } +} diff --git a/style/web/components/auto-complete/_var.less b/style/web/components/auto-complete/_var.less new file mode 100644 index 0000000000..82041c781e --- /dev/null +++ b/style/web/components/auto-complete/_var.less @@ -0,0 +1 @@ +@auto-complete-option-highlight-color: @brand-color; diff --git a/style/web/components/avatar/_index.less b/style/web/components/avatar/_index.less index dc5a93b83d..4176995f5c 100644 --- a/style/web/components/avatar/_index.less +++ b/style/web/components/avatar/_index.less @@ -36,6 +36,12 @@ &.@{prefix}-size-l { .avatar-size(@avatar-size-large,@avatar-font-large,@avatar-icon-large); } + + // 保证 Image 不会超出 Avatar + > .@{prefix}-image__wrapper { + max-width: 100%; + max-height: 100%; + } } .@{prefix}-avatar-group { diff --git a/style/web/components/avatar/_mixin.less b/style/web/components/avatar/_mixin.less index 295a60d445..bce94805b2 100644 --- a/style/web/components/avatar/_mixin.less +++ b/style/web/components/avatar/_mixin.less @@ -9,11 +9,6 @@ &.@{prefix}-avatar__icon { font-size: @avatar-icon-size; } - - & img { - height: @size; - width: @size; - } } .avatar-group-offset-right(@offset) { diff --git a/style/web/components/avatar/_var.less b/style/web/components/avatar/_var.less index 5b0127ee65..f35f77e33f 100644 --- a/style/web/components/avatar/_var.less +++ b/style/web/components/avatar/_var.less @@ -3,9 +3,9 @@ @avatar-text-color: @text-color-brand; //头像大小 -@avatar-size-small: 24px; -@avatar-size-medium: 32px; -@avatar-size-large: 40px; +@avatar-size-small: @comp-size-xs; +@avatar-size-medium: @comp-size-m; +@avatar-size-large: @comp-size-xl; //字体 @avatar-font-small: @font-size-base; @@ -13,9 +13,9 @@ @avatar-font-large: @font-size-xl; //图标 -@avatar-icon-small: @icon-default; -@avatar-icon-medium: 20px; -@avatar-icon-large: @icon-l; +@avatar-icon-small: @comp-size-xxxs; +@avatar-icon-medium: @comp-size-xxs; +@avatar-icon-large: @comp-size-xs; //边框 @avatar-border-radius-circle: @border-radius-circle; @@ -23,9 +23,9 @@ @avatar-border-color: @bg-color-container; //组合头像偏移量 -@avatar-group-offset-small: -4px; -@avatar-group-offset-medium: -6px; -@avatar-group-offset-large: -8px; +@avatar-group-offset-small: calc(0px - @size-2); +@avatar-group-offset-medium: calc(0px - @size-3); +@avatar-group-offset-large: calc(0px - @size-4); //z-index @avatar-group-init-zIndex: 50; diff --git a/style/web/components/avatar/index.html b/style/web/components/avatar/index.html deleted file mode 100644 index 05f16af602..0000000000 --- a/style/web/components/avatar/index.html +++ /dev/null @@ -1,273 +0,0 @@ - - - - - - Avatar - - - - - - - - -
- - -
-

Avatar

-

开发者：elsieguo

-

创建日期：2021-08-31

-

说明：TDesign Avatar

-
- - - - - -
-

默认

- - -
- - - - U - - - U - - - -
- - - - -
-

默认

- - -
- - - U - - - U - - -
-
- - -
-

类型

-
- -
- - U - - - U - -
-
- - 王 - - - 王 - -
-
- - - - - - -
-
- - - - - - -
- -
-
- - -
-

尺寸(如果有)

-
- -
- - U - - - 王 - - - - - - - -
-
- - U - - - 王 - - - - - - - -
-
- - U - - - 王 - - - - - - - -
- -
-
- - -
-

头像组合

- - -
- -
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
- - -
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
-
- - U - - - U - - - U - - - U - -
- -
-
-
- - diff --git a/style/web/components/back-top/_index.less b/style/web/components/back-top/_index.less new file mode 100644 index 0000000000..8f219a0a48 --- /dev/null +++ b/style/web/components/back-top/_index.less @@ -0,0 +1,82 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +@import "./_mixin.less"; + +.@{prefix-block} { + position: fixed; + z-index: @z-index-back-top; + overflow: hidden; + outline: none; + border-color: transparent; + background-color: transparent; + cursor: pointer; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + vertical-align: middle; + white-space: nowrap; + border-width: .5px; + border-style: solid; + transition: + background @anim-duration-base linear, + border @anim-duration-base linear, + color @anim-duration-base linear, + opacity @anim-duration-base linear, + visibility @anim-duration-base linear; + touch-action: manipulation; + box-shadow: @back-top-box-shadow; + visibility: hidden; + opacity: 0; + + &__text { + font: @font-body-small; + text-align: center; + margin-top: @comp-margin-xxs; + } + + &__icon { + font-size: @font-headline-small; + } + + &.t-size-m { + .@{prefix-block}__icon { + margin-top: 2px; + } + } +} + +.@{prefix-block}--show { + visibility: visible; + opacity: 1; +} + +@themes: light, primary, dark; + +each(@themes, { + .@{prefix-block}--theme-@{value} { + .back-top-theme("@{value}"); + } +}); + +@m: medium; +@s: small; +@sizes: s, m; + +each(@sizes, { + .@{prefix-block}.@{prefix}-size-@{value} { + .back-top-size(@@value) + } +}); + +@shapes: circle, square; + +each(@shapes, { + .@{prefix-block}--@{value} { + .back-top-shape("@{value}") + } +}) diff --git a/style/web/components/back-top/_mixin.less b/style/web/components/back-top/_mixin.less new file mode 100644 index 0000000000..d783c5b786 --- /dev/null +++ b/style/web/components/back-top/_mixin.less @@ -0,0 +1,41 @@ +@prefix-block: e("@{prefix}-back-top"); + +.back-top-attr(@attr, @modify, @isTarget: false, @target: '') { + @value: if((boolean(@isTarget)), e("back-top-@{target}-@{attr}-@{modify}"), e("back-top-@{attr}-@{modify}")); + + @{attr}: @@value; +} + +.back-top-bg-color(@theme, @isHover) { + @bg-color: if((boolean(@isHover)), e("back-top-bg-color-@{theme}-hover"), e("back-top-bg-color-@{theme}")); + + background-color: @@bg-color; +} + +.back-top-theme(@theme) { + .back-top-attr(border-color, @theme); + .back-top-bg-color(@theme, false); + + &:hover { + .back-top-attr(border-color, "@{theme}-hover"); + .back-top-bg-color(@theme, true); + } + .@{prefix-block}__text { + .back-top-attr(color, @theme, true, "text"); + } + .@{prefix-block}__icon { + .back-top-attr(color, @theme, true, "icon"); + } +} + +.back-top-size(@size) { + .back-top-attr(width, @size); + .back-top-attr(height, @size); + .@{prefix-block}__text { + .back-top-attr(display, @size, true, "text"); + } +} + +.back-top-shape(@shape) { + .back-top-attr(border-radius, @shape); +} diff --git a/style/web/components/back-top/_var.less b/style/web/components/back-top/_var.less new file mode 100644 index 0000000000..80a0939854 --- /dev/null +++ b/style/web/components/back-top/_var.less @@ -0,0 +1,49 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[type]-[attrtype]--[status] + +// component:组件名，如button， +// type: 组件类型，如 button 的次要按钮（line） +// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 +// attr: 属性名称，如color、height、radius等 +// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 + +// 如：@button-line-bg-color-hover +// 如：@button-line-height-s +@back-top-border-radius-circle: @border-radius-circle; +@back-top-border-radius-square: @border-radius-medium; + +@back-top-width-small: @comp-size-xxl; +@back-top-height-small: @comp-size-xxl; + +@back-top-text-display-small: none; +@back-top-text-display-medium: block; + +@back-top-width-medium: @comp-size-xxxxl; +@back-top-height-medium: @comp-size-xxxxl; + +@back-top-text-color-light: @text-color-secondary; +@back-top-text-color-primary: @text-color-anti; +@back-top-text-color-dark: @text-color-anti; + +@back-top-icon-color-light: @text-color-primary; +@back-top-icon-color-primary: @text-color-anti; +@back-top-icon-color-dark: @text-color-anti; + +@back-top-bg-color-light: @bg-color-container; +@back-top-bg-color-primary: @brand-color; +@back-top-bg-color-dark: rgba(0, 0, 0, .9); + +@back-top-bg-color-light-hover: @bg-color-container-hover; +@back-top-bg-color-primary-hover: @brand-color-hover; +@back-top-bg-color-dark-hover: rgba(0, 0, 0, .6); + +@back-top-border-color-light: @component-border; +@back-top-border-color-primary: @back-top-bg-color-primary; +@back-top-border-color-dark: @back-top-bg-color-dark; + +@back-top-border-color-light-hover: @back-top-bg-color-light-hover; +@back-top-border-color-primary-hover: @back-top-bg-color-primary-hover; +@back-top-border-color-dark-hover: @back-top-bg-color-dark-hover; + +@back-top-box-shadow: @shadow-3; diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less index 0a7f048487..18a7060d24 100644 --- a/style/web/components/badge/_index.less +++ b/style/web/components/badge/_index.less @@ -49,14 +49,14 @@ padding-left: @badge-padding; min-width: @badge-min-width; height: @badge-height; - border-radius: (@badge-height / 2); + border-radius: calc(@badge-height / 2); background-color: @badge-color; line-height: @badge-height; &.t-size-s { padding-right: @badge-padding-s; padding-left: @badge-padding-s; - min-width: @badge-height-s; + min-width: @badge-min-width; height: @badge-height-s; line-height: @badge-height-s; } diff --git a/style/web/components/badge/_var.less b/style/web/components/badge/_var.less index 5d2ea83672..a76d24da6a 100644 --- a/style/web/components/badge/_var.less +++ b/style/web/components/badge/_var.less @@ -17,9 +17,9 @@ // 尺寸 // 默认尺寸 circle/round 高度 -@badge-height: 20px; +@badge-height: @comp-size-xxs; // 小尺寸 circle/round 高度 -@badge-height-s: 16px; +@badge-height-s: @comp-size-xxxs; // dot 宽/高 @badge-dot-size: 6px; // @badge-status-size: 6px; @@ -30,6 +30,6 @@ // 间距 // 默认尺寸circle/round 左右padding -@badge-padding: 6px; +@badge-padding: calc((@badge-height - @badge-min-width) / 2); // 小尺寸circle/round 左右padding -@badge-padding-s: 4px; +@badge-padding-s: calc((@badge-height-s - @badge-min-width) / 2); diff --git a/style/web/components/badge/index.html b/style/web/components/badge/index.html deleted file mode 100644 index d9aedf2f7c..0000000000 --- a/style/web/components/badge/index.html +++ /dev/null @@ -1,254 +0,0 @@ - - - - - - Badge - - - - - - - -
- -
-

Badge

-

开发者：ikeqcheng

-

创建日期：2020-10-09

-

说明：TDesign Badge

-
- - - - -
-

默认

- - -
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-
-
-

颜色

- - -
- -
- - - - -
-
- - - 99+ - -
-
- - - new - -
- -
-
-
-

形状

- - -
- -
- - - 2 - -
-
- - - 99 - -
-
- - - new - -
- -
-
- - -
-

类型

-

1.红点样式徽标数：

-
- -
- - - - -
-
- - 解锁新徽章 - - -
-
- - - - - - -
- -
-

2.数字样式徽标数：

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-

3.自定义式徽标数：

-
- - - - new - - -
-
- - -
-

尺寸

-

1.默认大小

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- -
-

2.小

-
- -
- - - 2 - -
-
- - - 99 - -
-
- - - 99+ - -
- - -
-
-
- - diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less index d7abb87ce5..d52b513a56 100644 --- a/style/web/components/breadcrumb/_index.less +++ b/style/web/components/breadcrumb/_index.less @@ -11,7 +11,7 @@ .breadcrumb; &__separator { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; display: flex; align-items: center; } @@ -70,7 +70,7 @@ //箭头型 &--arrow { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; line-height: 0; color: @breadcrumb-icon-arrow-color-default; .v-inlineblock; @@ -78,7 +78,7 @@ //斜杠型 &--slash { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; line-height: 0; color: @breadcrumb-icon-slash-color-default; .v-inlineblock; @@ -91,7 +91,7 @@ .v-inlineblock; .t-icon { - margin: 0 @breadcrumb-spacer-half; + margin: @breadcrumb-separator-margin; } } @@ -189,10 +189,9 @@ display: flex; align-items: center; - .t-icon { - vertical-align: text-bottom; + &-text { + .t-overflow; } - .t-overflow; &:hover { color: @breadcrumb-text-color-hover; diff --git a/style/web/components/breadcrumb/_var.less b/style/web/components/breadcrumb/_var.less index 755fc4a917..0b5457a05c 100644 --- a/style/web/components/breadcrumb/_var.less +++ b/style/web/components/breadcrumb/_var.less @@ -31,8 +31,8 @@ @breadcrumb-option-box-bg: @bg-color-container; //间距 -@breadcrumb-spacer-half: (@spacer * .5); -@breadcrumb-content-icon-margin-bottom: 2px; +@breadcrumb-separator-margin: 0 @comp-margin-xs; +@breadcrumb-content-icon-margin-bottom: @comp-margin-xxs; // 尺寸 @breadcrumb-icon-size: @font-size-l; diff --git a/style/web/components/breadcrumb/index.html b/style/web/components/breadcrumb/index.html deleted file mode 100644 index ff4a384d0d..0000000000 --- a/style/web/components/breadcrumb/index.html +++ /dev/null @@ -1,263 +0,0 @@ - - - - - - Breadcrumb - - - - - - - - - -
- - -
-

Breadcrumb

-

开发者：yuiqin

-

创建日期：2020-06-10

-

说明：tdesign breadcrumb组件的基本样式

-
- - - - - -
-

默认

- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- -
- - -
-

状态

- - -
- - -
- - 页面一 - - - - - -
-
- 页面2-1 - -
-
-

页面2-1

-

字数超出需要做隐藏效果

-

页面2-3

-
-
- - - - - - 页面三 - -
- -
- -
- - - -
-
- - -
-

类型

- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- - -
- - -
- - - 页面一 - - - - - - - 页面二 - - - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - - 页面二 - - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - -
-
- 页面2-1 - -
-
-

页面2-1

-

页面2-2

-

页面2-3

-
-
- - - - - - 页面三 - -
- - -
- - -
- - -
- - 页面一 - - - - - -
面包屑文案超长这种情况下需要隐藏鼠标上移出现完整信息
- 面包屑文案超长这种情况下需要隐藏鼠标上移出现完整信息 - - - - - - 页面三 - -
- - -
- -
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index e6c42da57d..02a5251c3d 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -48,6 +48,7 @@ .t-icon { position: relative; z-index: 1; + display: inline-flex; } .t-icon { @@ -300,11 +301,6 @@ .button-size(@btn-height-l , @btn-font-l, @btn-icon-size-l, @btn-padding-horizontal-l); } - &.@{prefix}-size-full-width { - display: block; - width: 100%; - } - &--shape-square { width: @btn-height-default; padding: 0; @@ -357,6 +353,11 @@ border-radius: @btn-shape-border-radius-l; } } + + &.@{prefix}-size-full-width { + display: flex; + width: 100%; + } } .@{prefix}-button--ghost { diff --git a/style/web/components/button/_mixin.less b/style/web/components/button/_mixin.less index 5650d89ce9..24eab4428e 100644 --- a/style/web/components/button/_mixin.less +++ b/style/web/components/button/_mixin.less @@ -24,8 +24,8 @@ .button-size(@btn-height, @btn-font-size, @btn-icon-size, @padding-horizontal) { height: @btn-height; font: @btn-font-size; - padding-left: @padding-horizontal - @btn-border-width; - padding-right: @padding-horizontal - @btn-border-width; + padding-left: calc(@padding-horizontal - @btn-border-width); + padding-right: calc(@padding-horizontal - @btn-border-width); .t-icon, .@{prefix}-loading { diff --git a/style/web/components/button/_var.less b/style/web/components/button/_var.less index c4302a7d2f..7111ff234e 100644 --- a/style/web/components/button/_var.less +++ b/style/web/components/button/_var.less @@ -1,13 +1,13 @@ // 尺寸 -@btn-height-s: 24px; -@btn-height-default: 32px; -@btn-height-l: 40px; +@btn-height-s: @comp-size-xs; +@btn-height-default: @comp-size-m; +@btn-height-l: @comp-size-xl; // 圆角 @btn-border-radius: @border-radius-default; -@btn-shape-border-radius-s: (@btn-height-s / 2); -@btn-shape-border-radius-default: (@btn-height-default / 2); -@btn-shape-border-radius-l: (@btn-height-l / 2); +@btn-shape-border-radius-s: calc(@btn-height-s / 2); +@btn-shape-border-radius-default: calc(@btn-height-default / 2); +@btn-shape-border-radius-l: calc(@btn-height-l / 2); //字号 @btn-font-s: @font-body-small; @@ -24,9 +24,9 @@ @btn-icon-text-margin-left: @spacer; // padding -@btn-padding-horizontal-s: @spacer; -@btn-padding-horizontal-default: (@spacer * 2); -@btn-padding-horizontal-l: (@spacer * 3); +@btn-padding-horizontal-s: @comp-paddingLR-s; +@btn-padding-horizontal-default: @comp-paddingLR-l; +@btn-padding-horizontal-l: @comp-paddingLR-xl; @btn-border-width: 1px; diff --git a/style/web/components/button/index.html b/style/web/components/button/index.html deleted file mode 100644 index 7b3d4030ae..0000000000 --- a/style/web/components/button/index.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - Button - - - - - - -
- -
-

Button

-

开发者：youngerwang / chazzhou

-

创建日期：

-

- 说明：tdesign button 组件的基本样式 -

-
- -
- 禁用 - -
- - - - -
-

组件类型 variant

- -
- - - - - - -
-
- - -
-

主题 theme

- -
- -
- - - - -
-
- - - - -
- -
-
- - -
-

图标按钮

- -
- - - - - - - - -
-
- - -
-

幽灵按钮 ghost

- -
- -
- - - - -
-
- - - - -
-
- - - - -
- -
-
- - -
-

尺寸

-
- -
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
- -
-
- - -
-

块级按钮

-
- -
- - - - -
- -
-
- -
- - - diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less index c22d7af2a9..badbd66a69 100644 --- a/style/web/components/calendar/_index.less +++ b/style/web/components/calendar/_index.less @@ -31,27 +31,25 @@ &--full { min-width: @calendar-full-min-width; + padding: @calendar-full-padding; .@{prefix}-calendar__control { padding: @calendar-control-padding; } .@{prefix}-calendar__title { - font-size: @font-size-xl; + font: @font-title-large; flex: 1; } .@{prefix}-calendar__panel { - padding: @calendar-panel-padding; position: relative; + margin-top: @calendar-panel-margin-top; &-title { font: @calendar-head-title-font; - padding-top: 1px; - padding-bottom: 1px; color: @calendar-title-color; position: absolute; - top: @calendar-title-position-top; } } @@ -70,14 +68,16 @@ display: flex; flex-direction: column; align-items: flex-end; + justify-content: flex-start; margin-left: @calendar-body-cell-margin-left; transition-duration: @calendar-transition-duration; transition-property: @calendar-transition-property; transition-timing-function: @calendar-transition-timing-function; &-content { - min-height: @calendar-body-cell-content-min-height; - padding-top: @calendar-body-cell-content-padding-top; + padding: @calendar-body-cell-content-padding; + width: 100%; + box-sizing: border-box; } &.@{prefix}-is-checked { @@ -89,8 +89,7 @@ } &--now { - border-top: 1px solid @calendar-highlight-color; - background-color: @calendar-body-cell-check-bg-color; + border-top: @calendar-border-size solid @calendar-highlight-color; .@{prefix}-calendar__table-body-cell-display { color: @calendar-body-cell-display-now-color; } @@ -108,6 +107,7 @@ &--card { width: @calendar-card-width; border-radius: @border-radius-medium; + padding: @calendar-card-pannel-padding; .@{prefix}-calendar__control { padding: @calendar-card-calendar-control-padding; @@ -119,6 +119,7 @@ &:last-child { flex: 1; text-align: right; + display: block; } } } @@ -128,12 +129,12 @@ &.@{prefix}-calendar__panel--month { height: @calendar-card-calendar-panel-height-month; - padding: @calendar-card-calendar-panel-padding-month; + margin-top: @calendar-card-pannel-margin-top; } &.@{prefix}-calendar__panel--year { height: @calendar-card-calendar-panel-height-year; - padding: @calendar-card-calendar-panel-padding-year; + margin-top: @calendar-card-pannel-margin-top; .@{prefix}-calendar__table { &-body { &-cell { @@ -164,7 +165,6 @@ &-cell { width: @calendar-card-cell-size; height: @calendar-card-cell-size; - margin: @calendar-card-body-cell-margin; justify-content: center; font: @calendar-card-body-cell-font; box-sizing: border-box; @@ -197,9 +197,7 @@ padding-bottom: @calendar-card-body-cell-display-padding; text-align: center; border-radius: @calendar-card-body-cell-display-border-radius; - transition-duration: @calendar-transition-duration; - transition-property: @calendar-transition-property; - transition-timing-function: @calendar-transition-timing-function; + transition: all @calendar-transition-duration @calendar-transition-timing-function; &:hover { box-shadow: inset 0 0 0 1px @calendar-highlight-color; @@ -240,7 +238,6 @@ &-section { height: 100%; - margin-right: @calendar-control-section-margin-right; display: flex; justify-content: flex-end; align-items: center; @@ -252,32 +249,21 @@ &-cell { height: @calendar-section-height; margin-right: @calendar-control-section-cell-margin-right; + display: flex; - &:last-child { - margin-right: 0; + .@{prefix}-radio-group { + vertical-align: bottom; } .@{prefix}-select { + display: inline; + } - &.@{prefix}-size-l { - padding-right: @calendar-control-section-cell-select-padding-left-l; - } - - &.@{prefix}-size-m { - padding-right: @calendar-control-section-cell-select-padding-left-m; - } - - &.@{prefix}-size-s { - padding-right: @calendar-control-section-cell-select-padding-left-s; - } + &:last-child { + margin-right: 0; } } } - - &-tag { - height: @calendar-control-tag-height; - padding: @calendar-control-tag-padding; - } } &__panel { @@ -326,7 +312,6 @@ &-cell { height: @calendar-head-cell-height; - padding: @calendar-head-padding; font: @calendar-head-cell-font; color: @calendar-head-cell-color; } diff --git a/style/web/components/calendar/_var.less b/style/web/components/calendar/_var.less index 754a4b0f4d..10a1852ca5 100644 --- a/style/web/components/calendar/_var.less +++ b/style/web/components/calendar/_var.less @@ -27,7 +27,6 @@ @calendar-body-cell-check-bg-color: @brand-color-light; @calendar-body-cell-border-check-color: @brand-color; @calendar-card-body-cell-bg-hover: @bg-color-secondarycontainer-hover; -@calendar-scrollbar-thumb-bg: #e5e5e5; @calendar-bg: @bg-color-container; @calendar-card-cell-value-check-color: @text-color-anti; @calendar-card-cell-value-check-bg: @brand-color; @@ -37,64 +36,53 @@ // 文字 @calendar-head-cell-font: @font-title-small; -@calendar-card-body-cell-font: @font-body-small; +@calendar-card-body-cell-font: @font-body-medium; @calendar-table-cell-font: @font-title-small; @calendar-body-cell-display-font: @font-title-small; -@calendar-card-body-cell-display-font: @font-body-small; +@calendar-card-body-cell-display-font: @font-body-medium; @calendar-head-title-font: @font-title-large; // 间距行高 -@calendar-control-padding: 32px 36px; -@calendar-panel-padding: 0px 36px 36px; -@calendar-head-padding: 0px; -@calendar-head-margin-bottom: 8px; -@calendar-body-cell-padding: 0px; -@calendar-body-cell-margin-left: 0px; -@calendar-table-margin-right: 8px; -@calendar-footer-padding: 46px 36px 20px; -@calendar-table-cell-padding: 0px; -@calendar-card-calendar-control-padding: 12px 12px 0; -@calendar-control-tag-height: 32px; -@calendar-control-tag-padding: 0 16px; -@calendar-card-calendar-panel-padding: 20px 14px; -@calendar-card-calendar-panel-padding-month: 12px; -@calendar-card-calendar-panel-padding-year: 12px; -@calendar-card-footer-padding: @spacer-2; -@calendar-control-section-margin-right: 16px; -@calendar-control-section-cell-margin-right: 8px; -@calendar-control-section-cell-select-padding-left-s: 35px; -@calendar-control-section-cell-select-padding-left-m: 42px; -@calendar-control-section-cell-select-padding-left-l: 51px; -@calendar-body-line-height: 22px; -@calendar-card-body-cell-margin: 0px; +@calendar-full-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@calendar-control-padding: 0; +@calendar-panel-margin-top: @comp-margin-xxxl; +@calendar-head-margin-bottom: @comp-margin-s; +@calendar-body-cell-padding: 0; +@calendar-body-cell-margin-left: 0; +@calendar-table-margin-right: @comp-margin-s; +@calendar-footer-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@calendar-table-cell-padding: 0; +@calendar-card-pannel-padding: @comp-paddingTB-m @comp-paddingLR-m; +@calendar-card-calendar-control-padding: 0; +@calendar-card-pannel-margin-top: @comp-margin-m; +@calendar-card-footer-padding: 0 @comp-paddingLR-m; +@calendar-control-section-cell-margin-right: @comp-margin-s; +@calendar-body-line-height: @text-line-height-base; @calendar-header-row-padding: 0px; -@calendar-card-body-cell-display-padding:2px; +@calendar-card-body-cell-display-padding: calc(@comp-paddingTB-xxs / 2); +@calendar-control-margin-bottom: @comp-margin-xxxl; +@calerdar-panel-card-padding: @comp-paddingTB-m @comp-paddingLR-m; +@calendar-card-control-margin-bottom: @comp-margin-m; // 尺寸 @calendar-full-min-width: 560px; -@calendar-control-height: 90px; @calendar-head-cell-height: 100%; -@calendar-body-cell-height: 87.4px; -@calendar-body-cell-content-min-height: 60px; -@calendar-body-cell-content-padding-top: 8px; +@calendar-body-cell-height: 104px; +@calendar-body-cell-content-min-height: 64px; +@calendar-body-cell-content-padding: @comp-paddingTB-s @comp-paddingLR-xs; @calendar-footer-height: 90px; -@calendar-card-width: 352px; -@calendar-card-calendar-control-height: 58px; -@calendar-card-calendar-panel-height: 290px; -@calendar-card-calendar-panel-height-month: 310px; -@calendar-card-calendar-panel-height-year: 256px; -@calendar-card-footer-height: 64px; -@calendar-through-height: 1200px; -@calendar-scrollbar-thumb-width: 6px; +@calendar-card-width: 280px; +@calendar-card-calendar-panel-height-month: 200px; +@calendar-card-calendar-panel-height-year: 168px; +@calendar-card-footer-height: @comp-size-xxl; @calendar-section-height: 100%; @calendar-card-cell-size: 100%; @calendar-card-table-size: 100%; -@calendar-card-cell-value-size: 24px; -@calendar-card-cell-value-size-year: 48px; -@calendar-border-size: 1px; -@calendar-card-checked-pointer-width: 6px; +@calendar-card-cell-value-size: @comp-size-xs; +@calendar-card-cell-value-size-year: @comp-size-xxl; +@calendar-border-size: 2px; + // 定位 -@calendar-title-position-top: -36px; @calendar-body-row-flex: 1; // 边框弧度 @@ -105,4 +93,4 @@ // 动画 @calendar-transition-duration: @anim-duration-base; @calendar-transition-property: border-top, background; -@calendar-transition-timing-function: @anim-time-fn-ease-in; +@calendar-transition-timing-function: linear; diff --git a/style/web/components/calendar/index.html b/style/web/components/calendar/index.html deleted file mode 100644 index 560a521a32..0000000000 --- a/style/web/components/calendar/index.html +++ /dev/null @@ -1,1305 +0,0 @@ - - - - - - Calendar - - - - - - - - - -
- - -
-

Calendar 日历

-

开发者：yorickili

-

创建日期：2020-10-25

-

说明：TDesign Calendar 组件的基本样式

-
- - - -
-

通用日历面板

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- 1024 -
-
-
- -
-
- -
-

卡片模式日历

- -
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- 1024 -
-
-
- - - -
-
- -
-

自然月状态

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - -
-
一月
-
- 		-
二月
-
- 		-
三月
-
- 		-
四月
-
-
-
五月
-
- 		-
六月
-
- 		-
七月
-
- 		-
八月
-
-
-
九月
-
- 		-
十月
-
- 		-
十一月
-
- 		-
十二月
-
-
-
-
- -
-
- -
-

自然月状态/卡片模式

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
1月
-
- 		-
2月
-
- 		-
3月
-
-
-
4月
-
- 		-
5月
-
- 		-
6月
-
-
-
7月
-
- 		-
8月
-
- 		-
9月
-
-
-
10月
-
- 		-
11月
-
- 		-
12月
-
-
-
-
- -
-
- -
-

翻阅模式

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2020年11月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
-
- 2020年12月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
-
- 2021年1月 -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
一二三四五六日
-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
- 		-
31
-
- 		-
01
-
- 		-
02
-
-
-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
- 		-
07
-
- 		-
08
-
- 		-
09
-
-
-
10
-
- 		-
11
-
- 		-
12
-
- 		-
13
-
- 		-
14
-
- 		-
15
-
- 		-
16
-
-
-
17
-
- 		-
18
-
- 		-
19
-
- 		-
20
-
- 		-
21
-
- 		-
22
-
- 		-
23
-
-
-
24
-
- 		-
25
-
- 		-
26
-
- 		-
27
-
- 		-
28
-
- 		-
29
-
- 		-
30
-
-
-
31
-
- 		-
01
-
- 		-
02
-
- 		-
03
-
- 		-
04
-
- 		-
05
-
- 		-
06
-
-
-
-
- -
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/card/_index.less b/style/web/components/card/_index.less index 8da6661779..a58ca3c7ee 100644 --- a/style/web/components/card/_index.less +++ b/style/web/components/card/_index.less @@ -16,7 +16,7 @@ border-radius: @card-border-radius; background-color: @card-background; color: @text-color-primary; - transition: box-shadow @anim-duration-base ease-in-out; + transition: box-shadow @anim-duration-base @anim-time-fn-easing; } .@{prefix}-card--bordered { @@ -42,7 +42,6 @@ .@{prefix}-card__body { display: flow-root; padding: @card-body-padding; - line-height: 1.5; } .@{prefix}-card__header { @@ -51,7 +50,6 @@ align-items: center; padding: @card-header-padding; position: relative; - line-height: 1.5; &-wrapper { flex: 1; @@ -66,6 +64,7 @@ .@{prefix}-card__footer { display: flex; + align-items: center; justify-content: space-between; padding: @card-footer-padding; @@ -89,13 +88,15 @@ } .@{prefix}-card__avatar { - margin-right: @spacer; + margin-right: @card-avatar-margin; + width: @card-avatar-size; + height: @card-avatar-size; } .@{prefix}-card__title { font: @font-title-medium; color: @card-color; - margin-right: @spacer-2; + margin-right: @card-title-margin; word-break: break-all; } @@ -108,7 +109,7 @@ .@{prefix}-card__description { font: @font-body-medium; color: @card-subtitle-color; - margin-top: (@spacer / 2); + margin-top: @card-description-margin; word-break: break-all; } @@ -119,9 +120,7 @@ .@{prefix}-card__title--bordered { border-bottom: 1px solid @card-border-color; - padding-bottom: @spacer-2; + .@{prefix}-card__body { - padding-top: @spacer-2; } } diff --git a/style/web/components/card/_var.less b/style/web/components/card/_var.less index 0844af44fc..a244475b61 100644 --- a/style/web/components/card/_var.less +++ b/style/web/components/card/_var.less @@ -1,21 +1,22 @@ @card-border-radius: @border-radius-medium; // medium -@card-body-padding: @spacer-2 @spacer-3; - -@card-header-padding: @spacer-2 @spacer-3; - -@card-footer-padding: @spacer-2 @spacer-3; - -@card-avatar-size: 56px; +@card-body-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-header-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-footer-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@card-avatar-size: @comp-size-xxxl; // small -@card-body-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); -@card-header-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); - -@card-footer-padding-s: (@spacer-2 / 2) (@spacer-3 / 2); +@card-body-padding-s: @comp-paddingTB-s @comp-paddingLR-l; +@card-header-padding-s: @comp-paddingTB-s @comp-paddingLR-l; +@card-footer-padding-s: @comp-paddingTB-s @comp-paddingLR-l; @card-border-color: @component-border; @card-background: @bg-color-container; @card-color: @text-color-primary; @card-subtitle-color: @text-color-secondary; + +// margin +@card-avatar-margin: @comp-margin-l; +@card-description-margin: @comp-margin-xs; +@card-title-margin: @comp-margin-l; diff --git a/style/web/components/card/index.html b/style/web/components/card/index.html deleted file mode 100644 index cb6417c260..0000000000 --- a/style/web/components/card/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Card 卡片 - - - - - - - - -
- - -
-

Card 卡片

-

开发者：zhwachen

-

创建日期：2022-03-10

-

说明：Card 卡片

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less index 4fdef4a403..d2e0610a25 100644 --- a/style/web/components/cascader/_index.less +++ b/style/web/components/cascader/_index.less @@ -97,20 +97,12 @@ height: @cascader-item-height-s; font: @cascader-font-s; padding: @cascader-item-padding-s; - - .@{prefix}-cascader__item-label { - padding: 1px 0; - } } &.@{prefix}-size-l { height: @cascader-item-height-l; font: @cascader-font-l; padding: @cascader-item-padding-l; - - .@{prefix}-cascader__item-label { - padding: 6px 0; - } } &.@{prefix}-is-disabled { @@ -186,7 +178,7 @@ display: block; position: relative; white-space: nowrap; - padding: 3px 0; + padding: 0; &--ellipsis { .text-ellipsis(); diff --git a/style/web/components/cascader/_var.less b/style/web/components/cascader/_var.less index cf843a3a6a..64341b74ff 100644 --- a/style/web/components/cascader/_var.less +++ b/style/web/components/cascader/_var.less @@ -20,9 +20,9 @@ // menu面板 @cascader-menu-segment-color: @component-stroke; -@cascader-menu-padding: 6px; -@cascader-menu-padding-s: 4px; -@cascader-menu-padding-l: 8px; +@cascader-menu-padding: @pop-padding-m; +@cascader-menu-padding-s: @pop-padding-s; +@cascader-menu-padding-l: @pop-padding-l; @cascader-color-empty: @text-color-disabled; @@ -31,15 +31,15 @@ @cascader-item-color-hover: @bg-color-container-hover; @cascader-item-color-disabled: @text-color-disabled; @cascader-item-background-color-expanded: @brand-color-light; -@cascader-item-height-s: 22px; -@cascader-item-height-default: 28px; -@cascader-item-height-l: 36px; -@cascader-item-margin-top: 2px; +@cascader-item-height-s: @comp-size-xs; +@cascader-item-height-default: @comp-size-s; +@cascader-item-height-l: @comp-size-m; +@cascader-item-margin-top: @comp-margin-xxs; @cascader-item-border-radius: @border-radius-default; -@cascader-item-padding-with-icon: 0 22px 0 8px; -@cascader-item-padding: 0 8px; -@cascader-item-padding-s: 0px 8px; -@cascader-item-padding-l: 0 12px; +@cascader-item-padding-with-icon: 0 @comp-paddingLR-s; +@cascader-item-padding: 0 @comp-paddingLR-s; +@cascader-item-padding-s: 0px @comp-paddingLR-s; +@cascader-item-padding-l: 0 @comp-paddingLR-m; // icon @cascader-icon-color: @text-color-placeholder; diff --git a/style/web/components/cascader/index.html b/style/web/components/cascader/index.html deleted file mode 100644 index 84dc9c23c4..0000000000 --- a/style/web/components/cascader/index.html +++ /dev/null @@ -1,735 +0,0 @@ - - - - - - Cascader - - - - - - - - -
- - -
-

Cascader

-

开发者：bingolin

-

创建日期：2020.10.14

-

说明：tdesign cascader 组件的基本样式

-
- - - - -
-

默认

- - -
- - - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
  • - 西瓜🍉 - -
    • -
  • - 哈密瓜🍈 - -
    • -
-
-
- -
- - - -
-
- - -
-

类型

- - -
- - -
- 云数据库 /Redis / 备机监控 - -
-
-
-
    -
  • - 云数据库 - -
    • -
  • - API网光 - -
    • -
  • - DDOS防护 - -
    • -
  • - 私有网络 - -
    • -
  • - 云服务器总带宽 - -
    • -
  • - 更多1 - -
    • -
  • - 更多2 - -
    • -
-
    -
  • - MySQL - -
    • -
  • - CTSDB - -
    • -
  • - Redis - -
    • -
  • - MongoDB - -
    • -
  • - MariaDB - -
    • -
-
    -
  • - 主机监控 - -
    • -
  • - 备选监控 -
    • -
-
-
- - -
- -
- -
- - 广东 - - - - 广州 - - - - 宝安区 - - - -
-
-
-
    -
  • - - 广东 - -
    • -
  • - - 天津 - -
    • -
  • - - 浙江 - -
    • -
  • - - 上海 - -
    • -
  • - - 山东 - -
    • -
  • - - 安徽 - -
    • -
  • - - 山西 - -
    • -
-
    -
  • - - 广州 - -
    • -
  • - - 深圳 - -
    • -
  • - - 珠海 - -
    • -
  • - - 汕头 - -
    • -
  • - - 佛山 - -
    • -
  • - - 东莞 - -
    • -
  • - - 惠州 - -
    • -
-
    -
  • - - 南山区 - -
    • -
  • - - 宝安区 - -
    • -
  • - - 坪山区 - -
    • -
  • - - 龙岗区 - -
    • -
  • - - 福田区 - -
    • -
  • - - 罗湖区 - -
    • -
  • - - 盐田区 - -
    • -
-
-
- - -
-
- - -
-

状态 - 禁用

- - -
- - - - -
-
- 请选择 - -
-
-
- - 广东 - - - - 广州 - - - - 宝安区 - - - -
-
- - - -
-
- - -
-

状态 - 数据加载

-
- - - -
- -
- 请选择 - -
-
-
- 数据加载中 - -
-
- -
- - - -
-
- - - -
- -
- 请选择 - -
-
-
- 网络异常 - 重新加载 -
-
- -
- - - -
-
- - - -
- -
- 请选择 - -
-
-
- 暂无数据 -
-
- -
- - - -
-
- -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 加载中 - -
    • -
-
-
- -
-
-
-
    -
  • - - 宝安区 - -
    • -
  • - - 宝安区 - -
    • -
-
-
-
-
- - -
-

状态 - 搜索

-
- - -
- - -
-
-
-
    -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 私有网络/云服务器/数据库
    • -
  • 黑石私有网络/云服务器/数据库
    • -
  • 黑石私有网络/云服务器/数据库
    • -
-
-
- - -
-
- - -
-

尺寸

-
-

尺寸 - 高度 - 小

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 高度 - 默认（中）

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 高度 - 大

- - - -
- -
- 请选择 - -
-
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
  • - 雪梨🍐 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 宽度 - 默认（小）

- - - -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
-
-
- -
- - - -
- -
-

尺寸 - 宽度 - 大

- - - -
- -
-
-
    -
  • - 香蕉🍌 - -
    • -
  • - 苹果 - -
    • -
  • - 葡萄🍇 - -
    • -
  • - 橘子🍊 - -
    • -
-
-
- -
- - - -
-
- - - \ No newline at end of file diff --git a/style/web/components/checkbox/_var.less b/style/web/components/checkbox/_var.less index c812e5f834..46c0735ab1 100644 --- a/style/web/components/checkbox/_var.less +++ b/style/web/components/checkbox/_var.less @@ -35,7 +35,7 @@ // 尺寸 @checkbox-size: 16px; @checkbox-border-radius: @border-radius-default; -@checkbox-margin-right: @spacer; +@checkbox-margin-right: @comp-margin-s; @checkbox-check-width: 5px; @checkbox-check-height: 9px; diff --git a/style/web/components/checkbox/index.html b/style/web/components/checkbox/index.html deleted file mode 100644 index 2f3ac5b055..0000000000 --- a/style/web/components/checkbox/index.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - checkbox - - - - - - - -
- - -
-

Checkbox

-

开发者：yuhaozhuang

-

创建日期：20200526

-

说明：--

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - - -
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less index 5757f4e138..1fa6f0cd5a 100644 --- a/style/web/components/collapse/_index.less +++ b/style/web/components/collapse/_index.less @@ -33,32 +33,32 @@ .@{collapse-panel-cls} { &__icon { - transition: transform .25s; + transition: all @anim-duration-base @anim-time-fn-easing; cursor: pointer; display: flex; align-items: center; justify-content: center; - &--default { + > .t-fake-arrow { transform: rotate(-90deg); + transition: all @anim-duration-base @anim-time-fn-easing; } &--left { - margin-right: @spacer-1; + margin-right: @collapse-panel-header-icon-margin; } &--right { - margin-left: @spacer-1; + margin-left: @collapse-panel-header-icon-margin; } - &--active { - transform: rotate(90deg); + &--active > .t-fake-arrow { + transform: rotate(0); } &:hover { background-color: @bg-color-container-hover; border-radius: @border-radius-small; - transition: background-color @anim-duration-base; } } @@ -66,9 +66,8 @@ overflow: hidden; .@{collapse-panel-cls}__header { - padding: 0 16px; + padding: @collapse-panel-header-padding; border-bottom: @collapse-border-size; - height: @collapse-panel-header-height; font: @collapse-panel-header-text; display: flex; align-items: center; @@ -98,7 +97,7 @@ } } .@{collapse-panel-cls}__content { - padding: 12px 16px 12px 40px; + padding: @collapse-panel-content-padding; color: @collapse-panel-content-text-color; } } @@ -126,5 +125,5 @@ .@{prefix}-slide-down-enter-active, .@{prefix}-slide-down-leave-active { - transition: height .3s, padding .3s; + transition: height @anim-duration-base, padding @anim-duration-base; } diff --git a/style/web/components/collapse/_var.less b/style/web/components/collapse/_var.less index a6ab446405..98d3735618 100644 --- a/style/web/components/collapse/_var.less +++ b/style/web/components/collapse/_var.less @@ -14,7 +14,7 @@ @collapse-cls: ~"@{prefix}-collapse"; @collapse-panel-cls: ~"@{collapse-cls}-panel"; // 高度 -@collapse-panel-header-height: 46px; +// @collapse-panel-header-height: 46px; // 颜色 @collapse-border-size: solid 1px @component-border; @@ -24,3 +24,8 @@ // 字体颜色 @collapse-panel-content-text-color: @text-color-secondary; + +// 间距 +@collapse-panel-header-padding: @comp-paddingTB-m @comp-paddingLR-l; +@collapse-panel-header-icon-margin: @comp-margin-s; +@collapse-panel-content-padding: @comp-paddingTB-m @comp-paddingLR-l @comp-paddingTB-m calc(@comp-paddingLR-l + @comp-margin-xxl) ; diff --git a/style/web/components/collapse/index.html b/style/web/components/collapse/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/collapse/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less index 0f363749a7..bf4ea99ecd 100644 --- a/style/web/components/color-picker/_index.less +++ b/style/web/components/color-picker/_index.less @@ -12,11 +12,7 @@ padding: 0; width: @color-picker-panel-width; background: @bg-color-container; - box-shadow: @shadow-1, - @shadow-inset-top, - @shadow-inset-right, - @shadow-inset-bottom, - @shadow-inset-left; + box-shadow: @color-picker-panel-shadow; border-radius: @border-radius-medium; user-select: none; } @@ -32,29 +28,23 @@ .reset; &.t-popup__content { - border-radius: @color-picker-border-radius; - box-shadow: @shadow-1, - @shadow-inset-top, - @shadow-inset-right, - @shadow-inset-bottom, - @shadow-inset-left; + box-shadow: @color-picker-panel-shadow; } &__icon { - width: @color-picker-icon-size; - height: @color-picker-icon-size; display: flex; align-items: center; justify-content: center; font-size: @color-picker-icon-font-size; - background: @bg-color-container; - transition: color @anim-duration-base @anim-time-fn-easing; + background: transparent; + transition: @anim-duration-base linear; color: @text-color-secondary; border-radius: @color-picker-icon-radius; cursor: pointer; &:hover { background: @bg-color-container-hover; + transition: @anim-duration-base linear; } &.@{prefix}-is-disabled { color: @text-color-disabled; @@ -82,7 +72,7 @@ .@{prefix}-color-picker__body { padding: @color-picker-panel-padding; - padding-bottom: 8px; + padding-bottom: calc(@color-picker-panel-padding - 4px); } .@{prefix}-color-picker__thumb { @@ -93,8 +83,8 @@ width: @color-picker-slider-thumb-size; height: @color-picker-slider-thumb-size; border-radius: @border-radius-circle; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 15%); - background: white; + box-shadow: @color-picker-thumbs-shadow; + background: @text-color-anti; color: @text-color-brand; padding: @color-picker-slider-thumb-padding; box-sizing: border-box; @@ -127,10 +117,12 @@ } &::before { + /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(90deg, #fff, transparent); } &::after { + /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(0deg, #000, transparent); } @@ -143,22 +135,24 @@ } .transparentBgImage () { + /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .@{prefix}-color-picker__slider-wrapper { - border-radius: @color-picker-slider-height; - padding: 0 9px; + border-radius: @color-picker-slider-wrapper-radius; + padding: @color-picker-slider-wrapper-padding; position: relative; &--hue-type { + /* stylelint-disable-next-line color-named */ background: red; } &--alpha-type { - background: #fff; + background: @text-color-anti; .transparentBgImage(); } } @@ -169,13 +163,13 @@ top: 0; width: 100%; height: @color-picker-slider-height; - border-radius: @color-picker-slider-height; + border-radius: @color-picker-slider-wrapper-radius; } .@{prefix}-color-picker__slider { height: @color-picker-slider-height; position: relative; - border-radius: @color-picker-slider-height; + border-radius: @color-picker-slider-wrapper-radius; cursor: pointer; color: transparent; outline: none; @@ -203,6 +197,7 @@ } .@{prefix}-color-picker__hue { + /* stylelint-disable color-no-hex, color-named */ background: linear-gradient( 90deg, red, @@ -228,7 +223,7 @@ } .@{prefix}-color-picker__sliders { - width: 186px; + width: 100%; } .@{prefix}-color-picker__sliders-preview { @@ -238,6 +233,7 @@ height: @color-picker-gradient-preview-height; border-radius: @color-picker-gradient-preview-radius; overflow: hidden; + background: @text-color-anti; .transparentBgImage(); &-inner { @@ -296,7 +292,7 @@ } &.@{prefix}-is-active { z-index: 1; - outline: 2px solid @text-color-brand; + outline: 2px solid @component-border; } &-inner { @@ -305,8 +301,6 @@ height: 100%; border-radius: @border-radius-circle; overflow: hidden; - background-size: 4px 4px; - background-position: 0 0, 2px 2px; &::before { content: ""; @@ -339,17 +333,12 @@ .@{prefix}-input-number .@{prefix}-input { margin: 0; } - .@{prefix}-select { - &__single { - margin-left: 4px; - } - } .input-group { display: flex; align-items: center; justify-content: space-around; - margin-left: 8px; + margin-left: @color-picker-input-format-margin-left; &__item { flex: 1; @@ -357,7 +346,6 @@ margin-left: -1px; .@{prefix}-input { padding: 0 1px; - font: @color-picker-font; &:focus, &:focus-within, @@ -394,7 +382,8 @@ } &-mode-select { - width: 70px; + width: @color-picker-select-format-width; + display: flex; .t-select, .t-input { @@ -406,13 +395,13 @@ } .t-select__right-icon { - margin: 0 4px 0 0; + margin-right: @color-picker-select-format-margin-right; } } } .@{prefix}-color-picker__swatches-wrap { - margin: @color-picker-margin 0 0 0; + margin-top: @color-picker-margin; position: relative; .@{prefix}-color-picker__swatches { @@ -423,7 +412,6 @@ &--title { font: @color-picker-font; - margin: 0 0 12px; padding: 0; color: @text-color-primary; display: flex; @@ -437,26 +425,9 @@ align-items: center; font-size: 0; .@{prefix}-color-picker__icon { - width: 16px; - height: 16px; - margin-left: @color-picker-margin; - } - } - - &--remove { - position: relative; - // 不使用popconfirm 组件， 这里绝对定位到正上方 - .@{prefix}-popup { - position: absolute; - inset: auto auto 0 0; - margin: 0; - bottom: 30px; - left: 10px; - transform: translateX(-50%); - cursor: default; - } - .@{prefix}-popconfirm__content { - width: 220px; + width: @color-picker-swatch-icon-size; + height: @color-picker-swatch-icon-size; + margin-left: @color-picker-swatch-action-margin-left; } } @@ -469,19 +440,17 @@ max-height: @color-picker-swatch-rows-max-height; overflow-x: hidden; overflow-y: auto; - margin: @color-picker-swatch-wrap-margin; - padding: 4px 10px 4px 4px; + padding: @color-picker-swatch-item-padding; position: relative; - left: -4px; + left: @color-picker-swatch-item-left-negative-padding; } &--item { display: flex; width: @color-picker-swatch-width; height: @color-picker-swatch-height; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; padding: @color-picker-swatch-padding; - border: @color-picker-swatch-border-size solid transparent; overflow: hidden; cursor: pointer; align-items: center; @@ -503,7 +472,7 @@ position: relative; overflow: hidden; border: 1px solid @component-border; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; flex-shrink: 0; } @@ -530,8 +499,7 @@ height: 100%; position: relative; overflow: hidden; - border: 1px solid @component-border; - border-radius: @border-radius-circle; + border-radius: @border-radius-default; box-sizing: border-box; } @@ -539,6 +507,8 @@ width: 100%; height: 100%; display: block; + border-radius: @border-radius-default; + box-shadow: @colot-picker-swatch-item-color-inset-shadow; } } } @@ -551,33 +521,35 @@ width: fit-content; } .@{prefix}-input { - padding: 0 4px; + padding: @color-picker-trigger-input-padding; } &__color { - width: 24px; - height: 24px; - margin-right: 4px; + width: 100%; + height: 100%; box-sizing: border-box; + display: flex; + align-items: center; .color-inner { border: 1px solid @scrollbar-color; display: block; - width: 22px; - height: 22px; + width: @color-picker-trigger-input-color-inner-size; + height: @color-picker-trigger-input-color-inner-size; color: transparent; position: relative; - border-radius: @border-radius-default; + border-radius: @border-radius-small; } } } } .@{prefix}-color-picker__gradient-slider { - padding: 0 9px; - border-radius: @color-picker-slider-height; + padding: @color-picker-slider-wrapper-padding; + border-radius: @color-picker-slider-wrapper-radius; .@{prefix}-color-picker--bg-alpha { + background: @text-color-anti; .transparentBgImage(); } } @@ -603,7 +575,6 @@ // 覆盖select-option 默认样式，使其更紧凑点 .@{prefix}-color-picker__select-options { > .@{prefix}-popup__content { - border-radius: @color-picker-border-radius; box-shadow: @shadow-1, @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left; } } diff --git a/style/web/components/color-picker/_var.less b/style/web/components/color-picker/_var.less index 0b9484459c..68cd97b2a6 100644 --- a/style/web/components/color-picker/_var.less +++ b/style/web/components/color-picker/_var.less @@ -11,35 +11,43 @@ // 如：@button-line-bg-color-hover // 如：@button-line-height-s -@color-picker-border-radius: 6px; -@color-picker-panel-width: 254px; -@color-picker-panel-padding: 12px; -@color-picker-panel-radius: 6px; -@color-picker-saturation-height: 168px; -@color-picker-saturation-radius: 4px; -@color-picker-saturation-thumb-size: 18px; -@color-picker-margin: 12px; +@color-picker-panel-width: 256px; +@color-picker-panel-padding: @pop-padding-xl; +@color-picker-panel-radius: @border-radius-medium; +@color-picker-icon-radius: @border-radius-default; +@color-picker-saturation-height: 160px; +@color-picker-saturation-radius: @border-radius-default; +@color-picker-saturation-thumb-size: calc(@comp-size-xxxs + @size-1); +@color-picker-margin: @comp-margin-m; @color-picker-slider-height: 8px; -@color-picker-slider-thumb-size: 18px; -@color-picker-slider-thumb-transform-x: @color-picker-slider-thumb-size * -.5; +@color-picker-slider-wrapper-radius: calc(@color-picker-slider-height / 2); +@color-picker-slider-wrapper-padding: 0 calc(@color-picker-saturation-thumb-size / 2); +@color-picker-slider-thumb-size: calc(@comp-size-xxxs + @size-1); +@color-picker-slider-thumb-transform-x: calc(@color-picker-slider-thumb-size * -.5); @color-picker-slider-thumb-padding: 2px; -@color-picker-input-format-width: 64px; +@color-picker-input-format-margin-left: @comp-margin-s; +@color-picker-select-format-margin-right: @comp-margin-xs; +@color-picker-select-format-width: 72px; @color-picker-font: @font-body-small; -@color-picker-icon-size: 20px; -@color-picker-icon-radius: 3px; -@color-picker-icon-font-size: 16px; -@color-picker-degree-width: 42px; -@color-picker-gradient-preview-width: 32px; -@color-picker-gradient-preview-height: 32px; +@color-picker-icon-radius: @border-radius-default; +@color-picker-icon-font-size: @color-picker-swatch-icon-size; +@color-picker-degree-width: @comp-size-xxl; +@color-picker-gradient-preview-width: @comp-size-s; +@color-picker-gradient-preview-height: @comp-size-s; @color-picker-gradient-preview-radius: @border-radius-default; -@color-picker-swatch-width: 18px; -@color-picker-swatch-height: 18px; -@color-picker-swatch-radius: 50%; +@color-picker-swatch-icon-size: @comp-size-xxxs; +@color-picker-swatch-action-margin-left: @comp-margin-s; +@color-picker-swatch-width: @comp-size-xxxs; +@color-picker-swatch-height: @comp-size-xxxs; +@color-picker-swatch-radius: @border-radius-circle; @color-picker-swatch-padding: 0; @color-picker-swatch-border-size: 1px; @color-picker-swatch-columns: 10; -@color-picker-swatch-row-gap: 5.7px; -@color-picker-swatch-column-gap: 5.7px; +@color-picker-swatch-item-padding: calc(@color-picker-panel-padding - 8px); //make sure swatchItem scale +@color-picker-swatch-item-left-negative-padding: calc(0px - @color-picker-swatch-item-padding); +// columnGap = (panelWidth - (panelPadding * 2) + (swatchColor * columnsItem)) / 9 +@color-picker-swatch-row-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-height * @color-picker-swatch-columns))) / 9); +@color-picker-swatch-column-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-width * @color-picker-swatch-columns))) / 9); @color-picker-swatch-wrap-margin-left: (@color-picker-swatch-padding + @color-picker-swatch-border-size) * -1; // 右边往外伸出一点，让滚动条居外侧 @color-picker-swatch-wrap-margin-right: @color-picker-swatch-wrap-margin-left - @@ -48,6 +56,15 @@ @color-picker-swatch-wrap-margin-left; @color-picker-swatch-max-rows: 4; // 最大显示行数 +// shadow +@color-picker-panel-shadow: @shadow-2-inset; +@color-picker-thumbs-shadow: @shadow-1; +@colot-picker-swatch-item-color-inset-shadow: @shadow-inset; + // 最大高度 = 行数 * (itemHeight + itemMarginTop)m; -@color-picker-swatch-rows-max-height: @color-picker-swatch-max-rows * - (@color-picker-swatch-height + @color-picker-swatch-row-gap); +@color-picker-swatch-rows-max-height: calc(@color-picker-swatch-max-rows * +calc(@color-picker-swatch-height + @color-picker-swatch-row-gap)); + +// trigger-input +@color-picker-trigger-input-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs; +@color-picker-trigger-input-color-inner-size: calc(@comp-size-xs - 2px); diff --git a/style/web/components/color-picker/index.html b/style/web/components/color-picker/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/color-picker/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less index 2914b89307..914abc160a 100644 --- a/style/web/components/comment/_index.less +++ b/style/web/components/comment/_index.less @@ -22,11 +22,12 @@ flex-shrink: 0; margin-right: @comment-avatar-margin-right; cursor: pointer; + display: flex; } &__avatar-image { - width: 56px; - height: 56px; + width: @comment-avatar-size; + height: @comment-avatar-size; border-radius: @border-radius-circle; } @@ -41,23 +42,19 @@ justify-content: flex-start; align-items: baseline; margin-bottom: @comment-author-margin-bottom; - - & > span { - padding-right: @comment-padding-s; - } } &__name { display: inline-flex; align-items: center; font: @comment-author-text-size; + padding-right: @comment-author-name-padding-right; cursor: pointer; } &__time { font: @comment-secondary-text-size; - padding-top: (@spacer-1 / 4); - padding-bottom: (@spacer-1 / 4); + padding-right: @comment-author-time-padding-right; color: @comment-text-color-secondary; } @@ -69,7 +66,7 @@ &__quote { margin-top: @comment-quote-margin-top; border-left: 4px solid @comment-border-color-default; - padding-left: 16px; + padding-left: @comment-quote-padding-left; & .@{prefix}-comment { &__name, @@ -85,16 +82,13 @@ justify-content: flex-end; list-style: none; padding: 0; + gap: @comment-actions-gap; - & > li { - color: @comment-text-color-secondary; - margin-left: @comment-action-margin-left; - font: @comment-secondary-text-size; - cursor: pointer; - user-select: none; + .@{prefix}-button--variant-text { + color: @text-color-placeholder; - &:hover { - color: @comment-text-color-hover; + .@{prefix}-button__text { + gap: @comment-actions-gap; } } } @@ -105,5 +99,17 @@ background-color: @comment-bg-color-secondary; border-radius: @border-radius-medium; padding: @comment-reply-padding; + + .@{prefix}-button--variant-text { + color: @text-color-placeholder; + + &:hover { + background-color: @bg-color-secondarycontainer-hover; + } + + .@{prefix}-button__text { + gap: @comment-actions-gap; + } + } } } diff --git a/style/web/components/comment/_var.less b/style/web/components/comment/_var.less index 9386259f81..25b866545b 100644 --- a/style/web/components/comment/_var.less +++ b/style/web/components/comment/_var.less @@ -18,7 +18,7 @@ @comment-text-color-default: @text-color-primary; @comment-text-color-secondary: @text-color-placeholder; @comment-text-color-hover: @text-color-link; -@comment-border-color-default: @bg-color-secondarycontainer; +@comment-border-color-default: @component-stroke; // 字体尺寸、行高 @comment-author-text-size: @font-title-medium; @@ -26,12 +26,16 @@ @comment-secondary-text-size: @font-body-small; // 盒模型尺寸 -@comment-padding-s: @spacer-1; -@comment-avatar-margin-right: @spacer-3; -@comment-author-margin-bottom: @spacer-s; -@comment-actions-margin-top: @spacer-1; -@comment-action-margin-left: @spacer-3; -@comment-quote-margin-top: @spacer-2; -@comment-reply-margin-left: @spacer-10; -@comment-reply-margin-top: @spacer-2; -@comment-reply-padding: @spacer-2 @spacer-3; +@comment-padding-s: @comp-paddingTB-s @comp-paddingLR-s; +@comment-avatar-margin-right: @comp-margin-xxl; +@comment-author-margin-bottom: @comp-margin-s; +@comment-author-time-padding-right: @comp-paddingLR-s; +@comment-author-name-padding-right: @comp-paddingLR-s; +@comment-actions-margin-top: @comp-margin-s; +@comment-actions-gap: @comp-margin-s; +@comment-quote-margin-top: @comp-margin-l; +@comment-quote-padding-left: @comp-margin-l; +@comment-reply-margin-left: calc(@comp-size-xxxl + @comp-margin-xxl); +@comment-reply-margin-top: @comp-margin-l; +@comment-reply-padding: @comp-paddingTB-l @comp-paddingLR-xl; +@comment-avatar-size: @comp-size-xxxl; diff --git a/style/web/components/comment/index.html b/style/web/components/comment/index.html deleted file mode 100644 index 2dfda123cc..0000000000 --- a/style/web/components/comment/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - comment - - - - - - - -
- - -
-

Comment

-

开发者：dreamsyang

-

创建日期：2021-09-13

-

说明：TDesign comment 组件的基本样式

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less index 614c9eacfb..e40a513e65 100644 --- a/style/web/components/date-picker/_index.less +++ b/style/web/components/date-picker/_index.less @@ -17,7 +17,7 @@ .@{prefix}-date-picker__header-controller-month-popup, .@{prefix}-date-picker__header-controller-year-popup { > .@{prefix}-popup__content { - max-height: @datepicker-panel-select-max-width;; + max-height: @datepicker-panel-select-max-width; } } @@ -57,27 +57,26 @@ .@{prefix}-date-range-picker__panel-content-wrapper { display: flex; } -.@{prefix}-date-range-picker__panel-content-wrapper { - gap: 6px; -} .@{prefix}-date-picker__header { display: flex; align-items: center; justify-content: space-between; - gap: @spacer-l; + gap: @datepicker-header-gap; width: 100%; &-controller { display: inline-flex; - gap: @spacer; + gap: @datepicker-header-controller-gap; .@{prefix}-date-picker__header-controller-month { width: @datepicker-month-controller-width; + display: flex; } .@{prefix}-date-picker__header-controller-year { width: @datepicker-year-controller-width; + display: flex; } } } @@ -102,13 +101,20 @@ td.@{prefix}-date-picker__cell { padding: 0; border: 0; - line-height: initial; + line-height: @text-line-height-base; } thead::after { content: "-"; display: block; - line-height: @spacer-s - 1px; + line-height: @datepicker-thead-pseudo-line-height; + color: transparent; + } + + thead::before { + content: "-"; + display: block; + line-height: @datepicker-thead-pseudo-line-height; color: transparent; } } @@ -130,12 +136,12 @@ &::after { content: ""; position: absolute; - left: 33px; + left: @datepicker-week-firstcell-margin-left; right: 0; - top: 3px; + top: @datepicker-cell-inner-margin; z-index: 10; - height: 24px; - border-radius: 3px; + height: @datepicker-cell-height; + border-radius: @border-radius-default; transition: @datepicker-transition; pointer-events: none; } @@ -153,6 +159,7 @@ // 高亮 &--active { &::after { + opacity: 1; z-index: 0; background-color: @datepicker-cell-active-background; } @@ -168,6 +175,7 @@ // 在高亮区间 &--range { &::after { + opacity: 1; z-index: 0; background-color: @datepicker-highlight-color; } @@ -236,14 +244,14 @@ .@{prefix}-date-range-picker__panel-time { display: flex; flex-direction: column; - gap: 2px; + gap: @datepicker-time-panel-gap; padding: @datepicker-time-panel-padding; border-left: 1px solid @datepicker-panel-divider-color; &-viewer { display: flex; - height: 32px; - line-height: 22px; + height: @datepicker-time-header-viewer-size; + line-height: @text-line-height-base; align-items: center; justify-content: center; color: @text-color-primary; @@ -261,10 +269,10 @@ .@{prefix}-date-picker__panel-date { display: flex; flex-direction: column; - width: 100%; - padding: @spacer-l; - gap: @spacer-l; - max-width: @datepicker-panel-max-width; + padding: @datepicker-panel-padding; + gap: @datepicker-panel-gap; + width: @datepicker-panel-width; + box-sizing: border-box; } // year month picker highlight @@ -274,21 +282,24 @@ .@{prefix}-date-picker__cell--hover-highlight { &::before, &::after { - left: -28px; + opacity: 1; + left: @datepicker-cell-month-year-left; } } .@{prefix}-date-picker__cell--hover-highlight + .@{prefix}-date-picker__cell--active { &::after { - left: 0; + opacity: 1; + left: @datepicker-cell-month-year-left; + z-index: 5; } } .@{prefix}-date-picker__cell--highlight + .@{prefix}-date-picker__cell--highlight { &::before { - left: -28px; + left: @datepicker-cell-month-year-left; } } } @@ -298,6 +309,7 @@ .@{prefix}-date-picker__panel-quarter { .@{prefix}-date-picker__header-controller-year { width: 130px; + display: flex; } .@{prefix}-date-picker__table { @@ -305,7 +317,7 @@ tbody { width: 100%; display: flex; - gap: @spacer-2; + gap: @datepicker-year-month-quarter-table-gap; flex-direction: column; tr { @@ -317,7 +329,7 @@ } .@{prefix}-date-picker__cell--disabled + .@{prefix}-date-picker__cell--disabled:before { - left: -@spacer-7; + left: @datepicker-cell-disabled-left-large; } .@{prefix}-date-picker__cell:nth-child(1) { @@ -343,12 +355,14 @@ content: ""; position: absolute; top: 50%; - right: 0; - left: 0; + right: -5%; + left: -5%; z-index: 1; + opacity: 0; + border-radius: @border-radius-default; height: @datepicker-cell-height; transform: translateY(-50%); - transition: all .2s @anim-time-fn-easing; + transition: opacity @anim-duration-base @anim-time-fn-ease-out; } &:hover { @@ -365,7 +379,7 @@ align-items: center; width: @datepicker-cell-min-width; height: @datepicker-cell-height; - margin: @spacer-s - 1px; + margin: @datepicker-cell-inner-margin; border-radius: @datepicker-panel-border-radius; transition: @datepicker-transition; } @@ -379,17 +393,20 @@ &--hover-highlight { &::after { + opacity: 1; background-color: @datepicker-highlight-color; } } &--highlight { &::before { + opacity: 1; background-color: @datepicker-highlight-color; } &.@{prefix}-date-picker__cell--hover-highlight { &::after { + opacity: 1; background-color: @datepicker-hover-highlight-color; } } @@ -417,18 +434,28 @@ &-start { &::before { - left: 6px; + opacity: 1; + left: @datepicker-cell-start-end-horizontal; border-top-left-radius: @border-radius-default; border-bottom-left-radius: @border-radius-default; } + + &:hover::before { + left: -5%; + } } &-end { &::before { - right: 6px; + opacity: 1; + right: @datepicker-cell-start-end-horizontal; border-top-right-radius: @border-radius-default; border-bottom-right-radius: @border-radius-default; } + + &:hover::before { + right: -5%; + } } } @@ -449,8 +476,10 @@ &--disabled + &--disabled { &::before { - left: -@spacer-4; + opacity: 1; + left: @datepicker-cell-disabled-left; background-color: @datepicker-cell-disable-background-color; + border-radius: @border-radius-default; } } } diff --git a/style/web/components/date-picker/_var.less b/style/web/components/date-picker/_var.less index c7b67f744e..aade6ce8c4 100644 --- a/style/web/components/date-picker/_var.less +++ b/style/web/components/date-picker/_var.less @@ -13,26 +13,40 @@ @datepicker-th-font-color: @text-color-secondary; -@datepicker-panel-max-width: 280px; +@datepicker-panel-width: 280px; @datepicker-panel-container-min-width: 280px; @datepicker-panel-select-max-width: 160px; @datepicker-panel-divider-color: @component-stroke; @datepicker-time-panel-width: 216px; -@datepicker-time-panel-padding: @spacer-l; - +@datepicker-time-panel-padding: @pop-padding-xl calc(@pop-padding-xl - @comp-margin-xs); +@datepicker-panel-padding: @pop-padding-xl; +@datepicker-header-gap: @comp-margin-m; +@datepicker-header-controller-gap: @comp-margin-s; +@datepicker-time-header-viewer-size: @comp-size-m; +@datepicker-panel-gap: @comp-margin-m; +@datepicker-year-month-quarter-table-gap: @comp-margin-m; +@datepicker-week-firstcell-margin-left: @comp-margin-xxxl; +@datepicker-cell-start-end-horizontal: calc(@datepicker-cell-inner-margin * 2); +@datepicker-cell-disabled-left: calc(0px - @comp-size-l); +@datepicker-cell-disabled-left-large: calc(0px - @comp-size-xxxl); @datepicker-year-controller-width: 78px; @datepicker-month-controller-width: 80px; -@datepicker-cell-min-width: 24px; -@datepicker-cell-height: 24px; -@datepicker-cell-min-width-l: 48px; +@datepicker-cell-min-width: @comp-size-xs; +@datepicker-cell-height: @comp-size-xs; +@datepicker-cell-min-width-l: @comp-size-xxl; +@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xxl)); +@datepicker-cell-inner-margin: calc(@comp-margin-xs - 1px); @datepicker-th-font-weight: 400; @datepicker-font-weight-medium: 500; @datepicker-panel-border-radius: @border-radius-default; -@datepicker-presets-padding: @spacer-l; -@datepicker-presets-gap: @spacer; +@datepicker-presets-padding: @pop-padding-xl; +@datepicker-presets-gap: @comp-margin-s; + +@datepicker-thead-pseudo-line-height: @comp-margin-xs; +@datepicker-time-panel-gap: calc(@datepicker-panel-gap / 2); // cell @datepicker-cell-hover-background: @bg-color-container-hover; @@ -46,8 +60,8 @@ @datepicker-now-background-color: @brand-color-light; @datepicker-highlight-color: @brand-color-light; -@datepicker-hover-highlight-color: rgba(0, 0, 0, .04); // 此处亮色暗色通用，无token -@datepicker-presets-min-width: 40px; +@datepicker-hover-highlight-color: rgba(0, 0, 0, .06); // 此处亮色暗色通用，无token +@datepicker-presets-min-width: @comp-size-xl; @datepicker-presets-text-color: @brand-color; @datepicker-presets-text-color-hover: @brand-color-hover; diff --git a/style/web/components/date-picker/index.html b/style/web/components/date-picker/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/date-picker/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/dialog/_animate.less b/style/web/components/dialog/_animate.less index 3e0c4b7c30..bf0b7fce25 100644 --- a/style/web/components/dialog/_animate.less +++ b/style/web/components/dialog/_animate.less @@ -6,16 +6,19 @@ // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常 0% { opacity: 0; - transform: scale(1); + transform: scale(.01); } - 1% { + 100% { opacity: 1; - transform: scale(.01); } } @keyframes tDialogZoomOut { + from { + opacity: 1; + } + to { opacity: 0; transform: scale(.01); @@ -24,11 +27,19 @@ @keyframes tDialogMaskIn { from { + opacity: 0; + } + + to { opacity: 1; } } @keyframes tDialogMaskOut { + from { + opacity: 1; + } + to { opacity: 0; } @@ -37,7 +48,7 @@ .animation-enter { animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-enter; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } @@ -84,6 +95,8 @@ .@{prefix}-dialog__mask { animation-name: tDialogMaskIn; + animation-duration: @dialog-anim-duration; + animation-timing-function: linear; .animation-active; } } @@ -97,6 +110,8 @@ .@{prefix}-dialog__mask { animation-name: tDialogMaskOut; + animation-duration: @dialog-anim-duration; + animation-timing-function: linear; .animation-active; } } @@ -122,14 +137,14 @@ opacity: 0; animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-fade; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } .@{prefix}-dialog-fade-exit { animation-duration: @dialog-anim-duration; animation-fill-mode: both; - animation-timing-function: @dialog-anim-time-fn-fade; + animation-timing-function: @anim-time-fn-ease-out; animation-play-state: paused; } diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index b22b84a9bf..774e9dc2a2 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -19,6 +19,7 @@ width: @dialog-width; background-color: @dialog-bg-color; position: relative; + border: @dialog-border; border-radius: @border-radius-large; // icon theme @@ -49,10 +50,19 @@ display: flex; align-items: center; word-break: break-word; - padding-right: 10px; + gap: @dialog-header-content-margin-right; + box-sizing: border-box; + + .@{prefix}-dialog__header-content { + display: flex; + align-items: flex-start; + width: 100%; + } .t-icon:not(.t-icon-close) { font-size: @dialog-icon-size; + display: inline-flex; + align-items: center; margin-right: @dialog-header-icon-margin-right; flex-shrink: 0; } @@ -61,13 +71,14 @@ &__header--fullscreen { background-color: @dialog-header-bg-color-fullscreen; min-height: @dialog-header-height-fullscreen; - padding-right: 0; - justify-content: center; - position: relative; + justify-content: flex-end; + display: flex; + align-items: center; + flex-direction: row; + padding: @dialog-header-padding-fullscreen; .@{prefix}-dialog__header-content { box-sizing: border-box; - padding: @dialog-header-content-padding-fullscreen; display: flex; justify-content: center; align-items: center; @@ -90,7 +101,9 @@ &__body--fullscreen { box-sizing: border-box; padding: @dialog-body-padding-fullscreen; - height: calc(100% - @dialog-header-height-fullscreen - @dialog-footer-height-fullscreen); + height: calc( + 100% - @dialog-header-height-fullscreen - @dialog-footer-height-fullscreen + ); overflow: auto; } @@ -98,8 +111,6 @@ width: 100%; text-align: right; padding: @dialog-footer-padding; - // remove space between inline-block elements. - word-spacing: @dialog-word-spacing; .@{prefix}-button + .@{prefix}-button { margin-left: @dialog-footer-button-margin-left; @@ -116,28 +127,16 @@ padding: @dialog-default-spacer; } - &--primary { - padding: @dialog-primary-spacer; - - .@{prefix}-dialog__body { - padding: @dialog-parimary-body-spacer; - } - } - &__close { - position: absolute; - top: @dialog-close-position-top; - right: @dialog-close-position-right; font-size: @dialog-close-icon-size; color: @dialog-close-color; display: flex; width: @dialog-close-icon-size; height: @dialog-close-icon-size; align-items: center; - justify-content: center; border-radius: @border-radius-default; - background: @dialog-bg-color; transition: all @anim-duration-base linear; + padding: @dialog-closebtn-padding; &:hover { cursor: pointer; @@ -150,17 +149,16 @@ } &__close--fullscreen { - top: 50%; - transform: translateY(-50%); + display: flex; background: transparent; &:hover { cursor: pointer; - background: #eee; + background: @dialog-close-icon-fullscreen-hover; } &:active { - background: #dcdcdc; + background: @dialog-close-icon-fullscreen-active; } } @@ -188,6 +186,10 @@ // dialog内容溢出需要考虑滚动 pointer-events: auto; outline: none; + top: 0; + left: 0; + width: 100%; + height: 100%; // modeless 点击穿透 即可以操作背景后的元素 &.@{prefix}-dialog__ctx--modeless { @@ -196,10 +198,6 @@ &.@{prefix}-dialog__ctx--fixed { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; z-index: @z-index-dialog; } @@ -293,6 +291,5 @@ .@{prefix}-dialog { pointer-events: auto; z-index: @z-index-dialog; - border: @dialog-border; } } diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index ac1b7b1fde..c553cdcdcb 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -15,7 +15,9 @@ @dialog-border-color: transparent; @dialog-bg-color: @bg-color-container; @dialog-header-text-color: @text-color-primary; -@dialog-header-bg-color-fullscreen: #F3F3F3; +@dialog-header-bg-color-fullscreen: @bg-color-secondarycontainer; +@dialog-close-icon-fullscreen-hover: @bg-color-secondarycontainer-hover; +@dialog-close-icon-fullscreen-active: @bg-color-secondarycontainer-active; @dialog-body-text-color: @text-color-secondary; @dialog-close-icon-hover: @bg-color-container-hover; @dialog-close-icon-active: @bg-color-container-active; @@ -28,22 +30,19 @@ // 字体 @dialog-header-font: @font-title-medium; -@dialog-header-weight: 700; +@dialog-header-weight: 600; @dialog-body-text-font: @font-body-medium; // 尺寸 @dialog-width: 480px; -@dialog-header-height: 50px; -@dialog-header-height-fullscreen: 56px; -@dialog-icon-size: 24px; -@dialog-close-icon-size: 20px; -@dialog-footer-height-fullscreen: 80px; +@dialog-header-height-fullscreen: @comp-size-xxxl; +@dialog-icon-size: calc(@font-size-l + 8px); +@dialog-close-icon-size: calc(@font-size-l + 4px); +@dialog-footer-height-fullscreen: @comp-size-xxxxl; // 间距 -@dialog-spacer: @spacer-4; -@dialog-default-spacer: 28px @spacer-4 @spacer-4 @spacer-4; -@dialog-primary-spacer: @dialog-spacer; -@dialog-parimary-body-spacer: @dialog-spacer 28px @dialog-spacer 28px; +@dialog-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@dialog-default-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl; @dialog-default-padding: @dialog-spacer; @dialog-header-icon-margin-right: @spacer; @dialog-header-content-padding-fullscreen: 0 56px; @@ -51,9 +50,20 @@ @dialog-body-padding-fullscreen: 24px 32px 0; @dialog-body-icon-padding: @spacer-2 0 @spacer-3 @spacer-4; @dialog-footer-button-margin-left: @spacer; -@dialog-footer-padding: @spacer-2 0 0; +@dialog-footer-padding: @spacer-3 0 0; @dialog-footer-padding-fullscreen: 16px 32px 32px; @dialog-word-spacing: -6px; +@dialog-header-icon-margin-right: @comp-margin-s; +@dialog-header-icon-margin-top: @size-1; +@dialog-header-content-margin-right: @comp-margin-s; +@dialog-header-padding-fullscreen: 0 @comp-paddingLR-xxl; +@dialog-closebtn-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; +@dialog-body-padding: @comp-paddingTB-l 0; +@dialog-body-padding-fullscreen: @comp-paddingTB-xl @comp-paddingLR-xxl; +@dialog-body-icon-padding: @comp-paddingTB-l 0; +@dialog-footer-button-margin-left: @comp-margin-s; +@dialog-footer-padding: @comp-paddingTB-xl 0 0; +@dialog-footer-padding-fullscreen: 0 @comp-paddingLR-xxl @comp-paddingTB-xxl; // 边框 @dialog-border: 1px solid @border-level-1-color; @@ -68,6 +78,5 @@ // 动画 @dialog-anim-duration: @anim-duration-base; -@dialog-anim-time-fn-enter: cubic-bezier(.08, .82, .17, 1); -@dialog-anim-time-fn-exit: cubic-bezier(.6, .04, .98, .34); -@dialog-anim-time-fn-fade: cubic-bezier(.55, 0, .55, .2); +@dialog-anim-time-fn-enter: @anim-time-fn-easing; +@dialog-anim-time-fn-exit: @anim-time-fn-easing; diff --git a/style/web/components/dialog/index.html b/style/web/components/dialog/index.html deleted file mode 100644 index 001f8e68db..0000000000 --- a/style/web/components/dialog/index.html +++ /dev/null @@ -1,151 +0,0 @@ - - - - - - Dialog - - - - - - -
- - -
-

Dialog 对话框

-

开发者：sheepluo

-

创建日期：2020-05-30

-

说明：TDesign Dialog 组件的基本样式

-
- - - - - -
-

类型

-

对话框类型当前只有两种：默认类型(default)和主类型(primary)。其他类型（error/warning/info/success）暂时没有。

-

两种状态的对话框类名分别为：t-dialog--default/t-dialog--primary。

- -
- - -
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
- -
-
-
- -
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。在日常开发中如果没有特定的一些业务需求，使用组件库进行开发无疑是更便捷高效，而且质量也相对更高的方案。 -
-
- - -
- -
-
- - - -
-
- - -
-

状态

-

对话框的状态只有加载态，而加载态仅有按钮变为加载态，其它地方不变。

- -
- - - - -
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
- - - -
-
- -
-

遮罩层

-

有时候对话框需要显示底部遮罩，可以将用户的注意力全部吸引到对话框。

- -
- - - - -
-
-
-
-
我是主要信息
-
-
- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -
-
- - -
- -
-
-
- - - -
-
- - - -
-

大小

-

最大对话框宽度 960px；最小对话框宽度 480px。

-

由于对话框宽度属于组件 API，因而此处无需 UI 开发宽度样式。

-

当对话框宽度不在 480px ~ 960px 之间时，组件可以抛出 warning 提示。

-
- - - \ No newline at end of file diff --git a/style/web/components/divider/_var.less b/style/web/components/divider/_var.less index ddf7b12442..bad74c6f98 100644 --- a/style/web/components/divider/_var.less +++ b/style/web/components/divider/_var.less @@ -19,8 +19,8 @@ @divider-font: @font-body-medium; // 间距 -@divider-horizontal-margin: @spacer-3 0; -@divider-vertical-margin: 0 (@spacer * 1.5); +@divider-horizontal-margin: @comp-margin-xxl 0; +@divider-vertical-margin: 0 @comp-margin-m; @divider-inner-text-padding: 0 1em; // 尺寸 diff --git a/style/web/components/divider/index.html b/style/web/components/divider/index.html deleted file mode 100644 index d833c45eec..0000000000 --- a/style/web/components/divider/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - Divider - - - - - - - - - -
- - -
-

Divider

-

开发者：kyrielin

-

创建日期：2020-09-21

-

说明：TDesign Divider

-
- - - - - -
-

水平分割线

- - -
- - -
水平分割线（默认）： -

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-
水平分割线（虚线）: -

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- -
-
- - -
-

带文字分割线

-
- - -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯中 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯左 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- 腾讯右 -
-

通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。

-
- - -
-
- - -
-

垂直分割线

-
- - -
- 正直 -
- 进取 -
- 合作 -
- 创新 -
- - -
-
- -
- - - diff --git a/style/web/components/drawer/_animate.less b/style/web/components/drawer/_animate.less new file mode 100644 index 0000000000..6e60aadc45 --- /dev/null +++ b/style/web/components/drawer/_animate.less @@ -0,0 +1,53 @@ +@import "../../base.less"; + +.@{prefix}-drawer-fade-enter, +.@{prefix}-drawer-fade-appear { + opacity: 0; + animation-duration: @drawer-default-duration; + animation-fill-mode: both; + animation-timing-function: linear; + animation-play-state: paused; +} + +.@{prefix}-drawer-fade-exit { + animation-duration: @drawer-default-duration; + animation-fill-mode: both; + animation-timing-function: linear; + animation-play-state: paused; +} + +.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active, +.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active.@{prefix}-drawer-fade-enter-to, +.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active, +.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active.@{prefix}-drawer-fade-appear-to { + animation-name: tDrawerFadeIn; + animation-duration: @anim-duration-base; + animation-play-state: running; +} + +.@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active, +.@{prefix}-drawer-fade-leave-active.@{prefix}-drawer-fade-leave-to { + animation-name: tDrawerFadeOut; + animation-duration: @anim-duration-base; + animation-play-state: running; +} + +@keyframes tDrawerFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes tDrawerFadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less index 2f26fe11fc..76757d7db3 100644 --- a/style/web/components/drawer/_index.less +++ b/style/web/components/drawer/_index.less @@ -5,6 +5,8 @@ @import "./_mixin.less"; +@import "./_animate.less"; + @import "../../mixins/_reset.less"; @componentName: drawer; @@ -121,6 +123,8 @@ } &__header { + display: flex; + align-items: center; min-height: @drawer-header-height; padding: @drawer-header-padding; font: @drawer-header-font-size; @@ -138,7 +142,6 @@ &__footer { width: 100%; - min-height: @drawer-footer-height; padding: @drawer-footer-padding; text-align: @drawer-footer-text-align; border-top: 1px solid @drawer-border-color; @@ -161,7 +164,7 @@ align-items: center; width: @drawer-close-btn-size; height: @drawer-close-btn-size; - top: @drawer-close-btn-position-top; + top: calc((@drawer-header-height - @drawer-close-btn-size) / 2); right: @drawer-close-btn-position-right; color: @drawer-close-btn-color; background-color: @drawer-close-btn-bg-color; diff --git a/style/web/components/drawer/_var.less b/style/web/components/drawer/_var.less index b666f93b14..8d94157ce0 100644 --- a/style/web/components/drawer/_var.less +++ b/style/web/components/drawer/_var.less @@ -29,10 +29,9 @@ /** * 尺寸 */ -@drawer-icon-size: @font-size-l; -@drawer-header-height: 56px; -@drawer-footer-height: 56px; -@drawer-close-btn-size: @icon-l; +@drawer-icon-size: calc(@font-size-base + 2px); +@drawer-header-height: @comp-size-xxxl; +@drawer-close-btn-size: @comp-size-xs; @drawer-content-wrapper-size: 300px; /** @@ -51,16 +50,15 @@ /** * 间距 */ -@drawer-footer-padding: 10px @spacer-2; -@drawer-header-padding: @spacer-2 @spacer-2; -@drawer-body-padding: @spacer-2; -@drawer-footer-btn-margin-left: @spacer-1; +@drawer-footer-padding: @comp-paddingTB-l @comp-paddingLR-l; +@drawer-header-padding: 0 @comp-paddingLR-l; +@drawer-body-padding: @comp-paddingTB-l @comp-paddingLR-l; +@drawer-footer-btn-margin-left: @comp-margin-s; /** * 位置 */ -@drawer-close-btn-position-top: 16px; -@drawer-close-btn-position-right: 16px; +@drawer-close-btn-position-right: @comp-margin-s; @drawer-footer-text-align: left; /** diff --git a/style/web/components/drawer/index.html b/style/web/components/drawer/index.html deleted file mode 100644 index 2599b60d39..0000000000 --- a/style/web/components/drawer/index.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - - Drawer - - - - - - -
- -
-

Drawer 抽屉

-

开发者：samonxian

-

创建日期：2020-11-12

-

- 说明：TDesign Drawer 组件的基本样式 -

-
- - - - -
-

基础的抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
-
- - -
-
- - -
-

带有页脚的抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
- - -
-
-
- - -
-
- -
-

内容区域滚动抽屉

- -
- - -
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
- - -
-
-
-
-
-
我是标题
-
- -
-
-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-

- 组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！ -

-
-
-
- -
-
- - -
-

大小

-

- 由于对话框宽度或者高度属于组件 size API，因而此处无需 UI - 开发宽度或者高度样式。 -

-
-
- - diff --git a/style/web/components/dropdown-new/_index.less b/style/web/components/dropdown-new/_index.less deleted file mode 100644 index 3c43a26481..0000000000 --- a/style/web/components/dropdown-new/_index.less +++ /dev/null @@ -1,315 +0,0 @@ -@import "../../base.less"; - -@import "./_var.less"; - -@import "./_mixin.less"; - -@import "../../mixins/_reset.less"; - -@import "../../mixins/_scrollbar.less"; - -.@{prefix}-dropdown { - .reset; - - background-color: @dropdown-bg-color; - font-size: @dropdown-text-font-size; - color: @dropdown-text-color; - position: relative; - box-shadow: @shadow-2; - border: @dropdown-border; - border-radius: @border-radius-medium; - - &__menu { - .scrollbar(8px, 2px); - - display: flex; - justify-content: flex-start; - flex-direction: column; - border-radius: @border-radius-medium; - padding: @dropdown-menu-padding; - gap: @dropdown-menu-gap; - overflow-y: auto; - overflow-x: hidden; - - .@{prefix}-divider { - margin: @dropdown-item-divider-margin; - color: @dropdown-active-bg-color; - width: calc(100% - @spacer-2); - } - - &--right { - .@{prefix}-dropdown__item-direction { - margin: 0 0 0 @spacer; - } - } - - &--left { - .@{prefix}-dropdown__item { - justify-content: right; - } - - .@{prefix}-dropdown__item-text { - text-align: right; - } - - .@{prefix}-dropdown__item-direction { - margin: 0 @spacer 0 0; - } - } - } - - &__submenu { - background-color: @dropdown-bg-color; - box-shadow: @shadow-2; - border-radius: @border-radius-medium; - border: @dropdown-border; - z-index: 1100; - position: absolute; - padding: @dropdown-menu-padding; - display: none; - - ul { - list-style: none; - display: grid; - padding-left: 0; - gap: @dropdown-menu-gap; - } - - &--disabled { - visibility: hidden; - } - - &--right { - left: calc(100% - 6px); - - .@{prefix}-dropdown__item-direction { - margin: 0 0 0 @spacer; - } - } - - &--left { - right: calc(100% - 6px); - - .@{prefix}-dropdown__item { - justify-content: right; - } - - .@{prefix}-dropdown__item-text { - text-align: right; - } - - .@{prefix}-dropdown__item-direction { - margin: 0 @spacer 0 0; - } - } - } - - &__item { - border-radius: @border-radius-default; - font: @font-body-medium; - cursor: pointer; - user-select: none; - outline: none; - transition: background-color @anim-duration-base @anim-time-fn-ease-in; - white-space: nowrap; - display: flex; - align-items: center; - padding: @dropdown-item-padding; - - &-icon { - display: flex; - color: currentcolor; - margin-right: @spacer; - font-size: @dropdown-text-icon-size; - } - - &:hover > div { - display: flex; - } - - &--disabled { - cursor: not-allowed; - } - - &-content { - display: flex; - flex: 1; - align-items: center; - justify-content: space-between; - max-width: 100%; - } - - &-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; - } - - &.@{prefix}-dropdown__item--suffix { - .@{prefix}-dropdown__item-sub-icon { - color: currentcolor; - font-size: @dropdown-text-icon-size; - flex-shrink: 0; - } - } - - //默认主题 - &--theme-default { - color: @dropdown-text-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - - &.@{prefix}-dropdown__item--active { - color: @dropdown-active-color; - background-color: @dropdown-active-bg-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - } - - &.@{prefix}-dropdown__item--disabled { - color: @dropdown-disable-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - } - - &.@{prefix}-dropdown__item--suffix { - &:hover { - background-color: @dropdown-active-bg-color; - color: @dropdown-active-color; - } - } - } - //成功主题 - &--theme-success { - color: @dropdown-theme-success-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - - &.@{prefix}-dropdown__item--active { - background-color: @dropdown-theme-success-bg-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - } - - &.@{prefix}-dropdown__item-disabled { - color: @dropdown-disable-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - } - - &.@{prefix}-dropdown__item--suffix { - &:hover { - background-color: @dropdown-theme-success-bg-color; - } - } - } - //危险主题 - &--theme-error { - color: @dropdown-theme-error-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - - &.@{prefix}-dropdown__item--active { - background-color: @dropdown-theme-error-bg-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - } - - &.@{prefix}-dropdown__item--disabled { - color: @dropdown-disable-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - } - - &.@{prefix}-dropdown__item--suffix { - &:hover { - background-color: @dropdown-theme-error-bg-color; - } - } - } - - //告警主题 - &--theme-warning { - color: @dropdown-theme-warning-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - - &.@{prefix}-dropdown__item--active { - background-color: @dropdown-theme-warning-bg-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - - &:active { - background-color: @dropdown-container-active-bg-color; - } - } - - &.@{prefix}-dropdown__item--disabled { - color: @dropdown-disable-color; - - &:hover { - background-color: @dropdown-container-hover-bg-color; - } - } - - &.@{prefix}-dropdown__item--suffix { - &:hover { - background-color: @dropdown-theme-warning-bg-color; - } - } - } - - --ripple-color: @bg-color-container-active; - } -} diff --git a/style/web/components/dropdown-new/_var.less b/style/web/components/dropdown-new/_var.less deleted file mode 100644 index da665125b8..0000000000 --- a/style/web/components/dropdown-new/_var.less +++ /dev/null @@ -1,27 +0,0 @@ -// color -@dropdown-bg-color: @bg-color-container; -@dropdown-suffix-color: @text-color-placeholder; -@dropdown-active-color: @brand-color; -@dropdown-active-bg-color: @brand-color-light; -@dropdown-container-hover-bg-color: @bg-color-container-hover; -@dropdown-container-active-bg-color: @bg-color-container-active; -@dropdown-disable-color: @text-color-disabled; -@dropdown-text-color: @text-color-primary; -@dropdown-text-font-size: @font-size-base; -@dropdown-text-icon-size: @font-size-l; -//theme -@dropdown-theme-error-color: @error-color; -@dropdown-theme-error-bg-color: @error-color-light; -@dropdown-theme-success-color: @success-color; -@dropdown-theme-success-bg-color: @success-color-light; -@dropdown-theme-warning-color: @warning-color; -@dropdown-theme-warning-bg-color: @warning-color-light; -// border -@dropdown-border: .5px solid @component-border; - -// padding -@dropdown-item-padding: 3px @spacer; -@dropdown-item-margin: 2px 6px; -@dropdown-item-divider-margin: @spacer*.5 auto 2px; -@dropdown-menu-gap: 2px; -@dropdown-menu-padding: 6px; diff --git a/style/web/components/dropdown-new/index.html b/style/web/components/dropdown-new/index.html deleted file mode 100644 index d40948cd4f..0000000000 --- a/style/web/components/dropdown-new/index.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - Dropdown - - - - - - -
- - -
-

Dropdown 下拉菜单

-

开发者：terrancewan

-

创建日期：2020-07-22

-

说明：TDesign Dropdown 组件的基本样式

-
- - - - - -
-

类型

-

下拉菜单类型当前只有两种：单层级类型和多层级类型。

- -
- - -
-

单层级类型

-
-
-
操作一
-
操作二
-
-
额外操作三
-
-
-
- -
-

多层级类型

-
-
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
-
-
二级操作
-
二级操作
-
-
-
- - - -
-
- - -
-

状态

-

下拉菜单的状态有normal态、hover态、active态、disable态。

- -
- - - - -
-
-
-
normal态
-
hover态
-
normal态
-
active态
-
normal态
-
-
disable态
-
normal态
-
-
-
- - - -
-
- - -
-

大小

-

默认高度由内容指定，但不超过380px。

-
-
-
-
-
选项1
-
选项2
-
选项3
-
选项4
-
选项5
-
选项6
-
选项7
-
选项8
-
选项9
-
选项10
-
选项11
-
选项12
-
选项13
-
选项14
-
选项15
-
-
-
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less index d881aefa8a..8220a254d5 100644 --- a/style/web/components/dropdown/_index.less +++ b/style/web/components/dropdown/_index.less @@ -1,5 +1,3 @@ -// 组件允许单个组件打包，因此默认引入公共基础样式 - @import "../../base.less"; @import "./_var.less"; @@ -8,62 +6,145 @@ @import "../../mixins/_reset.less"; +@import "../../mixins/_scrollbar.less"; + .@{prefix}-dropdown { .reset; - .@{prefix}-popup__content { - background-color: @dropdown-bg-color; - position: relative; - padding: 0; - } + background-color: @dropdown-bg-color; + font-size: @dropdown-text-font-size; + color: @dropdown-text-color; + position: relative; + box-shadow: @shadow-2; + border: @dropdown-border; + border-radius: @border-radius-medium; &__menu { + .scrollbar(8px, 2px); + display: flex; justify-content: flex-start; + flex-direction: column; + border-radius: @border-radius-medium; + padding: @dropdown-menu-padding; + gap: @dropdown-menu-gap; + overflow-y: auto; + overflow-x: hidden; - &-column { - font-size: @dropdown-text-font-size; - color: @dropdown-text-color; - text-align: left; - overflow-y: auto; + .@{prefix}-divider { + margin: @dropdown-item-divider-margin; + color: @dropdown-active-bg-color; + width: calc(100% - @dropdown-item-divider-horizon-margin * 2); + } - &:not(:first-child) { - border-left: @dropdown-border; + &--right { + .@{prefix}-dropdown__item-direction { + margin: 0 0 0 @comp-margin-s; } } - .@{prefix}-divider { - margin: @dropdown-item-divider-margin; + &--left { + .@{prefix}-dropdown__item { + justify-content: right; + } + + .@{prefix}-dropdown__item-text { + text-align: right; + } + + .@{prefix}-dropdown__item-direction { + margin: 0 @comp-margin-s 0 0; + } + } + + &--overflow { + // 处理菜单超过最大高度时无法选择二级菜单的问题 + .@{prefix}-dropdown__submenu { + &-wrapper--right { + left: calc(100% - 14px); + } + + &-wrapper--left { + right: calc(100% - 14px); + } + } + } + } + + &__submenu { + .scrollbar(8px, 2px); + + background-color: @dropdown-bg-color; + box-shadow: @shadow-2; + border-radius: @border-radius-medium; + border: @dropdown-border; + z-index: 1100; + position: absolute; + padding: @dropdown-menu-padding; + display: none; + overflow-y: auto; + overflow-x: visible; + + ul { + list-style: none; + display: grid; + padding-left: 0; + gap: @dropdown-menu-gap; + } + + &--disabled { + visibility: hidden; + } + + &-wrapper--right { + left: calc(100% - 6px); + + .@{prefix}-dropdown__item-direction { + margin: 0 0 0 @comp-margin-s; + } + } + + &-wrapper--left { + right: calc(100% - 6px); + + .@{prefix}-dropdown__item { + justify-content: right; + } + + .@{prefix}-dropdown__item-text { + text-align: right; + } + + .@{prefix}-dropdown__item-direction { + margin: 0 @comp-margin-s 0 0; + } } } &__item { - position: relative; + border-radius: @border-radius-default; + font: @font-body-medium; + cursor: pointer; + user-select: none; + outline: none; + transition: background-color @anim-duration-base @anim-time-fn-ease-in; + white-space: nowrap; display: flex; align-items: center; - cursor: pointer; - border-radius: @border-radius-default; - color: @dropdown-text-color; padding: @dropdown-item-padding; - margin: @dropdown-item-margin; - transition: background-color @anim-duration-base @anim-time-fn-ease-in; - &:first-child, - &:last-child { - margin: @dropdown-item-ends-margin; - } - - &:hover { - background-color: @dropdown-hover-bg-color; + &-icon { + display: flex; + color: currentcolor; + margin-right: @comp-margin-s; + font-size: @dropdown-text-icon-size; } - &.@{prefix}-is-active { - color: @dropdown-active-color; - background-color: @dropdown-active-bg-color; + &:hover > div > div { + display: flex; } - &.@{prefix}-is-disabled { - color: @dropdown-disable-color; + &--disabled { cursor: not-allowed; } @@ -71,26 +152,178 @@ display: flex; flex: 1; align-items: center; + justify-content: space-between; max-width: 100%; } &-text { - font: @dropdown-item-text-font; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex: 1; } - &.@{prefix}-dropdown--suffix { - .@{prefix}-dropdown__item-content { - max-width: calc( - 100% - @dropdown-text-icon-size - @dropdown-item-icon-margin-left - ); - } - .@{prefix}-dropdown__item-icon { + &.@{prefix}-dropdown__item--suffix { + .@{prefix}-dropdown__item-sub-icon { color: currentcolor; font-size: @dropdown-text-icon-size; - margin-left: @dropdown-item-icon-margin-left; + flex-shrink: 0; + } + } + + //默认主题 + &--theme-default { + color: @dropdown-text-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + + &.@{prefix}-dropdown__item--active { + color: @dropdown-active-color; + background-color: @dropdown-active-bg-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + } + + &.@{prefix}-dropdown__item--disabled { + color: @dropdown-disable-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + } + + &.@{prefix}-dropdown__item--suffix { + &:hover { + background-color: @dropdown-active-bg-color; + color: @dropdown-active-color; + } + } + } + //成功主题 + &--theme-success { + color: @dropdown-theme-success-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + + &.@{prefix}-dropdown__item--active { + background-color: @dropdown-theme-success-bg-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + } + + &.@{prefix}-dropdown__item-disabled { + color: @dropdown-disable-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + } + + &.@{prefix}-dropdown__item--suffix { + &:hover { + background-color: @dropdown-theme-success-bg-color; + } + } + } + //危险主题 + &--theme-error { + color: @dropdown-theme-error-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + + &.@{prefix}-dropdown__item--active { + background-color: @dropdown-theme-error-bg-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + } + + &.@{prefix}-dropdown__item--disabled { + color: @dropdown-disable-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + } + + &.@{prefix}-dropdown__item--suffix { + &:hover { + background-color: @dropdown-theme-error-bg-color; + } + } + } + + //告警主题 + &--theme-warning { + color: @dropdown-theme-warning-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + + &.@{prefix}-dropdown__item--active { + background-color: @dropdown-theme-warning-bg-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + + &:active { + background-color: @dropdown-container-active-bg-color; + } + } + + &.@{prefix}-dropdown__item--disabled { + color: @dropdown-disable-color; + + &:hover { + background-color: @dropdown-container-hover-bg-color; + } + } + + &.@{prefix}-dropdown__item--suffix { + &:hover { + background-color: @dropdown-theme-warning-bg-color; + } } } diff --git a/style/web/components/dropdown/_var.less b/style/web/components/dropdown/_var.less index f1d5917486..01686d8468 100644 --- a/style/web/components/dropdown/_var.less +++ b/style/web/components/dropdown/_var.less @@ -3,20 +3,29 @@ @dropdown-suffix-color: @text-color-placeholder; @dropdown-active-color: @brand-color; @dropdown-active-bg-color: @brand-color-light; -@dropdown-hover-bg-color: @bg-color-container-hover; +@dropdown-container-hover-bg-color: @bg-color-container-hover; +@dropdown-container-active-bg-color: @bg-color-container-active; @dropdown-disable-color: @text-color-disabled; @dropdown-text-color: @text-color-primary; -@dropdown-scrollbar-color: @border-level-2-color; -@dropdown-split-color: @border-level-2-color; @dropdown-text-font-size: @font-size-base; @dropdown-text-icon-size: @font-size-l; +//theme +@dropdown-theme-error-color: @error-color; +@dropdown-theme-error-bg-color: @error-color-light; +@dropdown-theme-success-color: @success-color; +@dropdown-theme-success-bg-color: @success-color-light; +@dropdown-theme-warning-color: @warning-color; +@dropdown-theme-warning-bg-color: @warning-color-light; + // border -@dropdown-border: solid 1px @border-level-1-color; +@dropdown-border: .5px solid @component-border; + +// height +@dropdown-item-height: @comp-size-s; // padding -@dropdown-item-padding: 9px @spacer; -@dropdown-item-margin: @spacer*.5 @spacer; -@dropdown-item-icon-margin-left: @spacer; -@dropdown-item-ends-margin: @spacer; -@dropdown-item-divider-margin: @spacer*.5 0; -@dropdown-item-text-font: @font-body-medium; +@dropdown-item-padding: calc(@comp-paddingTB-xs - 1px) @comp-paddingLR-s; +@dropdown-item-divider-horizon-margin: @comp-margin-s; +@dropdown-item-divider-margin: @comp-margin-xs @dropdown-item-divider-horizon-margin @comp-margin-xxs @dropdown-item-divider-horizon-margin; +@dropdown-menu-padding: @pop-padding-m; +@dropdown-menu-gap: 2px; diff --git a/style/web/components/dropdown/index.html b/style/web/components/dropdown/index.html deleted file mode 100644 index d40948cd4f..0000000000 --- a/style/web/components/dropdown/index.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - Dropdown - - - - - - -
- - -
-

Dropdown 下拉菜单

-

开发者：terrancewan

-

创建日期：2020-07-22

-

说明：TDesign Dropdown 组件的基本样式

-
- - - - - -
-

类型

-

下拉菜单类型当前只有两种：单层级类型和多层级类型。

- -
- - -
-

单层级类型

-
-
-
操作一
-
操作二
-
-
额外操作三
-
-
-
- -
-

多层级类型

-
-
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
一级操作
-
-
-
二级操作
-
二级操作
-
-
-
- - - -
-
- - -
-

状态

-

下拉菜单的状态有normal态、hover态、active态、disable态。

- -
- - - - -
-
-
-
normal态
-
hover态
-
normal态
-
active态
-
normal态
-
-
disable态
-
normal态
-
-
-
- - - -
-
- - -
-

大小

-

默认高度由内容指定，但不超过380px。

-
-
-
-
-
选项1
-
选项2
-
选项3
-
选项4
-
选项5
-
选项6
-
选项7
-
选项8
-
选项9
-
选项10
-
选项11
-
选项12
-
选项13
-
选项14
-
选项15
-
-
-
-
- -
- - - \ No newline at end of file diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less index 8e96240394..e989a6b2a9 100644 --- a/style/web/components/form/_index.less +++ b/style/web/components/form/_index.less @@ -107,10 +107,10 @@ &__status { display: flex; - margin-left: @form-status-margin-left; + margin: @form-status-margin; > .t-icon { - font-size: 20px; + font-size: @form-status-icon-size; } &-without-icon { @@ -123,7 +123,7 @@ } button + button { - margin-left: @form-status-margin-left; + margin-left: @form-status-button-margin; } } } @@ -153,7 +153,7 @@ .@{prefix}-input__extra { position: absolute; - bottom: -@form-item-help-line-height; + bottom: calc(0px - @form-item-help-line-height); max-width: 100%; overflow: hidden; text-overflow: ellipsis; diff --git a/style/web/components/form/_mixin.less b/style/web/components/form/_mixin.less index cd5f311335..32a61b693d 100644 --- a/style/web/components/form/_mixin.less +++ b/style/web/components/form/_mixin.less @@ -9,6 +9,7 @@ .@{prefix}-select, .@{prefix}-radio-button, .@{prefix}-cascader, + .@{prefix}-range-input, .@{prefix}-textarea__inner { border-color: @@borderColor; @borderColor: "input-border-color-@{status}"; diff --git a/style/web/components/form/_var.less b/style/web/components/form/_var.less index a04d00d993..d653bf648c 100644 --- a/style/web/components/form/_var.less +++ b/style/web/components/form/_var.less @@ -26,21 +26,22 @@ @form-color-extra: @text-color-placeholder; // 间距 -@form-item-margin-bottom: @spacer-3; -@form-item-with-help-margin-bottom: @spacer-s; -@form-item-control-height: @spacer-4; -@form-item-row-gap: @spacer-2; -@form-item-padding-bottom: @spacer-s; -@form-item-margin-right-inline: @spacer-3; - -@form-label-line-height: 22px; -@form-label-padding-right: @spacer-3; -@form-label-margin-right-required: (@spacer / 2); -@form-label-margin-colon: 0 @spacer 0 (@spacer / 4); -@form-status-position-right: -@spacer-4; -@form-status-margin-left: @spacer; -@form-status-button-width: 32px; -@from-help-text-margin-top: (@spacer / 2); +@form-item-margin-bottom: @comp-margin-xxl; +@form-item-with-help-margin-bottom: @comp-margin-xs; +@form-item-control-height: @comp-margin-xxxl; +@form-item-row-gap: @comp-margin-l; +@form-item-padding-bottom: @comp-paddingTB-xs; +@form-item-margin-right-inline: @comp-margin-xxl; + +@form-label-line-height: @text-line-height-base; +@form-label-padding-right: @comp-paddingLR-xl; +@form-label-margin-right-required: @comp-margin-xs; +@form-label-margin-colon: 0 @comp-margin-xxs; +@form-status-margin: 0 @comp-margin-s; +@form-status-button-margin: @comp-margin-s; +@form-status-button-width: @comp-size-m; +@from-help-text-margin-top: @comp-margin-xs; +@form-status-icon-size: @comp-size-xxxs; // status @input-border-color-success: @success-color; diff --git a/style/web/components/form/index.html b/style/web/components/form/index.html deleted file mode 100644 index 53968f14ed..0000000000 --- a/style/web/components/form/index.html +++ /dev/null @@ -1,352 +0,0 @@ - - - - - - - form - - - - - - - - -
- - -
-

Form

-

开发者：fishcui, harveyhe, kyriexzhang

-

创建日期：2020-11-19

-

说明：TDesign form 组件的基本样式

-
- - - - - -
-

默认

- - -
- - -
-
-
- -
-
-
- -
-
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
- - - -
-
- -
-
- -
-
- - - - - - -
-
- - -
-
- -
-
- -
-
- -
- - -
-
- - -
-

状态

- - -
- - -
-

1. 表单布局通过UI布局控制，在此不详述

-
- -
- - - -
- - -
-

2 表单验证状态

-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
-
-
- -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- -
- -
- - -
- - -
-

3. 表单提示状态

-
-
-
- - - - -
-
-
-
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 - - - -
-
-
-
-
- -
- - -
- - -
-

4. 动态增减表单

-
-
- - - - -
-
-
-
- - - - -
-
- -
- -
-
- - -
-

对齐方式

- -
- - -
-

1.左对齐

-
-
- -
-
-
- -
-
-
-
- -
- -
- - -
-

2.右对齐

-
-
- -
-
-
- -
-
-
-
- -
- - -
- - -
-

3.顶部对齐

-
-
- -
-
-
- -
-
-
-
- -
- - -
- - -
-

4.内联

-
-
-
- -
-
-
- -
-
-
-
-
- -
-
-
- -
-
-
-
- - -
- -
- -
- - -
-

尺寸(如果有)

-
- - -

与各表单大小变化一致，不再赘述

- -
- -
- - - - \ No newline at end of file diff --git a/style/web/components/grid/index.html b/style/web/components/grid/index.html deleted file mode 100644 index b02a1c5d42..0000000000 --- a/style/web/components/grid/index.html +++ /dev/null @@ -1,332 +0,0 @@ - - - - - - - Grid - - - - - - - - - -
- - -
-

Grid

-

开发者：kyrielin

-

创建日期：2020-10-15

-

说明：TDesign Grid

-
- - - - - -
-

基础栅格

- - -
- - -
-
-
-
col-6
-
-
-
col-6
-
-
-
-
-
col-4
-
-
-
col-4
-
-
-
col-4
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

左右偏移

- - -
- - -
-
-
-
col-4
-
-
-
col-4 offset-4
-
-
-
-
-
col-4 offset-6
-
-
-
col-6 offset-4
-
-
-
-
-
col-2 offset-6
-
-
-
- -
-
- - -
-

栅格排序

- - -
- - -
-
-
-
col-8 col-pull-4
-
-
-
col-4 col-pull-8
-
-
-
- -
-
- - -
-

排版

- - -
- - -
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

对齐

- - -
- - -
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
col-3
-
-
-
- -
-
- - -
-

排序

- - -
- - -
-
-
-
1 col-order-4
-
-
-
2 col-order-3
-
-
-
3 col-order-2
-
-
-
4 col-order-1
-
-
-
- -
-
- - -
-

响应式布局

- - -
- - -
-
- -
-
Col
-
-
-
Col
-
-
-
Col
-
-
-
- -
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/guide/_index.less b/style/web/components/guide/_index.less index 190c6c2b7d..d3893f2788 100644 --- a/style/web/components/guide/_index.less +++ b/style/web/components/guide/_index.less @@ -34,7 +34,7 @@ &__highlight { z-index: @guide-highlight-z-index; - transition: .3s ease-out; + transition: @anim-duration-base @anim-time-fn-ease-out; border-radius: @border-radius-default; &--dialog { @@ -76,7 +76,7 @@ &__dialog { min-width: 320px; max-width: 500px; - padding: @spacer-3 @spacer-4 @spacer-4; + padding: @guide-dialog-padding; border-radius: @border-radius-large; background: @bg-color-container; animation: tGuideDialogFadeIn .3s ease-out; @@ -92,13 +92,13 @@ } .@{prefix}-@{componentName}__desc { - margin-top: @spacer-l; + margin-top: @guide-dialog-desc-margin-top; font: @font-body-medium; } } &__tooltip { - padding: @spacer-l @spacer; + padding: @guide-tooltip-padding; min-width: 240px; max-width: 600px; max-height: 300px; @@ -112,7 +112,7 @@ } &__desc { - margin-top: @spacer; + margin-top: @guide-tooltip-desc-margin-top; text-align: left; color: @text-color-secondary; font: @font-body-small; @@ -123,7 +123,7 @@ align-items: center; button { - margin-right: @spacer; + margin-right: @guide-action-margin-right; } button:last-child { @@ -136,7 +136,7 @@ align-items: center; &--popup { - margin-top: @spacer-2; + margin-top: @guide-footer-popup-margin-top; } &--dialog { @@ -152,17 +152,17 @@ } &__counter { - color: @font-gray-3; + color: @text-color-placeholder; text-align: left; font: @font-body-small; flex: 1; } &__popup { - &--content { - background: none !important; - box-shadow: none !important; - padding: 0 !important; + & &--content { + background: none; + box-shadow: none; + padding: 0; } } } diff --git a/style/web/components/guide/_var.less b/style/web/components/guide/_var.less index 2fd54c1fb4..c71d2f045e 100644 --- a/style/web/components/guide/_var.less +++ b/style/web/components/guide/_var.less @@ -2,3 +2,13 @@ @guide-overlay-z-index: @z-index-guide - 2; @guide-highlight-z-index: @z-index-guide - 1; @guide-reference-z-index: @z-index-guide; + +// margin 间距相关 +@guide-footer-popup-margin-top: @comp-margin-l; +@guide-dialog-desc-margin-top: @comp-margin-l; +@guide-tooltip-desc-margin-top: @comp-margin-s; +@guide-action-margin-right: @comp-margin-s; + +// padding 边距 +@guide-dialog-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl; +@guide-tooltip-padding: @comp-paddingTB-m @comp-paddingLR-s; diff --git a/style/web/components/guide/index.html b/style/web/components/guide/index.html deleted file mode 100644 index 7b56d089ca..0000000000 --- a/style/web/components/guide/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - Guide - - - - - - - - -
- - -
-

Guide

-

开发者：zhangpaopao

-

创建日期：2022-08-19

-

说明：TDesign Guide

-
- - - -
- - diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index acbf5bdf71..54e6695cdc 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -25,10 +25,10 @@ justify-content: center; align-items: center; align-content: center; - font-size: 14px; + font: @image-viewer-error-font; .@{prefix}-image-viewer__img-error-text { - margin-top: 10px; + margin-top: @comp-margin-s; } } } @@ -79,7 +79,7 @@ bottom: 0; left: 0; right: 0; - z-index: 2000; + z-index: @z-index-image-viewer; overflow: hidden; animation: @anim-duration-base @anim-time-fn-ease-in modal-mask-show; @@ -100,8 +100,8 @@ left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 40%); - border-radius: 3px; - padding: 4px 8px; + border-radius: @border-radius-default; + padding: @image-viewer-modal-padding; z-index: 1; } @@ -135,8 +135,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; transition: all @anim-duration-base @anim-time-fn-easing; transform: rotate(0deg); object-fit: contain; @@ -154,7 +154,11 @@ align-items: center; justify-content: center; background-color: @bg-color-container; - padding-bottom: 8px; + padding: @image-viewer-header-hide-padding; + + &.@{prefix}-is-show { + padding: @image-viewer-header-padding; + } @keyframes preview-icon-range { 0% { @@ -177,8 +181,11 @@ } .@{prefix}-image-viewer__header-pre-bt { - width: auto; - height: auto; + width: @comp-size-xxs; + height: @comp-size-xxs; + display: inline-flex; + justify-content: center; + align-items: center; position: absolute; left: 50%; bottom: 0; @@ -186,8 +193,12 @@ background-color: @bg-color-container; color: @text-color-primary; border-radius: 50%; - border: .5px solid @bg-color-secondarycontainer; - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-unrange; + box-shadow: @shadow-inset; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-unrange; + + .t-icon { + font-size: @font-size-l; + } &:hover { background-color: inherit; @@ -200,13 +211,13 @@ } to { - height: 54px; + height: @image-viewer-header-box-height; } } @keyframes preview-image-hide { 0% { - height: 54px; + height: @image-viewer-header-box-height; } to { @@ -216,40 +227,37 @@ &.@{prefix}-is-show { .@{prefix}-image-viewer__header-prev { - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-show; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-show; } .@{prefix}-image-viewer__header-pre-bt { - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-range; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-range; } } - @header-box-width: 52px; - @header-box-margin: 4px; - @header-box-border-width: 1px; - @header-box-all-width: @header-box-width + @header-box-margin * 2 + @header-box-border-width * 2; - .@{prefix}-image-viewer__header-prev { - width: @header-box-all-width * 7; - animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-hide; - overflow: auto hidden; + width: @image-viewer-header-all-box-width; + animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-hide; display: flex; position: relative; + overflow: hidden; - .@{prefix}-image-viewer__bokeh-left, .@{prefix}-image-viewer__bokeh-right { + &::before, + &::after { + content: ""; position: absolute; height: 100%; z-index: 1; - width: @header-box-all-width * 3; + width: @image-viewer-header-box-width; pointer-events: none; } - .@{prefix}-image-viewer__bokeh-left { + &::before { left: 0; background-image: linear-gradient(to right, @bg-color-container, rgba(255, 255, 255, 0%)); } - .@{prefix}-image-viewer__bokeh-right { + &::after { right: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0%), @bg-color-container); } @@ -260,27 +268,29 @@ display: flex; align-items: center; justify-content: center; - margin-left: @header-box-all-width * 3; + gap: @spacer-s; + margin-left: @image-viewer-header-box-width-margin-left; .@{prefix}-image-viewer__header-box { - width: @header-box-width; - height: 32px; - margin: 16px @header-box-margin 10px; + box-sizing: border-box; + width: @image-viewer-header-box-width; + height: @image-viewer-header-box-height; transition: @anim-duration-base; overflow: hidden; - border-radius: 3px; + border-radius: @border-radius-default; display: flex; align-items: center; justify-content: center; - border: @header-box-border-width solid transparent; + border: 1px solid transparent; background-color: @bg-color-secondarycontainer; .@{prefix}-image-viewer__header-img { - max-height: 100%; + width: auto; + height: 100%; } &:hover, &.@{prefix}-is-active { - border: 1px solid @brand-color; + border-color: @brand-color; } } } @@ -318,8 +328,8 @@ color: @text-color-anti; background-color: rgba(0, 0, 0, 40%); border-radius: 50%; - width: 40px; - height: 40px; + width: @image-viewer-modal-button-size; + height: @image-viewer-modal-button-size; display: flex; justify-content: center; align-items: center; @@ -330,7 +340,7 @@ } &.@{prefix}-is-disabled { - color: @image-viewer__icon-color--disabled; + color: rgba(255, 255, 255, 22%); } &.@{prefix}-is-disabled:hover { @@ -372,13 +382,13 @@ height: 50px; line-height: 100%; background: @bg-color-container; - border-radius: 6px; - padding: 0 5px; + border-radius: @border-radius-medium; + padding: @image-viewer-utils-content-padding; .@{prefix}-image-viewer__modal-icon { - margin: 0 4px; - width: 32px; - height: 32px; + margin: @image-viewer-utils-modal-icon-margin; + width: @image-viewer-utils-modal-icon-size; + height: @image-viewer-utils-modal-icon-size; display: flex; justify-content: center; align-items: center; @@ -391,7 +401,7 @@ } .@{prefix}-image-viewer__utils-scale { - width: 40px; + width: @image-viewer-utils-modal-utils-scale-width; text-align: center; cursor: inherit; @@ -402,28 +412,6 @@ } } -.@{prefix}-image-viewer__mini-header { - display: flex; - justify-content: center; - align-items: center; - background-color: @bg-color-secondarycontainer; - height: 40px; - width: 100%; - font-size: @font-size-base; - - .@{prefix}-image-viewer__mini-close { - position: absolute; - right: 5px; - cursor: pointer; - transition: @anim-duration-base; - - &:hover .t-icon { - border-radius: 50%; - background-color: @bg-color-secondarycontainer-hover; - } - } -} - .@{prefix}-image-viewer-mini__footer { .@{prefix}-image-viewer__utils { position: inherit; @@ -431,8 +419,8 @@ } .@{prefix}-image-viewer-mini__content { - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; .@{prefix}-image-viewer__modal-pic { @@ -455,8 +443,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(80vw, 800px); - max-height: min(80vh, 600px); + max-width: ~"min(80vw, 800px)"; + max-height: ~"min(80vh, 600px)"; transition: all @anim-duration-base ease; transform: rotate(0deg); object-fit: contain; @@ -466,8 +454,21 @@ } .@{prefix}-image-viewer__dialog { + &.@{prefix}-dialog__ctx--fixed { + z-index: @z-index-image-viewer; + } + .@{prefix}-dialog__header { - padding-right: 0; + padding: 0 @comp-paddingLR-s; + // 兼容dialog表头限制无法拖拽 + pointer-events: none; + .@{prefix}-image-viewer__dialog-title { + pointer-events: all; + } + + .@{prefix}-dialog__close { + pointer-events: auto; + } } .@{prefix}-dialog { @@ -475,5 +476,21 @@ overflow: hidden; padding: 0; box-shadow: @shadow-3; + + &__header { + height: 40px; + width: 100%; + font-size: @font-size-base; + background-color: @bg-color-secondarycontainer; + + &-content { + margin-left: @spacer-4; + justify-content: center; + } + } + + &__close:hover { + background-color: @bg-color-secondarycontainer-hover; + } } } diff --git a/style/web/components/image-viewer/_var.less b/style/web/components/image-viewer/_var.less index b0aa32681d..47ccf7ade2 100644 --- a/style/web/components/image-viewer/_var.less +++ b/style/web/components/image-viewer/_var.less @@ -13,6 +13,27 @@ @import "../../_variables.less"; -@image-viewer__icon-color--disabled: rgba(255, 255, 255, 22%); -@image-viewer__image--background-color__error: #E7E7E7; +@image-viewer__icon-color--disabled: @text-color-disabled; +@image-viewer__image--background-color__error: @bg-color-component-disabled; @image-viewer__image-text--error: #000000; + +@image-viewer-error-font: @font-body-medium; + +@image-viewer-modal-padding: @comp-paddingTB-xs @comp-paddingLR-s; +@image-viewer-modal-header-pre-bt-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; +@image-viewer-modal-header-padding-bottom: @comp-margin-s; +@image-viewer-modal-header-size: @comp-size-xxxl; +@image-viewer-modal-header-image-box-size: @comp-size-xl; +@image-viewer-modal-header-image-box-margin: @comp-margin-l @comp-margin-xs @comp-margin-s; +@image-viewer-modal-button-size: @comp-size-xl; +@image-viewer-utils-content-padding: 0 @comp-paddingLR-xs; +@image-viewer-utils-modal-icon-margin: 0 @comp-margin-xs; +@image-viewer-utils-modal-icon-size: @comp-size-m; +@image-viewer-utils-modal-utils-scale-width: @comp-size-xl; + +@image-viewer-header-hide-padding: 0 0 12px 0; +@image-viewer-header-padding: 12px 0; +@image-viewer-header-box-height: 40px; +@image-viewer-header-box-width: calc(40px / 9 * 16); +@image-viewer-header-box-width-margin-left: calc(40px / 9 * 16 * 3 + 4px * 3); +@image-viewer-header-all-box-width: calc(40px / 9 * 16 * 7 + 4px * 6); diff --git a/style/web/components/image-viewer/index.html b/style/web/components/image-viewer/index.html deleted file mode 100644 index c1a0555eb7..0000000000 --- a/style/web/components/image-viewer/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

ImageViewer

-

开发者：lushenyu

-

创建日期：2022/5/22

-

说明：image组件样式添加

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/image/index.html b/style/web/components/image/index.html deleted file mode 100644 index 85b3aea32d..0000000000 --- a/style/web/components/image/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
- - -
-

Button

-

开发者：

-

创建日期：

-

说明：

-
- - - - - -
-

默认

- - -
- - - - - -
-
- - -
-

状态

- - -
- - - - -
- -
- - - -
-
- - -
-

类型

-
- - - - - -
-
- - - - - -
-
- - -
-

尺寸(如果有)

-
- - - - -
- -
- - - \ No newline at end of file diff --git a/style/web/components/input-adornment/_index.less b/style/web/components/input-adornment/_index.less index 559ae12b39..8e9c799b3e 100644 --- a/style/web/components/input-adornment/_index.less +++ b/style/web/components/input-adornment/_index.less @@ -4,8 +4,6 @@ @import "./_var.less"; -@import "./_mixin.less"; - @import "../../mixins/_reset.less"; .@{prefix}-input-adornment { @@ -13,28 +11,68 @@ display: flex; - .input-adornment-item(prepend); - .input-adornment-item(append); + &__prepend, + &__append { + .@{prefix}-input, + .@{prefix}-textarea__inner { + background-color: transparent; + } + } + + &__prepend { + background-color: @bg-color-secondarycontainer; + color: @text-color-primary; + word-break: keep-all; + margin-right: -1px; + } - &--prepend { + &__append { + background-color: @bg-color-secondarycontainer; + color: @text-color-primary; + word-break: keep-all; + margin-left: -1px; + } - & .@{prefix}-input, - & .@{prefix}-textarea__inner { - border-radius: 0 @input-border-radius @input-border-radius 0; + &__text { + display: inline-flex; + height: 100%; + align-items: center; + box-sizing: border-box; + padding: @input-adornment-item-padding; + border: 1px solid @input-adornment-border-color-default; + } + + // 调整首位元素修改圆角 + > :first-child { + border-radius: @border-radius-default 0 0 @border-radius-default; + + .@{prefix}-input, + .@{prefix}-input-adornment__text, + .@{prefix}-textarea__inner { + border-radius: @border-radius-default 0 0 @border-radius-default; } } - &--append { + // // 调整末尾元素修改圆角 + > :last-child { + border-radius: 0 @border-radius-default @border-radius-default 0; - & .@{prefix}-input, - & .@{prefix}-textarea__inner { - border-radius: @input-border-radius 0 0 @input-border-radius; + .@{prefix}-input, + .@{prefix}-input-adornment__text, + .@{prefix}-textarea__inner { + border-radius: 0 @border-radius-default @border-radius-default 0; } } - &--prepend&--append { - & .@{prefix}-input, - & .@{prefix}-textarea__inner { + // 调整非末尾元素层级 + > :not(:last-child):hover { + z-index: 2; + } + + // 调整非首尾元素圆角 + > :not(:first-child):not(:last-child) { + .@{prefix}-input, + .@{prefix}-textarea__inner { border-radius: 0; } } diff --git a/style/web/components/input-adornment/_mixin.less b/style/web/components/input-adornment/_mixin.less index 04a17838db..e69de29bb2 100644 --- a/style/web/components/input-adornment/_mixin.less +++ b/style/web/components/input-adornment/_mixin.less @@ -1,38 +0,0 @@ -.input-adornment-item(@position) { - .@{prefix}-input-adornment__@{position} { - background-color: @bg-color-secondarycontainer; - color: @input-text-color-default; - display: inline-flex; - align-items: center; - justify-content: center; - border: 1px solid @input-border-color-default; - padding: @input-adornment-item-padding; - word-break: keep-all; - - & when (@position = append) { - border-left: 0; - border-radius: 0 @input-border-radius @input-border-radius 0; - } - & when (@position = prepend) { - border-right: 0; - border-radius: @input-border-radius 0 0 @input-border-radius; - } - - .@{prefix}-input__wrap, - .@{prefix}-select__wrap { - height: 100%; - } - - .@{prefix}-select__wrap { - width: auto; - margin: 0 -12px; - } - - .@{prefix}-input, - .@{prefix}-select { - height: 100%; - line-height: 100%; - background-color: transparent; - } - } -} diff --git a/style/web/components/input-adornment/_var.less b/style/web/components/input-adornment/_var.less index ba489114ec..c0639572ce 100644 --- a/style/web/components/input-adornment/_var.less +++ b/style/web/components/input-adornment/_var.less @@ -13,6 +13,5 @@ @import "../../_variables.less"; -@import "../input/_var.less"; - -@input-adornment-item-padding: 0 (@spacer-3 / 2); +@input-adornment-item-padding: 0 @comp-paddingLR-s; +@input-adornment-border-color-default: @border-level-2-color; diff --git a/style/web/components/input-adornment/index.html b/style/web/components/input-adornment/index.html deleted file mode 100644 index b8744b4aca..0000000000 --- a/style/web/components/input-adornment/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - InputAdornment - - - - - - -
- -
- - diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less index b5486e9eed..03e353dc02 100644 --- a/style/web/components/input-number/_index.less +++ b/style/web/components/input-number/_index.less @@ -25,7 +25,7 @@ &:not(&--column) { > .@{prefix}-input-number__decrease + .@{prefix}-input__wrap { - margin-left: @spacer-s; + margin-left: @comp-margin-xs; } } @@ -61,11 +61,12 @@ width: auto; &.@{prefix}-is-controls-right { - min-width: 88px; + min-width: auto; + width: auto; } - &:not(.@{inputNumberCls}--column) .@{prefix}-input-number__increase { - right: -4px; + .@{prefix}-input__inner { + min-width: 42px; } } @@ -202,8 +203,7 @@ .@{inputCls} { height: @input-number-inner-height-l; line-height: @input-number-inner-height-l; - padding-right: @input-number-right-button-width-l + - @input-number-padding-horizontal-default; + padding-right: calc(@input-number-right-button-width-l + @input-number-padding-horizontal-default); } .@{inputNumberCls}__decrease, @@ -254,9 +254,7 @@ width: 100%; box-sizing: border-box; margin: 0; - padding-right: ( - @input-number-right-button-width + @input-number-padding-horizontal-default - ); + padding-right: calc(@input-number-right-button-width + @input-number-padding-horizontal-default); border-radius: @border-radius-default; } @@ -315,7 +313,7 @@ } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height + 3px; + top: calc(@input-number-button-column-height + 3px); border-bottom-right-radius: calc(@border-radius-default - 1px); } @@ -327,7 +325,7 @@ height: @input-number-button-column-height-l; } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height-l + 3px; + top: calc(@input-number-button-column-height-l + 3px); } } @@ -339,7 +337,17 @@ height: @input-number-button-column-height-s; } .@{inputNumberCls}__decrease { - top: @input-number-button-column-height-s + 3px; + top: calc(@input-number-button-column-height-s + 3px); } } } + +.@{inputNumberCls}--row { + .@{prefix}-input__wrap { + width: initial; + margin-right: @comp-margin-xs; + } + .@{prefix}-input-number__increase { + right: 0; + } +} diff --git a/style/web/components/input-number/_var.less b/style/web/components/input-number/_var.less index 83ad0c7a74..03db90cc7d 100644 --- a/style/web/components/input-number/_var.less +++ b/style/web/components/input-number/_var.less @@ -44,31 +44,30 @@ @input-number-width: 144px; // 数字输入组件宽度 中 @input-number-width-l: 168px; // 数字输入组件宽度 大 -@input-number-button-width-s: 24px; // 数字输入框操作按钮宽度 小 -@input-number-button-width: 32px; // 数字输入框操作按钮的宽度 中 -@input-number-button-width-l: 40px; // 数字输入框操作按钮宽度 大 +@input-number-button-width-s: @comp-size-xs; // 数字输入框操作按钮宽度 小 +@input-number-button-width: @comp-size-m; // 数字输入框操作按钮的宽度 中 +@input-number-button-width-l: @comp-size-xl; // 数字输入框操作按钮宽度 大 -@input-number-button-height-s: 24px; // 数字输入框操作按钮高度 小 -@input-number-button-height: 32px; // 数字输入框操作按钮的高度 中 -@input-number-button-height-l: 40px; // 数字输入框操作按钮高度 大 +@input-number-button-height-s: @comp-size-xs; // 数字输入框操作按钮高度 小 +@input-number-button-height: @comp-size-m; // 数字输入框操作按钮的高度 中 +@input-number-button-height-l: @comp-size-xl; // 数字输入框操作按钮高度 大 -@input-number-inner-height-s: 24px; // 数字输入框高度 小 -@input-number-inner-height: 32px; // 数字输入框高度 中 -@input-number-inner-height-l: 40px; // 数字输入框高度 大 +@input-number-inner-height-s: @comp-size-xs; // 数字输入框高度 小 +@input-number-inner-height: @comp-size-m; // 数字输入框高度 中 +@input-number-inner-height-l: @comp-size-xl; // 数字输入框高度 大 @input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度 小 @input-number-right-width: 96px; // 右侧调整数字输入组件宽度 中 @input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度 大 -@input-number-right-button-width-s: 32px; // 右侧调整数字输入框操作按钮宽度 小 -@input-number-right-button-width: 32px; // 右侧调整数字输入框操作按钮宽度 中 -@input-number-right-button-width-l: 40px; // 右侧调整数字输入框操作按钮宽度 大 +@input-number-right-button-width: @comp-size-m; // 右侧调整数字输入框操作按钮宽度 中 +@input-number-right-button-width-l: @comp-size-xl; // 右侧调整数字输入框操作按钮宽度 大 -@input-number-button-column-height-s: 10px; // 右侧调整数字操作按钮的高度 中 -@input-number-button-column-height: 14px; // 右侧调整数字操作按钮的高度 中 -@input-number-button-column-height-l: 18px; // 右侧调整数字操作按钮的高度 大 +@input-number-button-column-height-s: calc(calc(@comp-size-xs / 2) - 2px); // 右侧调整数字操作按钮的高度 中 +@input-number-button-column-height: calc(calc(@comp-size-m / 2) - 2px); // 右侧调整数字操作按钮的高度 中 +@input-number-button-column-height-l: calc(calc(@comp-size-xl / 2) - 2px); // 右侧调整数字操作按钮的高度 大 -@input-number-padding-horizontal-default: @spacer; +@input-number-padding-horizontal-default: @comp-paddingLR-s; // 字号 @input-number-font-size: @font-size-l; // 数字输入框操作按钮字号 diff --git a/style/web/components/input-number/index.html b/style/web/components/input-number/index.html deleted file mode 100644 index 4dfbf55008..0000000000 --- a/style/web/components/input-number/index.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - - InputNumber - - - - - - - -
- -
-

InputNumber

-

Kyrielin

-

创建日期：2020-11-26

-

说明：TDesign InputNumber 组件

-
- - - - -
-

组件类型

-

1. 输入居中，两侧调整数值：

- - -
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
- -
- - - - - - -
- -
-
-
- -

2. 输入居左，右侧调整数值：

-
-
- - - - - - -
- -
-
-
- -
- - -
-

组件大小

-

1.两侧型数字输入框提供小、中（默认）

- -
- -
- - - - - - -
- -
-
- -
- -
- - - - - - -
- -
-
-
- -

2.右侧型数字输入框提供中（默认）、大

-
-
- - - - - - -
- -
-
- -
- -
- - - - - - -
- -
-
-
- -
- -
-

禁用

- -
- -
- - - - - - -
- -
-
-
- - - - - - -
- -
-
-
-
- -
-
- - - \ No newline at end of file diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less index 45c1c3c171..ce52a0a90b 100644 --- a/style/web/components/input/_index.less +++ b/style/web/components/input/_index.less @@ -6,6 +6,8 @@ @import "./_mixin.less"; +@import "../../mixins/_text.less"; + @import "../../mixins/_reset.less"; .@{prefix}-input { @@ -17,8 +19,6 @@ height: @input-height-default; .input-base(); - line-height: @input-height-default; // TODO: 需要调整目前用line height撑开的方式 - &--focused { border-color: @input-border-color-default-focus; box-shadow: @input-box-shadow-focus; @@ -41,6 +41,7 @@ font: inherit; background-color: transparent; box-sizing: border-box; + .text-ellipsis(); &::placeholder { color: @input-placeholder-color; @@ -51,6 +52,11 @@ width: 100%; } + // 隐藏Edge浏览器默认的密码框样式 + &[type="password"]::-ms-reveal { + display: none; + } + &[type="search"]::-webkit-search-decoration, &[type="search"]::-webkit-search-cancel-button, &[type="search"]::-webkit-search-results-button, @@ -101,15 +107,12 @@ &.@{prefix}-size-l { height: @input-height-l; font: @input-font-l; - padding-top: @spacer; - padding-bottom: @spacer; + padding: @input-padding-l; } &.@{prefix}-size-s { height: @input-height-s; font: @input-font-s; - padding-top: (@spacer / 4); - padding-bottom: (@spacer / 4); } .@{prefix}-input__prefix, @@ -121,13 +124,28 @@ .@{prefix}-input__prefix { > .t-icon { + font-size: @icon-default; color: @input-inner-prefix-icon-color; } + + &:not(:empty) { + margin-right: @comp-margin-s; + } } .@{prefix}-input__suffix { > .t-icon { color: @input-inner-suffix-icon-color; + transition: all @anim-duration-base linear; + + &:hover { + color: @input-inner-suffix-icon-color-hover; + transition: all @anim-duration-base linear; + } + } + + &:not(:empty) { + margin-left: @comp-margin-s; } } diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less index f8f6500805..b4454e2565 100644 --- a/style/web/components/input/_mixin.less +++ b/style/web/components/input/_mixin.less @@ -3,7 +3,7 @@ border-style: solid; border-radius: @input-border-radius; border-color: @input-border-color-default; - padding: 0 @input-padding-horizontal-default; + padding: @input-padding-default; background-color: @input-bg-color-default; outline: none; color: @input-text-color-default; @@ -88,15 +88,6 @@ .input-fix-position(@position) { &.@{prefix}-input--@{position} { - & > .@{prefix}-input__@{position}-icon { - & when (@position = prefix) { - padding-right: @spacer; - } - & when (@position = suffix) { - padding-left: @spacer; - } - } - & > .@{prefix}-input__@{position} { z-index: 2; height: 100%; @@ -111,20 +102,3 @@ } } } - -.input-size(@size) { - & when(@size = l) { - &.@{prefix}-size-l { - & > .@{prefix}-input__inner { - height: @input-height-l; - line-height: @input-height-l; - } - } - } - & when not (@size = l) { - &.@{prefix}-size-@{size} { - width: @@width-size; - @width-size: "input-width-@{size}"; - } - } -} diff --git a/style/web/components/input/_var.less b/style/web/components/input/_var.less index 7196db19c1..4cc5a8e8e9 100644 --- a/style/web/components/input/_var.less +++ b/style/web/components/input/_var.less @@ -49,24 +49,23 @@ @input-fix-position: @spacer; // 间距 -@input-padding-horizontal-default: @spacer; -@input-margin-distance-default: @spacer; -@input-status-position-right: -@spacer-3; -@input-fix-padding: @spacer-4; +@input-padding-l: @comp-paddingTB-m @comp-paddingLR-m; +@input-padding-default: 0 @comp-paddingLR-s; +@input-margin-distance-default: @comp-margin-xxxl; +@input-status-position-right: -24px; @input-group-first-child-margin-left: -1px; -@textarea-limited-padding: (@spacer * 4); - // 尺寸 -@input-height-s: 24px; -@input-height-default: 32px; -@input-height-l: 40px; +@input-height-s: @comp-size-xs; +@input-height-default: @comp-size-m; +@input-height-l: @comp-size-xl; @input-inner-icon-font-size: inherit; @input-tips-min-height: @text-line-height-s; // 图标 @input-inner-prefix-icon-color: @text-color-placeholder; @input-inner-suffix-icon-color: @text-color-placeholder; +@input-inner-suffix-icon-color-hover: @text-color-secondary; // 字号 @input-font-l: @font-body-large; @@ -86,7 +85,7 @@ @input-box-shadow-focus: 0 0 0 2px @input-box-shadow-color-default-focus; // 动画 -@input-inner-transition: all @anim-time-fn-easing @anim-duration-base; +@input-inner-transition: border @anim-time-fn-easing @anim-duration-base, box-shadow @anim-time-fn-easing @anim-duration-base; // 交互 @input-cursor-readonly: pointer; diff --git a/style/web/components/input/index.html b/style/web/components/input/index.html deleted file mode 100644 index 470a663540..0000000000 --- a/style/web/components/input/index.html +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - Input - - - - - - -
- -
-

Input

-

开发者：JrainLau

-

创建日期：2020-05-14

-

说明：TDesign Input 组件

-
- - - - -
-

组件类型

- - -
- -

1.基础输入框

-
-
- -
-
- -
-

2.文本域输入框

-
-
- -
-
-
- - 5/150 -
-
- -
-

3.前后置标签输入框

-
-
-
- -
-
- .com -
-
-
-
-
- Http:// -
-
- -
-
- .com -
-
-
- -
-

4.组合输入框

-
-
-
- -
-
- -
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-  -  -
- -
-
- -
-
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
-
- -
-

5.可清空内容输入框

-
-
- - - - -
-
- -
-

6.带icon输入框（包含密码输入框）

-
-
- - - - - - - -
-
-
- - - - - - - -
-
- -
- - -
-

组件状态

- - -
-
-

1.正常

-
-
- -
-
-
- -
-
-

2.禁用

-
-
- -
-
-
- -
-
-

3.状态

-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-

4.带额外内容提示

-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 -
-
-
- -
-
-

5.带状态图标提示

-
-
- - - - -
-
-
- - 这里是额外的提示语，有可能会很多文字，有可能会很多文字 - - - -
-
-
-
- - -
-

尺寸(如果有)

-
-

1.不同高度尺寸：高，低

-
-
- -
-
-
- -
-
- - - - -
-
- - diff --git a/style/web/components/jumper/_var.less b/style/web/components/jumper/_var.less deleted file mode 100644 index abc2dd9e23..0000000000 --- a/style/web/components/jumper/_var.less +++ /dev/null @@ -1,14 +0,0 @@ -// 组件变量 -// 名称可按如下规则定义： -// -[type]-[attrtype]--[status] - -// component:组件名，如button， -// type: 组件类型，如 button 的次要按钮（line） -// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 -// attr: 属性名称，如color、height、radius等 -// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 - -// 如：@button-line-bg-color-hover -// 如：@button-line-height-s - -@import "../../_variables.less"; diff --git a/style/web/components/layout/_var.less b/style/web/components/layout/_var.less index cc2c4f3b22..26d73a642b 100644 --- a/style/web/components/layout/_var.less +++ b/style/web/components/layout/_var.less @@ -24,11 +24,8 @@ @layout-footer-color: @text-color-placeholder; // 尺寸 -@layout-header-height: 64px; +@layout-header-height: @comp-size-xxxl; @layout-sider-width: 232px; -// 间距 -@layout-footer-spacer: @spacer-3; - // 动画 -@layout-sider-anim-duration: .22s; +@layout-sider-anim-duration: @anim-duration-base; diff --git a/style/web/components/layout/index.html b/style/web/components/layout/index.html deleted file mode 100644 index 75f3cd21bf..0000000000 --- a/style/web/components/layout/index.html +++ /dev/null @@ -1,164 +0,0 @@ - - - - - - Layout - - - - - - - - -
- - -
-

Layout

-

开发者：kyrielin

-

创建日期：2020-11-9

-

说明：TDesign Layout

-
- - - -
-

侧边导航布局

- - -
- - -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
- -
- -
- - -
-
-
- Header -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
-
- -
- -
- - -
-
-
- Header -
-
- -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
-
-
- - - -
-
-
- Header -
-
-
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
- -
-
-
- -
-
- -
-

顶部导航布局

- - -
- - -
-
-
- Header -
-
-
Content
-
-
- Copyright @ 2019-2020 Tencent. All Rights Reserved -
-
-
- -
-
- -
- - - diff --git a/style/web/components/link/_var.less b/style/web/components/link/_var.less index 4b13672c75..2ad4c6b70f 100644 --- a/style/web/components/link/_var.less +++ b/style/web/components/link/_var.less @@ -3,13 +3,13 @@ @link-font-default: @font-link-medium; @link-font-l: @font-link-large; -@link-icon-margin-s: @spacer-s; -@link-icon-margin-default: @spacer-1; -@link-icon-margin-l: @spacer-l; +@link-icon-margin-s: @comp-margin-xs; +@link-icon-margin-default: @comp-margin-s; +@link-icon-margin-l: @comp-margin-m; // 按钮中icon和文字的间距 -@link-icon-text-margin-left: @spacer-s; -@link-icon-text-margin-right: @spacer-s; +@link-icon-text-margin-left: @comp-margin-xs; +@link-icon-text-margin-right: @comp-margin-xs; @link-color-default: @text-color-primary; @link-color-default-hover: @brand-color-hover; diff --git a/style/web/components/list/_index.less b/style/web/components/list/_index.less index 4a70b1053d..5b93d59761 100644 --- a/style/web/components/list/_index.less +++ b/style/web/components/list/_index.less @@ -48,12 +48,12 @@ &__meta { display: flex; - padding: @list-meta-padding; + // padding: @list-meta-padding; &-avatar { width: @list-avatar-size; height: @list-avatar-size; - border-radius: (@list-avatar-size / 2); + border-radius: calc(@list-avatar-size / 2); overflow: hidden; background: @list-avatar-bg-color; margin-right: @list-avatar-margin-right; @@ -107,10 +107,6 @@ } } } - - &__extra { - margin: @list-extra-margin; - } } &--split { @@ -174,6 +170,7 @@ .@{prefix}-loading { font-size: @list-load-font-size; + margin-right: @list-load-icon-margin; } .@{prefix}-loading.@{prefix}-is-load-more { diff --git a/style/web/components/list/_var.less b/style/web/components/list/_var.less index 1cce9bb29b..6a1bdaf436 100644 --- a/style/web/components/list/_var.less +++ b/style/web/components/list/_var.less @@ -19,7 +19,7 @@ @list-item-split-color: @border-level-1-color; @list-avatar-bg-color: @bg-color-page; @list-text-color-loading: @text-color-placeholder; -@list-icon-color-loading: @brand-color-5; +// @list-icon-color-loading: @brand-color-5; @list-text-color-load-more: @text-color-placeholder; @list-meta-title-color: @text-color-primary; @list-meta-description-color: @text-color-primary; @@ -29,29 +29,28 @@ @list-font-color: @text-color-primary; // 间距 -@list-padding: @spacer-2 @spacer-3; -@list-item-spacer-small: @spacer @spacer-2; -@list-item-spacer-default: @spacer-l @spacer-3; -@list-item-spacer-large: @spacer-2 @spacer-4; -@list-meta-padding: @spacer-s 0; -@list-avatar-margin-right: @spacer-2; -@list-meta-title-margin: 0 0 @spacer; -@list-meta-description-margin-right: @spacer-3; -@list-action-margin-right: @spacer-3; -@list-extra-margin: @spacer 0 @spacer @spacer-2; -@list-load-not-empty-padding: @spacer-4; -@list-load-icon-margin: @spacer; +@list-padding: @comp-paddingTB-m @comp-paddingLR-l; +@list-item-spacer-small: @comp-paddingTB-s @comp-paddingLR-m; +@list-item-spacer-default: @comp-paddingTB-m @comp-paddingLR-l; +@list-item-spacer-large: @comp-paddingTB-l @comp-paddingLR-xl; +// @list-meta-padding: @spacer-s 0; +@list-avatar-margin-right: @comp-margin-l; +@list-meta-title-margin: 0 0 @comp-margin-s; +@list-meta-description-margin-right: @comp-margin-xxl; +@list-action-margin-right: @comp-margin-l; +@list-load-not-empty-padding: @comp-paddingTB-m @comp-paddingLR-l; +@list-load-icon-margin: @comp-margin-s; // 尺寸 -@list-item-line-height: 22px; -@list-avatar-size: 56px; -@list-icon-size: @font-size-l; +@list-item-line-height: @text-line-height-base; +@list-avatar-size: @comp-size-xxxl; +@list-icon-size: @comp-size-xxxs; // 字体 @list-item-font: @font-body-medium; @list-meta-title-font: @font-title-medium; -@list-load-font-size: @font-size-l; -@list-load-more-font-size: @font-size-l; +@list-load-font-size: @comp-size-xxxs; +@list-load-more-font-size: @comp-size-xxxs; // 行号 -@list-load-line-height: @text-line-height-s; +@list-load-line-height: @text-line-height-base; diff --git a/style/web/components/list/index.html b/style/web/components/list/index.html deleted file mode 100644 index 4bada0bdfa..0000000000 --- a/style/web/components/list/index.html +++ /dev/null @@ -1,848 +0,0 @@ - - - - - - list - - - - - - - -
- - -
-

List

-

开发者：JrainLau

-

创建日期：2020-06-05

-

说明：TDesign list 组件的基本样式

-
- - - - - -
-

类型

- - -
-

1.1.1 基础列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.1.2 线性区分列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.1.3 斑马纹区分列表

- -
-
    -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
  • - 列表内容列表内容列表内容 -
    • -
-
- - -
- -
-

1.2 多行文字列表

- -
-
    -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

1.3 基础图文列表

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

1.4.1 带操作列表

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
-
- - -
- -
-

1.4.1.1* 带操作列表（垂直）

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - -
    -
    • -
-
- - -
- -
-

1.4.2 带图标操作

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
      -
      • -
      • -
      • -
    -
    -
    • -
-
- - -
- -
-

1.5* 额外内容

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    - - -
    - -
    -
    额外内容
    -
    -
    • -
-
- - -
-
- - -
-

状态

- -
-

1 滚动加载更多

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - 正在加载中，请稍等 -
-
- - -
- -
-

2 点击加载更多

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- 点击加载更多 -
-
- - -
- -
-

3 翻页

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
-
- -
共 658 项数据
- - -
- -
- -
    -
  • 1
    • -
    • -
  • 50
    • -
  • 51
    • -
  • 52
    • -
  • 53
    • -
  • 54
    • -
    • -
  • 90
    • -
- -
- -
-
-
-
- - -
- -
-

4 滚动条

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
- -
-

5 多内容

- -
-
    -
  • -
    -
    -
    - -
    -
    -

    - 列表主内容 -

    -
    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -

    列表内容列表内容列表内容

    -
    -
    -
    -
    -
    • -
-
- - -
-
- - - -
-

尺寸

-
- -

尺寸-小

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- -

尺寸-中（默认）

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- -

尺寸-大

-
-
    -
  • 列表内容列表内容
    • -
-
- -
- -
- - - diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less index 64d68448ed..16d4368291 100644 --- a/style/web/components/loading/_index.less +++ b/style/web/components/loading/_index.less @@ -100,12 +100,13 @@ &-conic { width: 100%; height: 100%; - background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); border-radius: @border-radius-circle; + /* stylelint-disable-next-line color-no-hex */ + background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); - /* stylelint-disable-next-line */ + /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); } } diff --git a/style/web/components/loading/_var.less b/style/web/components/loading/_var.less index 85ee04e8bd..835fec67d8 100644 --- a/style/web/components/loading/_var.less +++ b/style/web/components/loading/_var.less @@ -18,21 +18,21 @@ // 字号 @loading-text-size: @font-body-medium; -@loading-icon-size: @font-size-xxl; -@loading-icon-size-small: @font-size-l; -@loading-icon-size-large: 56px; +@loading-icon-size: @comp-size-l; +@loading-icon-size-small: @comp-size-xxxs; +@loading-icon-size-large: @comp-size-xxxl; @loading-fullscreen-icon-size: @loading-icon-size; // 间距 -@loading-text-margin-left: 5px; +@loading-text-margin-left: @comp-margin-xs; @loading-gradient-padding-s: 1px; @loading-gradient-padding-m: 3px; @loading-gradient-padding-l: 5px; // Size -@loading-gradient-size-s: 16px; -@loading-gradient-size-m: 40px; -@loading-gradient-size-l: 56px; +@loading-gradient-size-s: @comp-size-xxxs; +@loading-gradient-size-m: @comp-size-xl; +@loading-gradient-size-l: @comp-size-xxxl; @loading-gradient-mask-size-s: 5.5px; @loading-gradient-mask-size-m: 11.5px; diff --git a/style/web/components/loading/index.html b/style/web/components/loading/index.html deleted file mode 100644 index 474c64cff5..0000000000 --- a/style/web/components/loading/index.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - - - Loading - - - - - - - - -
- - -
-

Loading

-

开发者：wintyzhou

-

创建日期：2020-11-15

-

说明：加载样式

-
- - - - - -
-

默认

- - -
-
- - - - - - -
-
-
- - -
-

状态

- - -
- - - - -
- - - - - -
-
- - - 加载中... - - -
-
- - - - 拼命加载中... - - -
- - - -
-
- - -
-

尺寸(如果有)

-
- - -
- 小： - - - - - -
-
-
- 中： - - - - - -
-
-
- 大： - - - - - -
-
- -
- -
- -
-

遮罩及居中

-
- - - - - - - - - - -
-
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/menu/_docs.less b/style/web/components/menu/_docs.less index 14c8a6202f..6e0fc2beab 100644 --- a/style/web/components/menu/_docs.less +++ b/style/web/components/menu/_docs.less @@ -105,6 +105,43 @@ --bg-color-demo: var(--bg-color-demo-secondary); } +[class*="@{d-prefix}-demo-menu__operations"] { + .t-button { + margin-left: 8px; + } +} + +[class*="@{d-prefix}-demo-menu__operations--dark"] { + .t-button { + margin-left: 8px; + color: #fff; + + --ripple-color: #383838; + + &:hover { + color: #fff; + background-color: #4b4b4b; + border-color: transparent; + } + } +} + +[class*="@{d-prefix}-demo-menu-collapse--dark"] { + .t-button { + color: #fff; + + --ripple-color: #383838 !important; + + &:hover { + color: #fff; + background-color: #4b4b4b; + border-color: transparent; + + --ripple-color: #383838; + } + } +} + :root[theme-mode="dark"] { .tdesign-demo-item--menu { diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less deleted file mode 100644 index 074bf94f7c..0000000000 --- a/style/web/components/menu/_index-v2.less +++ /dev/null @@ -1,921 +0,0 @@ -// 组件允许单个组件打包，因此默认引入公共基础样式 - -@import "../../base.less"; - -@import "./_var.less"; - -@import "./_mixin.less"; - -@import "../../mixins/_layout.less"; - -@import "../../mixins/_reset.less"; - -a.@{prefix}-menu__item { - text-decoration: none; - color: unset; - - &:hover, - &:active { - color: inherit; - } -} - -// head-menu -.@{prefix}-head-menu { - .reset; - - position: relative; - width: 100%; - background-color: @menu-theme-light; - - &__inner { - display: flex; - height: 64px; - - li + li { - margin-left: 4px; - } - - .@{prefix}-menu { - &:first-child { - margin-left: 24px; - } - } - } - - .@{prefix}-menu__logo:not(:empty) { - height: 100%; - margin-right: 32px; - } - - .@{prefix}-menu { - flex: 1; - display: flex; - align-items: center; - // overflow: auto hidden; - } - - .@{prefix}-menu__operations { - &:not(:empty) { - position: relative; - display: flex; - align-items: center; - height: 64px; - line-height: 64px; - text-align: right; - margin-right: 8px; - overflow: hidden; - } - - &-icon { - width: 40px; - height: 40px; - padding: 8px; - line-height: 40px; - } - } - - .@{prefix}-submenu { - - > .@{prefix}-menu__item { - overflow: unset; - - &::before { - content: ""; - display: block; - position: absolute; - bottom: -20px; - left: 0; - right: 0; - height: 20px; - } - } - } - - .@{prefix}-menu__item { - min-width: @head-menu-item-width; - height: @head-menu-item-height; - line-height: @head-menu-item-height; - justify-content: center; - transition: all @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - } - - &__submenu { - padding-left: 0; - border-top: 1px solid @head-menu-submenu-border-color; - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: #fff; - - &__bar { - background-color: @submenu-dark-item-active-color; - } - - &__nav-item { - color: @font-gray-2; - - &-wrapper { - --ripple-color: @menu-item-animation-bg--light; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-light-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - } - - --ripple-color: @menu-item-animation-bg--light; - } - } - } - - .@{prefix}-menu__popup { - top: 60px; - min-width: 100%; - box-sizing: content-box; - transform-origin: center top; - - .@{prefix}-menu__item { - display: flex; - align-items: center; - justify-content: flex-start; - white-space: nowrap; - padding-left: 16px; - padding-right: 16px; - min-width: 100%; - margin-left: 0; - color: @head-menu-popup-item-color; - box-sizing: border-box; - } - - li + li { - margin-top: 4px; - margin-left: 0; - } - } - - .@{prefix}-submenu-icon { // to remove - margin-left: 8px; - } - - .@{prefix}-fake-arrow { - margin-left: 8px; - } - - // 多层情况 - .@{prefix}-menu__popup-inner { - - .@{prefix}-menu__popup { - top: -8px; - left: calc(100% + 16px); - transform-origin: left top; - } - - .@{prefix}-menu__item { - text-align: left; - padding: 0 16px; - justify-content: space-between; - } - - .@{prefix}-submenu-icon { - transform: rotate(270deg); - } - } -} - -// default-menu -.@{prefix}-default-menu { - .reset; - - position: relative; - width: @default-menu-width; - display: inline-block; - background: @menu-theme-light; - transition: width @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - white-space: nowrap; - - &.@{prefix}-menu--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__logo:not(:empty) { - border-bottom-color: @menu-border-color--dark; - } - - .@{prefix}-menu__operations:not(:empty) { - border-top-color: @menu-border-color--dark; - } - - .@{prefix}-menu__item { - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background-color: @menu-border-color--dark; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - background-color: @default-menu-active-color; - } - - &.@{prefix}-is-opened { - color: @menu-theme-light; - } - - &.@{prefix}-is-opened.@{prefix}-is-active { - background-color: transparent; - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - - &.@{prefix}-is-active { - background-color: @default-menu-active-color; - } - } - } - - .@{prefix}-menu-group__title { - color: @menu-menu-group-title-color--dark; - } - - &.@{prefix}-is-collapsed .@{prefix}-menu-group__title:after { - background-color: @menu-group-title-bg--collapse--dark; - } - } - - &.@{prefix}-is-collapsed { - width: @default-menu-collapse-width; - - .@{prefix}-menu { - - .@{prefix}-menu__item { - padding: 0 14px; - justify-content: center; - } - } - - .@{prefix}-fake-arrow { - display: none; - } - - .@{prefix}-menu__item { - text-overflow: initial; - - &.@{prefix}-is-active.@{prefix}-is-opened { - color: @menu-theme-light; - background-color: @default-menu-active-color; - - .t-icon { - color: @menu-theme-light; - } - } - - &.@{prefix}-menu__item--plain::after { - content: ""; - } - - span { - display: none; - } - - .t-icon { - margin-right: initial; - } - } - - .@{prefix}-menu__popup { - - .@{prefix}-menu__item { - padding-left: @popup-item-padding-left; - justify-content: flex-start; - - span { - display: inline; - } - - &.@{prefix}-menu__item--plain::after { - content: ""; - } - } - - .@{prefix}-fake-arrow { - display: block; - } - } - - .@{prefix}-submenu { - &-icon { - display: none; - } - - .@{prefix}-menu__popup { - - .@{prefix}-submenu-icon { - display: initial; - } - } - - > .@{prefix}-menu__item { - min-width: initial; - - &::after { - content: ""; - display: block; - position: absolute; - right: -20px; - top: 0; - bottom: 0; - width: 20px; - } - } - } - - .@{prefix}-menu-group__title { - padding: 0; - font-size: 0; - box-sizing: border-box; - - &::after { - content: ""; - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 1px; - width: 20px; - background: @menu-group-title-bg--collapse; - } - } - - .@{prefix}-menu__operations { - text-align: center; - - &-icon { - display: block; - } - } - } - - &__inner { - display: flex; - flex-direction: column; - height: 100%; - - .@{prefix}-menu__logo:not(:empty) { - width: 100%; - height: 64px; - border-bottom: 1px solid @menu-border-color; - } - - .@{prefix}-menu { - padding: 16px 8px; - position: relative; - // overflow: hidden auto; - flex: 1; - - &--scroll { - overflow-y: auto; - } - } - - .@{prefix}-menu-group { - &__title { - position: relative; - padding: 20px 16px 8px; - height: 48px; - line-height: 20px; - color: @menu-menu-group-title-color; - font-size: @menu-extra-font-size; - box-sizing: border-box; - } - } - } - - .@{prefix}-submenu { - margin-bottom: 4px; - position: relative; - } - - .@{prefix}-menu__operations { - &:not(:empty) { - width: 100%; - position: relative; - padding: 8px 16px; - top: 0; - left: 0; - text-align: left; - border-top: solid 1px @menu-border-color; - box-sizing: border-box; - } - - &-icon { - width: 32px; - height: 32px; - padding: 8px; - cursor: pointer; - color: @menu-operations-color; - box-sizing: border-box; - } - } - - .@{prefix}-menu__item { - - &.@{prefix}-is-opened { - margin: 4px 0; - color: @menu-light-active-color; - background-color: unset; - - .t-icon { - color: @menu-light-active-color; - } - } - } - - .@{prefix}-menu__dropdown { - // display: none; - // position: static; - overflow: hidden; - transition: max-height @anim-duration-slow cubic-bezier(.645, .045, .355, 1); - // height: 0; - - .@{prefix}-menu__item { - padding-left: 64px; - } - - &--show { - display: block; - } - } - - .@{prefix}-menu__sub { - padding: 0; - max-height: 0; - overflow: hidden; - transition: max-height @anim-duration-base @anim-time-fn-easing; - - &.@{prefix}-is-opened { - max-height: 1000px; - } - - .@{prefix}-menu__item { - padding-left: var(--padding-left, 32px); - } - } - - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + 16px); - } - - .@{prefix}-menu__item { - position: relative; - margin: 4px 0; - padding: 0 10px 0 16px; - height: @default-menu-item-height; - line-height: @default-menu-item-height; - border-bottom: 0; - text-align: left; - border-radius: @border-radius-default; - transition: - background-color @anim-duration-slow @anim-time-fn-easing, - padding @anim-duration-slow @anim-time-fn-easing; - box-sizing: border-box; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - .t-icon { - width: 20px; - height: 20px; - } - - .@{prefix}-fake-arrow { - margin-left: auto; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - color: @menu-theme-light; - background-color: @default-menu-active-color; - - .t-icon { - color: @menu-theme-light; - } - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background: @menu-light-active-bg; - - & + .@{prefix}-menu__item { - margin-top: 4px; - } - } - } -} - -// menu -.@{prefix}-menu { - color: @menu-color-light; - font: @menu-font-size; - .list-style-none(); - - &--dark { - color: @menu-color-dark; - } - - &__logo { - &:not(:empty) { - display: flex; - align-items: center; - } - } - - .@{prefix}-submenu { - position: relative; - - &.@{prefix}-is-active { - - > .@{prefix}-menu__item { - color: @menu-theme-dark; - - .t-icon { - color: @menu-theme-dark; - } - } - } - - .@{prefix}-submenu-icon { - width: 16px; - height: 16px; - } - - &.@{prefix}-is-opened { - - & .@{prefix}-submenu-icon { - transform: scaleY(-1); - } - } - } - - &::-webkit-scrollbar { - display: none; - } - - &__spacer { - &::before { - content: ""; - display: block; - position: absolute; - z-index: 1; - } - - @horizontal-spacer: 16px; - - &--left::before { - left: -@horizontal-spacer; - width: @horizontal-spacer; - top: 0; - bottom: 0; - } - - &--top::before { - top: -20px; - left: 0; - right: 0; - height: 20px; - } - } - - &__popup-wrapper { - box-sizing: border-box; - max-height: var(--popup-max-height, 364px); - overflow-y: scroll; - overflow-x: hidden; - } - - &__item { - position: relative; - display: flex; - align-items: center; - height: 40px; - line-height: 40px; - text-align: center; - color: @menu-item-color--light; - cursor: pointer; - // overflow: hidden; - text-overflow: ellipsis; - border-radius: @border-radius-default; - - ::selection { - background: transparent; - } - - &-spacer { - overflow: unset; - - &::before { - content: ""; - display: block; - position: absolute; - z-index: 1; - } - - @horizontal-spacer: 16px; - - &--right::before { - right: -@horizontal-spacer; - width: @horizontal-spacer; - top: 0; - bottom: 0; - } - - &--bottom::before { - bottom: -20px; - left: 0; - right: 0; - height: 20px; - } - } - - a { - color: unset; - text-decoration: none; - - &.@{prefix}-menu__item-link { - color: unset; - } - } - - &.@{prefix}-is-active { - color: @menu-item-active-color--light; - background-color: @menu-item-active-bg--light; - } - - &.@{prefix}-is-opened { - font-weight: 500; - color: @menu-item-active-color--light; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - background-color: @menu-item-hover-bg--light; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - cursor: not-allowed; - } - - --ripple-color: @menu-item-animation-bg--light; - } - - &__content { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .t-icon + &__content, - .t-icon + &__item-link { - margin-left: 8px; - } - - &--dark { - - &.@{prefix}-head-menu { - background-color: @menu-theme-dark; - } - - .@{prefix}-menu__item { - color: @menu-item-color--dark; - - &.@{prefix}-is-active { - color: @menu-item-active-color--dark; - background-color: @menu-item-active-bg--dark; - } - - &.@{prefix}-is-opened { - color: @menu-item-active-color--dark; - - .t-icon { - color: @menu-item-active-color--dark; - } - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - - --ripple-color: @menu-item-animation-bg--dark; - } - - .@{prefix}-head-menu__submenu { - border-top: 1px solid transparent; - } - - .@{prefix}-menu__operations { - &-icon { - color: @menu-theme-light; - - &:hover { - background-color: @menu-item-active-bg--dark; - } - } - } - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: @gray-color-11; - - &__nav-item { - color: #fff; - - &-wrapper { - --ripple-color: @gray-color-9; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-dark-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-dark-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - --ripple-color: @gray-color-9; - } - } - } - - &__popup { - max-height: 0; - overflow: hidden; - transition: - max-height @anim-duration-moderate @anim-time-fn-easing, - width @anim-duration-moderate @anim-time-fn-easing, - opacity @anim-duration-base linear; - position: absolute; - background: @menu-theme-light; - z-index: @menu-outer-zindex; - border-radius: @border-radius-medium; - opacity: 0; - .list-style-none(); - - &-wrapper { - padding: 8px; - height: 100%; - list-style: none; - margin: 0; - } - - .@{prefix}-fake-arrow { - margin-left: 8px; - } - - &.@{prefix}-is-vertical { - max-height: unset; - width: 0; - - &.@{prefix}-is-opened { - width: var(--popup-width, 216px); - } - - .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; - margin: 4px 0; - } - } - - &.@{prefix}-is-horizontal { - .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; - white-space: nowrap; - } - - li + li { - margin-top: 4px; - } - } - - &.@{prefix}-is-opened { - max-height: var(--popup-max-height, 364px); - opacity: 1; - box-shadow: @menu-default-shadow; - overflow: visible; - - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + @horizontal-spacer); - overflow-y: auto; - - // &::before { - // content: ""; - // display: block; - // position: absolute; - // left: -@horizontal-spacer; - // width: @horizontal-spacer; - // top: 0; - // bottom: 0; - // } - @horizontal-spacer: 16px; - } - } - - .@{prefix}-menu__item { - color: @menu-popup-item-color; - - + .@{prefix}-menu__item { - margin-left: 0; - } - - &.@{prefix}-is-active { - color: @menu-popup-item-active-color; - background-color: @menu-popup-item-active-bg; - } - - &:hover:not(.@{prefix}-is-active) { - background-color: @menu-popup-item-hover-bg; - } - } - - &--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - color: @menu-item-color--dark; - border-radius: @border-radius-default; - - --ripple-color: @menu-item-animation-bg--dark; - - &.@{prefix}-is-active { - color: @menu-item-active-color--dark; - background-color: @menu-item-active-bg--dark; - } - - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - - &:hover:not(.@{prefix}-is-active) { - color: @menu-item-hover-color--dark; - background-color: @menu-item-hover-bg--dark; - } - } - } - } - - &__operations { - &-icon { - margin-right: 16px; - border-radius: @border-radius-default; - color: @menu-item-color--light; - transition: background-color @anim-duration-moderate @anim-time-fn-easing; - - &:hover { - background-color: @menu-item-active-bg--light; - } - } - } -} - -// opacity-transition -.@{prefix}-opacity-transition { - transition: opacity @anim-duration-slow cubic-bezier(.55, 0, .1, 1); -} - -.horizontal-collapse-transition -.@{prefix}-submenu__title -.@{prefix}-submenu__icon-arrow { - transition: @anim-duration-base; - opacity: 0; -} diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index 9b94cae739..0fcea4b0fe 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -30,22 +30,22 @@ a.@{prefix}-menu__item { &__inner { display: flex; - height: 64px; + height: @comp-size-xxxl; li + li { - margin-left: 4px; + margin-left: @comp-margin-s; } .@{prefix}-menu { &:first-child { - margin-left: 24px; + margin-left: @comp-margin-xxl; } } } .@{prefix}-menu__logo:not(:empty) { height: 100%; - margin-right: 32px; + margin-right: @comp-margin-xxxl; } .@{prefix}-menu { @@ -60,18 +60,18 @@ a.@{prefix}-menu__item { position: relative; display: flex; align-items: center; - height: 64px; + height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; - margin-right: 8px; + margin-right: @comp-margin-s; overflow: hidden; } &-icon { - width: 40px; - height: 40px; - padding: 8px; - line-height: 40px; + width: @head-menu-item-height; + height: @head-menu-item-height; + padding: @comp-paddingTB-s @comp-paddingLR-s; + line-height: @head-menu-item-height; box-sizing: border-box; } } @@ -93,82 +93,55 @@ a.@{prefix}-menu__item { } .@{prefix}-menu__item { - min-width: @head-menu-item-width; height: @head-menu-item-height; line-height: @head-menu-item-height; + padding: 0 @comp-paddingLR-l; justify-content: center; transition: all @anim-duration-slow cubic-bezier(.645, .045, .355, 1); } &__submenu { border-top: 1px solid @head-menu-submenu-border-color; - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: #fff; - - &__bar { - background-color: @submenu-dark-item-active-color; - } - - &__nav-item { - color: @font-gray-2; - - &-wrapper { - --ripple-color: @menu-item-animation-bg--light; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-light-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color; - } - - --ripple-color: @menu-item-animation-bg--light; - } - } + padding-left: 0; } .@{prefix}-menu__popup { - top: 60px; + top: calc(@head-menu-item-height + 12px); + left: 0; min-width: 100%; box-sizing: content-box; transform-origin: center top; + border: solid .5px @menu-border-color; .@{prefix}-menu__item { display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-s; + padding-right: @comp-paddingLR-s; min-width: 100%; margin-left: 0; color: @head-menu-popup-item-color; box-sizing: border-box; + + &.@{prefix}-is-active { + color: @menu-light-active-color; + + .t-icon { + color: @menu-light-active-color; + } + } } li + li { - margin-top: 4px; + margin-top: @comp-margin-xxs; margin-left: 0; } } - .@{prefix}-submenu-icon { - // to remove - margin-left: 8px; - } - .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-m; } // 多层情况 @@ -202,56 +175,8 @@ a.@{prefix}-menu__item { transition: width @anim-duration-slow cubic-bezier(.645, .045, .355, 1); white-space: nowrap; - &.@{prefix}-menu--dark { - background: @menu-theme-dark; - - .@{prefix}-menu__logo:not(:empty) { - border-bottom-color: @menu-border-color--dark; - } - - .@{prefix}-menu__operations:not(:empty) { - border-top-color: @menu-border-color--dark; - } - - .@{prefix}-menu__item { - &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { - background-color: @menu-border-color--dark; - } - - &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - background-color: @default-menu-active-color; - } - - &.@{prefix}-is-opened { - color: @menu-theme-light; - } - - &.@{prefix}-is-opened.@{prefix}-is-active { - background-color: transparent; - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - - .@{prefix}-menu__item { - &.@{prefix}-is-active { - background-color: @default-menu-active-color; - } - } - } - - .@{prefix}-menu__popup { - background: @menu-theme-dark; - } - - .@{prefix}-menu-group__title { - color: @menu-menu-group-title-color--dark; - } - - &.@{prefix}-is-collapsed .@{prefix}-menu-group__title:after { - background-color: @menu-group-title-bg--collapse--dark; - } + .@{prefix}-menu__item { + color: @default-menu-item-color--light; } &.@{prefix}-is-collapsed { @@ -261,6 +186,9 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { padding: 0 14px; justify-content: center; + .@{prefix}-menu__item-link { + display: none; + } } } @@ -272,11 +200,11 @@ a.@{prefix}-menu__item { text-overflow: initial; &.@{prefix}-is-active.@{prefix}-is-opened { - color: @menu-theme-light; - background-color: @default-menu-active-color; + color: @default-menu-active-color; + background-color: @menu-item-active-bg--light; .t-icon { - color: @menu-theme-light; + color: @default-menu-active-color; } } @@ -295,7 +223,8 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { .@{prefix}-menu__item { - padding-left: @popup-item-padding-left; + padding-left: @comp-paddingLR-s; + padding-right: @comp-paddingLR-s; justify-content: flex-start; span { @@ -370,13 +299,14 @@ a.@{prefix}-menu__item { height: 100%; .@{prefix}-menu__logo:not(:empty) { + box-sizing: border-box; width: 100%; - height: 64px; + height: @menu-height-default; border-bottom: 1px solid @menu-border-color; } .@{prefix}-menu { - padding: 16px 8px; + padding: @comp-paddingTB-l @comp-paddingLR-s; position: relative; // overflow: hidden auto; flex: 1; @@ -389,17 +319,16 @@ a.@{prefix}-menu__item { .@{prefix}-menu-group { &__title { position: relative; - padding: 20px 16px 8px; - height: 48px; + padding: @comp-paddingTB-l @comp-paddingLR-l @comp-paddingTB-xs @comp-paddingLR-l; color: @menu-menu-group-title-color; - font: @menu-extra-font-size; + font-size: @menu-extra-font-size; box-sizing: border-box; } } } .@{prefix}-submenu { - margin-bottom: 4px; + margin-bottom: @comp-margin-xs; position: relative; } @@ -407,7 +336,7 @@ a.@{prefix}-menu__item { &:not(:empty) { width: 100%; position: relative; - padding: 8px 16px; + padding: @comp-paddingTB-s @comp-paddingLR-l; top: 0; left: 0; text-align: left; @@ -418,7 +347,7 @@ a.@{prefix}-menu__item { &-icon { width: 32px; height: 32px; - padding: 8px; + padding: @comp-paddingTB-s @comp-paddingLR-s; cursor: pointer; color: @menu-operations-color; box-sizing: border-box; @@ -427,33 +356,16 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { &.@{prefix}-is-opened { - margin: 4px 0; - color: @menu-light-active-color; + margin: @comp-margin-xs 0; + color: @menu-color-light; background-color: unset; .t-icon { - color: @menu-light-active-color; + color: @menu-color-light; } } } - .@{prefix}-menu__dropdown { - // display: none; - // position: static; - overflow: hidden; - transition: max-height @anim-duration-slow - cubic-bezier(.645, .045, .355, 1); - // height: 0; - - .@{prefix}-menu__item { - padding-left: 64px; - } - - &--show { - display: block; - } - } - .@{prefix}-menu__sub { padding: 0; max-height: 0; @@ -461,7 +373,7 @@ a.@{prefix}-menu__item { transition: max-height @anim-duration-base @anim-time-fn-easing; &.@{prefix}-is-opened { - max-height: 1000px; + max-height: calc(100vh - @menu-height-default * 2); } .@{prefix}-menu__item { @@ -469,14 +381,9 @@ a.@{prefix}-menu__item { } } - .@{prefix}-menu__popup { - top: 0; - left: calc(100% + 16px); - } - .@{prefix}-menu__item { position: relative; - margin: 4px 0; + margin: @comp-margin-xs 0; padding: 0 10px 0 16px; height: @default-menu-item-height; line-height: @default-menu-item-height; @@ -502,22 +409,103 @@ a.@{prefix}-menu__item { .@{prefix}-fake-arrow { margin-left: auto; + min-width: 16px; } &.@{prefix}-is-active:not(.@{prefix}-is-opened) { - color: @menu-theme-light; - background-color: @default-menu-active-color; + color: @default-menu-active-color; + background-color: @menu-item-active-bg--light; .t-icon { - color: @menu-theme-light; + color: @default-menu-active-color; } } &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { background: @menu-light-active-bg; + } + } + + .@{prefix}-menu__popup { + top: 0; + left: calc(100% + @pop-padding-m); - & + .@{prefix}-menu__item { - margin-top: 4px; + .@{prefix}-menu__item, .@{prefix}-submenu { + margin: @comp-margin-xxs 0 0 0; + + &:first-child { + margin-top: 0; + } + } + } + + &.@{prefix}-menu--dark { + background: @menu-theme-dark; + + .@{prefix}-menu__item { + color: @default-menu-item-color--dark; + } + + .@{prefix}-menu__logo:not(:empty) { + border-bottom-color: @menu-border-color--dark; + } + + .@{prefix}-menu__operations:not(:empty) { + border-top-color: @menu-border-color--dark; + } + + .@{prefix}-menu__item { + &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-disabled) { + background-color: @menu-border-color--dark; + } + + &.@{prefix}-is-active:not(.@{prefix}-is-opened) { + color: @menu-item-active-color--dark; + background-color: @default-menu-active-color--dark; + + .t-icon { + color: @menu-item-active-color--dark; + } + } + + &.@{prefix}-is-opened.@{prefix}-is-active { + background-color: transparent; + } + } + + .@{prefix}-menu__popup { + background: @menu-theme-dark; + + .@{prefix}-menu__item { + &.@{prefix}-is-active { + background-color: @default-menu-active-color--dark; + } + } + } + + .@{prefix}-menu__popup { + background: @menu-theme-dark; + } + + .@{prefix}-menu-group__title { + color: @menu-menu-group-title-color--dark; + } + + &.@{prefix}-is-collapsed { + .@{prefix}-menu-group__title:after { + background-color: @menu-group-title-bg--collapse--dark; + } + + .@{prefix}-menu__item { + + &.@{prefix}-is-active.@{prefix}-is-opened { + background-color: @default-menu-active-color--dark; + color: @menu-item-active-color--dark; + + .t-icon { + color: @menu-item-active-color--dark; + } + } } } } @@ -644,6 +632,7 @@ a.@{prefix}-menu__item { &.@{prefix}-menu__item-link { color: unset; + flex: 1; } } @@ -653,7 +642,6 @@ a.@{prefix}-menu__item { } &.@{prefix}-is-opened { - font-weight: 500; color: @menu-item-active-color--light; } @@ -677,7 +665,7 @@ a.@{prefix}-menu__item { .t-icon + &__content, .t-icon + &__item-link { - margin-left: 8px; + margin-left: @comp-margin-s; } &--dark { @@ -686,6 +674,7 @@ a.@{prefix}-menu__item { .@{prefix}-menu__popup { background-color: @menu-theme-dark; + border: solid .5px @menu-border-color--dark; } } @@ -710,7 +699,6 @@ a.@{prefix}-menu__item { } &:hover:not(.@{prefix}-is-active):not(.@{prefix}-is-opened):not(.@{prefix}-is-disabled) { - color: @menu-item-hover-color--dark; background-color: @menu-item-hover-bg--dark; } @@ -730,7 +718,6 @@ a.@{prefix}-menu__item { } &:hover:not(.@{prefix}-is-active) { - color: @menu-item-hover-color--dark; background-color: @menu-item-hover-bg--dark; } } @@ -749,35 +736,6 @@ a.@{prefix}-menu__item { } } } - - // menu 双层导航使用了 Tabs 实现，需要 tab 样式保持跟 menu theme 一致，不跟随整体亮色/暗色模式切换 - .@{prefix}-tabs { - background: @gray-color-11; - - &__nav-item { - color: #fff; - - &-wrapper { - --ripple-color: @gray-color-9; - } - - &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover { - .@{prefix}-tabs__nav-item-wrapper { - background-color: @menu-dark-hover-bg; - } - } - - &.@{prefix}-is-active { - color: @submenu-dark-item-active-color; - } - - &.@{prefix}-is-disabled { - color: @menu-item-disabled-color-dark; - } - - --ripple-color: @gray-color-9; - } - } } &__popup { @@ -793,15 +751,20 @@ a.@{prefix}-menu__item { opacity: 0; .list-style-none(); + // 超过 2 级的弹出菜单，不需要动画 + .@{prefix}-menu__popup { + transition: none; + } + &-wrapper { - padding: 8px; + padding: @pop-padding-m; height: 100%; list-style: none; margin: 0; } .@{prefix}-fake-arrow { - margin-left: 8px; + margin-left: @comp-margin-s; } &.@{prefix}-is-vertical { @@ -809,37 +772,38 @@ a.@{prefix}-menu__item { width: 0; &.@{prefix}-is-opened { - width: var(--popup-width, 216px); + width: var(--popup-width, 160px); } .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; - margin: 4px 0; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; } } &.@{prefix}-is-horizontal { .@{prefix}-menu__item { - padding-left: 16px; - padding-right: 16px; + padding-left: @comp-paddingLR-l; + padding-right: @comp-paddingLR-l; white-space: nowrap; } li + li { - margin-top: 4px; + margin-top: @comp-margin-xs; } } &.@{prefix}-is-opened { - max-height: var(--popup-max-height, 364px); + max-height: calc(100vh - @menu-height-default * 2); opacity: 1; box-shadow: @menu-default-shadow; overflow: visible; .@{prefix}-menu__popup { - top: 0; - left: calc(100% + @horizontal-spacer); + top: calc(0px - @pop-padding-m); + left: 100%; + overflow-x: hidden; + overflow-y: auto; &::before { content: ""; @@ -856,25 +820,26 @@ a.@{prefix}-menu__item { .@{prefix}-menu__item { color: @menu-popup-item-color; + height: @comp-size-s; + line-height: @comp-size-s; + .@{prefix}-menu__item { margin-left: 0; } - &.@{prefix}-is-active { - color: @menu-popup-item-active-color; - background-color: @menu-popup-item-active-bg; - } - &:hover:not(.@{prefix}-is-active) { background-color: @menu-popup-item-hover-bg; } } + + .@{prefix}-is-disabled { + color: @menu-item-disabled-color; + } } &__operations { &-icon { - margin-right: 16px; + margin-right: @comp-margin-l; border-radius: @border-radius-default; color: @menu-item-color--light; transition: background-color @anim-duration-moderate @anim-time-fn-easing; @@ -897,3 +862,16 @@ a.@{prefix}-menu__item { transition: @anim-duration-base; opacity: 0; } + +.@{prefix}-menu__popup { + top: 0; + left: calc(100% - @pop-padding-m); + + .@{prefix}-menu__item, .@{prefix}-submenu { + margin: @comp-margin-xxs 0 0 0; + + &:first-child { + margin-top: 0; + } + } +} diff --git a/style/web/components/menu/_var.less b/style/web/components/menu/_var.less index 265752cbdf..90a2919060 100644 --- a/style/web/components/menu/_var.less +++ b/style/web/components/menu/_var.less @@ -14,84 +14,76 @@ @import "../../_variables.less"; // 颜色 -@menu-theme-light: #fff; +// Menu 浅色模式下跟随全局变化，需要使用语义化 token；暗色模式独立存在，使用底层颜色 token +@menu-theme-light: @bg-color-container; @menu-theme-dark: @gray-color-13; @menu-theme-primary: @brand-color; -@menu-color-light: @font-gray-2; +@menu-color-light: @text-color-primary; @menu-color-dark: @font-white-2; -@menu-item-color--light: @font-gray-2; -@menu-item-color--dark: rgba(255, 255, 255, .55); -@menu-item-active-bg--light: @gray-color-2; -@menu-item-active-bg--dark: @gray-color-9; -@menu-item-active-color--light: @font-gray-1; +@menu-item-color--light: @text-color-primary; +@menu-item-color--dark: @text-color-anti; +@menu-item-active-bg--light: @brand-color-light; +@menu-item-active-bg--dark: @brand-color; +@menu-item-active-color--light: @brand-color; @menu-item-active-color--dark: @text-color-anti; -@menu-item-hover-color--light: @font-gray-2; -@menu-item-hover-color--dark: rgba(255, 255, 255, .55); -@menu-item-hover-bg--light: @gray-color-1; +@menu-item-hover-color--light: @text-color-primary; +@menu-item-hover-bg--light: @bg-color-container-hover; @menu-item-hover-bg--dark: @gray-color-10; -@menu-item-animation-bg--light: @gray-color-3; +@menu-item-animation-bg--light: @bg-color-container-active; @menu-item-animation-bg--dark: @gray-color-11; -@menu-item-disabled-color: @font-gray-4; +@menu-item-disabled-color: @text-color-disabled; @menu-item-disabled-color-dark: @font-white-4; -@menu-menu-group-title-color: @font-gray-3; +@menu-menu-group-title-color: @text-color-placeholder; @menu-menu-group-title-color--dark: @font-white-3; -@menu-group-title-bg--collapse: @gray-color-3; +@menu-group-title-bg--collapse: @component-stroke; @menu-group-title-bg--collapse--dark: @gray-color-10; -@menu-light-active-color: @font-gray-1; +@menu-light-active-color: @brand-color; @menu-dark-active-color: @text-color-anti; -@menu-light-active-bg: @gray-color-2; -@menu-light-hover-bg: @gray-color-1; +@menu-light-active-bg: @bg-color-secondarycontainer-hover; +@menu-light-hover-bg: @bg-color-container-hover; @menu-dark-active-bg: @gray-color-9; @menu-dark-hover-bg: @gray-color-10; -@submenu-item-color: @font-gray-2; +@submenu-item-color: @text-color-primary; @submenu-item-active-color: @brand-color; @submenu-dark-item-active-color: #4582e6; @menu-border-color: @component-stroke; @menu-border-color--dark: @gray-color-10; -@menu-popup-bg-color: #fff; -@menu-popup-item-color: @font-gray-1; -@menu-popup-item-hover-bg: @gray-color-1; +@menu-popup-item-color: @text-color-primary; +@menu-popup-item-hover-bg: @bg-color-container-hover; @menu-popup-item-active-color: @brand-color; -@menu-popup-item-active-bg: #ecf2fe; -@head-menu-popup-item-color: @font-gray-2; -@head-menu-popup-item-active-color: @font-gray-1; -@head-menu-popup-item-active-bg: @gray-color-2; +@head-menu-popup-item-color: @text-color-primary; +@head-menu-popup-item-active-color: @text-color-primary; -@menu-head-item-color: @font-gray-2; +@menu-head-item-color: @text-color-primary; -@menu-operations-color: @font-gray-1; +@menu-operations-color: @text-color-primary; // head menu -@head-menu-item-width: 104px; -@head-menu-item-height: 40px; -@head-menu-submenu-border-color: @gray-color-3; +@head-menu-item-height: @comp-size-m; +@head-menu-submenu-border-color: @component-stroke; // default menu @default-menu-width: 232px; @default-menu-collapse-width: 64px; @default-menu-active-color: @brand-color; -@default-menu-item-height: 36px; +@default-menu-active-color--dark: @brand-color; +@default-menu-item-height: @comp-size-l; +@default-menu-item-color--light: @text-color-secondary; +@default-menu-item-color--dark: @font-white-2; // popup -@popup-item-padding-left: 16px; - -// 边距 -@menu-padding-horizontal-default: @spacer; -@menu-padding-horizontal-high: (@spacer * 1.5); - -@textarea-limited-padding: (@spacer * 4); +@popup-item-padding-left: @comp-paddingLR-l; // 高度 -@menu-height-default: 32px; // low -@menu-height-high: 40px; +@menu-height-default: @comp-size-xxxl; // z-index @menu-outer-zindex: 1000; diff --git a/style/web/components/menu/index.html b/style/web/components/menu/index.html deleted file mode 100644 index 56dfc5ce13..0000000000 --- a/style/web/components/menu/index.html +++ /dev/null @@ -1,881 +0,0 @@ - - - - - - - menu - - - - - - - - -
- - -
-

Menu

-

开发者：erikqin

-

创建日期：2020-06-10

-

说明：TDesign menu 组件的基本样式

-
- - - - - -
-

默认

- -

顶部导航

- -
- -
-

1.单层导航

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
-
- -
- -
- -
-

2.双层导航

-
-
-
- -
    -
  • - 菜单1 -
    • -
  • - 菜单2 -
    • -
  • - 菜单3 -
    • -
  • 菜单4
    • -
-
- - - -
-
-
    -
  • 1-1
    • -
  • 1-2
    • -
  • 1-3
    • -
-
-
- -
- -
- -
-

3.多层收纳导航

-
-
-
- -
    -
  • - 菜单1 - -
      -
    • 子菜单1-1
      • -
    • 子菜单1-2
      • -
    • 子菜单1-3
      • -
    -
    • -
  • - 菜单2 -
      -
    • 子菜单2-1
      • -
    • 子菜单2-2
      • -
    • 子菜单2-3
      • -
    -
    • -
  • - 菜单3 -
      -
    • 子菜单3-1
      • -
    • 子菜单3-2
      • -
    • 子菜单3-3
      • -
    -
    • -
-
- - - -
-
-
- -
-
- -
    -
  • - 菜单11 - -
      -
    • 子菜单1-1
      • -
    • 子菜单1-2
      • -
    • 子菜单1-3
      • -
    -
    • -
  • - 菜单2 -
      -
    • 子菜单2-1
      • -
    • 子菜单2-2
      • -
    • 子菜单2-3
      • -
    -
    • -
  • - 菜单3 -
      -
    • 子菜单3-1
      • -
    • 子菜单3-2
      • -
    • 子菜单3-3
      • -
    -
    • -
-
- - - -
-
-
-
- -
- -
- -
-

4.可自定义顶部导航

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
-
自定义内容区域
-
-
-
-
- -
- -

侧边导航

-
- -
-

1.单层导航

-
-
-
- -
    -
  • - - 侧边内容一 -
    • -
  • - - 已选内容 -
    • -
  • - - 侧边内容二 -
    • -
  • - - 侧边内容三 -
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
- -
- -
- -
-

2.平铺式侧边导航

-
-
-
- -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容三 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
- -
- -
- -
-

3.弹层式侧边导航

-
-
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
- -
-
- -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
-
- -
-
-
-
- -
- -
- -
-

4.带分类的侧边导航

-
-
-
- -
    -
    -
    - Classification A -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
    -
    - Classification A -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
-
- -
-
-
- -
-
- -
- -
-

5.可自定义侧边导航

-
-
-
- -
    -
    自定义内容
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
    自定义内容
    -
-
- -
-
-
- -
-
-
- - -
-

状态

- -

顶部导航

- -
- - -
-

1.常规状态（仅一种）

-
-
-
- -
    -
  • 内容列表一
    • -
  • 已选内容
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
-
- -
- -

侧边导航

-
- - -
-

1.展开态（有icon和无icon）

-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
- -
- -
- - -
-

2.收起态（有icon和无icon）

-
-
-
- -
    -
    -
  • - - 侧边内容一 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
  • - - 内容列表二 - -
    • -
  • - - 内容列表三 - -
-
- -
-
-
- - -
-
- -
    -
    -
  • - 侧边内容一 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
    -
  • - 侧边内容二 - -
    • -
      -
    • 已选子内容
      • -
    • 侧边子内容三
      • -
    • 侧边子内容四
      • -
    -
    -
  • - 内容列表二 - -
    • -
  • - 内容列表三 - -
-
- -
-
-
-
- -
-
- - -
-

尺寸(如果有)

- -

顶部导航

-
- -

1.唯一尺寸

-
-
-
- -
    -
  • 内容列表一
    • -
  • - 已选内容 -
    -
      -
    • 内容列表
      • -
    • 已选内容
      • -
    • 内容列表
      • -
    -
    -
    • -
  • 内容列表二
    • -
  • 内容列表三
    • -
-
- - - -
-
-
- -
- -

侧边导航

-
- -

1.可根据业务诉求定制宽度，宽度范围200-256px，中间宽度以8的倍数为档位变化

-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
-
-
- -
    -
  • 侧边内容一
    • -
  • 已选内容
    • -
  • 侧边内容二
    • -
  • 侧边内容三
    • -
-
- -
-
-
- -
-
- -
- - - - \ No newline at end of file diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less index bb0f4dbf9c..087ccaf05e 100644 --- a/style/web/components/message/_index.less +++ b/style/web/components/message/_index.less @@ -51,7 +51,7 @@ color: @msg-close-icon-color; .t-icon-close { - font-size: @msg-close-font-size; + font-size: @msg-close-size; border-radius: @border-radius-default; transition: all @anim-duration-base linear; diff --git a/style/web/components/message/_mixin.less b/style/web/components/message/_mixin.less index 1c457de6a1..ea5371fdc7 100644 --- a/style/web/components/message/_mixin.less +++ b/style/web/components/message/_mixin.less @@ -1,7 +1,7 @@ .message() { width: fit-content; outline: 0; - border-radius: @border-radius-medium; + border-radius: @msg-border-radius; background-color: @msg-color-block; box-shadow: @msg-shadow; box-sizing: border-box; diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less index c6051d8772..d9b579dab4 100644 --- a/style/web/components/message/_var.less +++ b/style/web/components/message/_var.less @@ -23,11 +23,9 @@ @msg-close-bg-color-hover: @bg-color-container-hover; @msg-close-bg-color-active: @bg-color-container-active; -// 位置 -@msg-icon-position-right: @spacer-4; - // 尺寸 -@msg-icon-size: @font-size-xl; +@msg-icon-size: calc(@font-size-base + 6px); +@msg-close-size: calc(@font-size-base + 2px); @msg-border-width: 1px; // 圆角 @@ -38,14 +36,13 @@ //字号 @msg-font-default: @font-body-medium; -@msg-close-font-size: @font-size-l; // 间距 -@msg-padding-horizontal-default: @spacer-2; -@msg-padding-vertical-default: 13px; -@msg-icon-margin-right: @spacer; -@msg-close-icon-margin-left: @spacer-3; -@msg-list-margin-bottom: @spacer-1; +@msg-padding-horizontal-default: @comp-paddingLR-l; +@msg-padding-vertical-default: @comp-paddingTB-m; +@msg-icon-margin-right: @comp-margin-s; +@msg-close-icon-margin-left: @comp-margin-xxl; +@msg-list-margin-bottom: @comp-margin-s; // Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中 @msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading"; diff --git a/style/web/components/message/index.html b/style/web/components/message/index.html deleted file mode 100644 index 00d603d57c..0000000000 --- a/style/web/components/message/index.html +++ /dev/null @@ -1,218 +0,0 @@ - - - - - - - Message - - - -
  • - - - - -
    - - -
    -

    Message

    -

    开发者：p_rqpeng

    -

    创建日期：20200512

    -

    说明：tdesign message 组件的基本样式

    -
    - - - - - -
    -

    默认

    - -
    - -
    -
    - - 默认全局提示 -
    -
    - - - -
    -
    - - -
    -

    类型

    -
    -

    1.常规全局提示：

    - -
    -
    - - 用于表示普通操作信息提示 -
    -
    -
    -
    - - 用于表示操作顺利达成 -
    -
    -
    -
    - - 用于表示操作引起一定后果 -
    -
    -
    -
    - - 用于表示操作引起严重的后果 -
    -
    -
    -
    - - 用于帮助用户操作的信息提示 -
    -
    -
    -
    - - 用于表示操作正在生效的过程中 -
    -
    - - - -
    -
    -

    2.带关闭操作全局提示：

    - -
    -
    - - 用于表示普通操作信息提示，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作顺利达成，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作引起一定后果，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于表示操作引起严重的后果，可关闭，通常信息较长 - -
    -
    -
    -
    - - 用于用户操作行为的辅助提醒，可关闭，通常信息较长 - -
    -
    - - -
    -
    - - -
    -

    组件状态

    - - -
    - -

    1.加载结果展示成功/失败：

    - -
    -
    - - 用于表示操作正在生效的过程中 -
    -
    -
    -
    - - 用于表示操作顺利达成 -
    -
    -
    -
    - - 用于表示操作失败中断 -
    -
    - - -
    -
    - - - - -
    -

    组件大小

    - -
    -

    1.常规全局提示宽度自适应不做限制：

    - -
    -
    - - 用于表示普通操作信息提示 -
    -
    -
    -
    - - 用于表示普通操作信息提示文案较长文案较长文案较长文案较长文案较长 -
    -
    - - - -
    - -
    -

    2.带关闭操作全局提示最小宽度400px：

    - - -
    -
    - - 用于表示普通操作信息提示，可关闭 - -
    -
    - - - -
    - -
    - - - - \ No newline at end of file diff --git a/style/web/components/notification/_index.less b/style/web/components/notification/_index.less index 3bd601cbb8..c67f0bc8fa 100644 --- a/style/web/components/notification/_index.less +++ b/style/web/components/notification/_index.less @@ -73,7 +73,6 @@ margin-top: @notification-content-margin-top; max-height: @notification-content-max-height; overflow: hidden; - padding-right: @notification-content-padding-right; text-overflow: ellipsis; word-break: break-all; // 需要排查兼容性 @@ -94,21 +93,17 @@ } &__detail-item { - padding: @notification-detail-item-padding; - color: @notification-detail-item-color; cursor: pointer; } &__detail-item:hover { color: @notification-detail-item-color-hover; background: @notification-detail-item-bg-color-hover; - border-radius: @notification-detail-item-border-radius; } &__detail-item:active { color: @notification-detail-item-color-active; background: @notification-detail-item-bg-color-active; - border-radius: @notification-detail-item-border-radius; } &__detail-item + &__detail-item { diff --git a/style/web/components/notification/_var.less b/style/web/components/notification/_var.less index 531a9a872f..ccb8fac709 100644 --- a/style/web/components/notification/_var.less +++ b/style/web/components/notification/_var.less @@ -30,9 +30,11 @@ @notification-close-bg-color-active: @bg-color-container-active; // 尺寸 -@notification-width-default: 400px; +@notification-width-default: 360px; @notification-content-max-height: 66px; -@notification-icon-width: @icon-l; +@notification-icon-width: calc(@font-size-l + 8px); +@notification-icon-font-size: calc(@font-size-l + 8px); +@notification-icon-close-font-size: @font-size-l; // 圆角 @notification-detail-item-border-radius: @border-radius-medium; @@ -45,17 +47,13 @@ @notification-font: @font-body-medium; @notification-detail-font: @font-body-medium; @notification-content-font: @font-body-medium; -@notification-icon-font-size: (@font-size * 2.4); -@notification-icon-close-font-size: @font-size-l; @notification-title-font: @font-title-medium; // padding -@notification-detail-item-padding: 5px 16px; -@notification-content-padding-right: 5px; -@notification-padding-default: 20px @spacer-3 @spacer-3 @spacer-3; +@notification-padding-default: @comp-paddingTB-l @comp-paddingLR-l; //margin -@notification-detail-margin-top: 21px; -@notification-content-margin-top: @spacer; -@notification-icon-margin-right: @spacer; -@notification-detail-item-margin-left: @spacer; +@notification-detail-margin-top: @comp-margin-l; +@notification-content-margin-top: @comp-margin-s; +@notification-icon-margin-right: @comp-margin-s; +@notification-detail-item-margin-left: @comp-margin-s; diff --git a/style/web/components/notification/index.html b/style/web/components/notification/index.html deleted file mode 100644 index a210758ba1..0000000000 --- a/style/web/components/notification/index.html +++ /dev/null @@ -1,385 +0,0 @@ - - - - - - notification - - - - - - - - - -
    - - -
    -

    Notification

    -

    开发者：zackguo

    -

    创建日期：2020-06-03

    -

    说明：TDesign notification 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    -
    -
    -
    - 标题名称 - -
    -
    这是一条可以自动关闭的消息通知
    -
    -
    -
    - - -
    -
    - - -
    -

    类型

    - - -
    -

    1.基础消息通知：

    - -
    -
    -
    -
    - 标题名称 - -
    -
    这是一条可以自动关闭的消息通知
    -
    -
    -
    - -
    -
    -

    2.带图标消息通知：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通消息通知
    -
    -
    -
    - -
    -
    -

    3.带操作消息通知：

    - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 查看详情 -
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    -
    - - -
    -

    状态

    -
    -

    1.鼠标 hover 态 & Click 态：

    - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    这是一条消息通知
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    - -
    -

    2.并列出现状态：

    - -
    -
    -
    - -
    -
    -
    - 成功通知 - -
    -
    这是一条成功的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 警示通知 - -
    -
    这是一条警示的消息通知
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 危险通知 - -
    -
    这是一条危险的消息通知
    -
    -
    -
    - -
    -
    - - -
    -

    尺寸

    -
    -

    1.宽度固定400px：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    这是一条普通的消息通知
    -
    -
    -
    - -
    -
    -

    2.最多支持三行文字：

    - -
    -
    -
    - -
    -
    -
    - 普通通知 - -
    -
    文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处
    -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - 可跳转的消息通知 - -
    -
    文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处
    -
    - 重启 - 稍后提醒我 -
    -
    -
    -
    - -
    -
    - - -
    -

    动画

    -
    - -
    - - - - - - - - - - - - -
    - -
    -
    - -
    - - - diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less index 2123cf4d5f..c918cb7e02 100644 --- a/style/web/components/pagination/_index.less +++ b/style/web/components/pagination/_index.less @@ -8,6 +8,8 @@ @import "../../mixins/_reset.less"; +@import "./_mini.less"; + .@{prefix}-pagination { .reset; @@ -98,7 +100,7 @@ .pagination-number--size( @pagination-height-default; @pagination-font-default; - @pagination-padding-horizontal-default; @pagination-height-default - 2; + @pagination-padding-horizontal-default; calc(@pagination-height-default - 2px); ); &:hover { @@ -176,15 +178,58 @@ flex-shrink: 0; margin-left: @pagination-jump-margin; font-size: @pagination-font-default; - gap: @spacer-s; + gap: @comp-margin-s; + background-color: @bg-color-secondarycontainer; + height: @pagination-jump-height; + padding-left: @pagination-jump-padding-left; + border-radius: @border-radius-default; + } + + .@{prefix}-input-adornment__append { + border: none; + height: @pagination-jump-inner-height; + color: @text-color-secondary; + background-color: transparent; + + .@{prefix}-input-adornment__text { + border: none; + } } .@{prefix}-input-number { width: @pagination-input-width; + + .@{prefix}-input { + height: @pagination-jump-inner-height; + border-radius: @border-radius-default; + } + + .@{prefix}-input__inner { + text-align: center; + } } // 迷你尺寸 &.@{prefix}-size-s { + font: @pagination-font-s; + + .@{prefix}-pagination__jump { + height: @pagination-jump-height-small; + } + + .@{prefix}-input-adornment__append { + height: @pagination-jump-inner-height-small; + font: @pagination-font-s; + } + + .@{prefix}-input-number { + width: 48px; + + .@{prefix}-input { + height: @pagination-jump-inner-height-small; + } + } + .@{prefix}-pagination { &__total { font: @pagination-font-s; @@ -238,3 +283,11 @@ } } } + +/** IE 兼容 **/ +.@{prefix}-pagination-ie { + /** 在 IE11 以下浏览器，input autoWidth 计算无法依赖 observer，因而加上最小宽度，避免分页信息出现 0 的情况 */ + .@{prefix}-select .@{prefix}-input__inner { + min-width: 54px; + } +} diff --git a/style/web/components/jumper/_index.less b/style/web/components/pagination/_mini.less similarity index 80% rename from style/web/components/jumper/_index.less rename to style/web/components/pagination/_mini.less index e6d13b8b04..7a9f9b17b9 100644 --- a/style/web/components/jumper/_index.less +++ b/style/web/components/pagination/_mini.less @@ -6,18 +6,18 @@ @import "../../mixins/_reset.less"; -.@{prefix}-jumper { +.@{prefix}-pagination-mini { .reset; &--outline { - .@{prefix}-jumper__prev { + .@{prefix}-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } - .@{prefix}-jumper__current { + .@{prefix}-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; @@ -27,7 +27,7 @@ } } - .@{prefix}-jumper__next { + .@{prefix}-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; diff --git a/style/web/components/pagination/_var.less b/style/web/components/pagination/_var.less index 2e93c7251f..1e842011a3 100644 --- a/style/web/components/pagination/_var.less +++ b/style/web/components/pagination/_var.less @@ -17,9 +17,9 @@ @pagination-border-radius-base: @border-radius-default; // 尺寸 -@pagination-height-s: 24px; -@pagination-height-default: 32px; -@pagination-input-width: 48px; +@pagination-height-s: @comp-size-xs; +@pagination-height-default: @comp-size-m; +@pagination-input-width: 56px; // 字号 @pagination-font-s: @font-body-small; @@ -27,12 +27,17 @@ @pagination-btn-font-size: @font-body-large; // 间距 -@pagination-padding-horizontal-s: (@spacer / 4); -@pagination-padding-horizontal-default: (@spacer / 2); -@pagination-btn-margin: @spacer; -@pagination-jump-margin: @spacer; -@pagination-select-margin: (@spacer * 2); -@pagination-pager-margin: @spacer; +@pagination-padding-horizontal-s: @comp-paddingLR-xxs; +@pagination-padding-horizontal-default: @comp-paddingLR-xs; +@pagination-btn-margin: @comp-margin-s; +@pagination-jump-margin: @comp-margin-s; +@pagination-select-margin: @comp-margin-l; +@pagination-pager-margin: @comp-margin-s; +@pagination-jump-height: @comp-size-m; +@pagination-jump-padding-left: @comp-margin-s; +@pagination-jump-inner-height: calc(@comp-size-m - 4px); +@pagination-jump-height-small: @comp-size-xs; +@pagination-jump-inner-height-small: calc(@comp-size-xs - 4px); // 过渡 @pagination-hover-transition: all @anim-duration-base @anim-time-fn-ease-in; diff --git a/style/web/components/pagination/index.html b/style/web/components/pagination/index.html deleted file mode 100644 index 6cd9a1994e..0000000000 --- a/style/web/components/pagination/index.html +++ /dev/null @@ -1,407 +0,0 @@ - - - - - - - Pagination - - - - - - - - - - -
    - - -
    -

    Pagination

    -

    开发者：amaoliu / barkzhang

    -

    创建日期：

    -

    说明：

    -
    - - - - - -
    -

    少量页面

    - - -
    - - -
    -
    - -
      -
    • 1
      • -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • -
    -
    -
    - -
    -
    - -
    -

    大量页面

    - - -
    - - -
    -
    - -
    - -
    - -
      -
    • 1
      • -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • -
    - -
    - -
    -
    -
    - -
    -
    - -
    -

    带数据总量显示

    - - -
    - - -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • -
    • - - -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
    • - - -
      • -
    • 90
      • -
    - -
    - -
    -
    - -
    -
    - -
    -

    带页面展示数量选择

    - - -
    - - -
    - -
    - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    -
    - -
    -
    - -
    -

    带快速跳转

    - - -
    - - -
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    - 跳转 -
    - -
    - 页 -
    - -
    - -
    -
    - -
    -

    极简版

    - - -
    - - -
    - - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - - -
    -

    极简迷你版

    - - -
    - - -
    - - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    - -
    -

    类型

    - - -
    - - - - -
    -

    禁用

    -
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    -
    -
    -
    - - -
    - -
    - -
      -
    • 1
      • - -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • - -
    - -
    - -
    - -
    -
    - - - -
    -
    - -
    -

    尺寸

    - - -
    - - - - -
    -

    默认

    -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    - -
    - -
    - -
    -
    -
    -

    迷你

    -
    - -
    共 658 项数据
    - - -
    - -
    - -
      -
    • 1
      • - -
    • 2
      • -
    • 3
      • -
    • 4
      • -
    • 5
      • - -
    - -
    - -
    - -
    -
    - - - -
    -
    - - - - - - \ No newline at end of file diff --git a/style/web/components/popconfirm/_index.less b/style/web/components/popconfirm/_index.less index 222967510d..048f5df926 100644 --- a/style/web/components/popconfirm/_index.less +++ b/style/web/components/popconfirm/_index.less @@ -31,22 +31,22 @@ > .t-icon { display: inline-block; - margin: @popconfirm-icon-margin; + margin-right: @popconfirm-icon-margin-right; + padding: @popconfirm-icon-padding; font-size: @popconfirm-icon-size; } } &__confirm { - margin-left: 8px; + margin-left: @popconfirm-confirm-margin-right; } &__inner { display: inline-block; vertical-align: top; max-width: @popconfirm-max-width; - font: @font-title-small; + font: @font-body-medium; color: @text-color-primary; - margin-right: @popconfirm-title-margin-right; } &__icon--warning { diff --git a/style/web/components/popconfirm/_var.less b/style/web/components/popconfirm/_var.less index 63c82e50ba..49a08aedc4 100644 --- a/style/web/components/popconfirm/_var.less +++ b/style/web/components/popconfirm/_var.less @@ -13,26 +13,23 @@ @popconfirm-cls: ~"@{prefix}-popconfirm"; -@popconfirm-spacer: @spacer; +@popconfirm-spacer: @comp-margin-s; // popconfirm @popconfirm-shadow1: 0 10px 10px -5px rgba(0, 0, 0, .04); @popconfirm-shadow2: 0 12px 26px 5px rgba(0, 0, 0, .1); -@popconfirm-padding: @spacer-2; +@popconfirm-padding: @comp-paddingTB-l @comp-paddingLR-l; @popconfirm-position: relative; // TODO: position 最后应该是absolute // TODO: 建议设置最大宽度 -@popconfirm-max-width: 300px; - -// popconfirm title -@popconfirm-title-margin-right: @popconfirm-spacer; +@popconfirm-max-width: 320px; // popconfirm buttons -@popconfirm-buttons-margin-top: 16px; -@popconfirm-button-margin: 8px; +@popconfirm-buttons-margin-top: @comp-margin-l; +@popconfirm-button-margin: @popconfirm-spacer; // 小三角 -@popconfirm-arrow-margin: @spacer-3; +@popconfirm-arrow-margin: @comp-margin-xxl; @popconfirm-arrow-absolute-offset: -4px; @popconfirm-arrow-border-width: 4px; @popconfirm-arrow-size: (@popconfirm-arrow-border-width * 2); @@ -47,9 +44,13 @@ @popconfirm-arrow-right-shadow: -2px 2px 5px rgba(0, 0, 0, .06); // 间距 -@popconfirm-icon-margin: 1px @spacer 1px 0; +@popconfirm-icon-margin-right: @comp-margin-s; +@popconfirm-icon-padding: calc((@text-line-height-base - @popconfirm-icon-size) / 2) 0; +@popconfirm-confirm-margin-right: @comp-margin-s; + // 尺寸 -@popconfirm-icon-size: @font-size-xl; +@popconfirm-icon-size: calc(@font-size-base + 6px); + // 圆角 @popconfirm-border-radius: @border-radius-medium; diff --git a/style/web/components/popconfirm/index.html b/style/web/components/popconfirm/index.html deleted file mode 100644 index dca1889e99..0000000000 --- a/style/web/components/popconfirm/index.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - Popconfirm - - - - - - -
    - - -
    -

    Popconfirm

    -

    开发者：erachen

    -

    创建日期：2020-5-27

    -

    说明：tdesign Popconfirm组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - - -
    -
    -
    -
    -
    -
    基础气泡确认框文案示意文字按钮
    -
    -
    - - -
    -
    -
    -
    - -
    -
    - - -
    -

    类型

    - - - - -
    -

    1.带图标的 popcomfirm：

    - - - -
    -
    -
    - -
    -
    - -
    事件通知类型偏向于提示
    -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    事件通知类型偏向于警示
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    事件通知类型偏向于警告
    -
    -
    - - -
    -
    -
    -
    - - - -
    - -
    -

    2.自定义 popcomfirm：

    - - - - -
    -
    -
    -
    -
    -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    - - -
    -

    组件大小

    -
    -

    1. 事件通知类型偏向于提示宽度144px

    - - - -
    -
    -
    -
    -
    - -
    最小
    -
    -
    - - -
    -
    -
    -
    - -

    2.最大宽度不做限制，建议360px：

    - -
    -
    -
    -
    -
    - -
    - 基础气泡确认框文案示意文字按钮 -
    带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    - -
    - - - diff --git a/style/web/components/popup/_mixin.less b/style/web/components/popup/_mixin.less index 61907f449e..002552b4e4 100644 --- a/style/web/components/popup/_mixin.less +++ b/style/web/components/popup/_mixin.less @@ -56,8 +56,6 @@ .arrow-placement-top() { .@{prefix}-popup[data-popper-placement^="top"] .@{prefix}-popup__arrow { - bottom: calc(-@popup-arrow-width / 2); - &::before { border-top-left-radius: 100%; box-shadow: @popup-top-arrow-shadow; diff --git a/style/web/components/popup/_var.less b/style/web/components/popup/_var.less index 58c7c7bbf7..263cfdc4fc 100644 --- a/style/web/components/popup/_var.less +++ b/style/web/components/popup/_var.less @@ -4,15 +4,15 @@ @popup-text-color: @text-color-primary; // 间距 -@popup-padding: 4px @spacer; +@popup-padding: @comp-paddingTB-xs @comp-paddingLR-s; @popup-content-line-height: @text-line-height-base; @popup-arrow-width: 8px; @popup-arrow-height: 8px; -@popup-content-arrow-spacer: @spacer-2; -@popup-content-margin: @spacer; +@popup-content-arrow-spacer: @comp-margin-l; +@popup-content-margin: @comp-margin-s; // 箭头位置偏移量 -@popup-arrow-position: (@popup-arrow-width / 2); +@popup-arrow-position: @popup-arrow-width; @popup-content-font-size: @font-size-base; // 阴影 diff --git a/style/web/components/popup/index.html b/style/web/components/popup/index.html deleted file mode 100644 index 1c5bdaa1ca..0000000000 --- a/style/web/components/popup/index.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - Popup - - - - - - -
    - - -
    -

    Popup

    -

    开发者：terrancewan

    -

    创建日期：2020-05-17

    -

    说明：弹出层

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    -
    - 这是弹窗层 -
    -
    -
    这是触发元素
    - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    -
    - 这是top弹窗层 -
    -
    -
    -
    -
    - 这是left弹窗层 -
    -
    -
    -
    -
    - 这是bottom弹窗层 -
    -
    -
    -
    -
    - 这是right弹窗层 -
    -
    -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/progress/_index.less b/style/web/components/progress/_index.less index 76b5bf6f5c..f430f3dd80 100644 --- a/style/web/components/progress/_index.less +++ b/style/web/components/progress/_index.less @@ -24,6 +24,7 @@ margin-left: @progress-info-spacer; color: @progress-info-dark-color; white-space: nowrap; + display: inline-flex; } &__icon { @@ -33,7 +34,7 @@ .@{prefix}-progress__bar { width: 100%; - height: 6px; + height: @progress-line-stroke-width; overflow: hidden; background: @progress-track-color; border-radius: @border-radius-round; @@ -49,7 +50,7 @@ //条形进度条 百分比内置 .@{prefix}-progress--plump { height: @progress-stroke-plump-width; - border-radius: (@progress-stroke-plump-width / 2); + border-radius: calc(@progress-stroke-plump-width / 2); display: flex; align-items: center; .@{prefix}-progress__info { @@ -85,12 +86,13 @@ .@{prefix}-progress__info { position: absolute; + display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: @progress-circle-font-size; - font-weight: 500; + font-weight: 600; line-height: 1; text-align: center; transform: translate(-50%, -50%); diff --git a/style/web/components/progress/_var.less b/style/web/components/progress/_var.less index 245ded4ca7..6c9f9cf3fb 100644 --- a/style/web/components/progress/_var.less +++ b/style/web/components/progress/_var.less @@ -30,19 +30,19 @@ // 尺寸 // line 进度条线宽 -@progress-line-stroke-width: 6px; +@progress-line-stroke-width: @size-3; // plump 进度条线宽 -@progress-stroke-plump-width: 18px; +@progress-stroke-plump-width: @comp-size-xxs; // 字体 -@progress-icon-font-size: 1.25em; +@progress-icon-font-size: calc(@font-size-base + 2px); @progress-icon-circle-font-size: 2.4em; @progress-plump-font-size: @font-size-s; @progress-circle-font-size: inherit; @progress-circle-font-weight: 500; // 间距 -@progress-info-spacer: @spacer-1; +@progress-info-spacer: @comp-margin-s; @progress-inner-border-radius: 50px; diff --git a/style/web/components/progress/index.html b/style/web/components/progress/index.html deleted file mode 100644 index f62ee1d049..0000000000 --- a/style/web/components/progress/index.html +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - checkbox - - - - - - - -
    - - -
    -

    Progress

    -

    开发者：andyljzhou

    -

    创建日期：20201024

    -

    说明：--

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/radio/_index.less b/style/web/components/radio/_index.less index 5375e11f8b..ace944022e 100644 --- a/style/web/components/radio/_index.less +++ b/style/web/components/radio/_index.less @@ -29,9 +29,35 @@ &.@{radio-cls}-group__outline { flex-wrap: wrap; - row-gap: @spacer-s; + row-gap: @comp-margin-xs; + + &.@{prefix}-size-s { + .@{radio-button--cls} { + height: @radio-outline-height-small; + } + } + + &.@{prefix}-size-m { + .@{radio-button--cls} { + height: @radio-outline-height-medium; + } + } + + &.@{prefix}-size-l { + .@{radio-button--cls} { + height: @radio-outline-height-large; + } + } .@{radio-button--cls} { + &:first-child { + border-radius: @border-radius-default 0 0 @border-radius-default; + } + + &:last-child { + border-radius: 0 @border-radius-default @border-radius-default 0; + } + &.@{prefix}-is-checked { color: @radio-button-color-outline-checked; } diff --git a/style/web/components/radio/_var.less b/style/web/components/radio/_var.less index ca3d406ac3..647f6db18f 100644 --- a/style/web/components/radio/_var.less +++ b/style/web/components/radio/_var.less @@ -50,11 +50,14 @@ // 尺寸 @radio-size: 16px; @radio-dot-size: (@radio-size / 2); -@radio-margin-right: (@spacer * 3); +@radio-margin-right: @comp-margin-xxl; @radio-button-border-radius: @border-radius-small; -@radio-height-small: 20px; -@radio-height-medium: 28px; -@radio-height-large: 36px; +@radio-outline-height-small: @comp-size-xs; +@radio-outline-height-medium: @comp-size-m; +@radio-outline-height-large: @comp-size-xl; +@radio-height-small: calc(@comp-size-xs - @comp-paddingTB-xs); +@radio-height-medium: calc(@comp-size-m - @comp-paddingTB-xs); +@radio-height-large: calc(@comp-size-xl - @comp-paddingTB-xs); @radio-button-before-width: 1px; // 字号 @@ -64,15 +67,15 @@ @radio-button-font-large: @font-body-large; // padding -@radio-input-label-spacer: @spacer; -@radio-button-padding-small: 0px @spacer-s; -@radio-button-padding-medium: @spacer-s @spacer-2; -@radio-button-padding-large: @spacer @spacer-3; +@radio-input-label-spacer: @comp-margin-s; +@radio-button-padding-small: 0px @comp-paddingLR-s; +@radio-button-padding-medium: @comp-paddingTB-xs @comp-paddingLR-l; +@radio-button-padding-large: @comp-paddingTB-s @comp-paddingLR-xl; @radio-button-before-left: 0px; @radio-button-before-top: 50%; @radio-button-border: 1px solid; -@radio-group-padding: 2px; +@radio-group-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs; @radio-group-filled-bg-block-left: 2px; @radio-group-filled-bg-block-top: 2px; diff --git a/style/web/components/radio/index.html b/style/web/components/radio/index.html deleted file mode 100644 index 6c6ae77e25..0000000000 --- a/style/web/components/radio/index.html +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - radio - - - - - - - -
    - - -
    -

    Radio

    -

    开发者：yuhaozhuang

    -

    创建日期：20200525

    -

    说明：--

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - -
    -
    - - -
    -

    类型

    -
    - - -
    -
    - - - - -
    -
    - - -
    -
    - - -
    -
    - - - - -
    -
    - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - -
    -
    - - - - -
    -
    - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less index 66e0c8529f..673c63a8dc 100644 --- a/style/web/components/range-input/_index.less +++ b/style/web/components/range-input/_index.less @@ -29,16 +29,16 @@ &.@{prefix}-size-l { height: @range-input-height-l; font: @range-input-font-l; - padding-top: @spacer-s; - padding-bottom: @spacer-s; + padding-top: @comp-paddingTB-xs; + padding-bottom: @comp-paddingTB-xs; .@{prefix}-input { - padding: 0 8px; + padding: 0 @comp-margin-s; } } &.@{prefix}-size-s { - padding: 2px 4px; + padding: @comp-paddingTB-xxs @comp-margin-xs; height: @range-input-height-s; font: @range-input-font-s; } @@ -53,7 +53,7 @@ height: 100%; display: flex; align-items: center; - gap: @spacer; + gap: @range-input-inner-gap; .@{prefix}-input__wrap { height: 100%; @@ -61,11 +61,12 @@ } .@{prefix}-input { - padding: 0 4px; + padding: @range-input-inner-padding; height: 100%; border: 0; box-shadow: none; font-size: inherit; + border-radius: @border-radius-small; &:hover { background-color: @bg-color-container-hover; diff --git a/style/web/components/range-input/_mixin.less b/style/web/components/range-input/_mixin.less index d3e3e8d24b..ec6d4d5110 100644 --- a/style/web/components/range-input/_mixin.less +++ b/style/web/components/range-input/_mixin.less @@ -11,7 +11,7 @@ transition: @range-input-inner-transition; display: inline-flex; flex-direction: column; - overflow: hidden; + gap: @spacer-s; &:hover { border-color: @range-input-border-color-default-hover; @@ -64,6 +64,12 @@ color: @@fontColor; @fontColor: "range-input-extra-color-@{status}"; } + + & > .@{prefix}-range-input__tips { + color: @@fontColor; + font-size: @font-size-s; + @fontColor: "range-input-extra-color-@{status}"; + } } } diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less index 09d9ba1288..09cafb498b 100644 --- a/style/web/components/range-input/_var.less +++ b/style/web/components/range-input/_var.less @@ -34,13 +34,15 @@ @range-input-extra-color-error: @error-color; // 间距 -@range-input-padding-default: @spacer-s @spacer @spacer-s @spacer-s; -@range-input-status-position-right: -@spacer-3; +@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-xs; +@range-input-status-position-right: calc(0px - @comp-margin-xxxl); +@range-input-inner-gap: @comp-margin-s; +@range-input-inner-padding: 0 @comp-paddingLR-xs; // 尺寸 -@range-input-height-s: 24px; -@range-input-height-default: 32px; -@range-input-height-l: 40px; +@range-input-height-s: @comp-size-xs; +@range-input-height-default: @comp-size-m; +@range-input-height-l: @comp-size-xl; @range-input-inner-icon-font-size: @icon-default; // 字号 diff --git a/style/web/components/range-input/index.html b/style/web/components/range-input/index.html deleted file mode 100644 index 2decbfab60..0000000000 --- a/style/web/components/range-input/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：chaishi

    -

    创建日期：2022-01-01

    -

    说明：TDesign TagInput

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - -
    - - - diff --git a/style/web/components/rate/_index.less b/style/web/components/rate/_index.less index bf330c9c89..95d06a1f4d 100644 --- a/style/web/components/rate/_index.less +++ b/style/web/components/rate/_index.less @@ -8,6 +8,7 @@ .@{rate-cls} { display: flex; + align-items: center; .@{rate-cls}__star-top { position: absolute; @@ -54,9 +55,7 @@ &__text { color: @rate-text-primary; - font-size: @rate-text-font; + font: @rate-text-font; margin-left: @rate-text-before; - font-weight: @rate-text-font-weight; - line-height: @rate-text-line-height; } } diff --git a/style/web/components/rate/_var.less b/style/web/components/rate/_var.less index 05decb1e82..0f8f703eb3 100644 --- a/style/web/components/rate/_var.less +++ b/style/web/components/rate/_var.less @@ -15,16 +15,10 @@ @rate-cls: ~"@{prefix}-rate"; // 字号 -@rate-text-font: @font-size-base; - -// 字重 -@rate-text-font-weight: 700; +@rate-text-font: @font-mark-medium; // margin -@rate-text-before: 16px; - -// 行高 -@rate-text-line-height: 22px; +@rate-text-before: @comp-margin-l; // 动画 @rate-hover-transform: scale(1.33); diff --git a/style/web/components/rate/index.html b/style/web/components/rate/index.html deleted file mode 100644 index 8cf971bcff..0000000000 --- a/style/web/components/rate/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Rate - - - - - - - - -
    - - -
    -

    Button

    -

    开发者：kurthuang

    -

    创建日期：20200525

    -

    说明：评分组件

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less index a816cff23b..5d63d4ac97 100644 --- a/style/web/components/select-input/_index.less +++ b/style/web/components/select-input/_index.less @@ -4,31 +4,54 @@ @import "../../mixins/_reset.less"; -.@{prefix}-select-input, -.@{prefix}-select-input__wrap { +.@{prefix}-select-input { .reset; width: 100%; display: inline-block; + vertical-align: middle; } -// TODO borderless input 内置 +/** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */ +.@{prefix}-select-input--multiple { + .@{prefix}-input--auto-width.@{prefix}-tag-input__with-suffix-icon { + &.@{prefix}-tag-input--with-tag { + .@{prefix}-input { + padding-right: @comp-paddingLR-xl; + } + .@{prefix}-input.@{prefix}-size-l { + padding-right: calc(@comp-paddingLR-xl + @comp-paddingLR-s); + } + } + &.@{prefix}-is-empty { + .@{prefix}-input { + padding-right: @comp-paddingLR-s; + } + .@{prefix}-input.@{prefix}-size-l { + padding-right: @comp-paddingLR-m; + } + } + } +} /** 无边框模式 */ .@{prefix}-select-input--borderless { .@{prefix}-input { - border: 0; box-shadow: none; - transition: background-color @anim-duration-base linear; + border: 1px solid transparent; + transition: all @anim-duration-base linear; - &:hover { + &:hover:not(.@{prefix}-input--focused) { + border-color: @component-border; background-color: @select-input-focus-bg; border-radius: @select-input-border-radius; } } .@{prefix}-input--focused { - background-color: @select-input-focus-bg; + border-color: @brand-color; + box-shadow: @select-input-shadow; + background-color: @bg-color-specialcomponent; } /** 无边框模式的多选 */ diff --git a/style/web/components/select-input/_var.less b/style/web/components/select-input/_var.less index e4db1d48dc..b4e9c84220 100644 --- a/style/web/components/select-input/_var.less +++ b/style/web/components/select-input/_var.less @@ -1,2 +1,3 @@ @select-input-focus-bg: @bg-color-container-hover; @select-input-border-radius: @border-radius-default; +@select-input-shadow: 0 0 0 2px @brand-color-focus; diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index 0d452f6ac0..b819cedd70 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -2,8 +2,6 @@ @import "./_var.less"; -@import "./_polyfill.less"; - @import "../../mixins/_text.less"; @import "../../mixins/_reset.less"; @@ -29,6 +27,11 @@ } &-inner { + // 嵌套无需 padding + .@{prefix}-select__list .@{prefix}-select__list { + padding: 0; + } + .@{prefix}-select__list, .@{prefix}-tree { padding: @select-dropdown-padding; @@ -98,7 +101,20 @@ } .@{prefix}-select-option-group__divider + .@{prefix}-select-option-group__divider { - border-top: 1px @select-optiongroup-border-color solid; + position: relative; + + &::before { + content: ""; + width: 100%; + height: 1px; + padding: @select-option-padding-default; + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + background-color: @select-optiongroup-border-color; + background-clip: content-box; + } } .@{prefix}-select-option-group__header { @@ -107,7 +123,7 @@ color: @select-option-group-header-color; display: block; height: @select-option-height-default; - line-height: @select-option-line-height; + line-height: @select-option-height-default; padding: @select-option-padding-default; box-sizing: border-box; .text-ellipsis(); @@ -116,11 +132,13 @@ .@{prefix}-select-option-group__header.@{prefix}-size-l { height: @select-option-height-l; + line-height: @select-option-height-l; padding: @select-option-padding-l; } .@{prefix}-select-option-group__header.@{prefix}-size-s { height: @select-option-height-s; + line-height: @select-option-height-s; padding: @select-option-padding-s; } @@ -130,16 +148,16 @@ align-items: center; border-radius: @select-option-border-radius; height: @select-option-height-default; - line-height: @select-option-line-height; + font: @font-body-medium; cursor: pointer; padding: @select-option-padding-default; color: @select-option-color; transition: background-color @anim-duration-base @anim-time-fn-easing; box-sizing: border-box; - .text-ellipsis(); span { position: relative; + .text-ellipsis(); } &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-selected):hover { @@ -184,7 +202,7 @@ font: @select-font-l; } .@{prefix}-select-option.@{prefix}-size-m { - line-height: @select-option-line-height-m; + font: @select-font-m; } .@{prefix}-select-option.@{prefix}-size-s { height: @select-option-height-s; @@ -206,7 +224,9 @@ } } -.@{prefix}-select-option.@{prefix}-select-option__hover { +/** 规范 CSS 类名为 --hover */ +.@{prefix}-select-option.@{prefix}-select-option__hover, +.@{prefix}-select-option.@{prefix}-select-option--hover { &:not(.@{prefix}-is-disabled)&:not(.@{prefix}-is-selected) { background-color: @select-option-bg-color-hover; .@{prefix}-checkbox__input { @@ -219,7 +239,7 @@ } .@{prefix}-select-option + .@{prefix}-select-option { - margin-top: @select-options-margin; + margin-top: @select-options-margin-top; } .@{prefix}-select { diff --git a/style/web/components/select/_polyfill.less b/style/web/components/select/_polyfill.less deleted file mode 100644 index 3c4243eb43..0000000000 --- a/style/web/components/select/_polyfill.less +++ /dev/null @@ -1,233 +0,0 @@ -// vue2 tree-select未重构需兼容 -.@{prefix}-select-polyfill { - border: 1px solid @select-border-color; - border-radius: @select-border-radius; - padding: @select-padding; - display: inline-flex; -} - -.@{prefix}-select { - .reset; - - position: relative; - width: 100%; - vertical-align: middle; - line-height: (@select-height-default - 2px); - background: @select-bg-color; - transition: border-color @anim-duration-base @anim-time-fn-easing; - flex-wrap: wrap; - - &:hover:not(.@{prefix}-is-disabled), - :active:not(.@{prefix}-is-disabled) { - cursor: pointer; - border-color: @select-border-color-active; - - & > .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) { - color: @select-right-icon-hover; - opacity: 1; - } - } - - &.@{prefix}-no-border { - line-height: @select-height-default; - } - - .@{prefix}-select__placeholder { - margin-left: 8px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &:not(.@{prefix}-is-disabled) .@{prefix}-select__placeholder { - color: @select-placeholder-color; - } - - & .@{prefix}-select__single { - margin-left: @select-placeholder-margin; - display: block; - color: @select-input-color; - .text-ellipsis(); - } - - & .@{prefix}-select__right-icon { - transition: color @anim-duration-base @anim-time-fn-easing; - } - - // TODO 基于select-input改造时需要移除，polyfill代码 - & .@{prefix}-select__right-icon-polyfill { - position: absolute; - height: 100%; - margin: @select-icon-margin; - right: 0; - top: 0; - color: @select-icon-color; - } - - .@{prefix}-select__active-icon { - color: @select-border-color-active; - } - - .@{prefix}-select__right-icon.@{prefix}-is-visible { - transform: scaleY(-1); - transition: transform @anim-duration-base @anim-time-fn-easing; - - /* IE */ - filter: flipv; - } - - & .@{prefix}-select__left-icon { - position: absolute; - height: 100%; - margin: @select-icon-margin; - left: 0; - top: 0; - color: @select-icon-color; - transition: color @anim-duration-base @anim-time-fn-easing; - display: flex; - align-items: center; - } - - // input 层级调整 - .@{prefix}-input__wrap { - flex: 1; - } - - // TODO: select_input 重构后可删除 - .@{prefix}-tag + .@{prefix}-input__wrap { - margin-left: @select-placeholder-margin; - .@{prefix}-input__inner { - width: 100%; - } - } - - // TODO: select_input 重构后可删除 - .@{prefix}-select__input { - .@{prefix}-input { - height: auto; - border: 0; - padding: 0; - - &--focused { - box-shadow: none; - border-color: transparent; - } - } - - &:focus, - :hover { - border: 0; - } - - input { - height: @select-input-height; - line-height: @select-input-height; - } - - .@{prefix}-input.@{prefix}-input--prefix > .@{prefix}-input__prefix { - font: @select-font-l; - } - } - - .@{prefix}-tag, - + .@{prefix}-tag { - margin: @select-tag-margin; - } - - .@{prefix}-tag { - height: @select-tag-height-default; - line-height: (@select-tag-height-default - 2px); - } -} - -.@{prefix}-select.@{prefix}-is-active:not(.@{prefix}-is-disabled) { - border-color: @select-border-color-active; - - &:not(.@{prefix}-no-border) { - box-shadow: @select-input-shadow; // 无边框选择器没有阴影 - } - - .@{prefix}-select__right-icon:not(.@{prefix}-select__right-icon-clear) { - color: @select-border-color-active; - opacity: 1; - } -} - -.@{prefix}-select.@{prefix}-has-prefix { - padding-left: @select-padding-prefix; -} - -.@{prefix}-select.@{prefix}-no-border { - border: 0; - width: auto; - transition: background-color @anim-duration-base linear; - - &:hover { - background-color: @select-option-bg-color-hover; - } - - &:active { - background-color: @select-option-bg-color-active; - } - - > .@{prefix}-select__single { - margin-right: @select-no-border-margin-right; - } -} - -.@{prefix}-select.@{prefix}-size-l { - font: @select-font-l; - - .@{prefix}-select__input { - line-height: (@select-height-l - 2px); - height: (@select-height-l - 2px); - - .@{prefix}-input__inner { - height: (@select-height-l - 2px); - line-height: (@select-height-l - 2px); - } - } - - .@{prefix}-tag.@{prefix}-size-l { - height: @select-tag-height-l; - line-height: (@select-tag-height-l - 2px); - } -} - -.@{prefix}-select.@{prefix}-size-s { - font: @select-font-s; - - .@{prefix}-select__input { - line-height: (@select-height-s - 2px); - height: (@select-height-s - 2px); - - .@{prefix}-input__inner { - height: (@select-height-s - 2px); - line-height: (@select-height-s - 2px); - } - } - - .@{prefix}-tag.@{prefix}-size-s { - height: @select-tag-height-s; - line-height: (@select-tag-height-s - 2px); - } -} - -.@{prefix}-select.@{prefix}-is-disabled { - cursor: not-allowed; - background-color: @select-bg-color-disabled; - color: @select-placeholder-color-disabled; - border-color: @select-border-color; - - & > .@{prefix}-select__right-icon { - color: @select-icon-color-disabled; - } - - & > .@{prefix}-select__left-icon { - color: @select-icon-color-disabled; - } - - & > .@{prefix}-select__single { - color: @select-color-disabled; - } -} diff --git a/style/web/components/select/_var.less b/style/web/components/select/_var.less index 9d2758b8f0..c031c50c5a 100644 --- a/style/web/components/select/_var.less +++ b/style/web/components/select/_var.less @@ -24,23 +24,18 @@ @select-right-icon-hover: @brand-color; // 尺寸 -@select-height-s: 24px; -@select-height-default: 32px; -@select-height-l: 40px; -@select-option-height-s: 20px; -@select-option-height-default: 28px; -@select-option-height-l: 36px; -@select-option-line-height: 20px; -@select-option-line-height-m: 22px; +@select-height-s: @comp-size-xs; +@select-height-default: @comp-size-m; +@select-height-l: @comp-size-xl; +@select-option-height-s: @comp-size-xxs; +@select-option-height-default: @comp-size-s; +@select-option-height-l: @comp-size-l; @select-dropdown-max-height: 300px; -@select-input-height: 30px; -@select-tag-height-default: 22px; -@select-tag-height-l: 30px; -@select-tag-height-s: 18px; // font @select-font-s: @font-body-small; @select-font-l: @font-body-large; +@select-font-m: @font-body-medium; //阴影 @select-dropdown-shadow: @shadow-2; @@ -53,22 +48,16 @@ //透明度 // padding -@select-option-padding-s: 0 8px; -@select-option-padding-default: 0px 8px; -@select-option-padding-l: 7px 12px; -@select-padding: 0 26px 0 4px; -@select-optiongroup-border-padding: 7px; -@select-padding-prefix: 26px; -@select-dropdown-padding: 6px; -@select-dropdown-padding-l: 8px; -@select-dropdown-padding-s: 4px; +@select-option-padding-s: 0 @comp-paddingLR-s; +@select-option-padding-default: 0 @comp-paddingLR-s; +@select-option-padding-l: 0 @comp-paddingLR-m; +@select-optiongroup-border-padding: @comp-margin-xs; +@select-dropdown-padding: @pop-padding-m; +@select-dropdown-padding-l: @pop-padding-l; +@select-dropdown-padding-s: @pop-padding-s; @select-dropdown-popup-padding: 0; // margin -@select-icon-margin: 0 8px; -@select-tag-margin: 4px 4px 4px 0; -@select-placeholder-margin: 4px; -@select-optiongroup-border-margin: 7px; -@select-dropdown-margin: 8px 0; -@select-options-margin: 2px; -@select-no-border-margin-right: @spacer; -@select-empty-padding: 0 8px; +@select-optiongroup-border-margin: @comp-margin-xs; +@select-dropdown-margin: @comp-paddingTB-s 0; +@select-options-margin-top: @comp-paddingTB-xxs; +@select-empty-padding: 0 @comp-paddingLR-s; diff --git a/style/web/components/select/index.html b/style/web/components/select/index.html deleted file mode 100644 index 09e5530b95..0000000000 --- a/style/web/components/select/index.html +++ /dev/null @@ -1,314 +0,0 @@ - - - - - - Select - - - - - - - - -
    - - -
    -

    Select

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    - 请选择 - -
    - - - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - 请选择 - -
    - - -
    - -
    -
    - - - -
    -

    禁用状态

    - - -
    - - - - -
    -
    - -请选择- - - - -
    -
    -
    -
    - - 苹果apple~~~~ - - - - 橘子orange~~~ - - - - - -
    -
    - - - -
    - -

    选中状态

    - - -
    - - - - -
    - 请选择 - -
    - - - - -
    -
    - - -
    -

    多选

    -
    - - -
    - - 苹果apple - - - 香蕉banana - - - -
    - - - -
    -
    - - -
    -

    选项分组

    -
    - - -
    - 请选择 - -
    - - - - -
    -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/skeleton/_index.less b/style/web/components/skeleton/_index.less index 9ae3cb2d9d..b82c9ab4a8 100644 --- a/style/web/components/skeleton/_index.less +++ b/style/web/components/skeleton/_index.less @@ -12,7 +12,7 @@ &__row { display: flex; - margin-bottom: 10px; + margin-bottom: @comp-margin-l; align-items: center; } @@ -27,7 +27,7 @@ justify-content: center; background-color: @bg-color-secondarycontainer; color: @text-color-disabled; - margin-right: 15px; + margin-right: @comp-margin-l; &:first-child:last-child, &:last-child { diff --git a/style/web/components/skeleton/index.html b/style/web/components/skeleton/index.html deleted file mode 100644 index 49492d53f8..0000000000 --- a/style/web/components/skeleton/index.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - Skeleton - - - - - - - -
    - - -
    -

    Skeleton

    -

    开发者：wonderswang

    -

    创建日期：2021-12-26

    -

    说明：骨架屏

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less index 2909086df9..b476d4cdb5 100644 --- a/style/web/components/slider/_index.less +++ b/style/web/components/slider/_index.less @@ -34,12 +34,6 @@ position: relative; padding: @slider-padding; - &__input { - &.is-range { - margin-left: @slider-input-range-margin-left; - } - } - &__container { width: 100%; display: flex; @@ -57,7 +51,7 @@ width: 100%; height: @slider-rail-track-step-size; background-color: @slider-background; - transition: background-color .3s; + transition: @anim-duration-base linear; border-radius: @slider-border-radius; &:hover { diff --git a/style/web/components/slider/_var.less b/style/web/components/slider/_var.less index b3e96479bb..d5b5579d1e 100644 --- a/style/web/components/slider/_var.less +++ b/style/web/components/slider/_var.less @@ -1,10 +1,10 @@ -@slider-background: @bg-color-component; +@slider-background: @bg-color-secondarycomponent; @slider-background-current: @brand-color; @slider-text: @text-color-primary; @slider-control-bar-background: #fff; // 滑块背景色不随默认/暗色模式切换改变，固定为白色，故不使用背景色 token @slider-control-bar-border: @brand-color; -@slider-background-hover: @bg-color-component-hover; +@slider-background-hover: @bg-color-secondarycomponent-hover; @slider-control-bar-background-hover: @gray-color-1; // 滑块背景色不随默认/暗色模式切换改变，hover 后颜色固定为 @gray-color-1 @slider-background-disabled: @bg-color-component-disabled; @@ -18,28 +18,27 @@ // 尺寸 @slider-input-width: 80px; @slider-row-input-width: 120px; -@slider-height: 18px; -@slider-rail-track-step-size: 4px; -@slider-control-bar-size: 16px; +@slider-rail-track-step-size: @size-2; +@slider-height: calc(@comp-paddingTB-xs * 2 + @slider-rail-track-step-size); +@slider-control-bar-size: @comp-size-xxxs; @slider-vertical-height: 100%; @slider-vertical-mark-width: 18px; @slider-stop-width: 1px; -@slider-stop-height: 6px; -@slider-center-line-width: 8px; +@slider-stop-height: @size-2; +@slider-center-line-width: @size-4; @slider-center-line-height: 1px; // 边距 -@slider-input-margin-left: 24px; -@slider-input-vertical-padding-top: 16px; +@slider-input-margin-left: @comp-margin-xxl; +@slider-input-vertical-padding-top: @comp-paddingTB-l; @slider-input-vertical-margin-left: 0px; -@slider-input-range-margin-left: 12px; -@slider-padding: 7px 0; +@slider-padding: @comp-paddingTB-xs 0; @slider-vertical-padding: 0; @slider-vertical-handle-margin-top: -6px; @slider-vertical-handle-margin-left: -5px; @slider-vertical-text-margin-top: 0; -@slider-vertical-text-margin-left: 2px; -@slider-center-line-margin: 0 8px; +@slider-vertical-text-margin-left: @comp-margin-xxs; +@slider-center-line-margin: 0 @comp-margin-s; // 字体 @slider-text-font: @font-body-small; @@ -48,5 +47,4 @@ @slider-border-radius: @border-radius-round; // 定位 -@slider-text-top: 13px; -@slider-vertical-control-bar-left: -14px; +@slider-text-top: calc(@slider-rail-track-step-size + @comp-paddingTB-xs + 2px); diff --git a/style/web/components/slider/index.html b/style/web/components/slider/index.html deleted file mode 100644 index 1cce3c91c5..0000000000 --- a/style/web/components/slider/index.html +++ /dev/null @@ -1,276 +0,0 @@ - - - - - - slider - - - - - - - -
    - -
    -

    Slider

    -

    开发者：mengxiazeng

    -

    创建日期：2020.11.14

    -

    - 说明：tdesign slider组件的基本样式 -

    -
    - - - - -
    -

    默认

    - - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    状态

    - -
    - Normal - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - Selected - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - Disable - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    类型

    -
    - 单游标滑块 - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - 双游标滑块 - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    - - -
    -

    纵向滑块

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    0
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    - -
    -
    -
    - - diff --git a/style/web/components/space/index.html b/style/web/components/space/index.html deleted file mode 100644 index 451b82297b..0000000000 --- a/style/web/components/space/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - Space - - - - - - - - -
    - - -
    -

    Space

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - - -
    -

    默认

    - - -
    - -
    -
    - -
    - - - \ No newline at end of file diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less new file mode 100644 index 0000000000..d3d461c4f2 --- /dev/null +++ b/style/web/components/statistic/_index.less @@ -0,0 +1,50 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +.@{statistic-cls} { + display: inline-block; + line-height: @text-line-height-xl; + color: @statistic-text-color; + + &-title { + font-size: @statistic-title-font-size; + margin-bottom: @statistic-title-margin-bottom; + color: @statistic-title-text-color; + } + + &-content { + .@{statistic-cls}-value { + white-space: nowrap; + font-size: @statistic-integer-font-size; + font-weight: @statistic-value-font-weight; + color: @statistic-value-text-color; + + &-integer { + white-space: nowrap; + } + + &-decimal { + font-size: @statistic-decimal-font-size; + display: inline-block; + } + + &-suffix { + font-size: @statistic-suffix-font-size; + margin-left: @statistic-suffix-margin-left; + } + + &-prefix { + font-size: @statistic-value-icon-size; + margin-right: @statistic-prefix-margin-right; + } + } + } + + &-extra { + margin-top: @statistic-extra-margin-top; + color: @statistic-extra-text-color; + } +} diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less new file mode 100644 index 0000000000..1e7e74d7bb --- /dev/null +++ b/style/web/components/statistic/_var.less @@ -0,0 +1,30 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[type]-[attrtype]--[status] + +// component:组件名，如button， +// type: 组件类型，如 button 的次要按钮（line） +// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 +// attr: 属性名称，如color、height、radius等 +// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 + +// 如：@button-line-bg-color-hover +// 如：@button-line-height-s +@import "../../base.less"; + +@statistic-cls: ~"@{prefix}-statistic"; + +@statistic-title-font-size: @font-title-medium; +@statistic-title-margin-bottom: @spacer-1; +@statistic-extra-margin-top: @spacer-1; +@statistic-integer-font-size: 26px; +@statistic-decimal-font-size: @statistic-integer-font-size; +@statistic-value-font-weight: 500; +@statistic-value-text-color: @text-color-primary; +@statistic-text-color: @text-color-secondary; +@statistic-title-text-color: @text-color-secondary; +@statistic-extra-text-color: @text-color-secondary; +@statistic-value-icon-size: @font-size-base; +@statistic-suffix-font-size: @font-size-base; +@statistic-prefix-margin-right: @spacer-s; +@statistic-suffix-margin-left: @spacer-s; diff --git a/style/web/components/steps/_index.css b/style/web/components/steps/_index.css deleted file mode 100644 index 848291fa11..0000000000 --- a/style/web/components/steps/_index.css +++ /dev/null @@ -1,645 +0,0 @@ -.default-step-icon { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps { - font: var(--td-font-body-medium); - color: var(--td-text-color-primary); - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - display: flex; - width: 100%; -} - -.t-steps .t-steps-item { - flex: 1; - overflow: hidden; - vertical-align: top; - margin-right: 8px; - position: relative; - display: flex; -} - -.t-steps .t-steps-item:last-child { - flex: none; -} - -.t-steps .t-steps-item__inner { - width: fit-content; - position: relative; - display: flex; -} - -.t-steps .t-steps-item__inner.t-steps-item--clickable { - cursor: pointer; -} - -.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon { - color: var(--td-brand-color); -} - -.t-steps .t-steps-item--finish .t-steps-item__icon--number { - border-color: var(--td-brand-color); -} - -.t-steps .t-steps-item--finish .t-steps-item__title { - color: var(--td-text-color-primary); - font-weight: normal; -} - -.t-steps .t-steps-item--finish .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item--process .t-steps-item__icon .t-icon { - color: var(--td-brand-color); -} - -.t-steps .t-steps-item--process .t-steps-item__icon--number { - border-color: var(--td-brand-color); - background-color: var(--td-brand-color); - color: var(--td-text-color-anti); - font-weight: bold; -} - -.t-steps .t-steps-item--process .t-steps-item__title { - color: var(--td-brand-color); - font-weight: bold; -} - -.t-steps .t-steps-item--process .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item--error .t-steps-item__icon .t-icon { - color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__icon--number { - color: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__title { - color: var(--td-error-color); -} - -.t-steps .t-steps-item--error .t-steps-item__description { - color: var(--td-text-color-secondary); -} - -.t-steps .t-steps-item__icon { - vertical-align: top; - font-size: var(--td-font-size-body-medium); - margin-right: 8px; - color: var(--td-text-color-placeholder); -} - -.t-steps .t-steps-item__icon--number { - color: var(--td-text-color-placeholder); - border: 1px solid var(--td-text-color-placeholder); - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon--finish { - border: 1px solid var(--td-brand-color); - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon--error { - border: 1px solid var(--td-error-color-6); - color: #000; - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - text-align: center; - border-radius: var(--td-radius-circle); - margin-top: 3px; - font-size: var(--td-font-size-body-large); -} - -.t-steps .t-steps-item__icon > .t-icon { - font-size: 24px; -} - -.t-steps .t-steps-item__title { - position: relative; - padding-right: 8px; - color: var(--td-text-color-placeholder); - font-size: var(--td-font-size-body-large); - line-height: 24px; -} - -.t-steps .t-steps-item__description { - color: var(--td-text-color-placeholder); - font-size: var(--td-font-size-body-medium); - margin-bottom: 4px; - line-height: 22px; -} - -.t-steps--line-separator .t-steps-item::before, -.t-steps--line-separator .t-steps-item::after, -.t-steps--line-separator .t-steps-item__title::after { - border-style: solid; -} - -.t-steps--dashed-separator .t-steps-item::before, -.t-steps--dashed-separator .t-steps-item::after, -.t-steps--dashed-separator .t-steps-item__title::after { - border-style: dashed; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__content { - margin-top: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title { - width: fit-content; - margin-bottom: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number { - width: steps-circle-width; - height: 24px; - margin-top: 4px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon { - font-size: 24px; -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title::after { - content: ""; - display: block; - width: 9999px; - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: 100%; - top: 50%; - transform: translateY(-50%); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - height: 24px; - content: "^"; - transform: rotateZ(90deg); - display: inline-flex; - justify-content: center; - align-items: flex-end; - border: 0; - font-size: 16px; - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title::after { - content: ""; - display: block; - width: 9999px; - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: 100%; - top: 50%; - transform: translateY(-50%); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - height: 24px; - content: "^"; - transform: rotateZ(90deg); - display: inline-flex; - justify-content: center; - align-items: flex-end; - border: 0; - font-size: 16px; - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - transform: rotateZ(-90deg); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title::after, -.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title::after { - border-bottom-width: 2px; - border-bottom-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item { - overflow: visible; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title { - padding-right: 0; - margin-bottom: 4px; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { - border-color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { - background: var(--td-brand-color); - border-color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { - background: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner { - display: flex; - flex-direction: column; - align-items: center; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon { - display: block; - width: 8px; - height: 8px; - border: 2px solid var(--td-text-color-placeholder); - border-radius: var(--td-radius-circle); - margin-bottom: 4px; - position: relative; - box-sizing: border-box; - flex-shrink: 0; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content { - text-align: center; - width: 140px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - content: "^"; - display: inline-flex; - justify-content: center; - align-items: flex-start; - border: 0; - font-size: 16px; - transform: rotateZ(90deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after { - content: ""; - display: block; - width: calc(100% - 16px); - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: calc(140px / 2 + 8px); - top: 2.5px; -} - -.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - flex: 1; - content: "^"; - display: inline-flex; - justify-content: center; - align-items: flex-start; - border: 0; - font-size: 16px; - transform: rotateZ(90deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { - transform: rotateZ(-90deg); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after { - content: ""; - display: block; - width: calc(100% - 16px); - border-left: 0; - border-top: 0; - border-bottom-width: 1px; - border-bottom-color: var(--td-text-color-placeholder); - position: absolute; - left: calc(140px / 2 + 8px); - top: 2.5px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after, -.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { - color: var(--td-brand-color); - border-bottom-color: var(--td-brand-color); - border-bottom-width: 2px; -} - -.t-steps--vertical { - width: fit-content; - flex-direction: column; -} - -.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 24px); - position: absolute; - top: 24px; - left: 6px; - display: flex; - align-items: center; - font-size: 16px; - transform: rotateZ(180deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--positive .t-steps-item { - padding-bottom: 24px; - margin-bottom: 5px; -} - -.t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-left: 0; - border-top: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - top: 35px; - left: 11px; -} - -.t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--default-anchor .t-steps-item__content { - margin-top: 2px; - margin-left: 0; -} - -.t-steps--vertical.t-steps--default-anchor .t-steps-item__title { - margin-bottom: 4px; -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 4px); - position: absolute; - top: 8px; - left: 0; - display: flex; - align-items: center; - font-size: 14px; - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-bottom: 0; - border-left: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - left: 3.5px; - top: 17px; -} - -.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); - border-right-color: var(--td-brand-color); - border-right-width: 2px; -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item { - margin-bottom: 0; -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { - border-color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { - background: var(--td-brand-color); - border-color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { - background: var(--td-error-color); - border-color: var(--td-error-color); -} - -.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon { - display: block; - width: 8px; - height: 8px; - border: 2px solid var(--td-text-color-placeholder); - border-radius: var(--td-radius-circle); - margin-bottom: 4px; - position: relative; - box-sizing: border-box; - flex-shrink: 0; - top: 5px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 24px); - position: absolute; - top: 24px; - left: 6px; - display: flex; - align-items: center; - font-size: 16px; - transform: rotateZ(180deg); - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - transform: rotateZ(0); - margin-top: 4px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse .t-steps-item { - padding-bottom: 24px; - margin-bottom: 5px; -} - -.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-left: 0; - border-bottom: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - top: 35px; - left: 11px; -} - -.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { - content: "^"; - border: 0; - height: calc(100% - 4px); - position: absolute; - top: 8px; - left: 0; - display: flex; - align-items: center; - font-size: 14px; - color: var(--td-text-color-placeholder); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { - color: var(--td-brand-color); -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item { - margin-bottom: 0; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before { - content: ""; - display: block; - height: 100%; - border-bottom: 0; - border-left: 0; - border-right-width: 1px; - border-right-color: var(--td-text-color-placeholder); - position: absolute; - left: 3.5px; - top: 17px; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before { - display: none; -} - -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before, -.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before { - border-right-width: 2px; - border-right-color: var(--td-brand-color); - color: var(--td-brand-color); -} diff --git a/style/web/components/steps/_index.less b/style/web/components/steps/_index.less index 1cbfd44e0f..2c23303666 100644 --- a/style/web/components/steps/_index.less +++ b/style/web/components/steps/_index.less @@ -37,10 +37,6 @@ // 默认锚点 &.@{prefix}-steps--default-anchor { - .@{prefix}-steps-item__content { - margin-top: @steps-item-content-margin-top; - } - .@{prefix}-steps-item__title { width: fit-content; margin-bottom: @steps-item-title-margin-bottom; @@ -48,14 +44,12 @@ .@{prefix}-steps-item__icon { &__number { - width: steps-circle-width; + width: @steps-circle-width; height: @steps-circle-height; - margin-top: @steps-item-icon-number-margin-top; } & > .t-icon { font-size: @steps-item-t-icon-font-size-default; - margin-top: 4px; } } @@ -122,7 +116,6 @@ &.@{prefix}-steps--default-anchor { .@{prefix}-steps-item__content { - margin-top: @steps-item-content-margin-top-vertical; margin-left: @steps-item-content-margin-left-vertical; } @@ -142,6 +135,10 @@ .@{prefix}-steps-item { margin-bottom: 0; + .@{prefix}-steps-item__title { + margin-bottom: @steps-item-title-margin-bottom; + } + &--finish { .dot-anchor-status(finish); } diff --git a/style/web/components/steps/_mixin.less b/style/web/components/steps/_mixin.less index 2fc42a5955..a2b2a407fb 100644 --- a/style/web/components/steps/_mixin.less +++ b/style/web/components/steps/_mixin.less @@ -86,7 +86,6 @@ height: @steps-circle-height; text-align: center; border-radius: @border-radius-circle; - margin-top: @steps-item-default-icon-margin-top; font-size: @steps-default-step-icon-font-size; } @@ -234,7 +233,7 @@ justify-content: center; align-items: flex-end; border: 0; - font-size: @spacer-2; + font-size: @font-size-l; color: @steps-line-bg-color-horizontal-default; } @@ -280,13 +279,13 @@ .@{prefix}-steps-item:not(:last-child)::before { content: "^"; border: 0; - height: calc(100% - @spacer-3); + height: calc(100% - 24px); position: absolute; - top: @spacer-3; - left: @spacer-m; + top: 24px; + left: 6px; display: flex; align-items: center; - font-size: @spacer-2; + font-size: @font-size-l; transform: rotateZ(180deg); color: @steps-line-bg-color-vertical-default; } @@ -298,7 +297,7 @@ & when(@isReverse = true) { .@{prefix}-steps-item:not(:last-child)::before { transform: rotateZ(0); - margin-top: @spacer-s; + margin-top: @comp-margin-xs; } .@{prefix}-steps-item--process:not(:last-child)::before, @@ -372,7 +371,7 @@ justify-content: center; align-items: flex-start; border: 0; - font-size: @spacer-2; + font-size: @font-size-l; transform: rotateZ(90deg); color: @steps-line-bg-color-horizontal-default; } @@ -433,13 +432,13 @@ .@{prefix}-steps-item:not(:last-child)::before { content: "^"; border: 0; - height: calc(100% - @spacer-s); + height: calc(100% - 4px); position: absolute; - top: @spacer; + top: 8px; left: 0; display: flex; align-items: center; - font-size: 14px; + font-size: @font-size-base; color: @steps-line-bg-color-vertical-default; } diff --git a/style/web/components/steps/_var.less b/style/web/components/steps/_var.less index 36e48aab45..e2e9c64e75 100644 --- a/style/web/components/steps/_var.less +++ b/style/web/components/steps/_var.less @@ -12,37 +12,35 @@ // 如：@button-line-height-s // 点状步骤条相关 -@steps-circle-height: 24px; -@steps-circle-width: 24px; -@steps-item-title-margin-bottom: 4px; -@steps-item-description-margin: 4px; -@steps-item-content-margin-top: 4px; -@steps-item-content-margin-top-vertical: 2px; -@steps-item-margin-right: @spacer; -@steps-item-icon-margin-right: @spacer; -@steps-item-default-icon-margin-top: 3px; -@steps-title-padding-right: @spacer; -@steps-dot-item-icon-margin-bottom: 4px; +@steps-circle-height: 22px; +@steps-circle-width: 22px; +@steps-item-title-margin-bottom: @comp-margin-xs; +@steps-item-description-margin: @comp-margin-xs; +@steps-item-content-margin-top: @comp-margin-xs; +@steps-item-content-margin-top-vertical: @comp-margin-xxs; +@steps-item-margin-right: @comp-margin-s; +@steps-item-icon-margin-right: @comp-margin-s; +@steps-title-padding-right: @comp-margin-s; +@steps-dot-item-icon-margin-bottom: @comp-margin-xs; @steps-item-content-margin-left-vertical: 0px; -@steps-item-padding-bottom-vertical: @spacer-3; +@steps-item-padding-bottom-vertical: @comp-margin-xxl; @steps-item-margin-bottom-vertical: 5px; @steps-item-icon-number-line-height: 1px; @steps-item-icon-number-line-width: 1px; @steps-item-icon-number-line-top: 35px; -@steps-item-connector-line-width: calc(100% - @spacer-2); +@steps-item-connector-line-width: calc(100% - 16px); @steps-title-line-height: 24px; @steps-description-line-height: 22px; @steps-dot-item-icon-height: 8px; @steps-dot-item-icon-width: 8px; @steps-item-icon-number-line-left: 11px; -@steps-dot-anchor-position-top: 5px; +@steps-dot-anchor-position-top: 8px; @steps-dot-content-width: 140px; @steps-dot-connector-position-top-horizontal: 2.5px; @steps-dot-connector-position-left-horizontal: calc(@steps-dot-content-width / 2 + @spacer); @steps-dot-connector-position-top-vertical: 17px; @steps-dot-connector-position-left-vertical: 3.5px; @steps-dot-connector-position-left-vertical-reverse: 3.5px; -@steps-item-icon-number-margin-top: 4px; // 描边宽度 @step-stroke-width: 1px; @@ -52,9 +50,8 @@ @steps-title-font-weight: normal; //add //字体 -@steps-item-t-icon-font-size: 35px; @steps-item-icon-font-size: @font-size-base; -@steps-item-t-icon-font-size-default: 24px; +@steps-item-t-icon-font-size-default: calc(@font-size-base + 10px); @steps-title-font-size-anchor: @font-size-l; @steps-description-font-size: @font-size-base; @steps-default-step-icon-font-size: @font-size-l; @@ -79,7 +76,7 @@ @steps-item-icon-color: @text-color-placeholder; @steps-item-icon-border-color-default: @text-color-placeholder; @steps-item-icon-border-color-finish: @brand-color; -@steps-item-icon-border-color-error: @error-color-6; +@steps-item-icon-border-color-error: @error-color; // item-icon anchor 状态 @steps-item-icon-anchor-number-color-error: @error-color; diff --git a/style/web/components/steps/index.html b/style/web/components/steps/index.html deleted file mode 100644 index ab0c36bad8..0000000000 --- a/style/web/components/steps/index.html +++ /dev/null @@ -1,489 +0,0 @@ - - - - - - steps - - - - - - - -
    - - -
    -

    Steps

    -

    开发者：JrainLau

    -

    创建日期：2020-06-05

    -

    说明：TDesign steps 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    -

    1.水平步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    2.水平步骤条不带序号

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    3.垂直步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    4.垂直步骤条不带序号

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    5.带 Icon 步骤条

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    6.带额外内容步骤条

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    - -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    - -
    -

    7.倒序步骤条（仅限垂直步骤条）

    - -
    -
    -
    -
    -
    -
    已完成
    -
    这里是提示文字
    - -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    进行中
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    -
    -
    未进行
    -
    这里是提示文字
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 3 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - -
    -
    - - -
    -

    状态

    -
    -

    1.水平步骤条带序号

    - -
    -
    -
    -
    - -
    -
    -
    已完成的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 2 -
    -
    -
    进行中的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    错误的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    -
    -
    - 4 -
    -
    -
    未进行的步骤
    -
    这里是提示文字
    -
    -
    -
    -
    - - -
    -
    - - - diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less new file mode 100644 index 0000000000..8f52b3badc --- /dev/null +++ b/style/web/components/sticky-tool/_index.less @@ -0,0 +1,32 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +@import "./_mixin.less"; + +.@{prefix}-sticky-tool { + position: fixed; + opacity: 1; + box-sizing: border-box; + background-color: @sticky-tool-background; + border: @sticky-tool-border; + box-shadow: @sticky-tool-shadow; + + &-popup-content { + box-shadow: @sticky-tool-popup-shadow; + font-size: @sticky-tool-popup-font-size; + color: @sticky-tool-popup-color; + } + + .sticky-item-basic(); + + &--square { + border-radius: @sticky-tool-border-radius-square; + } + + &--round { + border-radius: @sticky-tool-border-radius-round; + } +} diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less new file mode 100644 index 0000000000..2a151a7f0b --- /dev/null +++ b/style/web/components/sticky-tool/_mixin.less @@ -0,0 +1,56 @@ +.sticky-item-basic() { + .@{prefix}-sticky-item { + opacity: 1; + position: relative; + margin: @sticky-item-margin; + text-align: center; + font-size: @sticky-item-font-size; + color: @sticky-item-text-color; + transition: @sticky-item-bg-color-transition; + + &:hover { + cursor: pointer; + background-color: @sticky-item-bgcolor-hover; + } + + &--normal { + width: @sticky-item-size-normal; + height: @sticky-item-size-normal; + + .t-icon { + width: @sticky-item-icon-size; + height: @sticky-item-icon-size; + margin: @sticky-item-icon-margin-normal; + color: @sticky-item-icon-color; + } + } + + &--compact { + width: @sticky-item-size-compact; + height: @sticky-item-size-compact; + + .t-icon { + width: @sticky-item-icon-size; + height: @sticky-item-icon-size; + margin: @sticky-item-icon-margin-compact; + color: @sticky-item-icon-color; + } + } + + &--square { + border-radius: @sticky-item-border-radius-square; + } + + &--round { + border-radius: @sticky-item-border-radius-round; + } + + .@{prefix}-sticky-item__label { + width: 100%; + height: @sticky-item-label-height; + line-height: @sticky-item-label-height; + margin-top: @sticky-item-label-margin-top; + text-align: center; + } + } +} diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less new file mode 100644 index 0000000000..d4f220bd9f --- /dev/null +++ b/style/web/components/sticky-tool/_var.less @@ -0,0 +1,46 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[type]-[attrtype]--[status] + +// component:组件名，如button， +// type: 组件类型，如 button 的次要按钮（line） +// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 +// attr: 属性名称，如color、height、radius等 +// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 + +// 如：@button-line-bg-color-hover +// 如：@button-line-height-s + +// sticky-tool组件整体样式 +@sticky-tool-background: @bg-color-container; +@sticky-tool-border: @component-border; +@sticky-tool-shadow: @shadow-3; +@sticky-tool-popup-shadow: @shadow-3; +@sticky-tool-popup-font-size: @font-size-s; +@sticky-tool-popup-color: @text-color-secondary; + +// sticky-tool shape=square +@sticky-tool-border-radius-square: @border-radius-medium; +@sticky-item-border-radius-square: @border-radius-default; + +// sticky-tool shape=round +@sticky-tool-border-radius-round: @border-radius-round; +@sticky-item-border-radius-round: @border-radius-circle; + +// sticky-item组件整体样式 +@sticky-item-margin: @comp-margin-xs; +@sticky-item-bgcolor-hover: @bg-color-container-hover; +@sticky-item-label-height: @comp-size-xxs; +@sticky-item-label-margin-top: @comp-margin-xxs; +@sticky-item-font-size: @font-size-s; +@sticky-item-text-color: @text-color-secondary; +@sticky-item-icon-size: @icon-l; +@sticky-item-icon-color: @text-color-primary; +@sticky-item-bg-color-transition: background-color @anim-duration-base linear; + +// sticky-tool type=normal +@sticky-item-size-normal: @comp-size-xxxl; +@sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l; +// sticky-tool type=compact +@sticky-item-size-compact: @comp-size-xl; +@sticky-item-icon-margin-compact: @comp-margin-s; diff --git a/style/web/components/swiper/_mixin.less b/style/web/components/swiper/_mixin.less index 7e220f4d40..e322ceaa2a 100644 --- a/style/web/components/swiper/_mixin.less +++ b/style/web/components/swiper/_mixin.less @@ -26,6 +26,7 @@ z-index: @swiper-navigation-z-index-default; background-color: transparent; color: @swiper-navigation-item-bg-hover; + transition: @anim-duration-base linear; cursor: pointer; & when(@direction = left) { left: @@arrowPosition; @@ -38,10 +39,12 @@ color: @swiper-navigation-item-bg-active; background-color: @swiper-navigation-item-bg; border-radius: @border-radius-default; + transition: @anim-duration-base linear; } &:active { background-color: @swiper-arrow-active; + transition: @anim-duration-base linear; } } } @@ -100,7 +103,7 @@ top: auto; right: auto; - bottom: -@@fractionLineHeight - 12; + bottom: calc(0px - calc(@@fractionLineHeight + 12px)); height: @@fractionLineHeight; line-height: @@fractionLineHeight; diff --git a/style/web/components/swiper/_var.less b/style/web/components/swiper/_var.less index 45dedb0067..a742c32ee2 100644 --- a/style/web/components/swiper/_var.less +++ b/style/web/components/swiper/_var.less @@ -68,12 +68,12 @@ @swiper-card-transform-scale: scale(.63); // 间距 -@swiper-navigation-item-margin-large: 9px; +@swiper-navigation-item-margin-large: 8px; @swiper-navigation-item-margin-medium: 6px; -@swiper-navigation-item-margin-small: 3px; +@swiper-navigation-item-margin-small: 4px; // 点 -@swiper-navigation-item-dot-size: 4px; +@swiper-navigation-item-dot-size: @size-2; // 位置 @swiper-z-index-default: 1; @@ -81,4 +81,4 @@ // 动画 @swiper-animation-duration: .5s; -@swiper-animation-time-fn: ease-in-out; +@swiper-animation-time-fn: @anim-time-fn-easing; diff --git a/style/web/components/swiper/index.html b/style/web/components/swiper/index.html deleted file mode 100644 index 95ccc7af62..0000000000 --- a/style/web/components/swiper/index.html +++ /dev/null @@ -1,265 +0,0 @@ - - - - - - - swiper - - - - - - - -
    - - -
    -

    Swiper

    -

    开发者：duenyang

    -

    创建日期：2022-01-20

    -

    说明：TDesign swiper 组件的基本样式

    -
    - - - -
    -

    指示器&切换箭头

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -

    分式

    - -
    -
    -
    -
    -
    -
    1
    -
    -
    -
    -
    -
    - -
    -
    1/8
    -
    - -
    -
    -
    -
    -
    -
    - -
    - -

    卡片式

    - -
    -
    -
    -
    -
    -
    -
    -
    1
    -
    -
    -
    2
    -
    -
    -
    3
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -

    vertical

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    - -
    -

    vertical & outside

    -
    - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    - -
    -

    large

    -
    - - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -

    small

    -
    - - -
    -
    -
    -
    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
      • -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    - - - \ No newline at end of file diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less index 802b4765e4..09c0650abe 100644 --- a/style/web/components/switch/_index.less +++ b/style/web/components/switch/_index.less @@ -19,13 +19,17 @@ margin: 0; height: @switch-height-default; line-height: @switch-height-default; - border-radius: (@switch-height-default / 2); + border-radius: @border-radius-extraLarge; min-width: @switch-min-width-default; transition: @switch-transition; background-color: @switch-unchecked-bg-color; cursor: pointer; user-select: none; + &:hover { + background-color: @switch-unchecked-bg-color-hover; + } + &__handle { position: absolute; display: flex; @@ -33,13 +37,14 @@ justify-content: center; top: @switch-width-border-default; left: @switch-width-border-default; - width: (@switch-height-default - 2px * @switch-width-border-default); - height: (@switch-height-default - 2px * @switch-width-border-default); + width: calc(@switch-height-default - 2 * @switch-width-border-default); + height: calc(@switch-height-default - 2 * @switch-width-border-default); border-radius: @border-radius-extraLarge; transition: @switch-handle-transition; + box-shadow: @shadow-1; .t-icon { - font-size: (@switch-height-default - 4px); + font-size: calc(@switch-height-default - 4px); color: transparent; } @@ -96,9 +101,16 @@ &.@{prefix}-is-checked { background-color: @switch-checked-bg-color; + &:hover { + background-color: @switch-checked-bg-color-hover; + } + .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-default); + left: calc(100% - @switch-width-border-check-default); transform: translate(-100%, 0); + width: calc(@switch-height-default - 2 * @switch-width-border-check-default); + height: calc(@switch-height-default - 2 * @switch-width-border-check-default); + top: @switch-width-border-check-default; } .@{prefix}-switch__content { @@ -138,10 +150,16 @@ cursor: not-allowed; background-color: @switch-unchecked-bg-color-disabled; + .@{prefix}-switch__handle { + box-shadow: none; + } + &.@{prefix}-is-checked { background-color: @switch-checked-bg-color-disabled; .@{prefix}-switch__handle { + box-shadow: none; + .t-icon { color: @switch-checked-bg-color-disabled; } @@ -154,7 +172,7 @@ min-width: @switch-min-width-l; height: @switch-height-l; line-height: @switch-height-l; - border-radius: (@switch-height-l / 2); + border-radius: @border-radius-extraLarge; &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) { @@ -175,11 +193,11 @@ .@{prefix}-switch__handle { top: @switch-width-border-l; left: @switch-width-border-l; - width: (@switch-height-l - 2px * @switch-width-border-l); - height: (@switch-height-l - 2px * @switch-width-border-l); + width: calc(@switch-height-l - 2 * @switch-width-border-l); + height: calc(@switch-height-l - 2 * @switch-width-border-l); .t-icon { - font-size: (@switch-height-l - 4px); + font-size: calc(@switch-height-l - 4px); } } @@ -196,7 +214,10 @@ &.@{prefix}-is-checked { .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-l); + left: calc(100% - @switch-width-border-check-l); + top: @switch-width-border-check-l; + width: calc(@switch-height-l - 2 * @switch-width-border-check-l); + height: calc(@switch-height-l - 2 * @switch-width-border-check-l); } .@{prefix}-switch__content { @@ -209,7 +230,7 @@ min-width: @switch-min-width-s; height: @switch-height-s; line-height: @switch-height-s; - border-radius: (@switch-height-s / 2); + border-radius: @border-radius-extraLarge; &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) { @@ -230,11 +251,11 @@ .@{prefix}-switch__handle { top: @switch-width-border-s; left: @switch-width-border-s; - width: (@switch-height-s - 2 * @switch-width-border-s); - height: (@switch-height-s - 2 * @switch-width-border-s); + width: calc(@switch-height-s - 2 * @switch-width-border-s); + height: calc(@switch-height-s - 2 * @switch-width-border-s); .t-icon { - font-size: (@switch-height-s - 4px); + font-size: calc(@switch-height-s - 4px); } } @@ -251,7 +272,10 @@ &.@{prefix}-is-checked { .@{prefix}-switch__handle { - left: calc(100% - @switch-width-border-s); + left: calc(100% - @switch-width-border-check-s); + top: @switch-width-border-check-s; + width: calc(@switch-height-s - 2 * @switch-width-border-check-s); + height: calc(@switch-height-s - 2 * @switch-width-border-check-s); } .@{prefix}-switch__content { diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less index bb18a7e7cc..bc80c36858 100644 --- a/style/web/components/switch/_var.less +++ b/style/web/components/switch/_var.less @@ -13,29 +13,43 @@ // 颜色 @switch-checked-bg-color: @brand-color; +@switch-checked-bg-color-hover: @brand-color-hover; @switch-checked-bg-color-loading: @brand-color-focus; @switch-checked-bg-color-disabled: @brand-color-disabled; -@switch-unchecked-bg-color: @gray-color-5; -@switch-unchecked-bg-color-loading: @bg-color-page; +@switch-unchecked-bg-color: @bg-color-secondarycomponent; +@switch-unchecked-bg-color-hover: @bg-color-secondarycomponent-hover; +@switch-unchecked-bg-color-loading: @bg-color-component-disabled; @switch-unchecked-bg-color-disabled: @bg-color-component-disabled; -@switch-handle-bg-color: @text-color-anti; +@switch-handle-bg-color: #fff; @switch-content-color-checked: @text-color-anti; @switch-content-color-unchecked: @text-color-anti; // 尺寸 -@switch-height-l: 24px; -@switch-height-default: 20px; -@switch-height-s: 16px; +@switch-height-l: @comp-size-xs; +@switch-height-default: @comp-size-xxs; +@switch-height-s: @comp-size-xxxs; -@switch-min-width-l: 44px; -@switch-min-width-default: 36px; -@switch-min-width-s: 28px; +@switch-min-width-l: calc(@switch-height-l / .618); +@switch-min-width-default: calc(@switch-height-default / .618); +@switch-min-width-s: calc(@switch-height-s / .618); -@switch-width-border-l: 2px; -@switch-width-border-default: 2px; -@switch-width-border-s: 2px; +//change uncheck handle size +@switch-width-border-base: 5px; +@switch-width-border-value: 1px; //公差值 + +@switch-width-border-l: @switch-width-border-base; +@switch-width-border-default: (@switch-width-border-base - @switch-width-border-value * 1); +@switch-width-border-s: (@switch-width-border-base - @switch-width-border-value * 2); + +//change check handle size +@switch-width-border-check-base: 3px; +@switch-width-border-check-value: .5px; //公差值 + +@switch-width-border-check-l: @switch-width-border-check-base; +@switch-width-border-check-default: (@switch-width-border-check-base - @switch-width-border-check-value * 1); +@switch-width-border-check-s: (@switch-width-border-check-base - @switch-width-border-check-value * 2); // 字体 @switch-content-font-size-l: @font-size-l; @@ -43,16 +57,17 @@ @switch-content-font-size-s: 9px; // 间距 -@switch-content-margin-left-l: (@switch-min-width-l / 2 + 2px); -@switch-content-margin-right-l: 8px; +@switch-content-margin-left-l: calc(@switch-min-width-l / 2 + 4px); +@switch-content-margin-right-l: @comp-margin-s; -@switch-content-margin-left-default: (@switch-min-width-default / 2 + 2px); -@switch-content-margin-right-default: 6px; +@switch-content-margin-left-default: calc(@switch-min-width-default / 2 + 2px); +@switch-content-margin-right-default: @comp-margin-xs; -@switch-content-margin-left-s: (@switch-min-width-s / 2 + 2px); -@switch-content-margin-right-s: 5px; +@switch-content-margin-left-s: calc(@switch-min-width-s / 2 + 2px); +@switch-content-margin-right-s: @comp-margin-xxs; // 动画 -@switch-transition: all @anim-duration-base @anim-time-fn-ease-out; +@switch-transition: all @anim-duration-base @anim-time-fn-easing; @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing; -@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear; +@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, + opacity @anim-duration-base linear; diff --git a/style/web/components/switch/index.html b/style/web/components/switch/index.html deleted file mode 100644 index f9fcd2e319..0000000000 --- a/style/web/components/switch/index.html +++ /dev/null @@ -1,261 +0,0 @@ - - - - - - 组件名称 - - - - - - - - -
    - - -
    -

    Switch

    -

    开发者：chazzhou

    -

    创建日期：2020-06-30

    -

    说明：TDesign switch 组件的基本样式

    -
    - - - - - -
    -

    组件类型

    - - -
    -
    -

    基础

    - - -
    -
    - -
    -
    -

    带描述的开关

    -
    - - - -
    -
    -
    - - - -
    -
    - -
    - - - -
    -
    -
    - - - -
    -
    - -
    - - - -
    -
    -
    - - - -
    - - -
    -
    -
    - - -
    -

    组件状态

    - - -
    -
    -

    正常

    - - -
    -
    - -
    -
    -

    加载状态

    - - - - - - - - -
    -
    - -
    -
    -

    禁用状态

    - - -
    -
    -
    - - -
    -

    组件大小

    -
    -
    -

    1.开关提供大、中（默认）、小3中尺寸：

    - - - -
    -
    - - - -
    -
    -
    - -
    - - - diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index d7e629f781..4e511033d1 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -24,8 +24,7 @@ /** 吸顶表头 Affix 组件，zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @table-resize-line-z-index: 1001; -@table-cell-padding: @table-td-padding-vertical-top @table-td-padding-horizontal - @table-td-padding-vertical-bottom @table-td-padding-horizontal; +@table-cell-padding: @table-td-padding-vertical @table-td-padding-horizontal; .scrollbar { .scrollbar(); @@ -87,7 +86,7 @@ } &__column-controller-trigger { - padding: 16px 0; + padding: @table-controller-trigger-padding; } &__content { @@ -96,12 +95,12 @@ } &__pagination { - padding: @table-padding-normal 0; + padding: @table-default-pagination-padding; box-sizing: border-box; } .t-icon { - font-size: @font-size-l; + font-size: @table-icon-size; } // table 标签基础样式 @@ -111,6 +110,7 @@ } .@{prefix}-text-ellipsis { + line-height: @table-line-height; .text-ellipsis(); } @@ -124,10 +124,13 @@ overflow-wrap: break-word; background-color: inherit; box-sizing: border-box; + text-align: left; + } - &:not([align]) { - text-align: left; - } + th.@{prefix}-table__th-drag { + padding: 0; + height: 0; + text-align: center; } thead td, @@ -160,8 +163,6 @@ // 紧凑型表格 &.@{prefix}-size-s { - font: @table-font-small; - th, td { padding: @table-padding-small; @@ -180,12 +181,13 @@ .@{prefix}-table__expandable-icon-cell, .@{prefix}-table__selection-cell { padding: 0; + height: 0; + } - + td, - + th { - padding-left: 0; - padding-right: 0; - } + td.@{prefix}-table__handle-draggable { + text-align: center; + height: 0; + padding: 0; } .@{prefix}-table__cell--selectable > .@{prefix}-checkbox { @@ -245,13 +247,11 @@ } .@{prefix}-table__pagination { - border: @border; - border-top: 0; - padding: @table-padding-normal @table-padding-horizontal; + // border-top: 0; + padding: @table-default-pagination-padding; } .@{prefix}-table__bottom-content + .@{prefix}-table__pagination { - border: 0; padding: 0; } @@ -272,6 +272,13 @@ // 斑马线表格 &--striped { + &:not(.@{prefix}-table--bordered) { + th, + td { + border-bottom: none; + } + } + &.@{prefix}-table--header-fixed { tbody tr:nth-of-type(even) { background-color: @table-highlight-bg-color; @@ -300,7 +307,7 @@ tbody { tr { - transition: background-color .3s ease-in; + transition: background-color @anim-duration-base linear; &:hover { background-color: @table-highlight-dark-bg-color; @@ -314,7 +321,7 @@ &--hoverable { tbody { tr { - transition: background-color .3s ease-in; + transition: background-color @anim-duration-base linear; &:hover { background-color: @table-highlight-dark-bg-color; @@ -450,22 +457,23 @@ // 复杂表头容器 .@{prefix}-table__cell--title { display: flex; + align-items: center; } &__column-controller { &-desc { - margin-bottom: 24px; + margin-bottom: @comp-margin-xxl; } &-block { - padding: 10px 24px; - border: 1px solid @gray-color-3; + padding: @comp-paddingTB-m @comp-paddingLR-l; + border: 1px solid @table-border-color; border-bottom: 1px solid @table-border-color; & + & { border-top: 0; - padding: 24px; - border-bottom: 1px solid @gray-color-3; + padding: @comp-paddingTB-l @comp-paddingLR-l; + border-bottom: 1px solid @table-border-color; } } @@ -497,7 +505,6 @@ * 有边框模式，只有一个图标时，图标靠近边框右侧；有两个图标时，排序图标靠近标题，过滤图标靠近边框右侧 */ .@{prefix}-table__cell--sort-trigger { - width: 20px; text-align: center; vertical-align: text-bottom; @@ -547,20 +554,21 @@ display: flex; align-items: center; justify-content: center; - height: 120px; + min-height: 120px; color: @table-color-empty; } .@{prefix}-table__filter-icon, .@{prefix}-table__sort-icon { - margin-left: 8px; + align-items: center; background-color: transparent; - display: inline-block; + display: inline-flex; cursor: pointer; vertical-align: text-bottom; + transition: @anim-duration-base linear; > svg { - margin-top: -4px; + margin-top: 0; } } @@ -571,6 +579,7 @@ &:hover { color: @table-icon-active-color; border-radius: @border-radius-circle; + transition: @anim-duration-base linear; } } @@ -579,18 +588,19 @@ &.@{prefix}-is-focus, &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } .@{prefix}-table__filter-pop { + .@{prefix}-popup__content { + padding: 0; + } .@{prefix}-table__filter-pop-content { - margin: -8px; - .@{prefix}-table__filter-pop-content-inner { - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; } - .@{prefix}-radio-group { display: block; height: auto; @@ -602,43 +612,51 @@ .@{prefix}-checkbox, .@{prefix}-radio { display: block; - line-height: 28px; + // line-height: 28px; + margin: @comp-margin-xs 0; } .@{prefix}-table__filter-pop-content-button { border-top: @border; - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; .t-button + .t-button { - margin-left: @spacer-2; + margin-left: @comp-margin-l; } } } } .@{prefix}-table__filter-pop-content-inner { - padding: 16px; > .@{prefix}-input__wrap { width: 200px; } } +.@{prefix}-table__filter-pop-content-inner { + > .@{prefix}-date-range-picker__panel { + margin: calc(0px - @comp-margin-l); + } +} + .@{prefix}-table__sort-icon--active { color: @table-icon-active-color; + transition: @anim-duration-base linear; } .@{prefix}-table__double-icons { - display: inline-grid; - height: @table-line-height; + display: flex; + flex-direction: column; + justify-content: center; .@{prefix}-table__sort-icon { - height: @table-line-height-half; + position: relative;; } .@{prefix}-table-sort-asc { - margin-top: -2px; + top: @table-double-sort-icon-space; } .@{prefix}-table-sort-desc { - margin-top: -6px; + bottom: @table-double-sort-icon-space; } } @@ -646,6 +664,9 @@ display: flex; align-items: center; pointer-events: all; + height: @table-icon-size; + width: @table-icon-size; + margin-left: @table-filter-icon-margin-left; } // 有边框模式，排序图标和过滤图标同时存在时，排序图标紧挨标题，过滤图标靠右侧边框 @@ -674,17 +695,22 @@ } .@{prefix}-table__expand-box { - padding: @table-td-padding-vertical-top @table-td-padding-horizontal - @table-td-padding-vertical-bottom @table-td-padding-horizontal; - display: inline-grid; - vertical-align: middle; + // padding: @table-td-padding-vertical-top @table-td-padding-horizontal + // @table-td-padding-vertical-bottom @table-td-padding-horizontal; + // display: inline-grid; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + // vertical-align: middle; color: @table-icon-default-color; cursor: pointer; - transition: all .2s ease 0s; - align-items: center; + transition: all @anim-duration-base @anim-time-fn-easing 0s; &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } @@ -706,16 +732,16 @@ } .@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] { - padding-left: 10px; + padding-left: @comp-margin-s; } .@{prefix}-table__filter--bottom-buttons { display: flex; justify-content: flex-end; - padding: 16px; + padding: @comp-paddingTB-l @comp-paddingLR-l; border-top: @border; > .@{prefix}-button + .@{prefix}-button { - margin-left: 8px; + margin-left: @comp-margin-s; } } @@ -730,7 +756,7 @@ align-items: center; justify-content: center; > .@{prefix}-button { - margin-left: 8px; + margin-left: @comp-margin-s; } } @@ -751,38 +777,32 @@ overflow: auto; } -// 可向左滚动时，左边显示固定列显示阴影，右边同理 .@{prefix}-table__content--scrollable-to-left { - .@{prefix}-table__cell--fixed-left-last::after { - border-right: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; + border-right: @table-fixed-cell-border-light; } } .@{prefix}-table__content--scrollable-to-right { - .@{prefix}-table__cell--fixed-right-first::after { - border-left: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; + border-left: @table-fixed-cell-border-light; } } -// .@{prefix}-table--affixed-header { -// .@{prefix}-table__content { -// th.@{prefix}-table__cell--fixed-left-last::after, -// th.@{prefix}-table__cell--fixed-right-first::after { -// box-shadow: none; -// } -// } -// } +// 可向左滚动时，左边显示固定列显示阴影，右边同理 +.@{prefix}-table--bordered { + &.@{prefix}-table__content--scrollable-to-left { + .@{prefix}-table__cell--fixed-left-last::after { + border-right: @table-fixed-cell-border; + } + } -// .@{prefix}-table--affixed-footer { -// .@{prefix}-table__content { -// th.@{prefix}-table__cell--fixed-left-last::after, -// th.@{prefix}-table__cell--fixed-right-first::after { -// box-shadow: none; -// } -// } -// } + &.@{prefix}-table__content--scrollable-to-right { + .@{prefix}-table__cell--fixed-right-first::after { + border-left: @table-fixed-cell-border; + } + } +} .@{prefix}-table__scroll-bar-divider { position: absolute; @@ -893,19 +913,20 @@ } .@{prefix}-table__tree-op-icon { - margin-right: @spacer; + margin-right: @comp-margin-s; cursor: pointer; display: inline-flex; vertical-align: -3px; &:hover { color: @table-icon-active-color; + transition: @anim-duration-base linear; } } .@{prefix}-table__tree-leaf-node .@{prefix}-table__tree-op-icon { min-width: 0; - margin-right: 2px; + margin-right: @comp-margin-xxs; } // 虚拟滚动游标 @@ -913,7 +934,7 @@ position: absolute; width: 1px; height: 1px; - transition: transform .2s; + transition: transform @anim-duration-base; } .@{prefix}-table__virtual-scroll-header { @@ -936,7 +957,7 @@ .@{prefix}-table__affixed-header-elm { overflow: auto; - transition: opacity .15s linear; + transition: opacity @anim-duration-base linear; opacity: 1; // 隐藏表头滚动条：为了 IE10以下的浏览器，暂时不能使用这种方式 // .hideScrollbar(); @@ -1008,13 +1029,14 @@ height: 100%; } +/** 默认最小高度限制为 Empty 高度加表头高度 */ .@{prefix}-table--loading .@{prefix}-table__content { - min-height: 200px; + min-height: 168px; } .@{prefix}-table__handle-draggable:hover, .@{prefix}-table--row-draggable tr, -.@{prefix}-table--col-draggable .@{prefix}-table__th-cell-inner { +.@{prefix}-table__th--drag-sort { cursor: move; } @@ -1024,10 +1046,19 @@ .@{prefix}-table:not(.@{prefix}-table--row-edit) { .@{prefix}-table__cell--editable { + min-height: 22px; + line-height: @table-line-height; cursor: pointer; .t-icon { margin-left: @table-td-editalbe-icon-margin; + font-size: @table-icon-size; + transition: @anim-duration-base linear; + } + + &:hover { + // color: @table-icon-active-color; + transition: @anim-duration-base linear; } } } @@ -1062,6 +1093,16 @@ border-top: @border; } } + + /** 表格左边有冻结列滚动时，去掉hover表头时多出的一个像素，避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ + &.@{prefix}-table__content--scrollable-to-left.@{prefix}-table__content--scrollable-to-right, + &.@{prefix}-table__content--scrollable-to-left { + thead.@{prefix}-table__header:hover { + .@{prefix}-table__cell--fixed-left-last:not(:last-child) { + border-right: 0; + } + } + } } /** 可选中行的场景下，将 Checkbox 和 Radio 铺满整个单元格，增大点击范围，方便用户选中 */ @@ -1073,8 +1114,8 @@ /** HTML 特性: th/td 必须设置为 0，他们的子元素才能设置为 100% */ height: 0; - .@{prefix}-radio__label, - .@{prefix}-checkbox__label { + .@{prefix}-radio__label:empty, + .@{prefix}-checkbox__label:empty { display: none; } } @@ -1104,5 +1145,12 @@ // 超出省略的文本，也需要跟着尺寸变化 .@{prefix}-table__ellipsis-content.@{prefix}-size-s .@{prefix}-popup__content { - font: @table-font-small; + font: @table-font; +} + +/** Chrome 兼容问题处理 */ +.@{prefix}-table--chrome.@{prefix}-table--multiple-header { + .@{prefix}-table__affixed-header-elm { + margin-top: 1px; + } } diff --git a/style/web/components/table/_var.less b/style/web/components/table/_var.less index eb02ff722c..ce2002016a 100644 --- a/style/web/components/table/_var.less +++ b/style/web/components/table/_var.less @@ -13,26 +13,36 @@ @table-icon-active-color: @brand-color; @table-filter-icon-default-color: @text-color-primary; @table-color-empty: @text-color-disabled; -@table-fixed-cell-border-color: @bg-color-component; +@table-fixed-cell-border-color: @component-border; @table-sort-bg-color: @bg-color-secondarycontainer; // Size -@table-line-height: 22px; -@table-line-height-half: 16px; +@table-line-height: @text-line-height-base; +@table-line-height-half: calc(@font-size-base + 2px); @table-font: @font-body-medium; -@table-font-small: @font-body-small; -@table-loading-size: 16px; -@table-padding-horizontal: @spacer-3; -@table-padding-normal: @spacer-2; -@table-padding-small: @spacer; -@table-padding-large: @spacer-3; +@table-loading-size: @table-icon-size; +@table-padding-horizontal: @comp-paddingLR-l; +@table-padding-normal: @comp-paddingTB-m @comp-paddingLR-l; +@table-padding-small: @comp-paddingTB-s @comp-paddingLR-s; +@table-padding-large: @comp-paddingTB-l @comp-paddingLR-xl; @table-td-padding-vertical-top: 13px; @table-td-padding-vertical-bottom: 11px; -@table-td-padding-horizontal: @spacer-3; -@table-td-editalbe-icon-margin: @spacer; +@table-td-padding-vertical: @comp-paddingTB-m; +@table-td-padding-horizontal: @comp-paddingLR-l; +@table-td-editalbe-icon-margin: @comp-margin-s; +@table-pagination-padding-normal: @comp-paddingTB-l @comp-paddingLR-l; // Safari 13-14 有 bug: box-shadow 第三个值 spread-radius 为负值，且相对于容器宽度占比较大时，会显示为黑块 // https://bugs.webkit.org/show_bug.cgi?id=209930 // https://medium.com/@andrea.verlicchi/inset-box-shadow-rendering-bug-on-safari-ios-13-4-6bf4256a1ee0 @table-fixed-cell-box-shadow-spread-radius: -10px; @table-fixed-cell-border-width: 4px; +@table-fixed-cell-border-width-light: 2px; +@table-fixed-cell-border: @table-fixed-cell-border-width solid @table-fixed-cell-border-color; +@table-fixed-cell-border-light: @table-fixed-cell-border-width-light solid @table-fixed-cell-border-color; + +@table-controller-trigger-padding: @comp-paddingTB-l 0; +@table-default-pagination-padding: @comp-paddingTB-l @comp-paddingLR-l; +@table-icon-size: @font-size-l; +@table-double-sort-icon-space: @comp-margin-xxs; +@table-filter-icon-margin-left: @comp-margin-s; diff --git a/style/web/components/table/index.html b/style/web/components/table/index.html deleted file mode 100644 index cfb6b9734b..0000000000 --- a/style/web/components/table/index.html +++ /dev/null @@ -1,1998 +0,0 @@ - - - - - -Table - - - - - - - -
    - -
    -

    Table

    -

    开发者：cache

    -

    创建日期：2020-06-07

    -

    说明：TDesign Table 组件样式

    -
    - - -
    -

    1.1.1 基础表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.2.1 边框线表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.2.2 斑马线表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.1 表头固定表格

    -
    -
    -
    -
    -
    - - - - - - - - -
    项目名称管理员操作
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -

    注: header 和 body 用两个 table 实现的，要注意列宽统一的问题

    -
    -
    - -
    -

    1.3.2 列固定表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.3 多列固定表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.3.4 表头固定和列固定表格

    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员操作
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    TDesignadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -

    注: 表头固定和列固定同时启用时，header 和 body 是用两个 table 实现的。并且 table 部分配置了 overflow: hidden; 隐藏横向滚动条，横向滚动 body 是需要同步 header 的滚动位置

    -
    -
    - -
    -

    1.4.1 展开收起表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    自定义展开行内容
    -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: icon 待补齐

    -
    -
    - -
    -

    1.5.1 行列合并表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesign - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesign - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.6.1 可调整列宽表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    - 项目名称 - - - 管理员 - - 操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.7.1 多级表头表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员管理员操作
    项目名称管理员管理员操作
    TDesignadminadminadmin - 管理 - 删除 -
    TDesignadminadminadmin - 管理 - 删除 -
    TDesignadminadminadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    1.8.1 可拖动排序表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: icon 待补齐，列拖拽 @todo

    -
    -
    - -
    -

    1.9.1 可选择数据行 - 单选

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    -
    -

    1.9.2 可选择数据行 - 多选

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - 项目名称管理员操作
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    - - TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.1 紧凑型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.2 标准型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    2.1.3 宽松型表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.1.1 数据行 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    -
    -

    3.1.1.2 斑马线表格数据行 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.1.3 数据列突出显示

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -

    注: 需实现动态交互效果

    -
    -
    - -
    -

    3.1.2 表格常见元素 hover 态

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    项目名称
    -
    - -
    -
    -
    - -
    -
    -     		管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.1.3 数据行不可编辑

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.3.1 文本顶端对齐

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    -

    TDesign

    -

    TDesign

    -     		admin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    -
    - -
    -

    3.4.1 刷新加载

    -
    -
    -
    -
    - - - - - - - - -
    项目名称管理员操作
    -
    -
    -
    -

    正在加载中，请稍候

    -
    -
    -
    -
    -
    -
    -
    -
    -

    3.4.2 异步加载

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    - - 正在加载中，请稍候 -
    -
    -
    -
    -
    -
    -
    - -
    -

    带分页表格

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    项目名称管理员操作
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    TDesignadmin - 管理 - 删除 -
    -
    -
    -
    -
    共 658 项数据
    -
    - -
    -
      -
    • 1
      • -
      • -
    • 50
      • -
    • 51
      • -
    • 52
      • -
    • 53
      • -
    • 54
      • -
      • -
    • 90
      • -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - \ No newline at end of file diff --git a/style/web/components/tabs/_index.less b/style/web/components/tabs/_index.less index cf267cf94e..e7bc867b35 100644 --- a/style/web/components/tabs/_index.less +++ b/style/web/components/tabs/_index.less @@ -14,10 +14,6 @@ overflow: hidden; background-color: @tab-default-bg; - .t-icon { - font-size: @tab-icon-size; - } - &__header { &.@{prefix}-is-left { float: left; @@ -26,6 +22,10 @@ &.@{prefix}-is-right { float: right; } + + .t-icon { + font-size: @tab-icon-size; + } } &__nav { @@ -231,11 +231,12 @@ transition: @tab-nav-item-transition; &-wrapper { - display: block; + display: flex; + align-items: center; + height: @tab-nav-item-wrapper-height; padding: @tab-nav-item-wrapper-padding; margin-left: @tab-nav-item-margin-left; margin-right: @tab-nav-item-margin-right; - line-height: @tab-nav-item-line-height; border-radius: @border-radius-default; transition: @tab-nav-item-transition; @@ -246,6 +247,7 @@ font: @tab-nav-item-font; .@{prefix}-tabs__nav-item-wrapper { + height: @tab-nav-item-wrapper-height-large; padding: @tab-nav-item-wrapper-padding-large; } } diff --git a/style/web/components/tabs/_mixin.less b/style/web/components/tabs/_mixin.less index e7f5cabb18..9859aa43b9 100644 --- a/style/web/components/tabs/_mixin.less +++ b/style/web/components/tabs/_mixin.less @@ -7,5 +7,5 @@ right: @right; bottom: @bottom; left: @left; - background-color: @tab-card-bg; + background-color: @tab-card-stroke; } diff --git a/style/web/components/tabs/_var.less b/style/web/components/tabs/_var.less index 242c5dc3f6..58bd6f530c 100644 --- a/style/web/components/tabs/_var.less +++ b/style/web/components/tabs/_var.less @@ -45,23 +45,24 @@ @tab-card-stroke: @component-stroke; // 其他 -@tab-height-middle: 48px; -@tab-height-large: 64px; +@tab-height-middle: @comp-size-xxl; +@tab-height-large: @comp-size-xxxxl; +@tab-nav-item-wrapper-height: @comp-size-m; +@tab-nav-item-wrapper-height-large: @comp-size-xxl; @tab-btn-width: 40px; -@tab-nav-item-margin-left: 8px; -@tab-nav-item-margin-right: 8px; -@tab-nav-item-wrapper-padding: 5px 8px; -@tab-nav-item-wrapper-padding-large: 9px 12px; -@tab-btn-remove-btn-margin-left: 8px; -@tab-nav-card-nav-item-padding-right: 16px; -@tab-nav-card-nav-item-padding-left: 16px; -@tab-nav-card-nav-item-padding-right-large: 24px; -@tab-nav-card-nav-item-padding-left-large: 24px; +@tab-nav-item-margin-left: @comp-margin-s; +@tab-nav-item-margin-right: @comp-margin-s; +@tab-nav-item-wrapper-padding: 0 @comp-paddingLR-s; +@tab-nav-item-wrapper-padding-large: 0 @comp-paddingLR-m; +@tab-btn-remove-btn-margin-left: @comp-margin-s; +@tab-nav-card-nav-item-padding-right: @comp-paddingLR-l; +@tab-nav-card-nav-item-padding-left: @comp-paddingLR-l; +@tab-nav-card-nav-item-padding-right-large: @comp-paddingLR-xl; +@tab-nav-card-nav-item-padding-left-large: @comp-paddingLR-xl; // 尺寸 @tab-icon-size: @font-size-l; // icon尺寸 @tab-nav-item-font: @font-body-large; // tab文本字体大小 -@tab-nav-item-line-height: 22px; // tab文字行高 // 圆角&边框 @tab-btn-border: 1px solid @tab-card-stroke; // 按钮边框 diff --git a/style/web/components/tabs/index.html b/style/web/components/tabs/index.html deleted file mode 100644 index 86ad0cf786..0000000000 --- a/style/web/components/tabs/index.html +++ /dev/null @@ -1,565 +0,0 @@ - - - - - - tabs - - - - - - - -
    - - -
    -

    Tabs

    -

    开发者：bombren

    -

    创建日期：2020-06-08

    -

    说明：TDesign tabs 组件的基本样式

    -
    - - - - -
    -

    默认

    - -

    demo: 常规

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    -
    - - -
    -

    状态

    - -

    demo: 选项在底部

    -
    - -
    -
    - -
    -

    bottom选项卡2的内容

    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    - -

    demo: 选项在左侧

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    left选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 选项在右侧

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    right选项卡2的内容

    -
    - - -
    -
    - -
    -
    - - -
    -

    类型

    - -

    demo: 卡片类型，禁用

    -
    - -
    -
    -
    -
    -
    -
    - -
    card选项卡一
    -
    card选项卡二
    -
    card选项卡三
    -
    card选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    card选项卡2的内容，选项卡4禁用

    -
    - - -
    -
    - -
    - -

    demo: icon选项卡

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 常规禁用

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡3禁用

    -
    - - -
    -
    - -
    - -

    demo: 卡片型，带增加按钮

    -
    - -
    -
    -
    - + -
    - -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 卡片型，带左右scroll按钮

    -
    - -
    -
    -
    - -
    - ← - → -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: 常规，带左右scroll按钮

    -
    - -
    -
    -
    - -
    - ← - → -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo：卡片型，同时有add和scroll按钮

    -
    - -
    -
    -
    - + -
    - ← - → -
    -
    - -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    选项卡五
    -
    选项卡六
    -
    选项卡七
    -
    选项卡八
    -
    选项卡九
    -
    -
    -
    -
    -
    -
    - -
    -

    选项卡2的内容

    -
    - - -
    -
    - -
    - -
    - - -
    -

    尺寸(如果有)

    - -

    demo: middle尺寸

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    middle size选项卡2的内容

    -
    - - -
    -
    - -
    - -

    demo: large尺寸

    -
    - -
    -
    -
    -
    -
    -
    -
    -
    选项卡一
    -
    选项卡二
    -
    选项卡三
    -
    选项卡四
    -
    -
    -
    -
    -
    -
    - -
    -

    large size选项卡2的内容

    -
    - - -
    -
    - -
    -
    -
    - - - diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less index 53c18bc1d1..8a586f3824 100644 --- a/style/web/components/tag-input/_index.less +++ b/style/web/components/tag-input/_index.less @@ -8,17 +8,43 @@ .@{prefix}-tag-input { .reset; + .@{prefix}-tag { - margin-right: @spacer-s; - animation: t-fade-in .1s ease-in-out; + animation: t-fade-in @anim-duration-base ease-in-out; + margin: @comp-margin-xxs @comp-margin-xs @comp-margin-xxs 0; + } + + .@{prefix}-tag-input__drag_wrapper + .@{prefix}-tag-input__drag_wrapper { + margin-left: @comp-margin-xs; } .@{prefix}-input { - padding-left: @spacer-s; overflow: hidden; + min-height: @tag-input-height-default; + height: fit-content; + padding: 1px @comp-paddingLR-s 1px @comp-margin-xs; + .t-input-suffix-icon(@comp-margin-s); &.@{prefix}-size-s { - padding-left: @spacer-s * .5; + padding: 0 @comp-paddingLR-xxs 0 @comp-margin-xs; + min-height: @tag-input-height-s; + .@{prefix}-tag { + margin: 1px @comp-margin-xs 1px 0; + } + } + + &.@{prefix}-size-l { + min-height: @tag-input-height-l; + padding-right: @comp-paddingLR-m; + .t-input-suffix-icon(@comp-margin-m); + } + } + + /** 设计稿：未填充标签场景，边距和已填充不同 */ + &.@{prefix}-is-empty { + + .@{prefix}-input__inner { + margin-left: @comp-margin-xs; } } @@ -29,13 +55,23 @@ } } - .@{prefix}-tag-input__prefix, - .@{prefix}-input__prefix:not(:empty) { - margin-left: @spacer-s; + .@{prefix}-tag-input__prefix { + margin-left: @comp-margin-xs; } - .@{prefix}-input--auto-width { - padding-right: @spacer-s; + .@{prefix}-input .@{prefix}-input__prefix:not(:empty) { + margin-right: 0; + } + + &.@{prefix}-input--auto-width { + + .@{prefix}-input.@{prefix}-input--focused { + padding-right: @tag-input-clear-icon-padding-m; + } + + .@{prefix}-input__prefix { + white-space: nowrap; + } } } @@ -44,12 +80,10 @@ } // 标签数量超出时，换行显示 -.@{prefix}-tag-input--break-line { +.@{prefix}-tag-input--break-line:not(.@{prefix}-is-empty) { .@{prefix}-input { display: block; - height: auto; - padding-right: @spacer-3; &.@{prefix}-input--prefix > .@{prefix}-input__prefix { display: inline; @@ -58,14 +92,38 @@ .@{prefix}-input__suffix-icon { position: absolute; - right: @spacer; bottom: 0; } } + + .@{prefix}-tag-input__prefix { + vertical-align: text-top; + } } .@{prefix}-tag-input__prefix { width: max-content; display: inline-block; - margin-right: @spacer; + margin-right: @comp-margin-s; +} + +/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ +.@{prefix}-tag-input--break-line.@{prefix}-tag-input--with-tag:not(.@{prefix}-input--auto-width), +.@{prefix}-tag-input.@{prefix}-input--auto-width:hover { + .@{prefix}-input { + padding-right: @tag-input-clear-icon-padding-m; + } + + .@{prefix}-size-l { + .@{prefix}-input { + padding-right: @tag-input-clear-icon-padding-l; + } + } +} + +/** auto-width 模式，左右边距相同 */ +.@{prefix}-tag-input.@{prefix}-input--auto-width { + .@{prefix}-input { + padding-right: 0; + } } diff --git a/style/web/components/tag-input/_var.less b/style/web/components/tag-input/_var.less index e69de29bb2..4afeff028b 100644 --- a/style/web/components/tag-input/_var.less +++ b/style/web/components/tag-input/_var.less @@ -0,0 +1,14 @@ +@tag-input-height-s: @comp-size-xs; +@tag-input-height-default: @comp-size-m; +@tag-input-height-l: @comp-size-xl; + +@tag-input-padding-default: calc(@comp-margin-xs - 1px); + +@tag-input-clear-icon-padding-m: calc(@comp-paddingLR-xxl + @comp-paddingLR-xxs); +@tag-input-clear-icon-padding-l: calc(@comp-paddingLR-xxl + @comp-paddingLR-xs); + +.t-input-suffix-icon(@distance) { + .@{prefix}-input__suffix-icon { + right: @distance; + } +} diff --git a/style/web/components/tag-input/index.html b/style/web/components/tag-input/index.html deleted file mode 100644 index 2decbfab60..0000000000 --- a/style/web/components/tag-input/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：chaishi

    -

    创建日期：2022-01-01

    -

    说明：TDesign TagInput

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - -
    - - - diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less index b2977ee0d3..f93c7e0d48 100644 --- a/style/web/components/tag/_index.less +++ b/style/web/components/tag/_index.less @@ -23,7 +23,7 @@ white-space: nowrap; .t-icon { - margin-right: 4px; + margin-right: @tag-icon-margin-right; width: @tag-icon-size; height: @tag-icon-size; flex-shrink: 0; @@ -31,16 +31,12 @@ .@{prefix}-tag__icon-close { margin-right: 0; - margin-left: 8px; + margin-left: @tag-close-icon-margin-right; font: @tag-large-font; cursor: pointer; transition: color @anim-duration-base @anim-time-fn-easing; } - ::selection { - background: transparent; - } - &--default { color: @tag-default-text-color; background-color: @tag-default-background-color; @@ -226,10 +222,10 @@ &--dark&:not(.@{prefix}-tag--default) { .@{prefix}-tag__icon-close { - fill: @tag-close-icon-color--dark; + color: @tag-close-icon-color--dark; &:hover { - fill: @tag-close-icon-hover-color--dark; + color: @tag-close-icon-hover-color--dark; } } } diff --git a/style/web/components/tag/_var.less b/style/web/components/tag/_var.less index 49d474dd2f..5e5437de08 100644 --- a/style/web/components/tag/_var.less +++ b/style/web/components/tag/_var.less @@ -23,14 +23,14 @@ @tag-danger-color: @error-color; // light color -@tag-default-color-light: @gray-color-1; +@tag-default-color-light: @bg-color-secondarycontainer; @tag-primary-color-light: @brand-color-light; -@tag-success-color-light: @success-color-1; -@tag-warning-color-light: @warning-color-1; -@tag-error-color-light: @error-color-1; +@tag-success-color-light: @success-color-light; +@tag-warning-color-light: @warning-color-light; +@tag-error-color-light: @error-color-light; // border -@tag-outline-default-border-color: @border-level-2-color; +@tag-outline-default-border-color: @component-border; @tag-outline-primary-border-color: @tag-primary-color; @tag-outline-success-border-color: @tag-success-color; @tag-outline-warning-border-color: @tag-warning-color; @@ -42,9 +42,9 @@ @tag-large-font: @font-body-medium; // padding -@tag-small-padding: 0px @spacer-s; -@tag-medium-padding: 0px @spacer; -@tag-large-padding: 0px 12px; +@tag-small-padding: 0px @comp-paddingLR-xs; +@tag-medium-padding: 0px @comp-paddingLR-s; +@tag-large-padding: 0px @comp-paddingLR-m; // text color @tag-text-color: @text-color-anti; @@ -58,19 +58,23 @@ @tag-default-border-width: 1px; // height -@tag-height-small: 22px; -@tag-height-medium: 24px; -@tag-height-large: 32px; +@tag-height-small: @comp-size-xxs; +@tag-height-medium: @comp-size-xs; +@tag-height-large: @comp-size-m; // icon -@tag-icon-size: 16px; +@tag-icon-size: calc(@font-size-base + 2px); @tag-close-icon-color: @text-color-placeholder; @tag-close-icon-hover-color: @text-color-primary; -@tag-close-icon-color--dark: @font-white-1; -@tag-close-icon-hover-color--dark: @font-white-2; +@tag-close-icon-color--dark: @font-white-2; +@tag-close-icon-hover-color--dark: @font-white-1; // link @link-tag-hover-bg: @bg-color-component-hover; @link-tag-hover-color: @brand-color; @link-tag-active-bg: @bg-color-component-active; @link-tag-active-color: @brand-color-active; + +// margin +@tag-icon-margin-right: @comp-margin-xs; +@tag-close-icon-margin-right: @comp-margin-s; diff --git a/style/web/components/tag/index.html b/style/web/components/tag/index.html deleted file mode 100644 index c48e3fc9a2..0000000000 --- a/style/web/components/tag/index.html +++ /dev/null @@ -1,313 +0,0 @@ - - - - - - Tag - - - - - - - - - -
    - - -
    -

    Tag

    -

    开发者：angelzou

    -

    创建日期：2020-05-24

    -

    说明：TDesign Tag

    -
    - - - - - -
    -

    默认

    - - -
    - - - 默认 - - -
    -
    - - -
    -

    主题

    - - -
    - - - - -
    默认（大）： - 默认 -
    -
    朴素（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    -
    浅色（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    -
    深色（大）： - 灰色 - 蓝色 - 橙色 - 绿色 - 红色 -
    - - - -
    -
    - - -
    -

    可删除标签

    -
    - - -
    默认： - 标签一 - - -
    -
    浅色： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    -
    深色： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    -
    朴素： - 标签二 - - - 标签三 - - - 标签四 - - - 标签五 - - - 标签六 - - -
    - - -
    -
    - - -
    -

    可选标签（只针对于默认主题）

    -
    - - - 未选一 - 未选一 - 选中一 - - -
    -
    -
    -

    失效标签（只针对于默认主题，不可点击）

    -
    - - - 失效标签 - - 失效标签 - - - - -
    -
    - -
    -

    超长省略文本标签

    -
    - - - - 超长省略文本标签啦啦啦啦 - - - - 超长省略文本标签啦啦啦啦 - - - 超长省略文本标签啦啦啦啦 - - - -
    -
    - -
    -

    图标标签

    -
    - -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    -
    - - - 标签一 - - - - 标签一 - - - - 标签一 - -
    - - -
    -
    - - -
    -

    尺寸

    -
    - - -
    - 标签一 小 - 标签一 中 - 标签一 大 -
    -
    - 标签一 小 - 标签一 中 - 标签一 大 -
    - -
    -
    - -
    -

    形状

    -
    - - -
    正常： - 标签一 - 标签一 - 标签一 -
    -
    圆角： - 标签一 - 标签一 - 标签一 -
    -
    标记： - 标签一 - 标签一 - 标签一 -
    - -
    -
    - -
    - - - diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less index 7873c4d923..819d946e78 100644 --- a/style/web/components/textarea/_index.less +++ b/style/web/components/textarea/_index.less @@ -1,5 +1,4 @@ // 组件允许单个组件打包，因此默认引入公共基础样式 - @import "../../base.less"; @import "./_var.less"; @@ -9,6 +8,7 @@ @import "../../mixins/_reset.less"; .@{prefix}-textarea { + .reset; position: relative; @@ -48,13 +48,19 @@ .textarea-status(error); } + &__info_wrapper { + display: flex; + column-gap: @textarea-tips-gap; + justify-content: space-between; + } + + &__info_wrapper_align { + justify-content: end; + } + &__limit { - position: absolute; - bottom: @textarea-limit-position-bottom; - right: @textarea-limit-position-right; - font: @textarea-font; + font: @textarea-tips-font; color: @textarea-limit-color; - background: @textarea-bg-color-default; } .@{prefix}-is-disabled { diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less index 40a2d8786e..23ccb2da34 100644 --- a/style/web/components/textarea/_var.less +++ b/style/web/components/textarea/_var.less @@ -31,17 +31,16 @@ @textarea-text-color-tips: @text-color-placeholder; // 尺寸 -@textarea-height: 56px; -@textarea-tips-min-height: 24px; +@textarea-height: @comp-size-xxxl; +@textarea-tips-min-height: @comp-size-xs; // 字体 @textarea-font: @font-body-medium; @textarea-tips-font: @font-body-small; // 间距 -@textarea-padding: 5px @spacer; -@textarea-limit-position-right: @spacer-2; -@textarea-limit-position-bottom: @spacer-1; +@textarea-padding: calc(calc(@comp-size-m - @text-line-height-base) / 2) @comp-paddingLR-s; +@textarea-tips-gap: @comp-margin-s; // 边框 @textarea-border-color: @border-level-2-color; diff --git a/style/web/components/textarea/index.html b/style/web/components/textarea/index.html deleted file mode 100644 index cb115a9cd0..0000000000 --- a/style/web/components/textarea/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - textarea - - - - - - - -
    - - -
    -

    textarea

    -

    开发者：xiarongwu

    -

    创建日期：2021-02-20

    -

    说明：TDesign textarea 组件的基本样式

    -
    - - - - - -
    -

    默认

    - - -
    - - - - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - -
    - - - -
    -
    - - -
    -

    类型

    -
    - - - - - -
    -
    - - - - - -
    -
    - - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - diff --git a/style/web/components/time-picker/_index.less b/style/web/components/time-picker/_index.less index ef84129d01..8d50f53a9b 100644 --- a/style/web/components/time-picker/_index.less +++ b/style/web/components/time-picker/_index.less @@ -49,73 +49,6 @@ cursor: pointer; } } - - &__input { - position: absolute; - top: 0; - height: 100%; - padding: @time-picker-input-padding; - z-index: 1; - border-radius: @border-radius-default; - transition: border-color .2s cubic-bezier(.645, .045, .355, 1); - font: @time-picker-font; - .flex-center; - - &:hover { - border-color: @time-picker-input-border-color-hover; - } - - &-placeholder { - margin-left: @time-picker-input-placeholder-margin-left; - color: @time-picker-panel-input-placeholder-color; - } - - &-item { - height: 22px; - - &-disabled { - color: @time-picker-input-color-disabled; - } - - &-input { - margin: @time-picker-input-item-input-margin; - color: inherit; - background: none; - cursor: pointer; - height: inherit; - outline: none; - width: @time-picker-input-item-input-width; - text-align: center; - border-radius: @time-picker-input-item-input-radius; - border: 0; - line-height: 22px; - - &-meridiem { - width: @time-picker-input-item-input-meridiem-width; - } - - &:focus { - border-color: @bg-color-page; - background-color: @bg-color-container-hover; - } - } - } - } - - &__input-disabled { - border: @time-picker-input-border-disabled; - background-color: @bg-color-container-hover; - - &-placeholder { - color: @text-color-disabled; - } - - &-item { - &-input { - pointer-events: none; - } - } - } } .@{prefix}-time-range-picker { @@ -138,7 +71,7 @@ height: @time-picker-panel-body-height; position: relative; user-select: none; - margin: @time-picker-panel-body-margin; + // margin: @time-picker-panel-body-margin; &-active-mask { position: absolute; @@ -150,7 +83,7 @@ > div { flex: 1; transform: translateY( - -((@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) /2) + calc(0px - (calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) /2)) ); height: @time-picker-panel-item-height; background-color: @time-picker-panel-item-background-color-current; @@ -235,7 +168,6 @@ &-footer { width: 100%; - height: @time-picker-panel-footer-height; display: flex; justify-content: space-between; flex-direction: row-reverse; // 确定按钮一定有 此刻按钮不一定有 @@ -244,6 +176,6 @@ position: relative; border-top: 1px solid @border-level-1-color; box-sizing: border-box; - padding: @time-picker-panel-section-padding; + padding: @time-picker-panel-footer-padding; } } diff --git a/style/web/components/time-picker/_var.less b/style/web/components/time-picker/_var.less index c8599a8687..553155db49 100644 --- a/style/web/components/time-picker/_var.less +++ b/style/web/components/time-picker/_var.less @@ -4,18 +4,16 @@ @time-picker-width: 240px; // time-picker的宽度 @time-picker-panel-width: 280px; // time-picker的panel宽度 -@time-picker-input-height: 24px; -@time-picker-container-top: (@time-picker-input-height + 2px); +@time-picker-input-height: @comp-size-xs; +@time-picker-container-top: calc(@time-picker-input-height + 2px); @time-picker-font: @font-body-medium; -@time-picker-panel-body-height: 216px; -@time-picker-panel-item-height: 24px; +@time-picker-panel-body-height: calc(calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) * 7 + @time-picker-panel-item-margin-vertical); +@time-picker-panel-item-height: @comp-size-xs; @time-picker-input-item-input-width: 28px; @time-picker-input-item-input-meridiem-width: 36px; -@time-picker-panel-footer-height: 48px; - // color @time-picker-background-color-common: transparent; @time-picker-input-border-color-hover: @brand-color; @@ -37,21 +35,13 @@ @time-picker-input-border-active: 1px solid @brand-color; @time-picker-input-border-disabled: 1px solid @border-level-2-color; -@time-picker-input-padding: 0 @spacer 0 (@spacer / 2); -@time-picker-input-placeholder-margin-left: @spacer; -@time-picker-input-item-input-margin: 0 2px; -@time-picker-input-item-input-radius: @border-radius-default; - -@time-picker-panel-container-margin: @spacer 0; -@time-picker-panel-body-margin: @spacer-2 0; -@time-picker-panel-section-padding: 0 (@spacer-3 / 2); +@time-picker-panel-section-padding: @pop-padding-xl calc(@pop-padding-xl - @time-picker-panel-item-margin-horizontal); +@time-picker-panel-footer-padding: @pop-padding-xl; @time-picker-panel-item-border-radius: @border-radius-default; -@time-picker-panel-item-margin-vertical: 6px; // 设计如此 -@time-picker-panel-item-margin-horizontal: (@spacer / 2); +@time-picker-panel-item-margin-vertical: @size-3; +@time-picker-panel-item-margin-horizontal: @comp-margin-xs; @time-picker-panel-item-margin: @time-picker-panel-item-margin-vertical @time-picker-panel-item-margin-horizontal; -@time-picker-panel-section-second-body-margin-left: @spacer-3; -@time-picker-panel-footer-padding: 0 @spacer-3; //shadow @time-picker-input-shadow-active: 0 0 2px 2px @brand-color-focus; diff --git a/style/web/components/time-picker/index.html b/style/web/components/time-picker/index.html deleted file mode 100644 index dabd6970bb..0000000000 --- a/style/web/components/time-picker/index.html +++ /dev/null @@ -1,281 +0,0 @@ - - - - - - TimePicker - - - - - - - - - -
    - - -
    -

    TimePicker 时间选择器

    -

    开发者：yorickili

    -

    创建日期：2020-11-11

    -

    说明：TDesign TimePicker 组件的基本样式

    -
    - - - - -
    -

    时分秒

    - -
    - - -
    -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    - - -
    -
    - - -
    -

    时分

    - - -
    - - - -
    -
    -
    - 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    - - - -
    -
    - - -
    -

    时间区间

    -
    - - -
    -
    -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    - -
    -
    至
    -
    - -
    -
    - 00 : 00 : 00 -
    -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
      -
    • 00
      • -
    • 01
      • -
    • 02
      • -
    • 03
      • -
    • 04
      • -
    • 05
      • -
    • 06
      • -
    • 07
      • -
    • 08
      • -
    • 09
      • -
    • 10
      • -
    • 10
      • -
    • 11
      • -
    -
    -
    -
    -
    -
    确定
    -
    -
    - - -
    -
    - -
    - - - diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less index fc592a4f66..6ecb3dcb6d 100644 --- a/style/web/components/timeline/_index.less +++ b/style/web/components/timeline/_index.less @@ -11,7 +11,7 @@ flex-direction: column; &-item { - min-height: 68px; + min-height: 72px; display: flex; flex-direction: row; position: relative; @@ -21,17 +21,18 @@ } &__wrapper { - width: 8px; + width: @timeline-wrapper-width-size; position: relative; .@{prefix}-timeline-item { &__dot { + box-sizing: unset; position: absolute; - width: 4px; - height: 4px; + width: @timeline-wrapper-item-dot-size; + height: @timeline-wrapper-item-dot-size; border: 2px solid transparent; border-radius: 50%; - top: 8px; + top: @timeline-wrapper-top; &--primary { border-color: @timeline-primary-color; @@ -72,10 +73,10 @@ position: absolute; border-left: 2px solid transparent; left: 50%; - height: calc(100% - 32px); + height: @timeline-wrapper-tail-height; bottom: 0; transform: translateX(-50%); - padding-bottom: 8px; + padding-bottom: @timeline-wrapper-tail-padding-bottom; border-color: @timeline-default-color; box-sizing: border-box; @@ -89,9 +90,15 @@ } } + &__label { + color: @timeline-label-font-color; + font-size: @timeline-label-font; + } + &__content { flex: 1; - padding-left: 16px; + padding-left: @timeline-content-padding-left; + font-size: @timeline-content-font; } &--last { @@ -138,7 +145,7 @@ &__content { text-align: right; padding-left: 0; - padding-right: 16px; + padding-right: @timeline-content-padding-right; } } } @@ -146,15 +153,15 @@ &-alternate { .@{prefix}-timeline-item { &-left { - margin-left: calc(50% - 4px); + margin-left: @timeline-item-alternate-margin; } &-right { text-align: right; flex-direction: row-reverse; - margin-right: calc(50% - 4px); + margin-right: @timeline-item-alternate-margin; .@{prefix}-timeline-item__content { - padding-right: 16px; + padding-right: @timeline-content-padding-right; padding-left: 0; } } @@ -175,7 +182,7 @@ left: 0; transform: translateX(-100%); text-align: right; - padding-right: 16px; + padding-right: @timeline-content-padding-right; } } } @@ -188,7 +195,7 @@ right: 0; transform: translateX(100%); text-align: left; - padding-left: 16px; + padding-left: @timeline-content-padding-left; } } } @@ -204,18 +211,21 @@ .@{prefix}-timeline { &-item { flex-direction: column; - padding-right: 8px; - min-width: 150px; + padding-right: @timeline-horizontal-item-padding; + min-width: 160px; &__wrapper { width: 100%; - height: 8px; + height: @timeline-horizontal-wrapper-height-size; .@{prefix}-timeline-item { &__dot { position: absolute; top: 50%; transform: translateY(-50%); left: unset; + width: @timeline-horizontal-wrapper-item-dot-size; + height: @timeline-horizontal-wrapper-item-dot-size; + border-radius: 50%; &--custom { position: relative; @@ -232,10 +242,10 @@ } &__tail { - left: 16px; + left: @timeline-horizontal-wrapper-left; top: 50%; transform: translateY(-50%); - width: calc(100% - 16px); + width: @timeline-horizontal-wrapper-tail-width-size; border: 0; border-top: 2px solid transparent; padding-bottom: 0; @@ -253,13 +263,19 @@ &__content { padding-left: unset; - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; flex: unset; } } } } + &-vertical { + .@{prefix}-timeline-item__content { + padding-bottom: @timeline-content-padding-bottom; + } + } + &-label&-horizontal&-top { .@{prefix}-timeline-item { &__label { @@ -267,7 +283,7 @@ top: 0; width: 100%; transform: translateY(-100%); - padding-bottom: 16px; + padding-bottom: 0; } } } @@ -283,7 +299,7 @@ &__label { &--alternate { - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; bottom: 0; width: 100%; transform: translateY(100%); @@ -292,7 +308,7 @@ &__content { padding-top: 0; - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; } } } @@ -306,7 +322,7 @@ top: 0; width: 100%; transform: translateY(-100%); - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; } } } @@ -315,11 +331,11 @@ &-bottom { flex-direction: column-reverse; position: relative; - transform: translateY(calc(-100% + 8px)); + transform: translateY(calc(-100% + @timeline-horizontal-wrapper-height-size)); .@{prefix}-timeline-item { &__content { - padding-bottom: 16px; + padding-bottom: @timeline-horizontal-content-padding; padding-top: unset; } @@ -327,7 +343,7 @@ &--alternate { bottom: 0; transform: translateY(100%); - padding-top: 16px; + padding-top: @timeline-horizontal-content-padding; } } } diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less index 0f696f2f07..53fd915636 100644 --- a/style/web/components/timeline/_var.less +++ b/style/web/components/timeline/_var.less @@ -1,10 +1,28 @@ @timeline-primary-color: @brand-color; -@timeline-default-color: @gray-color-4; +@timeline-default-color: @component-border; @timeline-warning-color: @warning-color; @timeline-error-color: @error-color; @timeline-success-color: @success-color; -@timeline-space-line: 8px; -@timeline-border-width: 2px; +@timeline-content-font: @font-size-l; -@timeline-line-height: 1.7143; +@timeline-label-font: @font-size-base; +@timeline-label-font-color: @text-color-secondary; + +// margin & padding +@timeline-content-padding-left: @comp-margin-l; +@timeline-content-padding-right: @comp-margin-l; +@timeline-content-padding-bottom: @comp-margin-l; +@timeline-wrapper-width-size: 8px; //not suggested modified +@timeline-wrapper-top: 8px; +@timeline-wrapper-item-dot-size: (@timeline-wrapper-width-size - 4px); +@timeline-wrapper-tail-padding-bottom: @comp-size-s; +@timeline-wrapper-tail-height: calc(100% - (@timeline-wrapper-width-size * 2 + @timeline-wrapper-top)); +@timeline-item-alternate-margin: calc(50% - (@timeline-wrapper-width-size / 2)); + +@timeline-horizontal-wrapper-height-size: 8px; //not suggested modified +@timeline-horizontal-item-padding: @timeline-horizontal-wrapper-height-size; +@timeline-horizontal-wrapper-left: calc(@timeline-horizontal-wrapper-height-size + @comp-margin-s); +@timeline-horizontal-wrapper-tail-width-size: calc(100% - @timeline-horizontal-wrapper-left); +@timeline-horizontal-wrapper-item-dot-size: (@timeline-horizontal-wrapper-height-size - 4px); +@timeline-horizontal-content-padding: @comp-margin-l; diff --git a/style/web/components/timeline/index.html b/style/web/components/timeline/index.html deleted file mode 100644 index d679137e4b..0000000000 --- a/style/web/components/timeline/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Timeline - - - - - - - - -
    - -
    -

    Timeline

    -

    开发者：flyge(葛凡飞)

    -

    创建日期：2020-06-01

    -

    说明：Select组件样式示例

    -
    - - - - -
    -

    默认

    - - -
    -
    -
    - - diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index 3caa723053..ac98ecf869 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -23,6 +23,23 @@ .@{prefix}-popup__content { color: @tooltip-text-color; background: @tooltip-bg; + box-shadow: inset 0 .5px 0 @gray-color-9, inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9; + } + + &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before { + box-shadow: inset -.5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9; + } + + &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9; + } + + &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before { + box-shadow: inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9; + } + + &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before { + box-shadow: inset .5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9; } } @@ -56,7 +73,6 @@ .@{prefix}-popup__arrow { background: inherit; - width: auto; height: auto; &::before { @@ -71,15 +87,3 @@ } } } - -.@{prefix}-popup[data-popper-placement^="top"].@{prefix}-tooltip .@{prefix}-popup__arrow { - bottom: @tooltip-arrow-position; -} - -.@{prefix}-popup[data-popper-placement^="left"].@{prefix}-tooltip .@{prefix}-popup__arrow { - right: @tooltip-arrow-position; -} - -.@{prefix}-popup[data-popper-placement^="right"].@{prefix}-tooltip .@{prefix}-popup__arrow { - left: -@tooltip-arrow-position; -} diff --git a/style/web/components/tooltip/_var.less b/style/web/components/tooltip/_var.less index c199e9a6aa..e407ce2a39 100644 --- a/style/web/components/tooltip/_var.less +++ b/style/web/components/tooltip/_var.less @@ -2,7 +2,7 @@ @tooltip-max-width: 480px; // 颜色 -@tooltip-bg: @gray-color-12; // tooltip 背景色不随组件库浅色/深色模式切换而改变，因此使用固定色值变量 +@tooltip-bg: @gray-color-13; // tooltip 背景色不随组件库浅色/深色模式切换而改变，因此使用固定色值变量 @tooltip-color-primary: @brand-color; @tooltip-bg-primary: @brand-color-light; @tooltip-color-success: @success-color; @@ -14,7 +14,7 @@ @tooltip-text-color: @text-color-anti; @tooltip-light-text-color: @text-color-primary; // 间距 -@tooltip-default-margin: @spacer; +@tooltip-default-margin: @comp-margin-s; //tooltip箭头位移量 -@tooltip-arrow-position: 4px; +@tooltip-arrow-position: @comp-margin-xs; diff --git a/style/web/components/tooltip/index.html b/style/web/components/tooltip/index.html deleted file mode 100644 index 475a1dda3d..0000000000 --- a/style/web/components/tooltip/index.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - - - Tooltip - - - - - - - -
    - - -
    -

    Tooltip

    -

    开发者：nanniezhang

    -

    创建日期：2020-09-30

    -

    说明：文字提示

    -
    - - - - - -
    -

    默认

    - - -
    - - -
    - 默认文字提示 -
    -
    - - -
    -
    - - -
    -

    状态

    - - -
    - - - - -
    - 箭头向右 -
    -
    - -
    - 箭头向下 -
    -
    - -
    - 箭头向上 -
    -
    - -
    - 箭头向左 -
    -
    - - - - -
    -
    - -
    -

    类型

    -
    - - -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    -
    - 自定义颜色 -
    -
    - - -
    -
    - -
    -

    尺寸(如果有)

    -
    - - - - -
    - -
    - - - - \ No newline at end of file diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less index 9a9abc3e39..f7ddb1fe37 100644 --- a/style/web/components/transfer/_index.less +++ b/style/web/components/transfer/_index.less @@ -72,7 +72,6 @@ &-body { position: relative; height: 100%; - padding: @transfer-list-body-padding; box-sizing: border-box; } @@ -89,7 +88,8 @@ .@{prefix}-checkbox-group { width: 100%; flex-direction: column; - gap: @spacer-s; + gap: @transfer-list-checkbox-group-gap; + margin: @transfer-list-checkbox-group-margin; .@{prefix}-checkbox { margin-right: @transfer-list-margin-horizontal; @@ -100,9 +100,11 @@ &__label { margin: 0; + flex: 1; > span { margin-left: @transfer-list-item-text-margin-left; + display: inline-block; } } @@ -151,7 +153,6 @@ height: @transfer-list-pagination-height; vertical-align: middle; padding: @transfer-list-pagination-padding; - line-height: @transfer-list-pagination-line-height; } &-footer { @@ -169,18 +170,7 @@ margin: @transfer-operations-margin; vertical-align: middle; overflow: hidden; - - button { - display: block; - padding: @transfer-operations-button-padding; - height: @transfer-operations-button-height; - line-height: @transfer-operations-button-line-height; - transition: none; // 不要有过渡效果 不然在整体里面很突兀 会有跳动感 - } - - button:first-child { - margin-bottom: @transfer-operations-button-first-margin-bottom; - } + gap: @transfer-operations-gap; .t-icon { font-size: @transfer-operations-icon-size; @@ -189,10 +179,6 @@ .t-icon + .t-button__text { margin-left: 0; } - - .t-button--icon-only { - width: @transfer-operations-button-icon-width; - } } &__empty { @@ -226,6 +212,11 @@ .@{prefix}-transfer__list { height: auto; + + .@{prefix}-tree { + padding: @transfer-list-with-tree-padding; + margin: @transfer-list-with-tree-margin; + } } } diff --git a/style/web/components/transfer/_var.less b/style/web/components/transfer/_var.less index cd45877224..9df8118021 100644 --- a/style/web/components/transfer/_var.less +++ b/style/web/components/transfer/_var.less @@ -6,36 +6,38 @@ @transfer-font-color: @text-color-primary; // 间距 -@transfer-list-margin-horizontal: @spacer; -@transfer-list-header-padding: 0 @spacer * 1.5; +@transfer-list-margin-horizontal: @comp-margin-s; +@transfer-list-header-padding: 0 @comp-paddingLR-s; @transfer-list-header-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-header-text-margin-left: @spacer; -@transfer-list-body-padding: @spacer 0 @spacer 0; -@transfer-list-item-padding: 5px @spacer; +@transfer-list-header-text-margin-left: @comp-margin-s; +@transfer-list-checkbox-group-gap: @comp-margin-xs; +@transfer-list-checkbox-group-margin: @comp-margin-s 0; +@transfer-list-item-padding: @comp-paddingLR-xs @comp-paddingLR-s; @transfer-list-item-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-item-text-margin-left: @spacer; +@transfer-list-item-text-margin-left: @comp-margin-s; @transfer-list-search-wrapper-margin: 0 @transfer-list-margin-horizontal; -@transfer-list-with-search-padding-top: 40px; -@transfer-list-wrapper-padding: @spacer * 1.5; -@transfer-list-pagination-padding: 0 @spacer 0 @spacer * .5; -@transfer-operations-margin: auto @spacer; -@transfer-operations-button-padding: 0 3px 1px; -@transfer-operations-button-first-margin-bottom: 14px; +@transfer-list-with-search-padding-top: @comp-size-m; +@transfer-list-wrapper-padding: @comp-paddingTB-m @comp-paddingLR-m; +@transfer-list-with-tree-padding: 0 @comp-paddingLR-m; +@transfer-list-with-tree-margin: @comp-margin-s 0; +@transfer-list-pagination-padding: @comp-paddingTB-m; +@transfer-operations-margin: auto @comp-margin-s; +@transfer-operations-gap: @comp-margin-l; // 有翻页时候transfer的下内边距 -@transfer-with-pagination-padding-bottom: 32px; +@transfer-with-pagination-padding-bottom: calc(@transfer-list-pagination-height + @transfer-list-pagination-padding * 2); // 有footer时候transfer的下内边距 @transfer-with-footer-padding-bottom: 48px; // 有翻页和footer时候transfer的下内边距 -@transfer-with-pagination-footer-padding-bottom: 88px; +@transfer-with-pagination-footer-padding-bottom: calc(@transfer-with-pagination-padding-bottom + @transfer-with-footer-padding-bottom); // search&footer @transfer-with-search-footer-padding-bottom: 48px; // pagination&search -@transfer-with-search-pagination-padding-bottom: 40px; +@transfer-with-search-pagination-padding-bottom: 48px; //pagination&footer&search @transfer-with-all-padding-bottom: 88px; // 尺寸 -@transfer-common-width: 196px; +@transfer-common-width: 200px; @transfer-common-height: 200px; // 有search的高度 @transfer-with-search-height: 240px; @@ -52,19 +54,16 @@ // 包裹树组件时候transfer的高度 @transfer-wrap-height: 320px; @transfer-wrap-width: 206px; -@transfer-list-header-height: 48px; -@transfer-list-header-width: ( +@transfer-list-header-height: @comp-size-xxl; +@transfer-list-header-width: calc( @transfer-common-width - @transfer-list-margin-horizontal * 2 ); -@transfer-list-search-wrapper-width: ( +@transfer-list-search-wrapper-width: calc( @transfer-common-width - @transfer-list-margin-horizontal * 2 ); -@transfer-list-pagination-height: 24px; -@transfer-list-pagination-line-height: 16px; -@transfer-operations-button-height: 24px; -@transfer-operations-button-line-height: 14px; -@transfer-operations-button-icon-width: 24px; -@transfer-operations-icon-size: 16px; +@transfer-list-pagination-height: @comp-size-xs; +@transfer-operations-button-height: @comp-size-xs; +@transfer-operations-icon-size: @comp-size-xxxs; // 字体 @transfer-font: @font-body-medium; diff --git a/style/web/components/transfer/index.html b/style/web/components/transfer/index.html deleted file mode 100644 index 92d9db0dbe..0000000000 --- a/style/web/components/transfer/index.html +++ /dev/null @@ -1,1047 +0,0 @@ - - - - - - Transfer - - - - - - - -
    - -
    -

    Transfer

    -

    开发者：vickiliang

    -

    创建日期：2020-11-12

    -

    说明：TDesign Transfer 组件样式

    -
    - - -
    -

    1.1.1 默认状态

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.1.2 带搜索框

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    - - - - -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    -
    - - - - -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.1.3 结合树结构

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    - -
    - - - 1 未选中项 -
    - -
    - - - 2 未选禁用项 -
    - -
    - - - - 3 半选中项 -
    - -
    - - - - 3.1 半选中项 -
    - -
    - - - 3.1.1 选中项 -
    - -
    - - 3.1.2 选中禁用项 -
    - -
    - - - 3.2 半选禁用项 -
    - -
    - - - 3.2.1 未选禁用项 -
    - -
    - - 3.2.2 选中禁用项 -
    - -
    - - - 4 第四段信息 -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.2.1 外框尺寸变化

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.1 右移

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.2 左移

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 5 -
    • -
  • - - content 6 -
    • -
  • - - content 7 -
    • -
  • - - content 8 -
    • -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.3 保留源列表数据项

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 2项 -
    -
    -
    -
    -
    -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.4 内容过多时

    -
    -
    -
    -
    -
    -
    - - 3项 -
    -
    -
    -
    -
    -
  • - - 第一段信息第一段信息第一段信息 -
    • -
  • - - 第二段信息第二段信息第二段信息 -
    • -
  • - - 第三段信息第三段信息第三段信息 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.5 数据项数量过多时

    -
    -
    -
    -
    -
    -
    - - 12项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    - - 1/3 - -
    -
    -
    - - -
    -
    -
    -
    - - 400项 -
    -
    -
    -
    -
    -
  • - - content 5 -
    • -
  • - - content 6 -
    • -
  • - - content 7 -
    • -
  • - - content 8 -
    • -
    -
    -
    -
    - - 1/100 - -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.6 带标题样式

    -
    -
    -
    -
    -
    -
    - - 4项 -
    - 源列表 -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    - 目标列表 -
    -
    -
    暂无数据
    -
    -
    -
    -
    -
    -
    - - -
    -

    1.3.7 自定义底部

    -
    -
    -
    -
    -
    -
    - - 4项 -
    -
    -
    -
    -
    -
  • - - content 1 -
    • -
  • - - content 2 -
    • -
  • - - content 3 -
    • -
  • - - content 4 -
    • -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    -
    -
    - - 0项 -
    -
    -
    -
    暂无数据
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - \ No newline at end of file diff --git a/style/web/components/tree-select/_index.less b/style/web/components/tree-select/_index.less index f544ea96d8..07cf993f3e 100644 --- a/style/web/components/tree-select/_index.less +++ b/style/web/components/tree-select/_index.less @@ -2,6 +2,8 @@ @import "../../mixins/_reset.less"; +@import "../../mixins/_scrollbar.less"; + .@{prefix}-tree-select { .reset; @@ -30,4 +32,23 @@ &--placeholder { color: @text-color-placeholder; } + + &.@{prefix}-single-suffix { + padding-right: 20px; + } + + &.@{prefix}-tag-prefix { + padding-left: 4px; + } +} + +// 浮层样式 +.@{prefix}-tree-select-popup { + .@{prefix}-popup__content { + .scrollbar(8px, 2px); + + padding: @pop-padding-m; + max-height: 300px; + overflow-y: auto; + } } diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less index 1e16d034f8..8d829bf8ed 100644 --- a/style/web/components/tree/_index.less +++ b/style/web/components/tree/_index.less @@ -8,12 +8,15 @@ @import "../../mixins/_reset.less"; +@import "../../mixins/_text.less"; + // 替换为组件名 .@{prefix}-tree { .reset; font: @tree-font; color: @tree-node-text-color; + position: relative; // 禁用态颜色处理 &.@{prefix}-is-disabled { @@ -43,36 +46,33 @@ display: block; } - &__children { - // 用于多行 label 计算高度 - --hscale: 1; - - will-change: opacity, max-height; - } - &__item { // 用于树结构缩进计算 --level: 0; + // 用于多行 label 计算高度 - --hscale: 1; + // 如果使用了多行 label 或者 label 内容高于 34px + // 业务方可以增大这个值来让高度动画完全伸展 + // 值预期为 Math.max(实际最大高度 / 34, 1) + --hscale: 2; will-change: opacity, max-height; position: relative; display: flex; flex-wrap: nowrap; - padding: 4px 0 4px @tree-node-item-padding-left; + align-items: center; + padding: 0 0 0 @tree-node-item-padding-left; cursor: default; transform: translateZ(0); // 开启硬件加速 backface-visibility: hidden; // 防止Chrome、Safari中，使用 transforms/animations，可能造成的页面闪烁 perspective: 1000; // 防止Chrome、Safari中，使用 transforms/animations，可能造成的页面闪烁 - line-height: @tree-node-item-line-height; .t-icon, .@{prefix}-loading { display: inline-block; position: relative; z-index: 2; - font-size: @font-size-l; + font-size: @tree-node-icon-size; } .t-icon { @@ -86,7 +86,6 @@ .@{prefix}-tree__icon--default { .t-icon { - transition: color, transform @anim-time-fn-easing @anim-duration-base; transform: rotate(0); } } @@ -103,16 +102,32 @@ } } + // 允许点击 &--clickable { cursor: pointer; } + // 过滤时被命中为路径节点 + &--locked { + color: @tree-disabled-color; + } + + // 过滤时被命中 + &--matched { + color: inherit; + } + &--draggable { cursor: pointer; - &::before { + &:hover { + background-color: @tree-node-bg-hover-color; + background-clip: content-box; + } + + &::after { position: absolute; - top: -@tree-node-drag-tip-height; + top: -(@tree-node-drag-tip-height / 2); right: 0; left: 0; display: block; @@ -122,21 +137,16 @@ padding: inherit; background-clip: content-box; } - - &:hover { - background-color: @tree-node-bg-hover-color; - background-clip: content-box; - } } &--tip { - &-top::before { + &-top::after { background-color: @tree-node-drag-tip-bg; } - &-bottom::before { + &-bottom::after { top: unset; - bottom: -@tree-node-drag-tip-height; + bottom: -(@tree-node-drag-tip-height / 2); background-color: @tree-node-drag-tip-bg; } @@ -147,6 +157,16 @@ } } + // 用于撑开节点高度 + // 比起使用 padding , 更有利于动画展现 + &__item::before { + content: ""; + display: block; + width: 0; + flex: 0 0 auto; + height: @tree-node-item-height; + } + &--block-node &__label { flex: 1; } @@ -197,32 +217,34 @@ align-items: center; // 图标居中 text-align: center; - width: 16px; + width: @tree-node-icon-size; // 当子元素只有一个且为image类型时，会有隐藏占位，因此将font-size设0 font-size: 0; user-select: none; cursor: pointer; - transition: color, transform @anim-duration-moderate @anim-time-fn-easing; } // svg 动画与 icon 背景进行隔离 + // :after 仅用于增大点击范围 &__icon::after { content: ""; display: block; position: absolute; - left: 0; - top: 5px; - width: @tree-node-icon-svg-size; - height: @tree-node-icon-svg-size; + left: -2px; + top: -2px; + width: calc(@tree-node-icon-size + 4px); + height: calc(@tree-node-icon-size + 4px); border-radius: @border-radius-default; } // 仅在有图标时呈现背景 - &__icon:not(:empty):hover::after { + // 注意这里背景样式不要加给 ::after + // ::after 仅用于增大点击范围 + &__icon:not(:empty):hover { background-color: @tree-node-bg-hover-color; } - // 没有图标是不呈现指针 + // 没有图标时不呈现指针 &__icon:empty { cursor: initial; } @@ -232,11 +254,11 @@ flex-wrap: nowrap; flex: 0 0 auto; - padding: 2px 4px; - margin-left: 4px; + padding: @tree-label-padding; + margin-left: @tree-label-margin-left; border-radius: @border-radius-default; cursor: pointer; - transition: background-color @anim-duration-moderate @anim-time-fn-easing; + .text-ellipsis(); &.@{prefix}-is-checked { font-weight: 500; @@ -282,55 +304,44 @@ } } -.@{prefix}-tree--vscroll { - overflow-y: auto; -} - .@{prefix}-tree { &__item--hidden { display: none; } - - &__children--hidden { - display: none; - } } +// 节点动画 .@{prefix}-tree--transition { - .@{prefix}-tree__item--visible { - opacity: 1; + // 标签动画 + .@{prefix}-tree__label { + transition: background-color @anim-duration-moderate @anim-time-fn-easing; } - .@{prefix}-tree__item--hidden { - display: flex; - opacity: 0; - max-height: 0; - overflow: hidden; + // 默认图标 + .@{prefix}-tree__icon { + transition: color, transform @anim-duration-moderate @anim-time-fn-easing; } - .@{prefix}-tree__children--visible { - opacity: 1; + .@{prefix}-tree__icon::after { + transition: @anim-duration-base linear; } - .@{prefix}-tree__children--hidden { - display: block; - opacity: 0; - max-height: 0; - overflow: hidden; + .@{prefix}-tree__icon:not(:empty):hover { + transition: @anim-duration-base linear; } - // 节点插入动画 - .@{prefix}-tree__item--enter-active { - animation: t-tree-toggle @tree-node-animation-time linear; - } - - // 节点移除动画 - .@{prefix}-tree__item--leave-active { - animation: t-tree-toggle @tree-node-animation-time reverse linear forwards; + // 图标动画 + .@{prefix}-tree__icon--default { + .t-icon { + transition: color, transform @anim-time-fn-easing @anim-duration-base; + } } // 节点展示动画 .@{prefix}-tree__item--visible { + display: flex; + max-height: @tree-node-item-origin-height; + opacity: 1; transition: opacity @tree-node-transition-time linear @tree-node-transition-time, max-height @tree-node-transition-time linear 0s; @@ -338,23 +349,73 @@ // 节点隐藏动画 .@{prefix}-tree__item--hidden { - animation: none; + display: flex; + max-height: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + user-select: none; + animation: initial; transition: opacity @tree-node-transition-time linear 0s, max-height @tree-node-transition-time linear @tree-node-transition-time; } - // 子节点展示动画 - .@{prefix}-tree__children--visible { - transition: opacity @tree-node-transition-time linear - @tree-node-transition-time, - max-height @tree-node-transition-time linear 0s; + // 节点插入动画 + .@{prefix}-tree__item--enter-active { + animation: t-tree-toggle @tree-node-animation-time linear; } - // 子节点隐藏动画 - .@{prefix}-tree__children--hidden { + // 节点移除动画 + .@{prefix}-tree__item--leave-active { + animation: t-tree-toggle @tree-node-animation-time reverse linear forwards; + } +} + +// 虚拟滚动样式 +.@{prefix}-tree__vscroll { + overflow-y: auto; +} + +// 虚拟滚动延迟加载模式 +.@{prefix}-tree__lazyload { + overflow-y: auto; +} + +// 虚拟滚动游标 +.@{prefix}-tree__vscroll-cursor { + position: absolute; + width: 1px; + height: 1px; + transition: transform @anim-duration-base; +} + +.@{prefix}-tree--scrolling { + .@{prefix}-tree__item { + will-change: initial; + } + .v-enter, + .v-leave, + .@{prefix}-tree__item--visible, + .@{prefix}-tree__item--hidden, + .@{prefix}-tree__item--enter, + .@{prefix}-tree__item--enter-active, + .@{prefix}-tree__item--enter-to, + .@{prefix}-tree__item--leave, + .@{prefix}-tree__item--leave-active + .@{prefix}-tree__item--leave-to { animation: none; - transition: opacity @tree-node-transition-time linear 0s, - max-height @tree-node-transition-time linear @tree-node-transition-time; + transition: none; + } + .@{prefix}-tree__item--visible { + max-height: initial; + } + .@{prefix}-tree__item--enter-to, + .@{prefix}-tree__item--enter-active { + max-height: initial; + } + .@{prefix}-tree__item--leave-to, + .@{prefix}-tree__item--leave-active { + max-height: 0; } } @@ -374,13 +435,3 @@ max-height: @tree-node-item-origin-height; } } - -.@{prefix}-tree-select { - &.@{prefix}-single-suffix { - padding-right: 20px; - } - - &.@{prefix}-tag-prefix { - padding-left: 4px; - } -} diff --git a/style/web/components/tree/_var.less b/style/web/components/tree/_var.less index f27d2813d2..36a868857a 100644 --- a/style/web/components/tree/_var.less +++ b/style/web/components/tree/_var.less @@ -20,28 +20,31 @@ @tree-node-bg-active-color: @brand-color-light; @tree-node-icon-color: @text-color-secondary; @tree-node-icon-line-color: @border-level-1-color; -@tree-disabled-color: @border-level-2-color; +@tree-disabled-color: @text-color-disabled; @tree-icon-disabled-color: @tree-node-icon-color; //字体 @tree-font: @font-body-medium; +@tree-font-size: @font-size-base; +@tree-font-line-height: @text-line-height-base; // 间距 -@tree-node-padding-basic: @spacer-3; -@tree-node-item-padding-left: calc(@tree-node-padding-basic * var(--level) + 8px); -@tree-line-position-bottom: 17px; -@tree-line-position-left: calc(@tree-node-padding-basic * var(--level) - 8px); +@tree-node-padding-basic: @comp-margin-xxl; +@tree-node-item-padding-left: calc(@tree-node-padding-basic * var(--level)); +@tree-node-item-padding: @comp-paddingTB-xs 0 @comp-paddingTB-xs @tree-node-item-padding-left; +@tree-line-position-bottom: @comp-margin-l; +@tree-line-position-left: calc(@tree-node-padding-basic * var(--level) - @comp-margin-l); +@tree-label-margin-left: @comp-margin-xs; +@tree-label-padding: @comp-paddingTB-xxs @comp-paddingLR-xs; //尺寸 @tree-line-width: 1px; @tree-node-item-height: 34px; -@tree-node-icon-size: 28px; -@tree-node-icon-svg-size: @icon-default; -@tree-node-item-line-height: 22px; -@tree-line-before-width: 12px; -@tree-line-leaf-width: 12px; -@tree-line-first-height: 22px; +@tree-line-before-width: @comp-margin-m; +@tree-line-leaf-width: @comp-margin-m; +@tree-line-first-height: @tree-font-line-height; @tree-node-item-origin-height: calc(@tree-node-item-height * var(--hscale) + 0px); +@tree-node-icon-size: calc(@tree-font-size + 2px); // 动画 @tree-node-animation-time: 300ms; @@ -49,5 +52,5 @@ // 拖拽 @tree-node-drag-tip-height: 2px; -@tree-node-drag-tip-bg: var(--td-brand-color-6); -@tree-node-drag-bg-highlight: var(--td-brand-color-light); +@tree-node-drag-tip-bg: @brand-color; +@tree-node-drag-bg-highlight: @brand-color-light; diff --git a/style/web/components/tree/index.html b/style/web/components/tree/index.html deleted file mode 100644 index d61c431e5b..0000000000 --- a/style/web/components/tree/index.html +++ /dev/null @@ -1,494 +0,0 @@ - - - - - - 组件名称 - - - - - - - -
    - -
    -

    Tree

    -

    开发者: shryzhang, tabliang

    -

    创建日期: 2020.10.12

    -

    说明: tdesign tree 组件的基本样式

    -
    - - - - -
    -

    默认

    - - -
    - -
    - -
    - - 1 节点一 -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    - -
    - - 2.1.1 节点二点一点一 -
    - -
    - - 2.1.1.1 节点二点一点一点一 -
    - -
    - - 2.1.1.2 节点二点一点一点二 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 -
    - -
    - - - - 2.1.2 节点二点一点二 -
    - -
    - - 3 节点三 -
    -
    - -
    -
    - - -
    -

    空数据

    - - -
    - -
    - -
    😊 空数据（string）
    -
    - -
    -
    - - -
    -

    节点可选中

    -
    - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    - -
    -
    - - -
    -

    - 文件夹图标（自定义图标） -

    -
    - -
    - -
    - - -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    - -
    - - 2.1.1 节点二点一点一 -
    -
    - -
    -
    - - -
    -

    可操作

    - - -
    - -
    -
    - - 1 节点一 - - - -
    -
    - - 1.1 节点一点一 - - - -
    -
    - - - - 1.1.1 节点一点一点一 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 这是多文字的展示 - - - - -
    -
    - -
    -
    - - -
    -

    显示连线

    -
    - -
    -
    - - 1 -
    -
    - - 2 -
    -
    - - - 2.1 -
    -
    - - - 2.1.1 -
    -
    - - - 2.1.1.1 -
    -
    - - - 2.1.1.1.1 -
    -
    - - - 2.1.1.1.2 -
    -
    - - - 2.1.2 -
    -
    - - - 2.2 -
    -
    - - 4 -
    -
    - -
    -
    - - -
    -

    选中态

    -
    - - - -
    -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    - -
    -
    - - -
    -

    高亮

    -
    - -
    -
    - -
    - - 1 节点一 -
    - -
    - - 1.1 节点一点一 -
    - -
    - - 1.1.1 节点一点一点一 -
    - -
    - - 2 节点二 -
    - -
    - - 2.1 节点二点一 -
    -
    -
    - -
    -
    - - -
    -

    嵌套布局

    -
    - -
    - -
    -
    - - 1 -
    -
    - -
    -
    - - - 1.1 -
    -
    -
    -
    - -
    -
    - - 2 -
    -
    - -
    -
    - - - 2.1 -
    -
    - -
    -
    - - - 2.1.1 -
    -
    - -
    -
    - - - 2.1.1.1 -
    -
    - -
    -
    - - - 2.1.1.1.1 -
    -
    - -
    -
    - - - 2.1.1.1.2 -
    -
    -
    -
    - -
    -
    - - - 2.1.2 -
    -
    -
    -
    -
    -
    - -
    -
    - - - 2.2 -
    -
    -
    -
    - -
    -
    - - 4 -
    -
    -
    - - -
    -
    - - diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less index 8bc3bc85cc..dbe9e73604 100644 --- a/style/web/components/upload/_index.less +++ b/style/web/components/upload/_index.less @@ -136,7 +136,6 @@ } &-item { - margin: @upload-card-item-margin; float: left; cursor: pointer; box-sizing: border-box; @@ -192,10 +191,7 @@ background-color: @upload-card-container-bg-color; border: @upload-card-contariner-border; padding: @upload-card-content-padding; - - &:hover { - border-color: @upload-card-item-bg-border-color-hover; - } + border-radius: @upload-card-img-wrap-border-radius; } &-container { @@ -209,9 +205,12 @@ border: @upload-card-contariner-border; box-sizing: border-box; position: relative; + border-radius: @upload-card-img-wrap-border-radius; + .hover-transition(border); &:hover { border-color: @upload-card-item-bg-border-color-hover; + .hover-transition(border-color); } > .t-icon, .@{prefix}-loading { @@ -234,7 +233,7 @@ .t-icon, .@{prefix}-loading { - font-size: @upload-icon-size-middle; + font-size: @upload-icon-size-large; } } @@ -250,10 +249,10 @@ &-mask { background-color: @upload-card-mask-bg-color; - color: @upload-card-mask-color; - transition: opacity .5s ease-in-out; + color: @upload-card-mask-text-color; will-change: transform; opacity: 0; + .hover-transition(opacity); .horizontal-vertical-center-with-flex(); .fill-with-position-absolute(); } @@ -261,7 +260,7 @@ &-mask-item { &-divider { margin: @upload-card-mask-divider-margin; - border-left: 1px @upload-card-mask-color solid; + border-left: 1px @upload-card-mask-text-color solid; height: @upload-card-mask-divider-height; } @@ -362,6 +361,7 @@ display: block; color: @upload-small-color; margin-top: @upload-tips-margin-top; + font: @font-body-small; &.@{prefix}-upload__tips-error { color: @upload-tips-error-color; @@ -386,7 +386,7 @@ display: flex; align-items: center; .@{prefix}-upload__flow-status .t-icon { - font: @upload-icon-size-mini; + font-size: @upload-icon-size-mini; } } @@ -398,6 +398,7 @@ &:hover { color: @upload-icon-color-hover; cursor: pointer; + .hover-transition(color); } } @@ -469,6 +470,7 @@ width: @upload-dragger-img-wrap-width; height: @upload-dragger-img-wrap-height; background-color: @upload-dragger-img-wrap-bg-color; + border-radius: @upload-dragger-img-wrap-border-radius; display: flex; align-items: center; justify-content: center; @@ -484,7 +486,7 @@ &-img-wrap + &-progress-info { margin-left: @upload-dragger-img-wrap-margin-right; .dragger-inner-max-width(@upload-dragger-width, - @upload-dragger-padding, (@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right)); + @upload-dragger-padding, calc(@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right)); } } @@ -500,8 +502,9 @@ } } -.@{prefix}-upload__dragger-progress-cancel { - padding: @upload-dragger-progress-cancel-padding; +.@{prefix}-upload__dragger-progress-cancel, +.@{prefix}-upload__dragger-progress-reupload { + margin-right: @upload-dragger-progress-cancel-margin; &:hover { border-color: transparent; @@ -610,9 +613,15 @@ border: @upload-flow-card-area-border; padding: @upload-flow-card-area-padding; margin-top: @upload-flow-card-area-margin-top; + .hover-transition(border); &:hover { border-color: @upload-card-item-bg-border-color-hover; + .hover-transition(border-color); + } + + .@{prefix}-upload__card-item { + margin: @upload-card-item-margin; } } } @@ -621,11 +630,13 @@ .@{prefix}-upload__single-input-clear { color: @upload-icon-color; cursor: pointer; + .hover-transition(color); } .@{prefix}-upload__icon-delete:hover, .@{prefix}-upload__single-input-clear:hover { color: @upload-icon-color-hover; + .hover-transition(color); } .@{prefix}-upload__single-input-clear { @@ -650,3 +661,11 @@ .@{prefix}-upload__card-name { margin-top: @spacer; } + +.@{prefix}-upload--theme-file-input { + width: 100%; +} + +.@{prefix}-upload__dragger-btns > .@{prefix}-button { + padding: 0; +} diff --git a/style/web/components/upload/_mixin.less b/style/web/components/upload/_mixin.less index 1fd800d809..b5b8b69e74 100644 --- a/style/web/components/upload/_mixin.less +++ b/style/web/components/upload/_mixin.less @@ -3,5 +3,5 @@ } .dragger-inner-max-width(@outterWidth, @padding, @margin) { - max-width: (@outterWidth - @padding * 2 - @margin); + max-width: calc(@outterWidth - @padding * 2 - @margin); } diff --git a/style/web/components/upload/_var.less b/style/web/components/upload/_var.less index 68e242c613..42c46076d5 100644 --- a/style/web/components/upload/_var.less +++ b/style/web/components/upload/_var.less @@ -35,7 +35,8 @@ @upload-card-container-bg-color: @bg-color-secondarycontainer; @upload-card-status-color: @text-color-disabled; @upload-card-mask-color: @bg-color-container; -@upload-card-mask-bg-color: @text-color-secondary; +@upload-card-mask-bg-color: @mask-active; +@upload-card-mask-text-color: @text-color-anti; @upload-dragger-color: @text-color-secondary; @upload-dragger-bg-color-active: @bg-color-container-active; @upload-dragger-border-color-active: @brand-color; @@ -61,9 +62,9 @@ @upload-card-mask-opacity-disabled: .3; // 图标 -@upload-list-file-icon-font-size: 40px; -@upload-card-item-icon-add-font-size: 30px; -@upload-dragger-progress-icon-font-size: 16px; +@upload-list-file-icon-font-size: @comp-size-xl; +@upload-card-item-icon-add-font-size: @comp-size-m; +@upload-dragger-progress-icon-font-size: @comp-size-xxxs; // 字体 @upload-list-item-font-size: @font-body-medium; @@ -77,26 +78,24 @@ @upload-flow-table-th-font-weight: normal; // 尺寸 -@upload-img-size: 120px; +@upload-img-size: 110px; @upload-list-file-width: 100px; @upload-list-file-height: 100px; @upload-list-item-width: 496px; @upload-list-item-height: 124px; @upload-list-name-max-width: 200px; -@upload-card-mask-divider-height: @font-size-l; -@upload-single-file-input-single-progress-width: 60px; +@upload-card-mask-divider-height: @comp-size-xxxs; @upload-dragger-width: 336px; @upload-dragger-height: 144px; -@upload-dragger-img-wrap-width: 112px; -@upload-dragger-img-wrap-height: 112px; +@upload-dragger-img-wrap-width: 110px; +@upload-dragger-img-wrap-height: 110px; @upload-flow-image-flow-width: 498px; @upload-flow-max-width: 960px; -@upload-flow-min-width: 496px; -@upload-flow-empty-height: 210px; -@upload-icon-size-mini: @font-body-medium; -@upload-icon-size: @font-size-l; -@upload-icon-size-middle: (@font-size * 2); -@upload-icon-size-large: (@font-size * 2.4); +@upload-flow-min-width: 498px; +@upload-flow-empty-height: 184px; +@upload-icon-size-mini: calc(@font-size-base + 2px); +@upload-icon-size: calc(@font-size-base + 2px); +@upload-icon-size-large: @comp-size-xs; // 边框 @upload-card-item-bg-border: 1px dashed @component-border; @@ -114,39 +113,42 @@ @upload-card-contariner-border: 1px dashed @component-border; // 位置 -@upload-dragger-btns-bottom: 8px; +@upload-dragger-btns-bottom: @comp-margin-l; @upload-flow-table-th-text-align: left; // 间距 -@upload-list-file-margin-right: 12px; -@upload-list-item-padding: 12px; -@upload-list-item-margin-top: 12px; -@upload-single-name-margin-right: @spacer; -@upload-single-name-margin-bottom: @spacer; -@upload-single-percent-margin-left: @spacer; -@upload-single-input-delete-margin-left: @spacer-2; -@upload-single-file-input-trigger-margin-left: @spacer-2; -@upload-single-file-input-trigger-button-margin-left: @spacer-1; -@upload-card-item-margin: 0 @spacer 0 0; -@upload-card-item-error-icon-warning-margin-bottom: 10px; -@upload-card-icon-loading-margin-bottom: 10px; -@upload-card-name-margin-top: @spacer; -@upload-card-container-icon-add-margin-bottom: @spacer; -@upload-card-content-padding: @spacer; -@upload-card-status-wrap-svg-margin-bottom: 6px; -@upload-dragger-padding: @spacer-2; -@upload-dragger-img-wrap-margin-right: @spacer-2; -@upload-dragger-progress-info-single-display-text-margin-bottom: @spacer; -@upload-dragger-progress-cancel-padding: 0; -@upload-flow-placeholder-margin-left: @spacer-2; -@upload-flow-bottom-margin-top: @spacer-3; -@upload-flow-button-margin-left: @spacer; -@upload-flow-table-margin-top: @spacer-3; -@upload-flow-status-icon-margin-right: @spacer; -@upload-flow-table-td-th-padding: 10px @spacer-3; -@upload-flow-card-area-padding: 12px; -@upload-flow-card-area-margin-top: @spacer-3; -@upload-display-text-margin-top: 10px; -@upload-icon-clear-circle-filled-margin-top: 2px; -@upload-tips-margin-top: @spacer; -@upload-card-mask-divider-margin: 0 @spacer-2; +@upload-list-file-margin-right: @comp-margin-m; //待删除 +@upload-list-item-padding: @comp-paddingTB-m @comp-paddingLR-m; //? +@upload-list-item-margin-top: @comp-margin-m; //? +@upload-single-name-margin-right: @comp-margin-s; +@upload-single-name-margin-bottom: @comp-margin-s; +@upload-single-percent-margin-left: @comp-margin-xs; +@upload-single-input-delete-margin-left: @comp-margin-l; +@upload-single-file-input-trigger-margin-left: @comp-margin-l; //? +@upload-card-item-margin: @comp-margin-xs; +@upload-card-item-error-icon-warning-margin-bottom: @comp-margin-s; +@upload-card-icon-loading-margin-bottom: @comp-margin-s; //? +@upload-card-name-margin-top: @comp-margin-s; +@upload-card-container-icon-add-margin-bottom: @comp-margin-s; +@upload-card-content-padding: @comp-paddingTB-s @comp-paddingLR-s; +@upload-card-status-wrap-svg-margin-bottom: @comp-margin-s; //? +@upload-dragger-padding: @comp-margin-l; +@upload-dragger-img-wrap-margin-right: @comp-margin-l; +@upload-dragger-progress-info-single-display-text-margin-bottom: @comp-margin-s; +@upload-dragger-progress-cancel-margin: @comp-margin-l; +@upload-flow-placeholder-margin-left: @comp-margin-l; +@upload-flow-bottom-margin-top: @comp-margin-xxl; +@upload-flow-button-margin-left: @comp-margin-s; +@upload-flow-table-margin-top: @comp-margin-xxl; +@upload-flow-status-icon-margin-right: @comp-margin-s; +@upload-flow-table-td-th-padding: @comp-paddingTB-m @comp-paddingLR-l; +@upload-flow-card-area-padding: @comp-paddingTB-m @comp-paddingLR-m; +@upload-flow-card-area-margin-top: @comp-margin-xxl; +@upload-display-text-margin-top: @comp-margin-s; +@upload-icon-clear-circle-filled-margin-top: @comp-margin-xxs; +@upload-tips-margin-top: @comp-margin-s; +@upload-card-mask-divider-margin: 0 @comp-margin-l; + +// 圆角 +@upload-dragger-img-wrap-border-radius: @border-radius-default; +@upload-card-img-wrap-border-radius: @border-radius-default; diff --git a/style/web/components/upload/index.html b/style/web/components/upload/index.html deleted file mode 100644 index 92d261e02f..0000000000 --- a/style/web/components/upload/index.html +++ /dev/null @@ -1,290 +0,0 @@ - - - - - - upload - - - - - - -
    - -
    -

    Upload

    -

    开发者：catren

    -

    创建日期：2020-06-21

    -

    说明：TDesign upload 组件的基本样式

    -
    - - - - -
    -

    上传组件

    - - -
    -

    1.1 基础控件

    -
    -
    - - 上传文件 -
    -
    请上传txt文件，大小在60M以内
    -
    - -

    1.2 展示文件列表

    -
    -
    - - 上传文件 -
    - -
      -
    • -
      -
      - alt -
      -
      文件名文件名文件名文件名文件名文件名文件名文件名.png
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • - -
    • -
      -
      - -
      -
      文件名文件名.ext
      -
      - -
      - -
      -
      • -
    -
    -
    - -
    -

    1.2 照片墙

    -
      -
    • -
      -
      - alt -
      - - - - - - -
      -
      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传中40%

      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传出错

      -

      文件名.jpg

      -
      -
      • -
    • -
      - -

      上传出错

      -

      文件名.jpg

      -
      - - - - - - -
      -
      -
      • -
    • -
      - -

      点击上传图片

      -
      -
      • -
    -
    - -
    -

    1.2 拖拽上传

    -
    - 点击上传 -   /  拖拽到次区域 -
    - -

    1.2 拖拽上传 Active

    -
    -
    释放鼠标
    -
    -
    - -
    -

    1.3 批量上传

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    -
    -
    文件名
    -
    大小
    -
    状态
    -
    操作
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 上传成功 -
    -
    - -
    -
    -
    -
    - 比较长长长长的文件名.txt -
    -
    - 40k -
    -
    - - 文件格式有误 -
    -
    - -
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 上传40% -
    -
    - -
    -
    -
    -
    - 文件名.txt -
    -
    - 40k -
    -
    - - 待上传 -
    -
    - -
    -
    -
    - -
    - - -
    -
    - -

    1.3 批量上传 - 未上传状态

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    - 点击上方”选择文件按钮或将文件拖拽到此区域 -
    -
    - - -
    -
    - -

    1.3 批量上传 - 拖拽状态

    -
    -
    - - 支持批量上传，上传格式为txt文件 -
    -
    - 释放鼠标 -
    -
    - - -
    -
    -
    -
    -
    - - diff --git a/style/web/index.js b/style/web/index.js deleted file mode 100644 index 6ff9952a18..0000000000 --- a/style/web/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import './index.less'; -import './docs.less'; diff --git a/style/web/index.less b/style/web/index.less deleted file mode 100644 index 416f2c1eee..0000000000 --- a/style/web/index.less +++ /dev/null @@ -1,10 +0,0 @@ -// reset文件 - -@import "./_reset.less"; - -// components - -@import "./components/_index.less"; - -// theme(用于换肤) -@import "./theme/_index.less"; diff --git a/style/web/mixins/_scrollbar.less b/style/web/mixins/_scrollbar.less index b15ea14b40..c415f4b524 100644 --- a/style/web/mixins/_scrollbar.less +++ b/style/web/mixins/_scrollbar.less @@ -2,7 +2,7 @@ .scrollbar(@size: 6px, @borderSize: 0px) { // Firefox 等浏览器标准支持的滚动条样式设置 - scrollbar-color: @scrollbar-color; + scrollbar-color: @scrollbar-color transparent; scrollbar-width: thin; // Safari/Chrome 中滚动条样式设置 &::-webkit-scrollbar { diff --git a/style/web/package.json b/style/web/package.json index 7068a1ce9c..5c4d437a5a 100644 --- a/style/web/package.json +++ b/style/web/package.json @@ -4,43 +4,11 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "webpack-dev-server", - "build": "webpack" + "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", - "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.9.6", - "@babel/preset-env": "^7.9.6", - "@babel/preset-react": "^7.9.4", - "autoprefixer": "^9.8.0", - "html-webpack-plugin": "^4.3.0", - "mini-css-extract-plugin": "^0.9.0", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "stylelint-webpack-plugin": "^2.0.0", - "webpack": "^4.43.0", - "webpack-cli": "^3.3.11" - }, "dependencies": { - "babel-loader": "^8.1.0", - "css-loader": "^3.5.3", - "less-loader": "^6.1.0", - "stylelint": "^13.13.1", - "webpack-dev-server": "^3.10.3" - }, - "postcss": { - "plugins": { - "autoprefixer": {} - } - }, - "browserslist": [ - "> 3%", - "last 2 versions", - "not ie < 11", - "ios >= 9", - "android >= 4.4" - ] + "stylelint": "^13.13.1" + } } \ No newline at end of file diff --git a/style/web/theme/_dark.less b/style/web/theme/_dark.less index 0e6efa013b..a4d7130fe0 100644 --- a/style/web/theme/_dark.less +++ b/style/web/theme/_dark.less @@ -41,15 +41,15 @@ --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; - --td-gray-color-3: #e7e7e7; - --td-gray-color-4: #dcdcdc; - --td-gray-color-5: #c5c5c5; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #ddd; + --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; - --td-gray-color-11: #383838; + --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; @@ -76,6 +76,7 @@ --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -83,6 +84,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -90,6 +92,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -97,6 +100,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出 @@ -114,6 +118,9 @@ --td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件 --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active + --td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件 + --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover + --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 diff --git a/style/web/theme/_index.less b/style/web/theme/_index.less index 9b31a895f6..515a8995a9 100644 --- a/style/web/theme/_index.less +++ b/style/web/theme/_index.less @@ -5,3 +5,5 @@ @import "./_radius.less"; @import "./_font.less"; + +@import "./_size.less"; diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 3b47f5d41f..2752fc9c74 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -1,56 +1,56 @@ :root, :root[theme-mode="light"] { - --td-brand-color-1: #ecf2fe; - --td-brand-color-2: #d4e3fc; - --td-brand-color-3: #bbd3fb; - --td-brand-color-4: #96bbf8; - --td-brand-color-5: #699ef5; - --td-brand-color-6: #4787f0; - --td-brand-color-7: #266fe8; - --td-brand-color-8: #0052d9; - --td-brand-color-9: #0034b5; - --td-brand-color-10: #001f97; - --td-warning-color-1: #fef3e6; - --td-warning-color-2: #f9e0c7; - --td-warning-color-3: #f7c797; - --td-warning-color-4: #f2995f; - --td-warning-color-5: #ed7b2f; - --td-warning-color-6: #d35a21; - --td-warning-color-7: #ba431b; - --td-warning-color-8: #9e3610; - --td-warning-color-9: #842b0b; - --td-warning-color-10: #5a1907; - --td-error-color-1: #fdecee; - --td-error-color-2: #f9d7d9; - --td-error-color-3: #f8b9be; - --td-error-color-4: #f78d94; - --td-error-color-5: #f36d78; - --td-error-color-6: #e34d59; - --td-error-color-7: #c9353f; - --td-error-color-8: #b11f26; - --td-error-color-9: #951114; - --td-error-color-10: #680506; - --td-success-color-1: #e8f8f2; - --td-success-color-2: #bcebdc; - --td-success-color-3: #85dbbe; - --td-success-color-4: #48c79c; - --td-success-color-5: #00a870; - --td-success-color-6: #078d5c; - --td-success-color-7: #067945; - --td-success-color-8: #056334; - --td-success-color-9: #044f2a; - --td-success-color-10: #033017; + --td-brand-color-1: #f2f3ff; + --td-brand-color-2: #d9e1ff; + --td-brand-color-3: #b5c7ff; + --td-brand-color-4: #8eabff; + --td-brand-color-5: #618dff; + --td-brand-color-6: #366ef4; + --td-brand-color-7: #0052d9; + --td-brand-color-8: #003cab; + --td-brand-color-9: #002a7c; + --td-brand-color-10: #001a57; + --td-warning-color-1: #fff1e9; + --td-warning-color-2: #ffd9c2; + --td-warning-color-3: #ffb98c; + --td-warning-color-4: #fa9550; + --td-warning-color-5: #e37318; + --td-warning-color-6: #be5a00; + --td-warning-color-7: #954500; + --td-warning-color-8: #713300; + --td-warning-color-9: #532300; + --td-warning-color-10: #3b1700; + --td-error-color-1: #fff0ed; + --td-error-color-2: #ffd8d2; + --td-error-color-3: #ffb9b0; + --td-error-color-4: #ff9285; + --td-error-color-5: #f6685d; + --td-error-color-6: #d54941; + --td-error-color-7: #ad352f; + --td-error-color-8: #881f1c; + --td-error-color-9: #68070a; + --td-error-color-10: #490002; + --td-success-color-1: #e3f9e9; + --td-success-color-2: #c6f3d7; + --td-success-color-3: #92dab2; + --td-success-color-4: #56c08d; + --td-success-color-5: #2ba471; + --td-success-color-6: #008858; + --td-success-color-7: #006c45; + --td-success-color-8: #005334; + --td-success-color-9: #003b23; + --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; - --td-gray-color-3: #e7e7e7; - --td-gray-color-4: #dcdcdc; - --td-gray-color-5: #c5c5c5; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #ddd; + --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; - --td-gray-color-11: #383838; + --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; @@ -66,17 +66,18 @@ --td-font-gray-4: rgba(0, 0, 0, 26%); // 基础颜色 - --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作 + --td-brand-color: var(--td-brand-color-7); // 色彩-品牌-可操作 --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告 --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 - --td-brand-color-hover: var(--td-brand-color-7); // hover态 + --td-brand-color-hover: var(--td-brand-color-6); // hover态 --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘 - --td-brand-color-active: var(--td-brand-color-9); // 点击态 + --td-brand-color-active: var(--td-brand-color-8); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -84,6 +85,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -91,6 +93,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -98,6 +101,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出 @@ -115,6 +119,9 @@ --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件 --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active + --td-bg-color-secondarycomponent: var(--td-gray-color-4); // 色彩 - 次级组件 + --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); // 色彩 - 次级组件 - hover + --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); // 色彩 - 次级组件 - active --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色 @@ -126,7 +133,7 @@ --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明 --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用 --td-text-color-anti: #fff; // 色彩-文字-反色 - --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 + --td-text-color-brand: var(--td-brand-color-7); // 色彩-文字-品牌 --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 // 分割线 diff --git a/style/web/theme/_size.less b/style/web/theme/_size.less new file mode 100644 index 0000000000..14539a7790 --- /dev/null +++ b/style/web/theme/_size.less @@ -0,0 +1,68 @@ +// size/margin/padding相关 token +:root { + --td-size-1: 2px; + --td-size-2: 4px; + --td-size-3: 6px; + --td-size-4: 8px; + --td-size-5: 12px; + --td-size-6: 16px; + --td-size-7: 20px; + --td-size-8: 24px; + --td-size-9: 28px; + --td-size-10: 32px; + --td-size-11: 36px; + --td-size-12: 40px; + --td-size-13: 48px; + --td-size-14: 56px; + --td-size-15: 64px; + --td-size-16: 72px; + + //全局 component 组件尺寸高度相关 token + --td-comp-size-xxxs: var(--td-size-6); + --td-comp-size-xxs: var(--td-size-7); + --td-comp-size-xs: var(--td-size-8); + --td-comp-size-s: var(--td-size-9); + --td-comp-size-m: var(--td-size-10); + --td-comp-size-l: var(--td-size-11); + --td-comp-size-xl: var(--td-size-12); + --td-comp-size-xxl: var(--td-size-13); + --td-comp-size-xxxl: var(--td-size-14); + --td-comp-size-xxxxl: var(--td-size-15); + --td-comp-size-xxxxxl: var(--td-size-16); + + //全局 popup 弹出层整体边距 token + --td-pop-padding-s: var(--td-size-2); + --td-pop-padding-m: var(--td-size-3); + --td-pop-padding-l: var(--td-size-4); + --td-pop-padding-xl: var(--td-size-5); + --td-pop-padding-xxl: var(--td-size-6); + + //全局 component 组件左右边距 token + --td-comp-paddingLR-xxs: var(--td-size-1); + --td-comp-paddingLR-xs: var(--td-size-2); + --td-comp-paddingLR-s: var(--td-size-4); + --td-comp-paddingLR-m: var(--td-size-5); + --td-comp-paddingLR-l: var(--td-size-6); + --td-comp-paddingLR-xl: var(--td-size-8); + --td-comp-paddingLR-xxl: var(--td-size-10); + + //全局 component 组件上下边距 token + --td-comp-paddingTB-xxs: var(--td-size-1); + --td-comp-paddingTB-xs: var(--td-size-2); + --td-comp-paddingTB-s: var(--td-size-4); + --td-comp-paddingTB-m: var(--td-size-5); + --td-comp-paddingTB-l: var(--td-size-6); + --td-comp-paddingTB-xl: var(--td-size-8); + --td-comp-paddingTB-xxl: var(--td-size-10); + + //全局 component 组件间距 token + --td-comp-margin-xxs: var(--td-size-1); + --td-comp-margin-xs: var(--td-size-2); + --td-comp-margin-s: var(--td-size-4); + --td-comp-margin-m: var(--td-size-5); + --td-comp-margin-l: var(--td-size-6); + --td-comp-margin-xl: var(--td-size-7); + --td-comp-margin-xxl: var(--td-size-8); + --td-comp-margin-xxxl: var(--td-size-10); + --td-comp-margin-xxxxl: var(--td-size-12); +} diff --git a/style/web/webpack.config.js b/style/web/webpack.config.js deleted file mode 100644 index fee8633afd..0000000000 --- a/style/web/webpack.config.js +++ /dev/null @@ -1,43 +0,0 @@ -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -module.exports = { - mode: 'development', - entry: './index.js', - output: { - filename: '[name].js', - path: path.resolve(__dirname, 'dist'), - }, - module: { - rules: [ - { - test: /\.css$/, - use: [ - 'css-loader', - ], - }, { - test: /\.less$/, - use: [ - MiniCssExtractPlugin.loader, - { loader: 'css-loader', options: { importLoaders: 1 } }, - 'postcss-loader', // 配合 autoprefixer + browserslist 使用，相关配置写在 package.json - 'less-loader', - ], - }, - ], - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: 'tdesign.css', - }), - ], - devServer: { - contentBase: './', - host: '0.0.0.0', - compress: true, - port: 9000, - open: false, - writeToDisk: true, - stats: 'errors-only', - }, -}; diff --git a/test/unit/input-number/number.test.js b/test/unit/input-number/number.test.js index 244e717a37..17a2c556d7 100644 --- a/test/unit/input-number/number.test.js +++ b/test/unit/input-number/number.test.js @@ -1,4 +1,4 @@ -import { add, subtract } from '../../../js/input-number/number'; +import { add, subtract, formatThousandths } from '../../../js/input-number/number'; describe('add', () => { it('0.1 + 0.2', () => { @@ -83,3 +83,13 @@ describe('subtract', () => { expect(subtract(-1, -0.766)).toBe(-0.234); }); }); + +describe('formatThousandths', () => { + it('111,222,000', () => { + expect(formatThousandths('111,222,000')).toBe('111222000'); + }); + + it('111.,000.1', () => { + expect(formatThousandths('111.,000.1')).toBe('111.,000.1'); + }); +}); diff --git a/test/unit/tree/tree-append.test.js b/test/unit/tree/tree-append.test.js index afbe7e147f..184c3a0f05 100644 --- a/test/unit/tree/tree-append.test.js +++ b/test/unit/tree/tree-append.test.js @@ -5,11 +5,18 @@ describe('tree', () => { describe('tree:append', () => { it('append 方法添加多个节点', async () => { const tree = new TreeStore(); - tree.append([{}, {}]); + tree.append([{ + value: 't5' + }, { + value: 't6' + }]); await wait(1); const nodes = tree.getNodes(); - expect(nodes[0].value).toBe('t1'); - expect(nodes[1].value).toBe('t2'); + // 内部生成的唯一 key 不应当绑定测试状态 + // 生成的唯一 key 与节点顺序无关，只需确保唯一 + expect(nodes[0].value).toBe('t5'); + expect(nodes[1].value).toBe('t6'); + expect(nodes.length).toBe(2); }); }); }); diff --git a/theme.md b/theme.md index fc511d753a..6a6ab7f1a7 100644 --- a/theme.md +++ b/theme.md @@ -3,58 +3,40 @@ title: 主题配置 spline: explain --- -### 使用 CSS 变量 +### 使用 CSS Variables 进行主题配置 -组件库通用的 Design Token 均使用 css variables 声明，你可以在自己的项目中声明同名变量来覆盖他们的值： +TDesign 通用的 Design Token 均使用 CSS Variables 声明，我们推荐使用替换 CSS Variables 的方式来进行个性化的主题配置。 -```css +TDesign 提供五大类 Design Token，包括`颜色`、`字体`、`圆角`、`阴影`及`尺寸`，你可以在自己的项目中声明同名 CSS Variables来覆盖他们的值，如： + +```CSS --td-brand-color: orange; --td-warning-color: yellow; --td-error-color: red; --td-success-color: green; ``` -完整的 token 列表见 [\_light.less](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less)。 +完整的 Token 列表见 [TDesign Design Token](https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme)。 #### 使用主题生成器配置 CSS 变量 -因为涉及到的 token 数量很多，我们提供了更直观的基于 CSS Token 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过点击官网右下角的按钮打开我们的主题配置生成器。 +因为涉及到的 CSS 变量数量很多，**我们提供了更直观的基于 CSS 变量 实现的`主题配置生成器`，来帮助您快速定制您需要的主题。您可以通过`点击官网下方的悬浮按钮`打开我们的主题配置生成器**。 -通过主题配置生成器配置出您满意的 token 之后，请点击`导出主题配置`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 +通过主题配置生成器配置出您满意的主题 CSS 变量 之后，请点击`下载按钮`，我们会导出一份全新的 CSS 文件到您本地，您只需要将文件放置进您的项目文件目录中，并在项目中 import 该 CSS 文件，即可得到一个全新主题样式的 TDesign 。 -### 使用 less 变量 +### 使用 less 变量 针对组件进行精细化定制 如果你的项目也使用 less 技术栈，且对组件有更精细的定制需求，我们也抽离了大部分组件实现过程中用到的变量，以 less 变量的方式提供出来， -```less +```CSS // 以 Button 为例 -// 尺寸 + @btn-height-s: 24px; @btn-height-default: 32px; @btn-height-l: 40px; -// 圆角 @btn-border-radius: @border-radius-default; -@btn-shape-border-radius-s: (@btn-height-s / 2); -@btn-shape-border-radius-default: (@btn-height-default / 2); -@btn-shape-border-radius-l: (@btn-height-l / 2); - -// 阴影 - -//字号 -@btn-font-s: @font-size-s; -@btn-font-default: @font-size-base; -@btn-font-l: @font-size-l; - -// 图标大小 -@btn-icon-size-s: @font-size-base; -@btn-icon-size-default: @font-size-l; -@btn-icon-size-l: @font-size-xl; - -// padding -@btn-padding-horizontal-s: @spacer; -@btn-padding-horizontal-default: (@spacer * 2); -@btn-padding-horizontal-l: (@spacer * 3); + ``` 要修改这些 less 变量，需要改为从 npm ESM 产物中引入组件库：