Stack 纵向排列

把子元素纵向排成一列。

创建书单

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

名称

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

<template>
  <Card class="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 model-value="今年读过的轻小说" />
      </Stack>
      <Button>创建</Button>
    </Stack>
  </Card>
</template>

vue

用法

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

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

第一项

第二项

第三项

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

<template>
  <Stack class="w-full max-w-xs">
    <Card>第一项</Card>
    <Card>第二项</Card>
    <Card>第三项</Card>
  </Stack>
</template>

vue

示例

间距

gap 只接受档位，不接受任意数值。md 是默认档，取自 --hn-stack-gap，常规密度下是 16 像素，紧凑密度下是 12 像素；其余五档分别是 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>
  <Inline align="start" class="gap-8">
    <Stack v-for="gap in gaps" :key="gap" gap="xs">
      <Text tone="muted" size="sm">{{ gap }}</Text>
      <Stack :gap="gap">
        <Card class="bg-inset size-10" :padded="false" />
        <Card class="bg-inset size-10" :padded="false" />
        <Card class="bg-inset size-10" :padded="false" />
      </Stack>
    </Stack>
  </Inline>
</template>

vue

横向对齐

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

start

center

end

stretch

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

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

<template>
  <Inline align="start" class="gap-6">
    <Stack v-for="align in aligns" :key="align" gap="xs" class="w-40">
      <Text tone="muted" size="sm">{{ align }}</Text>
      <Stack :align="align" gap="sm" class="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>
</template>

vue

纵向分布

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

存储空间

已用 12.4 GB，共 20 GB。

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

<template>
  <Card class="h-64 w-full max-w-xs">
    <Stack justify="between" class="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>
</template>

vue

根元素

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

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

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

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

<template>
  <Stack as="ul" gap="sm" class="w-full max-w-xs">
    <Card as="li">列表项渲染为 li</Card>
    <Card as="li">容器渲染为 ul</Card>
  </Stack>
</template>

vue

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

插槽	说明
`default`	子元素