github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: synchronous config-provider demo (#6706)

Browse Source
pull/6716/head
selicens 1 year ago committed by GitHub
parent 2ce4e7da82
commit f70b04c74f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 155 additions and 592 deletions
Show Stats Download Patch File Download Diff File

164
components/config-provider/demo/locale.vue
Unescape View File

@ -16,7 +16,7 @@ Components which need localization support are listed here, you can toggle the l
</docs> </docs>
<template> <template>
<div class="change-locale"> <div style="margin-bottom: 16px">
<span style="margin-right: 16px">Change locale of components:</span> <span style="margin-right: 16px">Change locale of components:</span>
<a-radio-group v-model:value="locale"> <a-radio-group v-model:value="locale">
<a-radio-button key="en" :value="enUS.locale">English</a-radio-button> <a-radio-button key="en" :value="enUS.locale">English</a-radio-button>
@ -24,11 +24,13 @@ Components which need localization support are listed here, you can toggle the l
</a-radio-group> </a-radio-group>
</div> </div>
<a-config-provider :locale="locale === 'en' ? enUS : zhCN"> <a-config-provider :locale="locale === 'en' ? enUS : zhCN">
<div class="locale-components"> <a-space
<div class="example"> direction="vertical"
<a-pagination :total="50" show-size-changer /> :size="[0, 16]"
</div> :style="{ width: '100%', paddingTop: '16px', borderTop: `1px solid ${token.colorBorder}` }"
<div class="example"> >
<a-pagination :total="50" show-size-changer />
<a-space wrap>
<a-select show-search style="width: 200px"> <a-select show-search style="width: 200px">
<a-select-option value="jack">jack</a-select-option> <a-select-option value="jack">jack</a-select-option>
<a-select-option value="lucy">lucy</a-select-option> <a-select-option value="lucy">lucy</a-select-option>
@ -36,33 +38,83 @@ Components which need localization support are listed here, you can toggle the l
<a-date-picker /> <a-date-picker />
<a-time-picker /> <a-time-picker />
<a-range-picker style="width: 200px" /> <a-range-picker style="width: 200px" />
</div> </a-space>
<div class="example"> <a-space wrap>
<a-button type="primary" @click="visible = true">Show Modal</a-button> <a-button type="primary" @click="visible = true">Show Modal</a-button>
<a-button @click="info">Show info</a-button> <a-button @click="info">Show info</a-button>
<a-button @click="confirm">Show confirm</a-button> <a-button @click="confirm">Show confirm</a-button>
<a-popconfirm title="Question?"> <a-popconfirm title="Question?">
<a href="#">Click to confirm</a> <a href="#">Click to confirm</a>
</a-popconfirm> </a-popconfirm>
</div> </a-space>
<div class="example"> <a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
<a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" /> <div
</div> :style="{
<div class="site-config-provider-calendar-wrapper"> width: '320px',
border: `1px solid ${token.colorBorder}`,
'border-radius': '8px',
}"
>
<a-calendar :fullscreen="false" /> <a-calendar :fullscreen="false" />
</div> </div>
<div class="example"> <a-form
<a-table :data-source="[]" :columns="columns" /> name="basic"
</div> :model="formModel"
auto-complete="off"
:label-col="{ sm: { span: 4 } }"
:wrapper-col="{ span: 6 }"
>
<a-form-item label="UserName" name="username" :rules="[{ required: true }]">
<a-input v-model:value="formModel.username" :width="200" />
</a-form-item>
<a-form-item label="Age" name="age" :rules="[{ type: 'number', min: 0, max: 99 }]">
<a-input-number v-model:value="formModel.age" :width="200" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 2, span: 6 }">
<a-button type="primary" html-type="submit">submit</a-button>
</a-form-item>
</a-form>
<a-table :data-source="[]" :columns="columns" />
<a-modal v-model:open="visible" title="Locale Modal"> <a-modal v-model:open="visible" title="Locale Modal">
<p>Locale Modal</p> <p>Locale Modal</p>
</a-modal> </a-modal>
</div> <a-space wrap :size="80">
<a-qrcode
value="https://antdv.com"
status="expired"
@refresh="() => console.log('refresh')"
/>
<a-image
:width="160"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a-space>
<a-upload list-type="picture-card" :file-list="fileList" />
<a-divider orientation="left">Tour</a-divider>
<a-button type="primary" @click="() => (tourOpen = true)">Begin Tour</a-button>
<a-space>
<a-button ref="ref1">upload</a-button>
<a-button ref="ref2" type="primary">save</a-button>
<a-button ref="ref3">
<template #icon>
<ellipsis-outlined />
</template>
</a-button>
</a-space>
<a-tour
v-model:current="current"
:open="tourOpen"
:steps="steps"
@close="() => (tourOpen = false)"
></a-tour>
</a-space>
</a-config-provider> </a-config-provider>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { Modal } from 'ant-design-vue'; import { Modal, theme } from 'ant-design-vue';
import type { TourProps, UploadFile } from 'ant-design-vue';
import { EllipsisOutlined } from '@ant-design/icons-vue';
import enUS from 'ant-design-vue/es/locale/en_US'; import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN'; import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@ -104,33 +156,55 @@ const confirm = () => {
content: 'some info', content: 'some info',
}); });
}; };
</script>
<style scoped>
.site-config-provider-calendar-wrapper {
width: 319px;
border: 1px solid #d9d9d9;
border-radius: 2px;
}
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.example { const formModel = ref({
margin: 16px 0; username: '',
} age: '100',
});
.example > * { const { token } = theme.useToken();
margin-right: 8px;
}
.change-locale { const fileList: UploadFile[] = [
margin-bottom: 16px; {
} uid: '-1',
[data-theme='dark'] .locale-components { name: 'image.png',
border-top: 1px solid #303030; status: 'done',
} url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
[data-theme='dark'] .site-config-provider-calendar-wrapper { },
border: 1px solid #303030; {
} uid: '-2',
</style> 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,
},
];
</script>

579
components/config-provider/demo/theme.vue
Unescape View File

@ -3,569 +3,56 @@
order: 5 order: 5
version: 3.0 version: 3.0
title: title:
zh-CN: 全局样式 zh-CN: 主题
en-US: Global Theme en-US: Theme
--- ---
## zh-CN ## zh-CN
通过 css variable 修改全局主题色（你可以切换到组件页面查看更详细的样式展示）。自动生成的变量可能会根据设计调整，请勿直接依赖。详细配置请[点击查看](/docs/vue/customize-theme-variable)。 通过 theme 修改主题。
## en-US ## 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.
</docs> </docs>
<template> <template>
<a-row :gutter="16" :wrap="false"> <a-config-provider
<a-col flex="none"> :theme="{ token: { colorPrimary: data.colorPrimary, borderRadius: `${data.borderRadius}px` } }"
<a-space direction="vertical" align="center"> >
<!-- Primary Color --> <a-form :model="data" name="theme" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<a-form-item name="colorPrimary" label="Primary Color">
<input <input
type="color" type="color"
:value="colorState.primaryColor" :value="data.colorPrimary"
@input="e => onColorChange('primaryColor', e)" @input="e => (data.colorPrimary = e.target.value)"
/> />
</a-form-item>
<span style="color: var(--ant-primary-color)">var(`--ant-primary-color`)</span> <a-form-item name="borderRadius" label="Border Radius">
<a-input v-model:value="data.borderRadius" />
<!-- Error Color --> </a-form-item>
<input <a-form-item name="submit" :wrapper-col="{ offset: 4, span: 20 }">
type="color" <a-button type="primary">submit</a-button>
:value="colorState.errorColor" </a-form-item>
@input="e => onColorChange('errorColor', e)" </a-form>
/> </a-config-provider>
<span style="color: var(--ant-error-color)">var(`--ant-error-color`)</span>
<!-- Warning Color -->
<input
type="color"
:value="colorState.warningColor"
@input="e => onColorChange('warningColor', e)"
/>
<span style="color: var(--ant-warning-color)">var(`--ant-warning-color`)</span>
<!-- Success Color -->
<input
type="color"
:value="colorState.successColor"
@input="e => onColorChange('successColor', e)"
/>
<span style="color: var(--ant-success-color)">var(`--ant-success-color`)</span>
<!-- Info Color -->
<input
type="color"
:value="colorState.infoColor"
@input="e => onColorChange('infoColor', e)"
/>
<span style="color: var(--ant-info-color)">var(`--ant-info-color`)</span>
</a-space>
</a-col>
<a-col flex="auto">
<a-space direction="vertical" style="width: 100%" :size="0">
<template #split><a-divider /></template>
<!-- Primary Button -->
<SplitSpace>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="text">Text</a-button>
<a-button type="link">Link</a-button>
</SplitSpace>
<!-- Danger Button -->
<SplitSpace>
<a-button danger type="primary">Primary</a-button>
<a-button danger>Default</a-button>
<a-button danger type="dashed">Dashed</a-button>
<a-button danger type="text">Text</a-button>
<a-button danger type="link">Link</a-button>
</SplitSpace>
<!-- Ghost Button -->
<SplitSpace style="background: rgb(190, 200, 200)">
<a-button type="primary" ghost>Primary</a-button>
<a-button ghost>Default</a-button>
<a-button type="dashed" ghost>Dashed</a-button>
<a-button type="primary" ghost danger>Primary</a-button>
<a-button ghost danger>Default</a-button>
<a-button type="dashed" ghost danger>Dashed</a-button>
</SplitSpace>
<!-- Typography -->
<SplitSpace>
<a-typography-text type="success">Text (success)</a-typography-text>
<a-typography-text type="warning">Text(warning)</a-typography-text>
<a-typography-text type="danger">Text(danger)</a-typography-text>
<a-typography-link href="https://ant.design" target="_blank">Link</a-typography-link>
<a-typography-text copyable>Text</a-typography-text>
<!-- Dropdown -->
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>1st menu item</a-menu-item>
<a-menu-item danger>a danger item</a-menu-item>
</a-menu>
</template>
<a class="ant-dropdown-link" @click.prevent>
Hover me
<DownOutlined />
</a>
</a-dropdown>
<!-- Spin -->
<a-spin />
</SplitSpace>
<!-- Menu - horizontal -->
<a-row :gutter="16">
<a-col :span="12">
<a-menu v-model:selectedKeys="selectedKeys" mode="horizontal">
<a-menu-item key="mail">
Mail
<template #icon>
<MailOutlined />
</template>
</a-menu-item>
<a-sub-menu key="SubMenu" title="Submenu">
<template #icon><SettingOutlined /></template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
</a-menu>
</a-col>
<a-col :span="12">
<a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" theme="dark">
<a-menu-item key="mail">
<template #icon><SettingOutlined /></template>
Mail
</a-menu-item>
<a-sub-menu key="SubMenu" title="Submenu">
<template #icon><SettingOutlined /></template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
</a-menu>
</a-col>
</a-row>
<!-- Menu - vertical -->
<a-row :gutter="16">
<a-col :span="12">
<a-menu v-model:selectedKeys="selectedKeys" mode="inline">
<a-menu-item key="mail">
<template #icon><MailOutlined /></template>
Mail
</a-menu-item>
<a-sub-menu key="SubMenu" title="Submenu">
<template #icon><SettingOutlined /></template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
</a-menu>
</a-col>
<a-col :span="12">
<a-menu v-model:selectedKeys="selectedKeys" mode="vertical" theme="dark">
<a-menu-item key="mail">
<template #icon><MailOutlined /></template>
Mail
</a-menu-item>
<a-sub-menu key="SubMenu" title="Submenu">
<template #icon><SettingOutlined /></template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
</a-menu>
</a-col>
</a-row>
<!-- Pagination -->
<a-pagination show-quick-jumper :default-current="2" :total="500" />
<!-- Steps -->
<a-steps :current="1" :percent="60" :items="stepsItems"></a-steps>
<!-- Steps - dot -->
<a-steps :current="2" status="error" progress-dot :items="stepsItems2"></a-steps>
<!-- Form - Input -->
<a-form>
<SplitSpace>
<a-form-item>
<a-input v-bind="inputProps" />
</a-form-item>
<a-form-item has-feedback validate-status="success">
<a-input v-bind="inputProps" />
</a-form-item>
<a-form-item has-feedback validate-status="warning">
<a-input v-bind="inputProps" />
</a-form-item>
<a-form-item has-feedback validate-status="error">
<a-input v-bind="inputProps" />
</a-form-item>
<a-form-item has-feedback validate-status="validating">
<a-input v-bind="inputProps" />
</a-form-item>
</SplitSpace>
</a-form>
<!-- Form - Select -->
<a-form>
<SplitSpace>
<a-form-item>
<a-select v-bind="selectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="success">
<a-select v-bind="selectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="warning">
<a-select v-bind="selectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="error">
<a-select v-bind="selectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="validating">
<a-select v-bind="selectProps" />
</a-form-item>
</SplitSpace>
</a-form>
<!-- Form - TreeSelect -->
<a-form>
<SplitSpace>
<a-form-item>
<a-tree-select v-bind="treeSelectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="success">
<a-tree-select v-bind="treeSelectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="warning">
<a-tree-select v-bind="treeSelectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="error">
<a-tree-select v-bind="treeSelectProps" />
</a-form-item>
<a-form-item has-feedback validate-status="validating">
<a-tree-select v-bind="treeSelectProps" />
</a-form-item>
</SplitSpace>
</a-form>
<!-- Form - InputNumber -->
<a-form>
<SplitSpace>
<a-form-item>
<a-input-number />
</a-form-item>
<a-form-item has-feedback validate-status="success">
<a-input-number />
</a-form-item>
<a-form-item has-feedback validate-status="warning">
<a-input-number />
</a-form-item>
<a-form-item has-feedback validate-status="error">
<a-input-number />
</a-form-item>
<a-form-item has-feedback validate-status="validating">
<a-input-number />
</a-form-item>
</SplitSpace>
</a-form>
<!-- Form - DatePicker -->
<a-form>
<SplitSpace>
<a-form-item>
<a-date-picker />
</a-form-item>
<a-form-item has-feedback validate-status="success">
<a-date-picker />
</a-form-item>
<a-form-item has-feedback validate-status="warning">
<a-date-picker />
</a-form-item>
<a-form-item has-feedback validate-status="error">
<a-date-picker />
</a-form-item>
<a-form-item has-feedback validate-status="validating">
<a-date-picker />
</a-form-item>
</SplitSpace>
</a-form>
<SplitSpace>
<a-checkbox>Checkbox</a-checkbox>
<a-radio-group default-value="bamboo">
<a-radio value="bamboo">Bamboo</a-radio>
<a-radio value="light">Light</a-radio>
<a-radio value="little">Little</a-radio>
</a-radio-group>
<a-mentions placeholder="Mention by @">
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
</a-mentions>
<a-slider :default-value="30" style="width: 100px" />
<a-switch default-checked />
</SplitSpace>
<SplitSpace>
<a-range-picker />
<a-time-range-picker />
</SplitSpace>
<a-row :gutter="16">
<a-col :span="8">
<!-- Card -->
<a-card style="width: 100%" :tab-list="carTabListNoTitle">
<template #tabBarExtraContent>
<a href="#">More</a>
</template>
</a-card>
</a-col>
<a-col :span="8">
<!-- Table -->
<a-table
size="small"
bordered
:row-selection="{}"
:columns="[
{
title: 'Key',
dataIndex: 'key',
filters: [
{
text: 'Little',
value: 'little',
},
],
sorter: (a, b) => a.key.length - b.key.length,
},
]"
:data-source="[
{
key: 'Bamboo',
},
{
key: 'Light',
},
{
key: 'Little',
},
]"
/>
</a-col>
<a-col :span="8">
<!-- Table -->
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</a-col>
</a-row>
<SplitSpace>
<a-tag color="success">success</a-tag>
<a-tag color="processing">processing</a-tag>
<a-tag color="error">error</a-tag>
<a-tag color="warning">warning</a-tag>
<a-tag color="default">default</a-tag>
<a-checkable-tag checked>CheckableTag</a-checkable-tag>
</SplitSpace>
<a-row :gutter="16">
<a-col :span="16">
<a-timeline mode="alternate">
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
<a-timeline-item color="gray">
Solve initial network problems 2015-09-01
</a-timeline-item>
<a-timeline-item>
<template #dot>
<ClockCircleOutlined style="font-size: 16px" />
</template>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</a-timeline-item>
</a-timeline>
</a-col>
<a-col :span="8">
<a-tree :tree-data="treeData" :height="200" default-expand-all checkable />
</a-col>
</a-row>
<!-- Alert -->
<a-row :gutter="16">
<a-col :span="6">
<a-alert show-icon message="Success Text" type="success" />
</a-col>
<a-col :span="6">
<a-alert show-icon message="Info Text" type="info" />
</a-col>
<a-col :span="6">
<a-alert show-icon message="Warning Text" type="warning" />
</a-col>
<a-col :span="6">
<a-alert show-icon message="Error Text" type="error" />
</a-col>
</a-row>
<!-- Progress -->
<a-row :gutter="16">
<a-col flex="auto">
<a-progress :percent="30" />
<a-progress :percent="70" status="exception" />
<a-progress :percent="100" />
</a-col>
<a-col flex="none">
<a-progress type="circle" :percent="75" />
<a-progress type="circle" :percent="70" status="exception" />
<a-progress type="circle" :percent="100" />
</a-col>
</a-row>
<a-transfer :data-source="transferData" :target-keys="['18']" :selected-keys="['3']">
<template #render="item">{{ item.title }}</template>
</a-transfer>
</a-space>
</a-col>
</a-row>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { h, reactive, ref } from 'vue'; import { ref } from 'vue';
import { ConfigProvider, Space, Divider } from 'ant-design-vue'; import { theme } from 'ant-design-vue';
import type { TreeSelectProps } from 'ant-design-vue';
import {
DownOutlined,
MailOutlined,
SettingOutlined,
ClockCircleOutlined,
} from '@ant-design/icons-vue';
const SplitSpace = (props, { slots }) =>
h(Space, { size: 4, ...props }, { ...slots, split: () => h(Divider, { type: 'vertical' }) });
const inputProps = {
style: { width: '128px' },
};
const selectProps = {
...inputProps,
options: [
{ value: 'light', label: 'Light' },
{ value: 'bamboo', label: 'Bamboo' },
{ value: 'little', label: 'Little' },
],
};
const treeData = [
{
value: 'little',
key: 'little',
label: 'Little',
title: 'Little',
children: [
{ value: 'light', key: 'light', label: 'Light', title: 'Light' },
{ value: 'bamboo', key: 'bamboo', label: 'Bamboo', title: 'Bamboo' },
],
},
];
const treeSelectProps: TreeSelectProps = { const defaultData = {
...inputProps, borderRadius: 6,
treeCheckable: true, colorPrimary: '#1677ff',
maxTagCount: 'responsive',
treeData,
}; };
const data = ref(defaultData);
const { token } = theme.useToken();
</script>
const carTabListNoTitle = [ <style scoped>
{ input[type='color'] {
key: 'article', border: 1px solid v-bind('token.colorBorder');
tab: 'article', background-color: v-bind('token.colorBgBase');
},
{
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}`,
});
} }
</style>
const colorState = reactive({
primaryColor: '#1890ff',
errorColor: '#ff4d4f',
warningColor: '#faad14',
successColor: '#52c41a',
infoColor: '#1890ff',
});
const onColorChange = (type: string, e: any) => {
Object.assign(colorState, { [type]: e.target.value });
ConfigProvider.config({
theme: colorState,
});
};
const selectedKeys = ref(['mail']);
const stepsItems = [
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
];
const stepsItems2 = [
{
title: 'Finished',
description: 'You can hover on the dot.',
},
{
title: 'In Progress',
description: 'You can hover on the dot.',
},
{
title: 'Waiting',
description: 'You can hover on the dot.',
},
];
</script>

4
components/theme/interface/seeds.ts
Unescape View File

@ -4,6 +4,8 @@ import type { PresetColorType } from './presetColors';
// ====================================================================== // ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
type BorderRadiusType = number | `${number}px` | `${number}%`;
export interface SeedToken extends PresetColorType { export interface SeedToken extends PresetColorType {
// ---------- Color ---------- // // ---------- Color ---------- //
@ -106,7 +108,7 @@ export interface SeedToken extends PresetColorType {
* @descEN Border radius of base components * @descEN Border radius of base components
* @desc 基础组件的圆角大小，例如按钮、输入框、卡片等 * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
*/ */
borderRadius: number; borderRadius: BorderRadiusType;
// ---------- Size ---------- // // ---------- Size ---------- //

Write Preview
Loading…
Cancel
Save