组件

以下列出 React Suite 提供的所有组件及工具。

Layout

15 components

Components

<Box>

Box盒子

>=6.0.0

Components

<Center>

Center居中

>=6.0.0

Components

<Divider>

Divider分割线

Updated

Components

<Container>
<Header>
<Footer>
<Content>
<Sidebar>

Frame框架

Updated

Components

<Grid>
<Row>
<Col>

Grid栅格

Updated

Components

<Stack>
<Stack.Item>
<HStack>
<VStack>

Stack堆叠

Buttons

4 components

Button

Components

<Button>

Button按钮

Components

<IconButton>

IconButton图标按钮

Components

<ButtonGroup>
<ButtonToolbar>

ButtonGroup按钮组

Status

10 components

5

Components

<Badge>

Badge徽标

Components

<Loader>

Loader加载器

Components

<Message>

Message消息框

Components

<Notification>

Notification通知框

Components

<Progress>
<ProgressCircle>

Progress进度条

Updated

Components

<ProgressCircle>

ProgressCircle圆形进度条

Updated

Components

<Placeholder.Graph>
<Placeholder.Grid>
<Placeholder.Paragraph>

Placeholder占位符

Typography

4 components

H1H2H3

Components

<Heading>

Heading标题

>=5.58.0
Text

Components

<Highlight>

Highlight高亮

>=5.61.0
ACtrl

Components

<Kbd>

Kbd键盘快捷键

>=6.0.0

Components

<Text>

Text文本

>=5.58.0

Overlays

11 components

Components

<Drawer>
<Drawer.Header>
<Drawer.Body>
<Drawer.Footer>

Drawer抽屉

Components

<Modal>
<Modal.Header>
<Modal.Body>
<Modal.Footer>

Modal模态框

Modal Integrations

Components

<Popover>

Popover弹出框

Components

<Tooltip>

Tooltip工具提示框

Components

<Whisper>

Whisper弹窗触发器

Navigation and Menu

29 components

Components

<Affix>

Affix固定位置

››

Components

<Breadcrumb>
<Breadcrumb.Item>

Breadcrumb面包屑

Components

<Dropdown>
<Dropdown.Item>
<Dropdown.Menu>
<Dropdown.Separator>

Dropdown下拉菜单

Visit Page

Components

<Link>

Link链接

>=6.0.0

Components

<Menu>
<Menu.Item>
<Menu.Separator>

Menu菜单

>=6.0.0

Components

<Nav>
<Nav.Item>
<Nav.Menu>
<Nav.MegaMenu>

Nav导航

Updated

Components

<Navbar>
<Navbar.Brand>
<Navbar.Content>
<Navbar.Drawer>
<Navbar.Toggle>

Navbar导航栏

Updated

Components

<Sidenav>
<Sidenav.Header>
<Sidenav.Body>
<Sidenav.Footer>
<Sidenav.Toggle>
<Sidenav.GroupLabel>

Sidenav侧导航

Updated
12

Components

<Steps>
<Steps.Item>

Steps步骤条

123

Components

<Pagination>

Pagination分页

Media and icons

4 components

Components

<Avatar>
<AvatarGroup>

Avatar头像

Components

<Icon>

Icon图标

Components

<Image>

Image图片

>=5.76.0

Form

9 components

Components

<Form>
<Form.Stack>
<Form.Group>
<Form.Control>
<Form.ControlLabel>
<Form.HelpText>
<Form.ErrorMessage>

Form表单

Updated

Components

<Form>
<Form.Control>

Hooks

useFormControl

APIs

Schema

Form Validation表单校验

Updated

Formik

React Hook Form

schema-typed数据模型

Data Entry

29 components

Components

<AutoComplete>

AutoComplete自动完成控件

Components

<CascadeTree>

CascadeTree级联树

>=5.56.0

Components

<Checkbox>
<CheckboxGroup>

Checkbox复选框

Components

<CheckTree>

CheckTree树形多选控件

Components

<Input>
<InputGroup>
<InputGroup.Button>
<InputGroup.Addon>
<MaskedInput>

Input输入框

Components

<InlineEdit>

InlineEdit行内编辑

>=5.54.0

Components

<MultiCascadeTree>

MultiCascadeTree多选级联树

>=5.56.0
123

Components

<NumberInput>

NumberInput数字输入框

>=6.0.0

Components

<Radio>
<RadioGroup>

Radio单选框

Components

<RadioTile>
<RadioTileGroup>

RadioTile磁贴单选

>=5.35.0

Components

<Rate>

Rate评分

Components

<SegmentedControl>

SegmentedControl分段器

>=6.0.0

Components

<Slider>
<RangeSlider>

Slider滑动输入控件

Updated

Components

<PasswordInput>
<PasswordStrengthMeter>

PasswordInput密码输入框

>=6.0.0

Components

<PinInput>

PinInput验证码输入框

>=6.0.0

Components

<TagInput>

TagInput标签输入

Components

<Textarea>

Textarea文本域

>=6.0.0

Components

<Toggle>

Toggle开关

Updated

Components

<Tree>

Tree树形控件

Components

<Uploader>

Uploader上传控件

Data Pickers

8 components

Components

<Cascader>

Cascader级联选择器

Components

<CheckPicker>

CheckPicker多项选择器

Components

<CheckTreePicker>

CheckTreePicker树形多项选择器

Components

<InputPicker>

InputPicker输入选择器

Components

<MultiCascader>

MultiCascader级联多项选择器

Components

<SelectPicker>

SelectPicker单项选择器

Components

<TagPicker>

TagPicker标签选择器

Components

<TreePicker>

TreePicker树形单项选择器

Date and Time

7 components

Components

<Calendar>

Calendar日历

Components

<DateInput>

DateInput日期输入框

>=5.48.0

Components

<DatePicker>

DatePicker日期选择器

Components

<DateRangeInput>

DateRangeInput日期范围输入框

>=5.49.0

Components

<DateRangePicker>

DateRangePicker日期范围选择器

1230PM

Components

<TimePicker>

TimePicker时间选择器

>=5.72.0
900530

Components

<TimeRangePicker>

TimeRangePicker时间范围选择器

>=5.72.0

Data Grid

5 components

Components

<Table>
<Table.Column>
<Table.ColumnGroup>
<Table.HeaderCell>
<Table.Cell>

Basic Table基础表格

Virtual Table虚拟滚动表格

Tree Table树形表格

Sticky Table固定表格

Editable Table可编辑表格

Filterable Table可筛选表格

Data Display

19 components

Components

<Card>
<Card.Header>
<Card.Body>
<Card.Footer>
<CardGroup>

Card卡片

>=5.75.0

Components

<Carousel>

Carousel轮播

Components

<List>
<List.Item>

List列表

Components

<Stat>
<Stat.Label>
<Stat.ValueText>
<Stat.ValueUnit>
<Stat.HelpText>
<Stat.Trend>

Stat统计数值

>=5.75.0

Components

<Tag>

Tag标签

Components

<Timeline>
<Timeline.Item>

Timeline时间轴

Components

<Panel>
<PanelGroup>

Panel面板

Disclosure

5 components

Components

<Accordion>
<Accordion.Item>

Accordion手风琴

>=5.52.0

Components

<Tabs>
<Tabs.Tab>

Tabs选项卡

>=5.53.0

Components

<VisuallyHidden>

VisuallyHidden视觉隐藏

>=5.52.0

Misc

6 components

Components

<Animation.Transition>
<Animation.Fade>
<Animation.Bounce>
<Animation.Slide>
<Animation.Collapse>

Animation动画

Components

<CustomProvider>

CustomProvider个性化配置

APIs

DOMHelper

DOMHelperDOM 助手

Hooks

Hooks

useBreakpointValue

useBreakpointValue

>=5.64.0

Hooks

useDialog

useDialog

>=6.0.0

Hooks

useMediaQuery

useMediaQuery

Hooks

useToaster

useToaster

Updated

没有找到想要的组件？申请添加新组件