ant-design/components/segmented/demo/size.md
vagusX ae4e660a05
feat: add new component Segmented (#34319)
* feat: basic implements in antd

* feat: use rc-segmented

* feat: add some demos

* feat: support dark theme

* docs: add more demos

* feat: support `icon` in segmented

* docs: format content

* test: add test cases

* docs: update docs

* chore: update

* fix: lint issues

* style: add border-radius for selected effect

* style: change border-radius-base

* chore: update gitignore

* feat: segmented support block

* chore: update gitignore

* feat: support block

* feat: add test case

* feat: support size

* docs: update demos

* chore: update

* chore: update

* test: update

* style: update colors

* style: hover and focus styles

* doc: add version mark in docs

* fix: style lint issue

* fix: some lint issues

* doc: add version in demo mds

* doc: add version mark before api details

* Revert "doc: add version in demo mds"

This reverts commit 2a9e86f6ffc2331f7d73eae6edac7c889358a838.

* test: only test for thumb appear

* style: update color vars

* style: add transition

* style: text vertial align

* test: update snapshots

* feat: add preview svg and support dark theme

* fix: update test snapshot

* docs: update docs

* fix: remove useless z-index

* build: add 1kb for bundlesize of antd.variable.min.css

Co-authored-by: taian.lta <taian.lta@antgroup.com>
2022-04-11 11:13:16 +08:00

30 lines
706 B
Markdown

---
order: 1
title:
zh-CN: 三种大小
en-US: Three sizes of Segmented
---
## zh-CN
我们为 `<Segmented />` 组件定义了三种尺寸(大、默认、小),高度分别为 `40px`、`32px` 和 `24px`
## en-US
There are three sizes of an Segmented: `large` (40px), `default` (32px) and `small` (24px).
```jsx
import { Segmented } from 'antd';
ReactDOM.render(
<>
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<br />
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<br />
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</>,
mountNode,
);
```