組件

Shelter UI 提供了一系列簡潔、高效、易用的 UI 組件，幫助你快速構建界面。

組件列表

基礎組件

• ActiveButtonGroup 活動按鈕組 - 提供帶平滑過渡動畫的按鈕組切換功能
• Badge 徽章 - 用於顯示計數或狀態信息的小型標記
• Button 按鈕 - 用於觸發操作的按鈕組件
• ConfigProvider 配置提供者 - 全局主題配置和樣式變數管理組件
• Divider 分隔線 - 用於分隔內容區塊的視覺分隔器組件
• Input 輸入框 - 用於接收用戶輸入的文本框組件
• ScrollArea 滾動區域 - 可客製化樣式的滾動區塊元件
• Select 選擇器 - 用於從一組選項中選擇一個或多個值的下拉選擇組件
• Switch 開關 - 用於切換開啟/關閉狀態的開關元件
• Spin 加載中 - 用於顯示加載中的狀態組件
• BorderContainer 邊框容器 - 用於創建具有自定義邊框的容器
• Dialog 對話框 - 用於在不離開當前頁面的情況下與用戶進行交互
• Tooltip 工具提示 - 用於顯示元素相關的簡短信息的提示框
• MessageBox 訊息盒 - 用於顯示帶 icon 與型態的訊息提示容器
• Pagination 分頁 - 用於數據分頁顯示和頁面導航的組件

使用方式

所有組件都支持全局引入和按需引入兩種方式：

全局引入

import { createApp } from "vue"
import App from "./App.vue"
import ShelterUI from "shelter-ui"
import "shelter-ui/dist/style.css"

const app = createApp(App)
app.use(ShelterUI)
app.mount("#app")

按需引入

<template>
  <SHButton type="primary">按鈕</SHButton>
</template>

<script setup lang="ts">
import { SHButton } from "shelter-ui"
</script>