ag-ui的设计思路就是尽量"包容", "低侵入", 不想重复造轮子(成为UI框架), 也不想站队(依赖前端框架), 它只是"代码模板", 简单易修改.
ag-ui是一套尽可能灵活的UI工具包, 我们倾向简单的原生语法, 复杂的UI组件则建议选用成熟开源作品.
ie10+, edge12+, chrome50+, safari9+, firefox35+
ag-ui.min.css (gzip 5.1kb)
ag-ui.min.js (gzip 2.1kb)
css的灵活使得布局方式不拘一格, 以下仅列出三种flex布局抛砖引玉.
<style>
.layout {
padding: 10px;
}
.layout .layout-header div {
background: #e1e9f0;
height: 60px;
margin: 0 0 10px;
}
.layout .layout-container {
height: 160px;
}
.layout .layout-left div {
background: #e8ecf1;
height: 160px;
width: 200px;
margin: 0 10px 0 0;
}
.layout .layout-right {
background: #f3f7fb;
height: 160px;
}
.layout .layout-footer {
background: #e1e9f0;
height: 60px;
margin-top: 10px;
}
</style>
<div class="layout-header">
<div></div>
</div>
<div class="layout-container ag-layout">
<div class="layout-left ag-shrink">
<div></div>
</div>
<div class="layout-right ag-grow-auto">
<div></div>
</div>
</div>
<div class="layout-footer">
<div></div>
</div>
<style>
.layout-2 {
padding: 10px;
}
.layout-2 .layout-container {
height: 280px;
}
.layout-2 .layout-left div {
background: #e8ecf1;
height: 280px;
width: 200px;
margin: 0 10px 0 0;
}
.layout-2 .layout-right {
height: 280px;
}
.layout-2 .layout-header div {
background: #e1e9f0;
height: 60px;
margin: 0 0 10px;
}
.layout-2 .layout-content div {
background: #f3f7fb;
height: 140px;
}
.layout-2 .layout-footer {
background: #e1e9f0;
height: 60px;
margin-top: 10px;
}
</style>
<!--布局-->
<div class="layout-2">
<div class="layout-container ag-layout">
<div class="layout-left ag-shrink">
<div></div>
</div>
<div class="layout-right ag-grow-auto">
<div class="layout-header">
<div></div>
</div>
<div class="layout-content">
<div></div>
</div>
<div class="layout-footer">
<div></div>
</div>
</div>
</div>
</div>
<style>
.layout-3 {
padding: 10px;
}
.layout-3 .layout-header div {
background: #e1e9f0;
height: 60px;
margin: 0 0 10px;
}
.layout-3 .layout-container {
height: 220px;
}
.layout-3 .layout-left div {
background: #e8ecf1;
height: 220px;
width: 200px;
margin: 0 10px 0 0;
}
.layout-3 .layout-right {
height: 220px;
}
.layout-3 .layout-content div {
background: #f3f7fb;
height: 150px;
}
.layout-3 .layout-footer {
background: #e1e9f0;
height: 60px;
margin-top: 10px;
}
</style>
<!--布局-->
<div class="layout-3">
<div class="layout-header">
<div></div>
</div>
<div class="layout-container ag-layout">
<div class="layout-left ag-shrink">
<div></div>
</div>
<div class="layout-right ag-grow-auto">
<div class="layout-content">
<div></div>
</div>
<div class="layout-footer">
<div></div>
</div>
</div>
</div>
</div>
我们提取了42种色值, 方便日常书写.
颜色书写分为三种: 字体颜色 | 背景色 | 边框色; 颜色值的数字1-5是由浅入深的意思, 对于有伪态的情况不建议使用.
使用举例: .ag-blue-1; .ag-bg-blue-2; .ag-border-blue-3;
我们不内置图标库, 建议使用IconFont管理你的项目图标.
仅支持label在radio后面的展示方式.
<div class="component-wrap radio">
<input type="radio" name="radio" id="radio-checked" checked="checked" class="ag-radio">
<label for="radio-checked" class="ag-radio-label">选中状态</label>
<input type="radio" name="radio" id="radio-no-checked" class="ag-radio">
<label for="radio-no-checked" class="ag-radio-label">未选中状态</label>
<input type="radio" name="radio" id="radio-no-checked2" class="ag-radio">
<label for="radio-no-checked2" class="ag-radio-label">未选中状态</label>
<input type="radio" name="radio4" id="radio-disabled-checked" class="ag-radio" checked disabled>
<label for="radio-disabled-checked" class="ag-radio-label">禁用选中状态</label>
<input type="radio" name="radio5" id="radio-disabled-no-checked" class="ag-radio" disabled>
<label for="radio-disabled-no-checked" class="ag-radio-label">禁用未选中状态</label>
</div>
仅支持label在checkbox后面的展示方式.
<div class="component-wrap checkbox">
<input type="checkbox" name="checkbox" id="checkbox-checked" class="ag-checkbox" checked>
<label for="checkbox-checked" class="ag-checkbox-label">选中状态</label>
<input type="checkbox" name="checkbox" id="checkbox-no-checked" class="ag-checkbox">
<label for="checkbox-no-checked" class="ag-checkbox-label">未选中状态</label>
<input type="checkbox" name="checkbox" id="checkbox-no-checked2" class="ag-checkbox">
<label for="checkbox-no-checked2" class="ag-checkbox-label">未选中状态</label>
<input type="checkbox" name="radio4" id="checkbox-disabled-checked" class="ag-checkbox" checked disabled>
<label for="checkbox-disabled-checked" class="ag-checkbox-label">禁用选中状态</label>
<input type="checkbox" name="radio5" id="checkbox-disabled-no-checked" class="ag-checkbox" disabled>
<label for="checkbox-disabled-no-checked" class="ag-checkbox-label">禁用未选中状态</label>
</div>
基于checkbox模拟的switch效果, 支持文字可以在switch左右显示.
<div class="component-wrap switch">
<input type="checkbox" name="switch1" id="switch-checked" class="ag-switch" checked>
<label for="switch-checked" class="ag-switch-label">开启</label>
<input type="checkbox" name="switch2" id="switch-no-checked" class="ag-switch">
<label for="switch-no-checked" class="ag-switch-label">关闭</label>
<input type="checkbox" name="switch3" id="switch-disabled-checked" class="ag-switch" checked disabled>
<label for="switch-disabled-checked" class="ag-switch-label">禁用开启</label>
<input type="checkbox" name="switch4" id="switch-disabled-no-checked" class="ag-switch" disabled>
<label for="switch-disabled-no-checked" class="ag-switch-label">禁用关闭</label>
</div>
<div class="component-wrap switch">
<input type="checkbox" name="switch1" id="switch-checked-2" class="ag-switch" checked>
<label for="switch-checked-2" class="ag-switch-label right">开启</label>
<input type="checkbox" name="switch2" id="switch-no-checked-2" class="ag-switch">
<label for="switch-no-checked-2" class="ag-switch-label right">关闭</label>
<input type="checkbox" name="switch3" id="switch-disabled-checked-2" class="ag-switch" checked disabled>
<label for="switch-disabled-checked-2" class="ag-switch-label right">禁用开启</label>
<input type="checkbox" name="switch4" id="switch-disabled-no-checked-2" class="ag-switch" disabled>
<label for="switch-disabled-no-checked-2" class="ag-switch-label right">禁用关闭</label>
</div>
提供了三种状态, normal focus disabled
<input type="text" class="ag-input" name="name" placeholder="normal">
<input type="text" class="ag-input" name="name" value="focus">
<input type="text" class="ag-input" name="name" value="disabled" disabled>
仅支持icon写在input前面的书写方式
<div class="ag-input-group">
<i class="icon iconfont icon-sousuo ag-input-icon left"></i>
<input type="text" class="ag-input" name="name" placeholder="搜索">
</div>
<div class="ag-input-group">
<i class="icon iconfont icon-calendar ag-input-icon right"></i>
<input type="text" class="ag-input" name="name" value="选择日期">
</div>
<div class="ag-input-group">
<i class="icon iconfont icon-sousuo ag-input-icon left"></i>
<input type="text" class="ag-input" name="name" value="搜索" disabled>
</div>
<textarea rows="3" cols="20" class="ag-textarea" name="name" placeholder="normal"></textarea>
<textarea rows="3" cols="20" class="ag-textarea" name="name">我是文本域</textarea>
<textarea rows="3" cols="20" class="ag-textarea" name="name" disabled>我是文本域</textarea>
默认的select下拉框
<select class="ag-select" name="select">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="ag-select" name="select" disabled>
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div>
<span class="ag-tag">标签一</span>
<span class="ag-tag ag-bg-blue-3 ag-border-blue-3 ag-white">标签二</span>
<span class="ag-tag ag-bg-orange-3 ag-border-orange-3 ag-white">标签三</span>
<span class="ag-tag ag-bg-red-3 ag-border-red-3 ag-white">标签四</span>
<span class="ag-tag ag-bg-green-3 ag-border-green-3 ag-white">标签五</span>
</div>
<div>
<span class="ag-tag remove" tag-target-1>
标签一<i class="icon iconfont icon-guanbi ag-tag-remove" ag-click target="tag-target-1"></i>
</span>
<span class="ag-tag remove ag-bg-blue-3 ag-border-blue-3 ag-white" tag-target-2>
标签二<i class="icon iconfont icon-guanbi ag-tag-remove" ag-click target="tag-target-2"></i>
</span>
<span class="ag-tag remove ag-bg-orange-3 ag-border-orange-3 ag-white" tag-target-3>
标签三<i class="icon iconfont icon-guanbi ag-tag-remove" ag-click target="tag-target-3"></i>
</span>
<span class="ag-tag remove ag-bg-red-3 ag-border-red-3 ag-white" tag-target-4>
标签四<i class="icon iconfont icon-guanbi ag-tag-remove" ag-click target="tag-target-4"></i>
</span>
<span class="ag-tag remove ag-bg-green-3 ag-border-green-3 ag-white" tag-target-5>
标签五<i class="icon iconfont icon-guanbi ag-tag-remove" ag-click target="tag-target-5"></i>
</span>
</div>
<div class="ag-badge-host">
<a class="ag-button bg-blue ag-white">normal</a>
<div class="ag-badge dot ag-bg-red-3 ag-white"></div>
</div>
<div class="ag-badge-host">
<a class="ag-button bg-blue ag-white">normal</a>
<div class="ag-badge ag-bg-red-3 ag-white">9</div>
</div>
<div class="ag-badge-host">
<a class="ag-button bg-blue ag-white">normal</a>
<div class="ag-badge ag-bg-red-3 ag-white">99+</div>
</div>
<div class="ag-badge-host">
<a class="ag-button bg-blue ag-white">normal</a>
<div class="ag-badge ag-bg-red-3 ag-white">999+</div>
</div>
<select class="ag-select" name="select">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="ag-select" name="select" disabled>
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
不需要配置js代码也可以使用
<div class="ag-tab">
<div class="ag-tab-head">
<div class="ag-tab-head-item" ag-click target-group="ag-tabs" active>标签页1</div>
<div class="ag-tab-head-item" ag-click target-group="ag-tabs">标签页2</div>
</div>
<div class="ag-tab-content">
<div class="ag-tab-content-item" ag-tabs active>
标签页1的内容页<br>
标签页1的内容页<br>
标签页1的内容页<br>
标签页1的内容页<br>
</div>
<div class="ag-tab-content-item" ag-tabs>
标签页2的内容页<br>
标签页2的内容页<br>
标签页2的内容页<br>
标签页2的内容页<br>
</div>
</div>
</div>
<div class="ag-tab ag-tab-card">
<div class="ag-tab-head">
<div class="ag-tab-head-item" ag-click target-group="ag-tabs-2" active>标签页1</div>
<div class="ag-tab-head-item" ag-click target-group="ag-tabs-2">标签页2</div>
</div>
<div class="ag-tab-content">
<div class="ag-tab-content-item" ag-tabs-2 active>
标签页1的内容页<br>
标签页1的内容页<br>
标签页1的内容页<br>
标签页1的内容页<br>
</div>
<div class="ag-tab-content-item" ag-tabs-2>
标签页2的内容页<br>
标签页2的内容页<br>
标签页2的内容页<br>
标签页2的内容页<br>
</div>
</div>
</div>
抽屉配置较灵活, 支持任意搭配, 不需要配置js代码也可以使用.
<button class="ag-button bg-blue ag-white" ag-click target="ag-drawer-2">左侧弹出</button>
<div ag-drawer-2 class="ag-drawer left ag-bg-blue-3 ag-white">
<span class="ag-pointer" ag-click remove target="ag-drawer-2">点击我关闭</span>
</div>
<button class="ag-button bg-blue ag-white" ag-click target="ag-drawer-mask ag-drawer">右侧弹出</button>
<div ag-drawer-mask class="ag-drawer-mask" ag-click remove target="ag-drawer"></div>
<div ag-drawer class="ag-drawer ag-bg-blue-3 ag-white">我是右侧抽屉</div>