IKun UI基于 Svelte.js 的 UnoCSS UI 库

联合创作 · 2023-09-23 22:56

ikun-ui 是基于 Svelte.js 的 UnoCSS UI 库,可用于制作网站。

特性

  • 组件化设计 - 提供整洁美观的 UI 组件
  • 预设 CSS - 有 UnoCSS 预设包可供使用,轻松渲染 UI
  • 主题配置 - 使用 unocss 等属性模式进行设计。支持主题配置,自定义主题。

安装

pnpm add @ikun-ui/core && pnpm add -D unocss && pnpm add -D @ikun-ui/preset

使用

/*App.svelte*/
<script lang="ts">
    import { KButton } from "@ikun-ui/core";
    import 'virtual:uno.css'
</script>
<KButton>KButton</KButton>

自定义 UnoCSS 配置

// unocss.config.ts
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss';
import { presetIkun, getCSSPreflights, getSafeList } from '@ikun-ui/preset';

export default defineConfig({
	presets: [presetUno(), presetAttributify(), presetIcons(), presetIkun()],
	safelist: [...getSafeList()],
	preflights: [
		{
			layer: 'base',
			getCSS: () => `:root {${getCSSPreflights()}}`
		}
	]
});
浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报