From db003263153f1068aeb88791e90ceb1fc4de3cbe Mon Sep 17 00:00:00 2001 From: ZhouWei <1244620067@qq.com> Date: Mon, 3 Jul 2023 18:28:41 +0800 Subject: [PATCH] docs: synchronous config-provider demo --- components/config-provider/demo/locale.vue | 164 ++++-- components/config-provider/demo/theme.vue | 579 ++------------------- components/theme/interface/seeds.ts | 4 +- 3 files changed, 155 insertions(+), 592 deletions(-) diff --git a/components/config-provider/demo/locale.vue b/components/config-provider/demo/locale.vue index 33e8564743..f62319df44 100644 --- a/components/config-provider/demo/locale.vue +++ b/components/config-provider/demo/locale.vue @@ -16,7 +16,7 @@ Components which need localization support are listed here, you can toggle the l - +const fileList: UploadFile[] = [ + { + uid: '-1', + name: 'image.png', + status: 'done', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + }, + { + uid: '-2', + percent: 50, + name: 'image.png', + status: 'uploading', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + }, + { + uid: '-3', + name: 'image.png', + status: 'error', + }, +]; + +const ref1 = ref(null); +const ref2 = ref(null); +const ref3 = ref(null); +const current = ref(0); +const tourOpen = ref(false); +const steps: TourProps['steps'] = [ + { + title: 'Upload File', + description: 'Put your files here.', + target: () => ref1.value && ref1.value.$el, + }, + { + title: 'Save', + description: 'Save your changes.', + target: () => ref2.value && ref2.value.$el, + }, + { + title: 'Other Actions', + description: 'Click to see other actions.', + target: () => ref3.value && ref3.value.$el, + }, +]; + diff --git a/components/config-provider/demo/theme.vue b/components/config-provider/demo/theme.vue index 99f7957124..da33ab06ef 100644 --- a/components/config-provider/demo/theme.vue +++ b/components/config-provider/demo/theme.vue @@ -3,569 +3,56 @@ order: 5 version: 3.0 title: - zh-CN: 全局样式 - en-US: Global Theme + zh-CN: 主题 + en-US: Theme --- ## zh-CN -通过 css variable 修改全局主题色（你可以切换到组件页面查看更详细的样式展示）。自动生成的变量可能会根据设计调整，请勿直接依赖。详细配置请[点击查看](/docs/vue/customize-theme-variable)。 +通过 theme 修改主题。 ## en-US -Modify global theme color by css variable. Css variable depends on the design, it may adjust so please do not directly use it. You can go to other components page for more detail style. [Check this](/docs/vue/customize-theme-variable) to view detail. +Modify theme by `theme` prop. -const carTabListNoTitle = [ - { - key: 'article', - tab: 'article', - }, - { - key: 'app', - tab: 'app', - }, - { - key: 'project', - tab: 'project', - }, -]; - -const transferData = []; - -for (let i = 0; i < 20; i++) { - transferData.push({ - key: i.toString(), - title: `content${i + 1}`, - description: `description of content${i + 1}`, - }); + diff --git a/components/theme/interface/seeds.ts b/components/theme/interface/seeds.ts index 22b07d81ab..176cb5e26e 100644 --- a/components/theme/interface/seeds.ts +++ b/components/theme/interface/seeds.ts @@ -4,6 +4,8 @@ import type { PresetColorType } from './presetColors'; // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 +type BorderRadiusType = number | `${number}px` | `${number}%`; + export interface SeedToken extends PresetColorType { // ---------- Color ---------- // @@ -106,7 +108,7 @@ export interface SeedToken extends PresetColorType { * @descEN Border radius of base components * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等 */ - borderRadius: number; + borderRadius: BorderRadiusType; // ---------- Size ---------- //