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

Installation

基本用法

默认选中第一项。

tab1

tab2

Tab3

Tab1 content

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

  const activeKey = ref('1')
</script>

<template>
  <Tabs v-model="activeKey">
    <TabPane key="1" name="tab1">
      Tab1 content
    </TabPane>
    <TabPane key="2" name="tab2">
      Tab2 content
    </TabPane>
    <TabPane key="3" name="Tab3">
      Tab3 content
    </TabPane>
  </Tabs>
</template>

禁用

禁用某一项。

tab1

tab2

Tab3

Tab1 content

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

<template>
  <Tabs>
    <TabPane key="1" name="tab1">
      Tab1 content
    </TabPane>
    <TabPane key="2" disabled name="tab2">
      Tab2 content
    </TabPane>
    <TabPane key="3" name="Tab3">
      Tab3 content
    </TabPane>
  </Tabs>
</template>

位置

可通过设置align选项卡的位置。

tab1

tab2

Tab3

Tab1 content

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

<template>
  <Tabs align="center">
    <TabPane key="1" name="tab1">
      Tab1 content
    </TabPane>
    <TabPane key="2" name="tab2">
      Tab2 content
    </TabPane>
    <TabPane key="3" name="Tab3">
      Tab3 content
    </TabPane>
  </Tabs>
</template>