Blaze UI 内联列表

Blaze UI 是一个基于 Vue3 开发的 UI 组件库，其中内联列表是其中的一个组件，该组件可用于快速创建水平或垂直的列表。

特点

• 纯 CSS 样式定制
• 响应式设计，在不同屏幕尺寸下自适应
• 支持水平和垂直两种布局
• 灵活的自定义设置，包括间距、对齐方式、分隔符等

安装

你可以通过 npm 或 yarn 安装 Blaze UI：

npm install blaze-ui

# 或者

yarn add blaze-ui

快速开始

引入 Blaze UI 的内联列表组件：

<template>
  <InlineList>
    <InlineItem>Item 1</InlineItem>
    <InlineItem>Item 2</InlineItem>
    <InlineItem>Item 3</InlineItem>
  </InlineList>
</template>

<script>
import { InlineList, InlineItem } from 'blaze-ui'

export default {
  components: {
    InlineList,
    InlineItem
  }
}
</script>

API

| 参数 | 类型 | 默认值 | 说明 | | ----------- | --------- | ----------- | ---------------------- | | type | string | horizontal | 布局类型，可选 horizontal 或 vertical | | spacing | string | 0 | 项之间的间距大小，可选值为 CSS 中的距离单位 | | align-items | string | center | 项的垂直对齐方式，可选值为 flex-start、flex-end、center、baseline 或 stretch | | justify-content | string | flex-start | 项的水平对齐方式，可选值为 flex-start、flex-end、center、space-between、space-around 或 space-evenly | | separator | string | | 项之间的分隔符，可以填写任意 HTML 或文本 |

示例

水平布局

<InlineList>
  <InlineItem>Item 1</InlineItem>
  <InlineItem>Item 2</InlineItem>
  <InlineItem>Item 3</InlineItem>
</InlineList>

垂直布局

<InlineList type="vertical">
  <InlineItem>Item 1</InlineItem>
  <InlineItem>Item 2</InlineItem>
  <InlineItem>Item 3</InlineItem>
</InlineList>

设置间距

<InlineList spacing="1rem">
  <InlineItem>Item 1</InlineItem>
  <InlineItem>Item 2</InlineItem>
  <InlineItem>Item 3</InlineItem>
</InlineList>

设置对齐方式

<InlineList align-items="flex-start">
  <InlineItem>Item 1</InlineItem>
  <InlineItem>Item 2</InlineItem>
  <InlineItem>Item 3</InlineItem>
</InlineList>

设置对齐方式和分隔符

<InlineList
  type="vertical"
  align-items="flex-start"
  justify-content="space-between"
  separator="|"
>
  <InlineItem>Item 1</InlineItem>
  <InlineItem>Item 2</InlineItem>
  <InlineItem>Item 3</InlineItem>
</InlineList>

以上就是 Blaze UI 内联列表组件的介绍！如需更多信息，请参阅官方文档。