Inline 行内排列

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

星见书音

译者

已认证

<script setup lang="ts">
  import { Avatar, Button, Card, Inline, Stack, Tag, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full max-w-md">
    <Inline justify="between">
      <Inline gap="sm">
        <Avatar size="lg" src="/avatars/selfie.webp" alt="星见书音" />
        <Stack gap="none">
          <Text class="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>
</template>

vue

用法

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

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

<script setup lang="ts">
  import { Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button variant="soft" tone="neutral">保存</Button>
    <Button variant="soft" tone="neutral">另存为</Button>
    <Button variant="soft" tone="neutral">导出</Button>
  </Inline>
</template>

vue

示例

间距

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

none

<script setup lang="ts">
  import { Card, Inline, Stack, Text } from '@hina-ui/vue'

  const gaps = ['none', 'xs', 'sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <Stack>
    <Stack v-for="gap in gaps" :key="gap" gap="xs">
      <Text tone="muted" size="sm">{{ gap }}</Text>
      <Inline :gap="gap">
        <Card class="bg-inset size-8" :padded="false" />
        <Card class="bg-inset size-8" :padded="false" />
        <Card class="bg-inset size-8" :padded="false" />
      </Inline>
    </Stack>
  </Stack>
</template>

vue

纵向对齐

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

start

标题

正文

附注

center

标题

正文

附注

end

标题

正文

附注

baseline

标题

正文

附注

stretch

标题

正文

附注

<script setup lang="ts">
  import { Heading, Inline, Stack, Text } from '@hina-ui/vue'

  const aligns = ['start', 'center', 'end', 'baseline', 'stretch'] as const
</script>

<template>
  <Stack>
    <Stack v-for="align in aligns" :key="align" gap="xs">
      <Text tone="muted" size="sm">{{ align }}</Text>
      <Inline :align="align" class="bg-inset rounded-md p-3">
        <Heading :level="3" size="xl">标题</Heading>
        <Text>正文</Text>
        <Text tone="muted" size="sm">附注</Text>
      </Inline>
    </Stack>
  </Stack>
</template>

vue

横向分布

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

阅读记录

<script setup lang="ts">
  import { Button, Heading, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline justify="between" class="bg-inset w-full rounded-md p-3">
    <Heading :level="3" size="md">阅读记录</Heading>
    <Button size="sm" variant="soft" tone="neutral">全部清除</Button>
  </Inline>
</template>

vue

换行

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

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

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

wrap 为假时保持在一行

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

<script setup lang="ts">
  import { Inline, Stack, Tag, Text } from '@hina-ui/vue'

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

<template>
  <Stack class="w-full max-w-sm">
    <Stack gap="xs">
      <Text tone="muted" size="sm">wrap 默认为真，放不下时换行</Text>
      <Inline gap="xs">
        <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
      </Inline>
    </Stack>
    <Stack gap="xs">
      <Text tone="muted" size="sm">wrap 为假时保持在一行</Text>
      <Inline :wrap="false" gap="xs" class="overflow-hidden">
        <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
      </Inline>
    </Stack>
  </Stack>
</template>

vue

根元素

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

也可以传入 Vue 组件，例如 :as="RouterLink" 或 :as="NuxtLink"。组件须先导入或通过 resolveComponent 解析；对象组件、函数式组件和异步组件均可使用。布局类名、额外属性、事件监听器和默认插槽会传给该组件，不增加包裹层；自定义组件需将属性和类名传到实际根元素。

<script setup lang="ts">
  import { Inline, Link } from '@hina-ui/vue'
</script>

<template>
  <Inline as="nav" gap="lg" aria-label="页脚导航">
    <Link href="#">关于</Link>
    <Link href="#">帮助</Link>
    <Link href="#">条款</Link>
  </Inline>
</template>

vue

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'`	渲染的标签或 Vue 组件
`class`	`string`	—	追加到容器上的类名

插槽	说明
`default`	子元素