布局组件

DUI 提供一组强大的布局组件，帮助你快速搭建页面结构。

Grid 网格

响应式网格系统，通过 cols prop 控制列数：

import { Grid } from '@dui/react';

<Grid cols={{ base: 1, sm: 2, lg: 4 }} gap="md">
  <Card>项目 1</Card>
  <Card>项目 2</Card>
  <Card>项目 3</Card>
  <Card>项目 4</Card>
</Grid>

Flex 弹性盒子

简化 Flex 布局，支持对齐和方向控制：

import { Flex } from '@dui/react';

<Flex gap="md" align="center" justify="between">
  <div>Logo</div>
  <nav>导航</nav>
  <Button>登录</Button>
</Flex>

Stack 堆叠

垂直或水平堆叠子元素，自动添加间距：

import { Stack } from '@dui/react';

<Stack gap="lg">
  <Header />
  <Main />
  <Footer />
</Stack>

Container 容器

限制内容最大宽度，保持阅读舒适度：

import { Container } from '@dui/react';

<Container maxW="container.lg">
  <PageContent />
</Container>

Divider 分割线

import { Divider } from '@dui/react';

<div>上半部分</div>
<Divider my="lg" />
<div>下半部分</div>

实战示例：页面布局

import { Flex, Grid, Container } from '@dui/react';

function PageLayout() {
  return (
    <Flex direction="col" minH="screen">
      {/* Header */}
      <header>
        <Container>
          <Flex align="center" justify="between">
            <Logo />
            <Nav />
          </Flex>
        </Container>
      </header>

      {/* Main */}
      <main flex="1">
        <Container py="lg">
          <Grid cols={{ base: 1, lg: 3 }} gap="xl">
            <Sidebar />
            <Content />
            <Toc />
          </Grid>
        </Container>
      </main>

      {/* Footer */}
      <footer>
        <Container>
          <Copyright />
        </Container>
      </footer>
    </Flex>
  );
}