基础示例
展示 SanoUI 组件的基本使用方法。
快速开始示例
一个包含多种基础组件的完整页面示例。
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">
</head>
<body>
<div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
<h1>SanoUI 基础示例</h1>
<!-- 按钮组 -->
<div style="margin: 20px 0;">
<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 style="margin: 20px 0;">
<h2>输入框</h2>
<div class="sa-input"
data-placeholder="请输入用户名"
data-prefix-icon="search"
style="width: 300px; margin-bottom: 10px;"></div>
<div class="sa-input"
data-placeholder="请输入密码"
data-type="password"
data-show-password="true"
style="width: 300px;"></div>
</div>
<!-- 警告提示 -->
<div style="margin: 20px 0;">
<h2>警告提示</h2>
<div class="sa-alert"
data-alert
data-type="success"
data-title="成功提示"
data-description="这是一条成功提示信息"
data-closable="true">
</div>
</div>
<!-- 标签 -->
<div style="margin: 20px 0;">
<h2>标签</h2>
<div class="sa-tag" data-tag data-text="标签一" data-type="success"></div>
<div class="sa-tag" data-tag data-text="标签二" data-type="warning"></div>
<div class="sa-tag" data-tag data-text="标签三" data-type="danger"></div>
</div>
<!-- 开关 -->
<div style="margin: 20px 0;">
<h2>开关</h2>
<div class="sa-switch" data-switch></div>
<div class="sa-switch" data-switch data-checked="true" data-labels='["关闭", "开启"]' style="margin-left: 20px;"></div>
</div>
</div>
<script src="./sanoui.min.js"></script>
<script>
// 自动初始化所有组件
SA.init('body');
</script>
</body>
</html>组件组合示例
搜索表单
按钮、输入框、下拉选择的组合使用。
html
<div style="display: flex; gap: 10px; margin: 20px 0;">
<div class="sa-input"
data-placeholder="请输入关键词"
data-prefix-icon="search"
style="flex: 1; max-width: 300px;"></div>
<div class="sa-select"
data-select
data-options='[{"label":"全部","value":""},{"label":"选项一","value":"1"}]'
style="width: 150px;">
</div>
<button class="sa-button"
data-button
data-type="primary"
data-icon="search">
搜索
</button>
</div>
<script>
SA.init('body');
</script>表单与验证
表单组件配合验证规则的使用。
html
<form class="sa-form" id="searchForm" style="max-width: 600px;">
<div class="sa-form-item">
<label class="sa-form-item__label">用户名</label>
<div class="sa-form-item__content">
<div class="sa-input"
data-prop="username"
data-placeholder="请输入用户名"
data-clearable="true"></div>
</div>
</div>
<div class="sa-form-item">
<label class="sa-form-item__label">邮箱</label>
<div class="sa-form-item__content">
<div class="sa-input"
data-prop="email"
data-placeholder="请输入邮箱"
data-type="email"></div>
</div>
</div>
<div class="sa-form-item">
<div class="sa-form-item__content">
<button type="submit" class="sa-button" data-button data-type="primary">提交</button>
<button type="button" class="sa-button" data-button>重置</button>
</div>
</div>
</form>
<script>
const form = new SaForm('#searchForm', {
rules: {
username: [
{ required: true, message: '请输入用户名' },
{ min: 3, max: 20, message: '用户名长度为 3-20 个字符' }
],
email: [
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '请输入正确的邮箱格式' }
]
}
});
SA.init('body');
</script>