/**
 * title: "尺寸"
 * description: "通过设置size属性，设置组件尺寸。"
 */
import React from 'react';
import { Select } from '@alicloud/console-components';

const onChange = (value: any) => {
  console.log(value);
};
export const dataSource = [
  {
    value: '10001',
    label: '选项A',
  },
  {
    value: '10002',
    label: '选项B',
  },
];
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '32px' }}>
      <div>
        <h4 style={h4Style}>默认32px</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="medium"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      </div>
      <div>
        <h4 style={h4Style}>大号36px</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="large"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      </div>
      <div>
        <h4 style={h4Style}>小号24px</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="small"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      </div>
    </div>
  );
};