lite-space/ui | A Vue3 based UnoCSS UI library

Installation

基本用法

最简单的用法。

<script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem } from '@lite-space/ui'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem>Home</BreadcrumbItem>
    <BreadcrumbItem>Application Center</BreadcrumbItem>
    <BreadcrumbItem>Application List</BreadcrumbItem>
  </Breadcrumb>

  <!-- 简写 -->
  <Breadcrumb :items="['Home', 'Application Center', 'Application List']" separator=">" />
</template>

分隔符

使用 separator=">" 可以自定义分隔符。

<script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem } from '@lite-space/ui'
</script>

<template>
  <Breadcrumb separator=">">
    <BreadcrumbItem>Home</BreadcrumbItem>
    <BreadcrumbItem>Application Center</BreadcrumbItem>
    <BreadcrumbItem>Application List</BreadcrumbItem>
  </Breadcrumb>

  <Breadcrumb separator="i-carbon:car">
    <BreadcrumbItem>Home</BreadcrumbItem>
    <BreadcrumbItem>Application Center</BreadcrumbItem>
    <BreadcrumbItem>Application List</BreadcrumbItem>
  </Breadcrumb>
</template>