Skip to content

Commit f70b04c

Browse files
selicensselicens
authored
docs: synchronous config-provider demo (#6706)
1 parent 2ce4e7d commit f70b04c

File tree

3 files changed

+155
-592
lines changed

3 files changed

+155
-592
lines changed

‎components/config-provider/demo/locale.vue

+119-45
Original file line numberDiff line numberDiff line change
@@ -16,53 +16,105 @@ Components which need localization support are listed here, you can toggle the l
1616
</docs>
1717

1818
<template>
19-
<div class="change-locale">
19+
<div style="margin-bottom: 16px">
2020
<span style="margin-right: 16px">Change locale of components:</span>
2121
<a-radio-group v-model:value="locale">
2222
<a-radio-button key="en" :value="enUS.locale">English</a-radio-button>
2323
<a-radio-button key="cn" :value="zhCN.locale">中文</a-radio-button>
2424
</a-radio-group>
2525
</div>
2626
<a-config-provider :locale="locale === 'en' ? enUS : zhCN">
27-
<div class="locale-components">
28-
<div class="example">
29-
<a-pagination :total="50" show-size-changer />
30-
</div>
31-
<div class="example">
27+
<a-space
28+
direction="vertical"
29+
:size="[0, 16]"
30+
:style="{ width: '100%', paddingTop: '16px', borderTop: `1px solid ${token.colorBorder}` }"
31+
>
32+
<a-pagination :total="50" show-size-changer />
33+
<a-space wrap>
3234
<a-select show-search style="width: 200px">
3335
<a-select-option value="jack">jack</a-select-option>
3436
<a-select-option value="lucy">lucy</a-select-option>
3537
</a-select>
3638
<a-date-picker />
3739
<a-time-picker />
3840
<a-range-picker style="width: 200px" />
39-
</div>
40-
<div class="example">
41+
</a-space>
42+
<a-space wrap>
4143
<a-button type="primary" @click="visible = true">Show Modal</a-button>
4244
<a-button @click="info">Show info</a-button>
4345
<a-button @click="confirm">Show confirm</a-button>
4446
<a-popconfirm title="Question?">
4547
<a href="#">Click to confirm</a>
4648
</a-popconfirm>
47-
</div>
48-
<div class="example">
49-
<a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
50-
</div>
51-
<div class="site-config-provider-calendar-wrapper">
49+
</a-space>
50+
<a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
51+
<div
52+
:style="{
53+
width: '320px',
54+
border: `1px solid ${token.colorBorder}`,
55+
'border-radius': '8px',
56+
}"
57+
>
5258
<a-calendar :fullscreen="false" />
5359
</div>
54-
<div class="example">
55-
<a-table :data-source="[]" :columns="columns" />
56-
</div>
60+
<a-form
61+
name="basic"
62+
:model="formModel"
63+
auto-complete="off"
64+
:label-col="{ sm: { span: 4 } }"
65+
:wrapper-col="{ span: 6 }"
66+
>
67+
<a-form-item label="UserName" name="username" :rules="[{ required: true }]">
68+
<a-input v-model:value="formModel.username" :width="200" />
69+
</a-form-item>
70+
<a-form-item label="Age" name="age" :rules="[{ type: 'number', min: 0, max: 99 }]">
71+
<a-input-number v-model:value="formModel.age" :width="200" />
72+
</a-form-item>
73+
<a-form-item :wrapper-col="{ offset: 2, span: 6 }">
74+
<a-button type="primary" html-type="submit">submit</a-button>
75+
</a-form-item>
76+
</a-form>
77+
<a-table :data-source="[]" :columns="columns" />
5778
<a-modal v-model:open="visible" title="Locale Modal">
5879
<p>Locale Modal</p>
5980
</a-modal>
60-
</div>
81+
<a-space wrap :size="80">
82+
<a-qrcode
83+
value="https://antdv.com"
84+
status="expired"
85+
@refresh="() => console.log('refresh')"
86+
/>
87+
<a-image
88+
:width="160"
89+
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
90+
/>
91+
</a-space>
92+
<a-upload list-type="picture-card" :file-list="fileList" />
93+
<a-divider orientation="left">Tour</a-divider>
94+
<a-button type="primary" @click="() => (tourOpen = true)">Begin Tour</a-button>
95+
<a-space>
96+
<a-button ref="ref1">upload</a-button>
97+
<a-button ref="ref2" type="primary">save</a-button>
98+
<a-button ref="ref3">
99+
<template #icon>
100+
<ellipsis-outlined />
101+
</template>
102+
</a-button>
103+
</a-space>
104+
<a-tour
105+
v-model:current="current"
106+
:open="tourOpen"
107+
:steps="steps"
108+
@close="() => (tourOpen = false)"
109+
></a-tour>
110+
</a-space>
61111
</a-config-provider>
62112
</template>
63113
<script lang="ts" setup>
64114
import { ref, watch } from 'vue';
65-
import { Modal } from 'ant-design-vue';
115+
import { Modal, theme } from 'ant-design-vue';
116+
import type { TourProps, UploadFile } from 'ant-design-vue';
117+
import { EllipsisOutlined } from '@ant-design/icons-vue';
66118
import enUS from 'ant-design-vue/es/locale/en_US';
67119
import zhCN from 'ant-design-vue/es/locale/zh_CN';
68120
import dayjs from 'dayjs';
@@ -104,33 +156,55 @@ const confirm = () => {
104156
content: 'some info',
105157
});
106158
};
107-
</script>
108-
<style scoped>
109-
.site-config-provider-calendar-wrapper {
110-
width: 319px;
111-
border: 1px solid #d9d9d9;
112-
border-radius: 2px;
113-
}
114-
.locale-components {
115-
border-top: 1px solid #d9d9d9;
116-
padding-top: 16px;
117-
}
118159
119-
.example {
120-
margin: 16px 0;
121-
}
160+
const formModel = ref({
161+
username: '',
162+
age: '100',
163+
});
122164
123-
.example > * {
124-
margin-right: 8px;
125-
}
165+
const { token } = theme.useToken();
126166
127-
.change-locale {
128-
margin-bottom: 16px;
129-
}
130-
[data-theme='dark'] .locale-components {
131-
border-top: 1px solid #303030;
132-
}
133-
[data-theme='dark'] .site-config-provider-calendar-wrapper {
134-
border: 1px solid #303030;
135-
}
136-
</style>
167+
const fileList: UploadFile[] = [
168+
{
169+
uid: '-1',
170+
name: 'image.png',
171+
status: 'done',
172+
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
173+
},
174+
{
175+
uid: '-2',
176+
percent: 50,
177+
name: 'image.png',
178+
status: 'uploading',
179+
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
180+
},
181+
{
182+
uid: '-3',
183+
name: 'image.png',
184+
status: 'error',
185+
},
186+
];
187+
188+
const ref1 = ref(null);
189+
const ref2 = ref(null);
190+
const ref3 = ref(null);
191+
const current = ref(0);
192+
const tourOpen = ref(false);
193+
const steps: TourProps['steps'] = [
194+
{
195+
title: 'Upload File',
196+
description: 'Put your files here.',
197+
target: () => ref1.value && ref1.value.$el,
198+
},
199+
{
200+
title: 'Save',
201+
description: 'Save your changes.',
202+
target: () => ref2.value && ref2.value.$el,
203+
},
204+
{
205+
title: 'Other Actions',
206+
description: 'Click to see other actions.',
207+
target: () => ref3.value && ref3.value.$el,
208+
},
209+
];
210+
</script>

0 commit comments

Comments
 (0)