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

docs: use a-space replace br in demo (#6861)

pull/6871/head
Konv Suu 1 year ago committed by GitHub
parent
80a5b531f6
commit
22b21cdac8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 230 additions and 269 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      components/badge/demo/ribbon.vue
  2. 19
      components/badge/demo/status.vue
  3. 381
      components/config-provider/demo/direction.vue
  4. 14
      components/input/demo/group.vue
  5. 2
      components/input/demo/presuffix.vue
  6. 13
      components/progress/demo/steps.vue
  7. 20
      components/space/demo/compact.vue

50
components/badge/demo/ribbon.vue
Unescape View File

@ -16,28 +16,30 @@ Use ribbon badge.
</docs>
<template>
<a-badge-ribbon text="Hippies">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="pink">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="red">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="cyan">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="green">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="purple">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="volcano">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="magenta">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-space direction="vertical" style="width: 100%">
<a-badge-ribbon text="Hippies">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="pink">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="red">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="cyan">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="green">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="purple">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="volcano">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="magenta">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
</a-space>
</template>

19
components/badge/demo/status.vue
Unescape View File

@ -1,7 +1,7 @@
<docs>
---
order: 4
title:
title:
zh-CN: 状态点
en-US: Status
---
@ -22,13 +22,12 @@ Standalone badge with status.
<a-badge status="processing" />
<a-badge status="warning" />
<br />
<a-badge status="success" text="Success" />
<br />
<a-badge status="error" text="Error" />
<br />
<a-badge status="default" text="Default" />
<br />
<a-badge status="processing" text="Processing" />
<br />
<a-badge status="warning" text="warning" />
<a-space direction="vertical">
<a-badge status="success" text="Success" />
<a-badge status="error" text="Error" />
<a-badge status="default" text="Default" />
<a-badge status="processing" text="Processing" />
<a-badge status="warning" text="warning" />
</a-space>
</template>

381
components/config-provider/demo/direction.vue
Unescape View File

@ -24,7 +24,7 @@ Components which support rtl direction are listed here, you can toggle the direc
</a-radio-group>
<a-divider />
<a-config-provider :direction="state.direction">
<div class="direction-components">
<a-space direction="vertical" class="direction-components">
<a-row>
<a-col :span="24">
<a-divider orientation="left">Cascader example</a-divider>
@ -48,20 +48,17 @@ Components which support rtl direction are listed here, you can toggle the direc
</a-cascader>
</a-col>
</a-row>
<br />
<a-row>
<a-col :span="12">
<a-divider orientation="left">Switch example</a-divider>
&nbsp;&nbsp;
<a-switch default-checked />
&nbsp;&nbsp;
<a-switch loading default-checked />
&nbsp;&nbsp;
<a-switch size="small" loading />
<a-space>
<a-switch default-checked />
<a-switch loading default-checked />
<a-switch size="small" loading />
</a-space>
</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>
@ -70,7 +67,6 @@ Components which support rtl direction are listed here, you can toggle the direc
</a-radio-group>
</a-col>
</a-row>
<br />
<a-row>
<a-col :span="12">
<a-divider orientation="left">Button example</a-divider>
@ -124,209 +120,199 @@ Components which support rtl direction are listed here, you can toggle the direc
</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-space direction="vertical" style="width: 100%">
<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>
<a-input-group compact>
<a-input style="width: 20%" default-value="0571" />
<a-input style="width: 30%" default-value="26888888" />
</a-input-group>
<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>
<a-input-search placeholder="input search text" enter-button="Search" size="large" />
<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>
<a-row>
<a-col :span="12">
<a-divider orientation="left">Select example</a-divider>
<a-space wrap>
<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-space>
</a-col>
<a-col :span="8">
<a-input default-value="26888888" />
<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>
</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:open="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"
:items="[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]"
></a-steps>
<br />
<a-steps
:current="state.currentStep"
:items="[
{
title: 'Step 1',
description: 'This is a description.',
},
{
title: 'Step 2',
description: 'This is a description.',
},
{
title: 'Step 3',
description: 'This is a description.',
},
]"
@change="onStepsChange"
></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>
<a-row>
<a-col :span="24">
<a-divider orientation="left">Modal example</a-divider>
<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>
<a-button type="primary" @click="showModal">Open Modal</a-button>
<a-modal v-model:open="state.modalVisible" title="پنچره ساده">
<p>نگاشته‌های خود را اینجا قراردهید</p>
<p>نگاشته‌های خود را اینجا قراردهید</p>
<p>نگاشته‌های خود را اینجا قراردهید</p>
</a-modal>
</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" />
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-divider orientation="left">Steps example</a-divider>
<div>
<a-steps
progress-dot
:current="state.currentStep"
:items="[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]"
></a-steps>
<br />
<a-steps
:current="state.currentStep"
:items="[
{
title: 'Step 1',
description: 'This is a description.',
},
{
title: 'Step 2',
description: 'This is a description.',
},
{
title: 'Step 3',
description: 'This is a description.',
},
]"
@change="onStepsChange"
></a-steps>
</div>
</a-col>
</a-row>
<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>
</div>
</a-col>
</a-row>
</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-space>
</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>
@ -355,7 +341,7 @@ Components which support rtl direction are listed here, you can toggle the direc
</div>
</a-col>
</a-row>
</div>
</a-space>
</a-config-provider>
</template>
<script lang="ts" setup>
@ -538,6 +524,7 @@ const rateValue = ref(2);
</script>
<style lang="less" scoped>
.direction-components {
width: 100%;
.button-demo .ant-btn,
.button-demo .ant-btn-group {
margin-right: 8px;

14
components/input/demo/group.vue
Unescape View File

@ -18,7 +18,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</docs>
<template>
<div class="site-input-group-wrapper">
<a-space class="site-input-group-wrapper" direction="vertical" size="middle">
<a-input-group size="large">
<a-row :gutter="8">
<a-col :span="5">
@ -29,12 +29,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</a-col>
</a-row>
</a-input-group>
<br />
<a-input-group compact>
<a-input v-model:value="value1" style="width: 20%" />
<a-input v-model:value="value2" style="width: 30%" />
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value3">
<a-select-option value="Zhejiang">Zhejiang</a-select-option>
@ -42,7 +40,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</a-select>
<a-input v-model:value="value4" style="width: 50%" />
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value5">
<a-select-option value="Option1">Option1</a-select-option>
@ -50,12 +47,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</a-select>
<a-input v-model:value="value6" style="width: 50%" />
</a-input-group>
<br />
<a-input-group compact>
<a-input v-model:value="value7" style="width: 50%" />
<a-date-picker v-model:value="value8" style="width: 50%" />
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value9">
<a-select-option value="Option1-1">Option1-1</a-select-option>
@ -66,7 +61,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
<a-select-option value="Option2-2">Option2-2</a-select-option>
</a-select>
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value11">
<a-select-option value="1">Between</a-select-option>
@ -91,7 +85,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
placeholder="Maximum"
/>
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value15">
<a-select-option value="Sign Up">Sign Up</a-select-option>
@ -104,7 +97,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
placeholder="Email"
/>
</a-input-group>
<br />
<a-input-group compact>
<a-select v-model:value="value17" style="width: 30%">
<a-select-option value="Home">Home</a-select-option>
@ -117,12 +109,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
placeholder="Select Address"
/>
</a-input-group>
<br />
<a-input-group compact>
<a-input v-model:value="value19" style="width: calc(100% - 200px)" />
<a-button type="primary">Submit</a-button>
</a-input-group>
<br />
<a-input-group compact>
<a-input v-model:value="value20" style="width: calc(100% - 200px)" />
<a-tooltip title="copy git url">
@ -131,7 +121,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</a-button>
</a-tooltip>
</a-input-group>
</div>
</a-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

2
components/input/demo/presuffix.vue
Unescape View File

@ -19,7 +19,7 @@ Add prefix or suffix icons inside input.
<div class="components-input-demo-presuffix">
<a-input v-model:value="userName" placeholder="Basic usage">
<template #prefix>
<user-outlined type="user" />
<user-outlined />
</template>
<template #suffix>
<a-tooltip title="Extra information">

13
components/progress/demo/steps.vue
Unescape View File

@ -17,11 +17,10 @@ A progress bar with steps.
</docs>
<template>
<a-progress :percent="50" :steps="3" />
<br />
<a-progress :percent="30" :steps="5" />
<br />
<a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
<br />
<a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
<a-space direction="vertical" style="width: 100%">
<a-progress :percent="50" :steps="3" />
<a-progress :percent="30" :steps="5" />
<a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
<a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
</a-space>
</template>

20
components/space/demo/compact.vue
Unescape View File

@ -17,22 +17,19 @@ Compact Mode for form component.
</docs>
<template>
<div class="site-space-compact-wrapper">
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
<a-space-compact block>
<a-input :style="{ width: '20%' }" default-value="0571" />
<a-input :style="{ width: '30%' }" default-value="26888888" />
</a-space-compact>
<br />
<a-space-compact block size="small">
<a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
<a-button type="primary">Submit</a-button>
</a-space-compact>
<br />
<a-space-compact block>
<a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
<a-button type="primary">Submit</a-button>
</a-space-compact>
<br />
<a-space-compact block>
<a-input
:style="{ width: 'calc(100% - 200px)' }"
@ -44,7 +41,6 @@ Compact Mode for form component.
</a-button>
</a-tooltip>
</a-space-compact>
<br />
<a-space-compact block>
<a-select default-value="Zhejiang" allow-clear>
<a-select-option value="Zhejiang">Zhejiang</a-select-option>
@ -52,7 +48,6 @@ Compact Mode for form component.
</a-select>
<a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
</a-space-compact>
<br />
<a-space-compact block>
<a-select allow-clear mode="multiple" default-value="Zhejianggggg" :style="{ width: '50%' }">
<a-select-option value="Zhejianggggg">Zhejianggggg</a-select-option>
@ -60,13 +55,11 @@ Compact Mode for form component.
</a-select>
<a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
</a-space-compact>
<br />
<a-space-compact block>
<a-input-search :style="{ width: '30%' }" default-value="0571" />
<a-input-search allow-clear :style="{ width: '50%' }" default-value="26888888" />
<a-input-search :style="{ width: '20%' }" default-value="+1" />
</a-space-compact>
<br />
<a-space-compact block>
<a-select default-value="Option1">
<a-select-option value="Option1">Option1</a-select-option>
@ -75,23 +68,19 @@ Compact Mode for form component.
<a-input :style="{ width: '50%' }" default-value="input content" />
<a-input-number :default-value="12" />
</a-space-compact>
<br />
<a-space-compact block>
<a-input :style="{ width: '50%' }" default-value="input content" />
<a-date-picker :style="{ width: '50%' }" />
</a-space-compact>
<br />
<a-space-compact block>
<a-range-picker :style="{ width: '70%' }" />
<a-input :style="{ width: '30%' }" default-value="input content" />
<a-button type="primary">查询</a-button>
</a-space-compact>
<br />
<a-space-compact block>
<a-input :style="{ width: '30%' }" default-value="input content" />
<a-range-picker :style="{ width: '70%' }" />
</a-space-compact>
<br />
<a-space-compact block>
<a-select default-value="Option1-1">
<a-select-option value="Option1-1">Option1-1</a-select-option>
@ -102,7 +91,6 @@ Compact Mode for form component.
<a-select-option value="Option2-2">Option2-2</a-select-option>
</a-select>
</a-space-compact>
<br />
<a-space-compact block>
<a-select default-value="1">
<a-select-option value="1">Between</a-select-option>
@ -129,7 +117,6 @@ Compact Mode for form component.
placeholder="Maximum"
/>
</a-space-compact>
<br />
<a-space-compact block>
<a-select default-value="Sign Up" :style="{ width: '30%' }">
<a-select-option value="Sign Up">Sign Up</a-select-option>
@ -141,7 +128,6 @@ Compact Mode for form component.
:options="[{ value: 'text 1' }, { value: 'text 2' }]"
/>
</a-space-compact>
<br />
<a-space-compact block>
<a-time-picker :style="{ width: '70%' }" />
<a-cascader
@ -183,7 +169,6 @@ Compact Mode for form component.
placeholder="Select Address"
/>
</a-space-compact>
<br />
<a-space-compact block>
<a-time-range-picker />
<a-tree-select
@ -198,8 +183,7 @@ Compact Mode for form component.
></a-tree-select>
<a-button type="primary">Submit</a-button>
</a-space-compact>
<br />
</div>
</a-space>
</template>
<script lang="ts" setup>

Write Preview
Loading…
Cancel
Save