You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.0 KiB
94 lines
2.0 KiB
<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 lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
type SizeType = 'small' | 'middle' | 'large';
|
|
|
|
const componentSize = ref<SizeType>('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,
|
|
},
|
|
];
|
|
</script>
|
|
<style scoped>
|
|
.example {
|
|
margin: 16px 0;
|
|
}
|
|
</style>
|