组件

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

Layout

Container
(容器布局)

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

Divider
(分割线)

<Divider>

FlexboxGrid
(弹性栅格)

<FlexboxGrid>
<FlexboxGrid.Item>

<Grid>
<Row>
<Col>

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

Buttons

Button
(按钮)

<Button>

IconButton
(图标按钮)

<IconButton>

ButtonGroup
(按钮组)

<ButtonGroup>
<ButtonToolbar>

Status

<Badge>

Loader
(加载器)

<Loader>

Message
(消息框)

<Message>

Notification
(通知框)

<Notification>

Progress
(进度条)

<Progress.Line>
<Progress.Circle>

Placeholder
(占位符)

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

Toaster
(轻量弹窗)

useToaster

Typography

Heading
(标题)

<Heading>

Supported from version 5.58.0

Highlight
(高亮)

<Highlight>

Supported from version 5.61.0

<Text>

Supported from version 5.58.0

Overlays

Drawer
(抽屉)

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

Dropdown
(下拉菜单)

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

Modal
(模态框)

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

Popover
(弹出框)

<Popover>

Tooltip
(工具提示框)

<Tooltip>

Modal Integrations

Affix
(固定位置)

<Affix>

Breadcrumb
(面包屑)

<Breadcrumb>
<Breadcrumb.Item>

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

Navbar
(导航栏)

<Navbar>
<Navbar.Brand>

Sidenav
(侧导航)

<Sidenav>
<Sidenav.Header>
<Sidenav.Body>

Steps
(步骤条)

<Steps>
<Steps.Item>

Pagination
(分页)

<Pagination>

Media and icons

Avatar
(头像)

<Avatar>
<AvatarGroup>

<Icon>

Form

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

Form Validation
(表单校验)

<Form>
<Form.Control>
Schema

React Hook Form

schema-typed
(数据模型)

Data Entry

AutoComplete
(自动完成控件)

<AutoComplete>

Cascader
(级联选择器)

<Cascader>

CascadeTree
(级联树)

<CascadeTree>

Supported from version 5.56.0

CheckPicker
(多项选择器)

<CheckPicker>

CheckTreePicker
(树形多项选择器)

<CheckTreePicker>

CheckTree
(树形多选控件)

<CheckTree>

Checkbox
(复选框)

<Checkbox>
<CheckboxGroup>

Input
(输入框)

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

InputNumber
(数字输入框)

<InputNumber>

InputPicker
(输入选择器)

<InputPicker>

InlineEdit
(行内编辑)

<InlineEdit>

Supported from version 5.54.0

MultiCascader
(级联多项选择器)

<MultiCascader>

MultiCascadeTree
(多选级联树)

<MultiCascadeTree>

Supported from version 5.56.0

Radio
(单选框)

<Radio>
<RadioGroup>

RadioTile
(磁贴单选)

<RadioTile>
<RadioTileGroup>

Supported from version 5.35.0

<Rate>

SelectPicker
(单项选择器)

<SelectPicker>

Slider
(滑动输入控件)

<Slider>
<RangeSlider>

TagPicker
(标签选择器)

<TagPicker>

TagInput
(标签输入)

<TagInput>

Toggle
(开关)

<Toggle>

TreePicker
(树形单项选择器)

<TreePicker>

Tree
(树形控件)

<Tree>

Uploader
(上传控件)

<Uploader>

Date and Time

Calendar
(日历)

<Calendar>

DateInput
(日期输入框)

<DateInput>

Supported from version 5.48.0

DatePicker
(日期选择器)

<DatePicker>

DateRangeInput
(日期范围输入框)

<DateRangeInput>

Supported from version 5.49.0

DateRangePicker
(日期范围选择器)

<DateRangePicker>

TimePicker
(时间选择器)

<TimePicker>

Supported from version 5.72.0

TimeRangePicker
(时间范围选择器)

<TimeRangePicker>

Supported from version 5.72.0

Data Grid

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

Table Virtualized
(表格虚拟化)

Tree Table
(树形表格)

Table Affix
(表格固定)

Table Editable
(表格编辑)

Data Display

Carousel
(轮播)

<Carousel>

<List>
<List.Item>

<Tag>

Timeline
(时间轴)

<Timeline>
<Timeline.Item>

<Panel>
<PanelGroup>

Disclosure

Accordion
(手风琴)

<Accordion>
<Accordion.Item>

Supported from version 5.52.0

Tabs
(选项卡)

<Tabs>
<Tabs.Tab>

Supported from version 5.53.0

VisuallyHidden
(视觉隐藏)

<VisuallyHidden>

Supported from version 5.52.0

Utilities

Animation
(动画)

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

CustomProvider
(个性化配置)

CustomProvider

DOMHelper
(DOM 助手)

DOMHelper

Whisper
(弹窗触发器)

<Whisper>

useMediaQuery

Unstable 🧪

useBreakpointValue

useBreakpointValue

Unstable 🧪

Supported from version 5.63.0

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