<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>
