安装

使用包管理器安装：

npm

npm install sard

pnpm

pnpm add sard

yarn

yarn add sard

bun

bun add sard

引入样式

import 'sard/index.css'

按需引入

直接导入需要使用的组件，结合打包工具的 Tree Shaking，最终只会打包你用到的组件：

import { Button } from 'sard'

全量引入

如果想一次性注册全部组件，可以使用 installer：

// main.ts
import { createApp } from 'vue'
import { installer } from 'sard'
import App from './App.vue'

const app = createApp(App)

// 注册全部组件，组件名默认为 s- 前缀（如 <s-button>）
app.use(installer)

app.mount('#app')

prepareEnvironment

prepareEnvironment 用于初始化全局环境。调用后，sard 会响应式地将 windowInfo.statusBarHeight 同步到 CSS 变量 --s-status-bar-height，供 PreviewImage、Signature 等全屏组件的样式使用。

在应用入口处调用一次即可：

// main.ts
import { prepareEnvironment } from 'sard'

prepareEnvironment()

TIP

在全屏 webview 中，浏览器无法自动获取系统状态栏高度（默认为 0），需要手动设置 windowInfo.statusBarHeight，详见全局配置。

使用

<template>
  <Button>按钮</Button>
</template>

<script setup lang="ts">
import { Button } from 'sard'
</script>