快速开始
本文将介绍如何在项目中使用 SanoUI。
安装
方式一：CDN 引入（推荐用于快速原型）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SanoUI 示例</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.example.com/sanoui.min.css">
</head>
<body>
<!-- 使用组件 -->
<button class="sa-button" data-button data-type="primary">
点击我
</button>
<!-- 引入脚本 -->
<script src="https://cdn.example.com/sanoui.min.js"></script>
<script>
// 自动初始化所有组件
const page = SA.init('body');
</script>
</body>
</html>方式二：下载文件
- 下载 sanoui.min.css 和 sanoui.min.js
- 在 HTML 中引入：
html
<link rel="stylesheet" href="./sanoui.min.css">
<script src="./sanoui.min.js"></script>方式三：NPM 安装（开发中）
bash
npm install sanoui使用方式
自动初始化（推荐）
使用 data-* 属性配置组件，然后调用 SA.init() 自动初始化：
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./sanoui.min.css">
</head>
<body>
<!-- 使用 data 属性配置组件 -->
<button class="sa-button"
data-button
data-type="primary"
data-icon="plus">
新建
</button>
<div class="sa-alert"
data-alert
data-type="success"
data-title="成功"
data-description="操作成功！">
</div>
<script src="./sanoui.min.js"></script>
<script>
// 自动初始化所有组件
SA.init('body');
</script>
</body>
</html>手动创建实例
如果需要更精细的控制，可以手动创建组件实例：
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./sanoui.min.css">
</head>
<body>
<div id="my-button"></div>
<div id="my-alert"></div>
<script src="./sanoui.min.js"></script>
<script>
// 手动创建按钮实例
const button = new SaButton('#my-button', {
label: '点击我',
type: 'primary',
icon: 'plus',
onClick: (event) => {
console.log('Button clicked!');
}
});
// 手动创建警告提示实例
const alert = new SaAlert('#my-alert', {
type: 'success',
title: '成功',
description: '操作成功！',
closable: true
});
</script>
</body>
</html>第一个示例
创建一个完整的示例页面：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SanoUI 示例</title>
<link rel="stylesheet" href="./sanoui.min.css">
<style>
body {
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.demo-section {
margin-bottom: 30px;
}
.demo-section h2 {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h1>SanoUI 示例</h1>
<!-- 按钮示例 -->
<div class="demo-section">
<h2>按钮</h2>
<button class="sa-button" data-button data-type="primary">主要按钮</button>
<button class="sa-button" data-button data-type="success">成功按钮</button>
<button class="sa-button" data-button data-type="warning">警告按钮</button>
<button class="sa-button" data-button data-type="danger">危险按钮</button>
</div>
<!-- 警告提示示例 -->
<div class="demo-section">
<h2>警告提示</h2>
<div class="sa-alert"
data-alert
data-type="success"
data-title="成功"
data-description="这是一条成功的提示信息。"
data-closable="true">
</div>
</div>
<!-- 输入框示例 -->
<div class="demo-section">
<h2>输入框</h2>
<input type="text"
class="sa-input"
data-input
data-placeholder="请输入内容">
</div>
<!-- 初始化所有组件 -->
<script src="./sanoui.min.js"></script>
<script>
// 自动初始化所有组件
const page = SA.init('body');
// 可以访问组件实例
console.log('初始化的组件:', page);
</script>
</body>
</html>