doc: add theme demo
tangjinzhou
parent
24ea3cd7f3
commit
9707506c5a
|
|
@ -0,0 +1,576 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 方向
|
||||
en-US: Direction
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
这里列出了支持 `rtl` 方向的组件，您可以在演示中切换方向。
|
||||
|
||||
## en-US
|
||||
|
||||
Components which support rtl direction are listed here, you can toggle the direction in the demo.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<span style="margin-right: 16px">Change direction of components:</span>
|
||||
<a-radio-group v-model:value="state.direction">
|
||||
<a-radio-button value="ltr">LTR</a-radio-button>
|
||||
<a-radio-button value="rtl">RTL</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-divider />
|
||||
<a-config-provider :direction="state.direction">
|
||||
<div class="direction-components">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Cascader example</a-divider>
|
||||
<a-cascader
|
||||
:options="cascaderOptions"
|
||||
placeholder="یک مورد انتخاب کنید"
|
||||
:placement="state.popupPlacement"
|
||||
@change="onCascaderChange"
|
||||
>
|
||||
<template #suffixIcon><SearchIcon /></template>
|
||||
</a-cascader>
|
||||
With search:
|
||||
<a-cascader
|
||||
:options="cascaderOptions"
|
||||
placeholder="Select an item"
|
||||
:placement="state.popupPlacement"
|
||||
:show-search="{ filter: cascaderFilter }"
|
||||
@change="onCascaderChange"
|
||||
>
|
||||
<template #suffixIcon><SmileOutlined /></template>
|
||||
</a-cascader>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Switch example</a-divider>
|
||||
|
||||
<a-switch default-checked />
|
||||
|
||||
<a-switch loading default-checked />
|
||||
|
||||
<a-switch size="small" loading />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Radio Group example</a-divider>
|
||||
|
||||
<a-radio-group default-value="c" button-style="solid">
|
||||
<a-radio-button value="a">تهران</a-radio-button>
|
||||
<a-radio-button value="b" disabled>اصفهان</a-radio-button>
|
||||
<a-radio-button value="c">فارس</a-radio-button>
|
||||
<a-radio-button value="d">خوزستان</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Button example</a-divider>
|
||||
<div class="button-demo">
|
||||
<a-button type="primary">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="circle">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="round">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
</a-button>
|
||||
<a-button type="primary" shape="round">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
Download
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
Download
|
||||
</a-button>
|
||||
<br />
|
||||
<a-button-group>
|
||||
<a-button type="primary">
|
||||
<LeftOutlined />
|
||||
Backward
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Forward
|
||||
<RightOutlined />
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
<a-button type="primary" loading>Loading</a-button>
|
||||
<a-button type="primary" size="small" loading>Loading</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Tree example</a-divider>
|
||||
<a-tree
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
show-line
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
>
|
||||
<template #title="{ title, key }">
|
||||
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
||||
<template v-else>{{ title }}</template>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Input (Input Group) example</a-divider>
|
||||
<a-input-group size="large">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="5">
|
||||
<a-input default-value="0571" />
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-input default-value="26888888" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-input-group>
|
||||
<br />
|
||||
<a-input-group compact>
|
||||
<a-input style="width: 20%" default-value="0571" />
|
||||
<a-input style="width: 30%" default-value="26888888" />
|
||||
</a-input-group>
|
||||
<br />
|
||||
<a-input-group compact>
|
||||
<a-select default-value="Option1">
|
||||
<a-select-option value="Option1">Option1</a-select-option>
|
||||
<a-select-option value="Option2">Option2</a-select-option>
|
||||
</a-select>
|
||||
<a-input style="width: 50%" default-value="input content" />
|
||||
<a-inputNumber />
|
||||
</a-input-group>
|
||||
<br />
|
||||
<a-input-search placeholder="input search text" enter-button="Search" size="large" />
|
||||
<br />
|
||||
<br />
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-input default-value="mysite">
|
||||
<template #selectBefore>
|
||||
<a-select default-value="Http://" style="width: 90px">
|
||||
<a-select-option value="Http://">Http://</a-select-option>
|
||||
<a-select-option value="Https://">Https://</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template #selectAfter>
|
||||
<a-select default-value=".com" style="width: 80px">
|
||||
<a-select-option value=".com">.com</a-select-option>
|
||||
<a-select-option value=".jp">.jp</a-select-option>
|
||||
<a-select-option value=".cn">.cn</a-select-option>
|
||||
<a-select-option value=".org">.org</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Select example</a-divider>
|
||||
<a-select mode="multiple" default-value="مورچه" style="width: 120px">
|
||||
<a-select-option value="jack">Jack</a-select-option>
|
||||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||||
<a-select-option value="disabled" disabled>Disabled</a-select-option>
|
||||
<a-select-option value="Yiminghe">yiminghe</a-select-option>
|
||||
</a-select>
|
||||
<a-select default-value="مورچه" style="width: 120px" disabled>
|
||||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||||
</a-select>
|
||||
<a-select default-value="مورچه" style="width: 120px" loading>
|
||||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
show-search
|
||||
style="width: 200px"
|
||||
placeholder="Select a person"
|
||||
option-filter-prop="children"
|
||||
:filter-option="
|
||||
(input, option) =>
|
||||
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
"
|
||||
>
|
||||
<a-select-option value="jack">Jack</a-select-option>
|
||||
<a-select-option value="سعید">سعید</a-select-option>
|
||||
<a-select-option value="tom">Tom</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">TreeSelect example</a-divider>
|
||||
<div>
|
||||
<a-tree-select
|
||||
show-search
|
||||
style="width: 100%"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
placeholder="Please select"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="treeSelectData"
|
||||
></a-tree-select>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Modal example</a-divider>
|
||||
<div>
|
||||
<a-button type="primary" @click="showModal">Open Modal</a-button>
|
||||
<a-modal v-model:visible="state.modalVisible" title="پنچره ساده">
|
||||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||||
</a-modal>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Steps example</a-divider>
|
||||
<div>
|
||||
<a-steps progress-dot :current="state.currentStep">
|
||||
<a-step title="Finished" description="This is a description." />
|
||||
<a-step title="In Progress" description="This is a description." />
|
||||
<a-step title="Waiting" description="This is a description." />
|
||||
</a-steps>
|
||||
<br />
|
||||
<a-steps :current="state.currentStep" @change="onStepsChange">
|
||||
<a-step title="Step 1" description="This is a description." />
|
||||
<a-step title="Step 2" description="This is a description." />
|
||||
<a-step title="Step 3" description="This is a description." />
|
||||
</a-steps>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Rate example</a-divider>
|
||||
<div>
|
||||
<a-rate v-model:value="rateValue" />
|
||||
<br />
|
||||
<strong>* Note:</strong>
|
||||
Half star not implemented in RTL direction.
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-divider orientation="left">Badge example</a-divider>
|
||||
<div>
|
||||
<div>
|
||||
<a-badge :count="state.badgeCount">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-button-group>
|
||||
<a-button @click="declineBadge">
|
||||
<MinusOutlined />
|
||||
</a-button>
|
||||
<a-button @click="increaseBadge">
|
||||
<PlusOutlined />
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<a-badge :dot="state.showBadge">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-switch :checked="state.showBadge" @change="onChangeBadge" />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Pagination example</a-divider>
|
||||
<a-pagination show-size-changer :default-current="3" :total="500" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-divider orientation="left">Grid System example</a-divider>
|
||||
<div class="grid-demo">
|
||||
<div class="code-box-demo">
|
||||
<p>
|
||||
<strong>* Note:</strong>
|
||||
Every calculation in RTL grid system is from right side (offset, push, etc.)
|
||||
</p>
|
||||
<a-row>
|
||||
<a-col :span="8">col-8</a-col>
|
||||
<a-col :span="8" :offset="8">col-8</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
|
||||
<a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12" :offset="6">col-12 col-offset-6</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="18" :push="6">col-18 col-push-6</a-col>
|
||||
<a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, watch, ref } from 'vue';
|
||||
|
||||
import {
|
||||
SearchOutlined as SearchIcon,
|
||||
SmileOutlined,
|
||||
DownloadOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
MinusOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { TreeProps, TreeSelectProps, CascaderProps } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SmileOutlined,
|
||||
DownloadOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
MinusOutlined,
|
||||
PlusOutlined,
|
||||
SearchIcon,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
currentStep: 0,
|
||||
modalVisible: false,
|
||||
|
||||
badgeCount: 5,
|
||||
showBadge: true,
|
||||
direction: 'ltr' as 'ltr' | 'rtl',
|
||||
popupPlacement: 'bottomLeft' as CascaderProps['placement'],
|
||||
});
|
||||
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||||
|
||||
const treeData: TreeProps['treeData'] = [
|
||||
{
|
||||
title: 'parent 1',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: 'parent 1-0',
|
||||
key: '0-0-0',
|
||||
disabled: true,
|
||||
children: [
|
||||
{ title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
|
||||
{ title: 'leaf', key: '0-0-0-1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
key: '0-0-1',
|
||||
children: [{ key: '0-0-1-0', title: 'sss' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const treeSelectData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
title: 'parent 1',
|
||||
value: 'parent 1',
|
||||
children: [
|
||||
{
|
||||
title: 'parent 1-0',
|
||||
value: 'parent 1-0',
|
||||
children: [
|
||||
{
|
||||
title: 'my leaf',
|
||||
value: 'leaf1',
|
||||
},
|
||||
{
|
||||
title: 'your leaf',
|
||||
value: 'leaf2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
value: 'parent 1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
watch(
|
||||
() => state.direction,
|
||||
directionValue => {
|
||||
if (directionValue === 'rtl') {
|
||||
state.popupPlacement = 'bottomRight';
|
||||
} else {
|
||||
state.popupPlacement = 'bottomLeft';
|
||||
}
|
||||
},
|
||||
);
|
||||
const cascaderOptions = [
|
||||
{
|
||||
value: 'tehran',
|
||||
label: 'تهران',
|
||||
children: [
|
||||
{
|
||||
value: 'tehran-c',
|
||||
label: 'تهران',
|
||||
children: [
|
||||
{
|
||||
value: 'saadat-abad',
|
||||
label: 'سعادت آیاد',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'ardabil',
|
||||
label: 'اردبیل',
|
||||
children: [
|
||||
{
|
||||
value: 'ardabil-c',
|
||||
label: 'اردبیل',
|
||||
children: [
|
||||
{
|
||||
value: 'primadar',
|
||||
label: 'پیرمادر',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'gilan',
|
||||
label: 'گیلان',
|
||||
children: [
|
||||
{
|
||||
value: 'rasht',
|
||||
label: 'رشت',
|
||||
children: [
|
||||
{
|
||||
value: 'district-3',
|
||||
label: 'منطقه ۳',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ==== Cascader ====
|
||||
const cascaderFilter = (inputValue, path) =>
|
||||
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||||
|
||||
const onCascaderChange = value => {
|
||||
console.log(value);
|
||||
};
|
||||
// ==== End Cascader ====
|
||||
|
||||
// ==== Modal ====
|
||||
const showModal = () => {
|
||||
state.modalVisible = true;
|
||||
};
|
||||
|
||||
// ==== End Modal ====
|
||||
|
||||
const onStepsChange = currentStep => {
|
||||
console.log('onChange:', currentStep);
|
||||
state.currentStep = currentStep;
|
||||
};
|
||||
|
||||
// ==== Badge ====
|
||||
|
||||
const increaseBadge = () => {
|
||||
const badgeCount = state.badgeCount + 1;
|
||||
state.badgeCount = badgeCount;
|
||||
};
|
||||
|
||||
const declineBadge = () => {
|
||||
let badgeCount = state.badgeCount - 1;
|
||||
if (badgeCount < 0) {
|
||||
badgeCount = 0;
|
||||
}
|
||||
state.badgeCount = badgeCount;
|
||||
};
|
||||
|
||||
const onChangeBadge = showBadge => {
|
||||
state.showBadge = showBadge;
|
||||
};
|
||||
return {
|
||||
state,
|
||||
cascaderOptions,
|
||||
cascaderFilter,
|
||||
onCascaderChange,
|
||||
showModal,
|
||||
onStepsChange,
|
||||
increaseBadge,
|
||||
declineBadge,
|
||||
onChangeBadge,
|
||||
expandedKeys,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
treeData,
|
||||
treeSelectData,
|
||||
rateValue: ref(2),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.direction-components {
|
||||
.button-demo .ant-btn,
|
||||
.button-demo .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.button-demo .ant-btn-group > .ant-btn,
|
||||
.button-demo .ant-btn-group > span > .ant-btn {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.head-example {
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
vertical-align: middle;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .head-example {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<demo-sort :cols="1">
|
||||
<Locale />
|
||||
<Size />
|
||||
<Theme />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Locale from './locale.vue';
|
||||
import Size from './size.vue';
|
||||
import Theme from './theme.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
|
@ -14,6 +18,8 @@ export default defineComponent({
|
|||
US,
|
||||
components: {
|
||||
Locale,
|
||||
Size,
|
||||
Theme,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 组件尺寸
|
||||
en-US: Component size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
修改默认组件尺寸。
|
||||
|
||||
## en-US
|
||||
|
||||
Config component default size.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="componentSize">
|
||||
<a-radio-button value="small">Small</a-radio-button>
|
||||
<a-radio-button value="middle">Middle</a-radio-button>
|
||||
<a-radio-button value="large">Large</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-divider />
|
||||
<a-config-provider :component-size="componentSize">
|
||||
<div class="example">
|
||||
<a-input />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-tabs>
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-input-search allow-clear />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-textarea allow-clear />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-select style="width: 100px" placeholder="select value" :options="[{ value: 'demo' }]" />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-datePicker />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-range-picker />
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-button>Button</a-button>
|
||||
</div>
|
||||
<div class="example">
|
||||
<a-card title="Card">
|
||||
<a-table :columns="columns" :data-source="dataSource" />
|
||||
</a-card>
|
||||
</div>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const componentSize = ref('small');
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
];
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
},
|
||||
];
|
||||
return {
|
||||
componentSize,
|
||||
columns,
|
||||
dataSource,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,574 @@
|
|||
<docs>
|
||||
---
|
||||
order: 5
|
||||
version: 3.0
|
||||
title:
|
||||
zh-CN: 全局样式
|
||||
en-US: Global Theme
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 css variable 修改全局主题色（你可以切换到组件页面查看更详细的样式展示）。自动生成的变量可能会根据设计调整，请勿直接依赖。详细配置请[点击查看](/docs/vue/customize-theme-variable)。
|
||||
|
||||
## 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.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-row :gutter="16" :wrap="false">
|
||||
<a-col flex="none">
|
||||
<a-space direction="vertical" align="center">
|
||||
<!-- Primary Color -->
|
||||
<input
|
||||
type="color"
|
||||
:value="colorState.primaryColor"
|
||||
@input="e => onColorChange('primaryColor', e)"
|
||||
/>
|
||||
|
||||
<span style="color: var(--ant-primary-color)">var(`--ant-primary-color`)</span>
|
||||
|
||||
<!-- Error Color -->
|
||||
<input
|
||||
type="color"
|
||||
:value="colorState.errorColor"
|
||||
@input="e => onColorChange('errorColor', e)"
|
||||
/>
|
||||
|
||||
<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">
|
||||
<a-step title="Finished" description="This is a description." />
|
||||
<a-step
|
||||
title="In Progress"
|
||||
sub-title="Left 00:00:08"
|
||||
description="This is a description."
|
||||
/>
|
||||
<a-step title="Waiting" description="This is a description." />
|
||||
</a-steps>
|
||||
|
||||
<!-- Steps - dot -->
|
||||
<a-steps :current="2" status="error" progress-dot>
|
||||
<a-step title="Finished" description="You can hover on the dot." />
|
||||
<a-step title="In Progress" description="You can hover on the dot." />
|
||||
<a-step title="Error" description="You can hover on the dot." />
|
||||
<a-step title="Waiting" description="You can hover on the dot." />
|
||||
</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>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, reactive, ref } from 'vue';
|
||||
import { ConfigProvider, Space, Divider } from 'ant-design-vue';
|
||||
import type { TreeSelectProps } from 'ant-design-vue';
|
||||
import {
|
||||
DownOutlined,
|
||||
MailOutlined,
|
||||
SettingOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
MailOutlined,
|
||||
SettingOutlined,
|
||||
ClockCircleOutlined,
|
||||
SplitSpace: (props, { slots }) =>
|
||||
h(Space, { size: 4, ...props }, { ...slots, split: () => h(Divider, { type: 'vertical' }) }),
|
||||
},
|
||||
setup() {
|
||||
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 = {
|
||||
...inputProps,
|
||||
treeCheckable: true,
|
||||
maxTagCount: 'responsive',
|
||||
treeData,
|
||||
};
|
||||
|
||||
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}`,
|
||||
});
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
};
|
||||
return {
|
||||
selectProps,
|
||||
carTabListNoTitle,
|
||||
onColorChange,
|
||||
treeData,
|
||||
treeSelectProps,
|
||||
transferData,
|
||||
colorState,
|
||||
inputProps,
|
||||
selectedKeys: ref(['mail']),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue