Stack 纵向排列

把子元素纵向排成一列。

创建书单

书单创建之后可以随时添加作品。

名称

import { Button, Card, Heading, Input, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="w-full max-w-sm">
      <Stack>
        <Stack gap="xs">
          <Heading level={3} size="md">
            创建书单
          </Heading>
          <Text tone="muted" size="sm">
            书单创建之后可以随时添加作品。
          </Text>
        </Stack>
        <Stack gap="xs">
          <Text size="sm">名称</Text>
          <Input defaultValue="今年读过的轻小说" />
        </Stack>
        <Button>创建</Button>
      </Stack>
    </Card>
  )
}

tsx

用法

import { Stack } from '@hina-ui/react'

Stack 是一个纵向的 flex 容器，子元素依次向下排列，间距由 gap 决定。

第一项

第二项

第三项

import { Card, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-xs">
      <Card>第一项</Card>
      <Card>第二项</Card>
      <Card>第三项</Card>
    </Stack>
  )
}

tsx

示例

间距

gap 只接受档位，不接受任意数值。md 是默认档，取自 --hn-stack-gap，常规密度下是 16 像素，紧凑密度下是 12 像素；其余五档分别是 0、4、8、24 和 32 像素。

none

import { Card, Inline, Stack, Text } from '@hina-ui/react'

const gaps = ['none', 'xs', 'sm', 'md', 'lg', 'xl'] as const

export default function Demo() {
  return (
    <Inline align="start" className="gap-8">
      {gaps.map(gap => (
        <Stack key={gap} gap="xs">
          <Text tone="muted" size="sm">
            {gap}
          </Text>
          <Stack gap={gap}>
            <Card className="bg-inset size-10" padded={false} />
            <Card className="bg-inset size-10" padded={false} />
            <Card className="bg-inset size-10" padded={false} />
          </Stack>
        </Stack>
      ))}
    </Inline>
  )
}

tsx

横向对齐

align 决定子元素在横向上的对齐方式。不设置时子元素占满容器宽度，这是 flex 自身的行为。

start

center

end

stretch

import { Button, Inline, Stack, Text } from '@hina-ui/react'

const aligns = ['start', 'center', 'end', 'stretch'] as const

export default function Demo() {
  return (
    <Inline align="start" className="gap-6">
      {aligns.map(align => (
        <Stack key={align} gap="xs" className="w-40">
          <Text tone="muted" size="sm">
            {align}
          </Text>
          <Stack align={align} gap="sm" className="bg-inset rounded-md p-3">
            <Button size="sm" variant="soft" tone="neutral">
              短
            </Button>
            <Button size="sm" variant="soft" tone="neutral">
              长一点的按钮
            </Button>
          </Stack>
        </Stack>
      ))}
    </Inline>
  )
}

tsx

纵向分布

justify 决定子元素在纵向上的分布，只有容器高度确定时才有效果。between 让首尾两项分别靠向两端，中间留空。

存储空间

已用 12.4 GB，共 20 GB。

import { Button, Card, Heading, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="h-64 w-full max-w-xs">
      <Stack justify="between" className="h-full">
        <Stack gap="xs">
          <Heading level={3} size="md">
            存储空间
          </Heading>
          <Text tone="muted" size="sm">
            已用 12.4 GB，共 20 GB。
          </Text>
        </Stack>
        <Button variant="soft" tone="neutral">
          升级容量
        </Button>
      </Stack>
    </Card>
  )
}

tsx

根元素

as 指定渲染的标签，列表用 ul 或 ol。

也可以传入 React 组件，例如 next/link 的 as={Link}。布局类名、额外属性、事件处理函数和 children 会传给该组件，不增加包裹层；自定义组件需将 className 等属性传到实际根元素。

列表项渲染为 li
容器渲染为 ul

import { Card, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack as="ul" gap="sm" className="w-full max-w-xs">
      <Card as="li">列表项渲染为 li</Card>
      <Card as="li">容器渲染为 ul</Card>
    </Stack>
  )
}

tsx

API

属性	类型	默认值	说明
`gap`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	子元素之间的间距
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	—	横向对齐方式
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	—	纵向分布方式
`as`	`string \| Component`	`'div'`	渲染的标签或 React 组件
`className`	`string`	—	追加到容器上的类名

属性	说明
`children`	子元素