SanoUI - 现代化企业级 UI 组件库

为什么选择 SanoUI

专为企业级应用设计的现代化组件库

🚀

零依赖

基于原生 Web Components，无需任何框架依赖，开箱即用

⚡

高性能

轻量级设计，极小的包体积，快速加载，流畅体验

🎨

现代化设计

精美的 UI 设计，支持主题定制，适配各种场景

🔧

易于扩展

模块化架构，灵活的 API 设计，轻松定制和扩展

📱

响应式

完美适配桌面端和移动端，提供一致的用户体验

🛡️

类型安全

完整的 TypeScript 支持，提供更好的开发体验

简单易用

几行代码即可开始使用

            <!-- 引入 CSS -->
<link rel="stylesheet" href="https://www.sanoui.com/sanoui/sanoui.min.css">

<!-- 引入 JS -->
<script src="https://www.sanoui.com/sanoui/sanoui.min.js"></script>
          

            <!-- 使用组件 -->
<sa-button>点击我</sa-button>

<sa-dialog id="myDialog">
  <div slot="content">对话框内容</div>
</sa-dialog>

<script>
  document.getElementById('myDialog').open();
</script>
          

            /* 自定义主题色 */
:root {
  --theme-color: #409EFF;
  --sa-primary: #1f6feb;
}

/* 使用组件 */
<sa-button class="custom-btn">自定义按钮</sa-button>
          

快速开始

5 分钟快速上手 SanoUI

安装

通过 CDN 或 npm 安装 SanoUI

npm install sanoui

引入

在 HTML 中引入 CSS 和 JS 文件

<link rel="stylesheet" href="https://www.sanoui.com/sanoui/sanoui.min.css">
<script src="https://www.sanoui.com/sanoui/sanoui.min.js"></script>

使用

开始使用组件构建你的应用

<sa-button>Hello SanoUI</sa-button>

现代化企业级 UI 组件库