Bricks UI Library

一个基于 Vue 3 的组件库，用于开发纯展示类组件。

安装

npm install bricks-ui-library @iconify/vue
# 或
yarn add bricks-ui-library @iconify/vue
# 或
pnpm add bricks-ui-library @iconify/vue

注意：如果您的项目使用图标功能，需要安装 @iconify/vue 依赖。

使用

全局注册

import { createApp } from 'vue'
import BricksUiLibrary from 'bricks-ui-library'
import 'bricks-ui-library/dist/style.css' // 如果有样式文件

const app = createApp(App)

// 全局注册所有组件
app.use(BricksUiLibrary)

app.mount('#app')

按需引入

import { HelloWorld, TheWelcome } from 'bricks-ui-library'

export default {
  components: {
    HelloWorld,
    TheWelcome
  }
}

组件列表

HelloWorld

展示文本信息的组件。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | 'Hello World!' | 展示的主标题文本 | | subtitle | string | 'This is a sample component' | 展示的副标题文本 | | titleColor | string | '#42b883' | 标题颜色 | | subtitleColor | string | '#7f8c8d' | 副标题颜色 | | showSubtitle | boolean | true | 是否显示副标题 |

示例

<template>
  <HelloWorld 
    title="Welcome to Bricks UI" 
    subtitle="A component library for Vue 3" 
    :show-subtitle="true"
  />
</template>

TheWelcome

展示欢迎信息列表的组件。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | items | Array | 见源码 | 欢迎项数据 | | title | string | 'Welcome to Your Component Library' | 组件标题 |

示例

<template>
  <TheWelcome 
    title="Custom Welcome Content"
    :items="[
      {
        icon: 'features',
        heading: 'Feature Rich',
        content: 'Our components are designed to be flexible and customizable.'
      }
    ]"
  />
</template>

WelcomeItem

展示单个欢迎项的组件。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | icon | string | '' | 图标名称 (支持 Iconify 图标，如 'mdi:home') | | heading | string | 'Item Title' | 标题内容 | | content | string | 'Item content description' | 内容文本 | | vertical | boolean | false | 是否垂直布局 | | iconSize | string | '1.5rem' | 图标大小 |

图标支持

组件支持使用 Iconify 图标库中的图标。您可以通过 icon 属性传入图标名称，格式为 集合名称:图标名称，例如：

• mdi:home - Material Design Icons 的 home 图标
• fa:heart - Font Awesome 的 heart 图标
• carbon:logo-github - Carbon 的 GitHub 图标

您也可以通过插槽自定义图标内容。

示例

<template>
  <WelcomeItem 
    icon="mdi:star" 
    heading="Featured Item" 
    content="This is a featured item with a star icon"
    :vertical="true"
  />
</template>

或者使用插槽自定义图标：

<template>
  <WelcomeItem 
    heading="Custom Icon Item" 
    content="This item has a custom icon"
  >
    <template #icon>
      <div class="custom-icon">⭐</div>
    </template>
  </WelcomeItem>
</template>

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build-lib

# 构建开发应用
pnpm build

贡献

欢迎提交 issue 和 pull request 来帮助改进这个组件库。