快速上手

前言

ag-ui的设计思路就是尽量"包容", "低侵入", 不想重复造轮子(成为UI框架), 也不想站队(依赖前端框架), 它只是"代码模板", 简单易修改.

自我介绍

ag-ui是一套尽可能灵活的UI工具包, 我们倾向简单的原生语法, 复杂的UI组件则建议选用成熟开源作品.

浏览器兼容性

ie10+, edge12+, chrome50+, safari9+, firefox35+

免费开源

https://github.com/aigodata/ag-ui

文件大小

ag-ui.min.css (gzip 5.1kb)

ag-ui.min.js (gzip 2.1kb)

如何使用


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="ag-ui.min.css">
</head>
<body>
  <script src="ag-ui.min.js"></script>
</body>
</html>

Layout 布局

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>

显示代码

Color 色彩

我们提取了42种色值, 方便日常书写.

配色方案

颜色书写分为三种: 字体颜色 | 背景色 | 边框色; 颜色值的数字1-5是由浅入深的意思, 对于有伪态的情况不建议使用.

使用举例: .ag-blue-1; .ag-bg-blue-2; .ag-border-blue-3;

red-1

red-2

red-3

red-4

red-5

orange-1

orange-2

orange-3

orange-4

orange-5

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

green-1

green-2

green-3

green-4

green-5

cyan-1

cyan-2

cyan-3

cyan-4

cyan-5

blue-1

blue-2

blue-3

blue-4

blue-5

purple-1

purple-2

purple-3

purple-4

purple-5

gray-1

gray-2

gray-3

gray-4

gray-5

white

black

Font 字体

常规使用


font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

WebFont中文字体

建议使用IconFont的在线中文字体进行字体优化(需要登录后才能使用).

Icon 图标

我们不内置图标库, 建议使用IconFont管理你的项目图标.

Button 按钮

因牵扯到伪类情况, 仅内置了6种颜色: red orange yellow green blue gray, 例: red, bg-red, border-red

                  

<div class="button-wrap">
  <button class="ag-button bg-red ag-white">红色按钮</button>
  <button class="ag-button bg-orange ag-white">橙色按钮</button>
  <button class="ag-button bg-yellow ag-white">黄色按钮</button>
  <button class="ag-button bg-green ag-white">绿色按钮</button>
  <button class="ag-button bg-blue ag-white">蓝色按钮</button>
  <button class="ag-button bg-gray ag-white">灰色按钮</button>
</div>
<div class="button-wrap">
  <button class="ag-button border-red ag-red-3">红色按钮</button>
  <button class="ag-button border-orange ag-orange-3">橙色按钮</button>
  <button class="ag-button border-yellow ag-yellow-3">黄色按钮</button>
  <button class="ag-button border-green ag-green-3">绿色按钮</button>
  <button class="ag-button border-blue ag-blue-3">蓝色按钮</button>
  <button class="ag-button border-gray ag-gray-3">灰色按钮</button>
</div>
<div class="button-wrap">
  <button class="ag-button text red">红色按钮</button>
  <button class="ag-button text orange">橙色按钮</button>
  <button class="ag-button text yellow">黄色按钮</button>
  <button class="ag-button text green">绿色按钮</button>
  <button class="ag-button text blue">蓝色按钮</button>
  <button class="ag-button text gray">灰色按钮</button>
</div>

显示代码

提供4种状态: normal hover active disabled

normal hover active disabled disabled

                  

<div class="button-wrap">
  <a class="ag-button bg-blue ag-white">normal</a>
  <a class="ag-button bg-blue hover ag-white">hover</a>
  <a class="ag-button bg-blue active ag-white">active</a>
  <a class="ag-button bg-blue disabled ag-white">disabled</a>
  <a class="ag-button text blue disabled">disabled</a>
</div>

显示代码

支持iconfont图标, 圆角, 按钮组

搜索搜索搜索

                  
<div class="button-wrap">
  <a class="ag-button bg-blue ag-white"><i class="icon iconfont icon-sousuo"></i></a>
  <a class="ag-button bg-blue ag-white">搜索</a>
  <a class="ag-button bg-blue ag-white"><i class="icon iconfont icon-sousuo"></i><span>搜索</span></a>
  <a class="ag-button round bg-blue ag-white"><i class="icon iconfont icon-sousuo"></i><span>搜索</span></a>
</div>
<div class="button-wrap">
  <div class="ag-button-group">
    <button class="ag-button bg-blue ag-white"><i class="icon iconfont icon-sousuo"></i></button>
    <button class="ag-button bg-blue ag-white"><i class="icon iconfont icon-compile"></i></button>
    <button class="ag-button bg-blue ag-white"><i class="icon iconfont icon-gerenyetianjiajiaguanzhu"></i></button>
  </div>
</div>

显示代码

Radio 单选按钮

仅支持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>

显示代码

Checkbox 多选按钮

仅支持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>

显示代码

Switch 开关

基于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>

显示代码

Input 文本框

提供了三种状态, 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 文本域

                  
                  我是文本域
                  我是文本域

                  
<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下拉框

                  
<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>

显示代码

Tag 标签

                  
<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>

显示代码

Badge 标记

normal

9

normal

99+

normal

999+

                  
<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>

显示代码

Breadcrumb 面包屑

                  
<span class="ag-breadcrumb">
  <a href="javascript:void(0)">首页</a>
</span>
<span class="ag-breadcrumb">/</span>
<span class="ag-breadcrumb">
  <a href="javascript:void(0)">产品展示</a>
</span>
<span class="ag-breadcrumb">/</span>
<span class="ag-breadcrumb">
  <a href="javascript:void(0)">产品详情</a>
</span>

显示代码

Progress 进度条

                  
<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>

显示代码

Loading 加载

                  
<div class="ag-loading">
  <div class="ag-loading-bar"></div>
</div>

显示代码

Tabs 标签页

不需要配置js代码也可以使用

标签页1
标签页2

                        标签页1的内容页

                        标签页1的内容页

                        标签页1的内容页

                        标签页1的内容页

                        标签页2的内容页

                        标签页2的内容页

                        标签页2的内容页

                        标签页2的内容页

                  
<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>

显示代码

标签页1
标签页2

                        标签页1的内容页

                        标签页1的内容页

                        标签页1的内容页

                        标签页1的内容页

                        标签页2的内容页

                        标签页2的内容页

                        标签页2的内容页

                        标签页2的内容页

                  
<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>

显示代码

Drawer 抽屉

抽屉配置较灵活, 支持任意搭配, 不需要配置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>

显示代码