Inline 行内排列

把子元素横向排成一行，放不下时换行。

星见书音

译者

已认证

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

export default function Demo() {
  return (
    <Card className="w-full max-w-md">
      <Inline justify="between">
        <Inline gap="sm">
          <Avatar size="lg" src="/avatars/selfie.webp" alt="星见书音" />
          <Stack gap="none">
            <Text className="font-medium">星见书音</Text>
            <Text tone="muted" size="sm">
              译者
            </Text>
          </Stack>
        </Inline>
        <Inline gap="xs">
          <Tag>已认证</Tag>
          <Button size="sm" variant="soft" tone="neutral">
            关注
          </Button>
        </Inline>
      </Inline>
    </Card>
  )
}

tsx

用法

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

Inline 是一个横向的 flex 容器，子元素纵向居中对齐，放不下时换行。

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

export default function Demo() {
  return (
    <Inline>
      <Button variant="soft" tone="neutral">
        保存
      </Button>
      <Button variant="soft" tone="neutral">
        另存为
      </Button>
      <Button variant="soft" tone="neutral">
        导出
      </Button>
    </Inline>
  )
}

tsx

示例

间距

gap 只接受档位，不接受任意数值。md 是默认档，取自 --hn-inline-gap，常规密度下是 12 像素，紧凑密度下是 8 像素；其余五档分别是 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 (
    <Stack>
      {gaps.map(gap => (
        <Stack key={gap} gap="xs">
          <Text tone="muted" size="sm">
            {gap}
          </Text>
          <Inline gap={gap}>
            <Card className="bg-inset size-8" padded={false} />
            <Card className="bg-inset size-8" padded={false} />
            <Card className="bg-inset size-8" padded={false} />
          </Inline>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

纵向对齐

align 决定子元素在纵向上的对齐方式，默认居中。文字大小不一时用 baseline，按基线对齐，而不是按整体高度居中。

start

标题

正文

附注

center

标题

正文

附注

end

标题

正文

附注

baseline

标题

正文

附注

stretch

标题

正文

附注

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

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

export default function Demo() {
  return (
    <Stack>
      {aligns.map(align => (
        <Stack key={align} gap="xs">
          <Text tone="muted" size="sm">
            {align}
          </Text>
          <Inline align={align} className="bg-inset rounded-md p-3">
            <Heading level={3} size="xl">
              标题
            </Heading>
            <Text>正文</Text>
            <Text tone="muted" size="sm">
              附注
            </Text>
          </Inline>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

横向分布

justify 决定子元素在横向上的分布。between 让首尾两项分别靠向两端，适合标题在左、按钮在右的一行。

阅读记录

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

export default function Demo() {
  return (
    <Inline justify="between" className="bg-inset w-full rounded-md p-3">
      <Heading level={3} size="md">
        阅读记录
      </Heading>
      <Button size="sm" variant="soft" tone="neutral">
        全部清除
      </Button>
    </Inline>
  )
}

tsx

换行

wrap 默认为真。设为假时子元素保持在一行，需要配合外层容器的溢出处理。

wrap 默认为真，放不下时换行

科幻悬疑校园青春治愈日常成长群像异世界

wrap 为假时保持在一行

科幻悬疑校园青春治愈日常成长群像异世界

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

const tags = ['科幻', '悬疑', '校园', '青春', '治愈', '日常', '成长', '群像', '异世界']

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <Stack gap="xs">
        <Text tone="muted" size="sm">
          wrap 默认为真，放不下时换行
        </Text>
        <Inline gap="xs">
          {tags.map(tag => (
            <Tag key={tag}>{tag}</Tag>
          ))}
        </Inline>
      </Stack>
      <Stack gap="xs">
        <Text tone="muted" size="sm">
          wrap 为假时保持在一行
        </Text>
        <Inline wrap={false} gap="xs" className="overflow-hidden">
          {tags.map(tag => (
            <Tag key={tag}>{tag}</Tag>
          ))}
        </Inline>
      </Stack>
    </Stack>
  )
}

tsx

根元素

as 指定渲染的标签，导航用 nav。

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

import { Inline, Link } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline as="nav" gap="lg" aria-label="页脚导航">
      <Link href="#">关于</Link>
      <Link href="#">帮助</Link>
      <Link href="#">条款</Link>
    </Inline>
  )
}

tsx

API

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

属性	说明
`children`	子元素