get UIGG

download zip

You can download UIGG from the official website

你可以从官网下载 UIGG

download

download design template

We have prepared the design specification of rapid prototyping for designers

我们为设计师准备了快速原型设计规范

Adobe XD figma

get gitHub

You can get UIGG from gitHub (Click the code block to copy it)

你可以从 gitHub 获取 UIGG（点击代码块复制）

//github.com/mixice/uigg.git gitHub

get npm

You can get UIGG from npm

你可以从 npm 获取 UIGG

npm i uigg

Add style module

添加样式模块

import 'uigg/uigg.css'

Add javascript module

添加 javascript 模块

import 'uigg'

If you need to import specific methods, use ES module destructuring

如果需要导入特定方法，使用 ES 模块解构

import Uigg from 'uigg'

You can also import Custom Element classes (use uigg.esm.js for CDN)

也可以导入自定义元素类（CDN 引用请使用 uigg.esm.js）

import { Tab, Pop, Menu } from 'uigg' import { Tab, Pop, Menu } from '//ui.gg/lib/uigg.esm.js'

quote

You can also directly reference files from domestic CDN (recommended)

你也可以直接从国内 CDN 引用文件（推荐）

<link rel="stylesheet" href="//ui.gg/lib/uigg.css"> <script src="//ui.gg/lib/uigg.js"></script>

International CDN

国际CDN

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/uigg/uigg.min.css"> <script type="module" src="//cdn.jsdelivr.net/npm/uigg"></script>

unpkg

You can also use unpkg

你还可以使用 unpkg 包

//unpkg.com/uigg

responsive rule

important

uigg uses ES module (export), must use type="module" when loading

uigg.js 使用 ES 模块导出，引用时必须使用 type="module"

<script type="module"></script>

PC rule

.main defines the center of the content area, the maximum width is 1300px , add the class to the DOM

.main 定义内容区域的中心，最大宽度为 1300px，添加 class 到 DOM

class="main"

mobile rule

.mobile defines the center of the content area, the maximum width is 640px , add the class to the DOM

.mobile 定义内容区域的中心，最大宽度为 640px，添加 class 到 DOM

class="mobile"

mobile mode

If you need to force the mobile mode, run javascript

如果需要强制移动模式，运行 javascript

mobile(true)

unit conversion

UIGG uses rem as the response unit, and the calculation rule is 100px = 1rem

UIGG 使用 rem 作为响应单位，计算规则为 100px = 1rem

layout preset

basic

Add the class to the DOM

添加 class 到 DOM

class="block" class="cover" class="contain" class="center" class="clear" class="hide" class="show" class="hide-important" class="show-important" class="single" class="only-web" class="only-mob" class="float-left" class="float-right" class="float-left-important" class="float-right-important" class="flex" class="flex-auto" class="flex-column" class="full" class="full-device" class="transparent" class="transition"

absolute

The logic of absolute and fixed positions

绝对定位和固定位置的逻辑

Add the class to the DOM

添加 class 到 DOM

class="absolute" class="absolute-1" class="absolute-2" class="absolute-3" class="absolute-4" class="absolute-5" class="absolute-6" class="absolute-7" class="absolute-8" class="absolute-9" class="fixed" class="fixed-1" class="fixed-2" class="fixed-3" class="fixed-4" class="fixed-5" class="fixed-6" class="fixed-7" class="fixed-8" class="fixed-9"

wide

wide can quickly set the width of elements, usually used for form

wide 可以快速设置元素的宽度，通常用于 form

Add the class to the DOM

添加 class 到 DOM

class="wide" /* 100% */ class="wide-10" class="wide-20" class="wide-30" class="wide-40" class="wide-50" class="wide-60" class="wide-70" class="wide-80" class="wide-90"

load

If you need to wait for the page to be displayed after loading, add the code to the DOM

如果需要等待页面加载后显示，添加代码到 DOM

<load></load>

corner

If you need a directional triangle marker, add the class to the DOM

如果需要一个方向三角标记，添加 class 到 DOM

class="corner"

Styles demo

样式演示

.corner::after {border-width: 0 10px 10px 10px;border-bottom-color: white;top: -10px;}

shadow

If you need a drop shadow, add the class to the DOM

如果需要一个投影，添加 class 到 DOM

class="shadow"

Styles demo

样式演示

.shadow::after {background-color: white;box-shadow: 0 5px 10px white;}

adrift

If you need a physical shadow, add the class to the DOM

如果需要一个物理投影，添加 class 到 DOM

class="adrift"

Styles demo

样式演示

.adrift {filter: drop-shadow(0 10px 10px var(--color));}

return

If you need to go back to the previous page, add the class to the DOM

如果需要返回上一页，添加 class 到 DOM

class="return"

alert

code

If you need alert, run javascript

如果需要警告，运行 javascript

Uigg.alert('alert')

If you need confirm, run javascript, it returns a Promise

如果需要确认，运行 javascript，返回 Promise

const result = await Uigg.confirm('confirm') // result: true / false

If you need prompt, run javascript, it returns a Promise

如果需要键入，运行 javascript，返回 Promise

const result = await Uigg.prompt('prompt', 'default') // result: string / null

effect display

view

alone

code

alone splits text into individual characters for animating each one separately, run javascript

alone 可以将文本拆分成单个字符进行单独动画，运行 javascript

alone(document.querySelector('element'))

If you need manipulating character objects, use DOMContentLoaded

如果需要操作字符对象，使用 DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){ document.querySelector('element z') })

effect display

view

anime

code

Add the class to the DOM

添加 class 到 DOM

class="anime-spasm" class="anime-rotate" class="anime-beat-x" class="anime-beat-y" class="anime-beat-z" class="anime-beat-r" class="anime-fade-in" class="anime-fade-in-down" class="anime-fade-in-left" class="anime-fade-in-right" class="anime-fade-in-up" class="anime-fade-out" class="anime-fade-out-down" class="anime-fade-out-left" class="anime-fade-out-right" class="anime-fade-out-up" class="anime-bounce-in" class="anime-bounce-in-down" class="anime-bounce-in-left" class="anime-bounce-in-right" class="anime-bounce-in-up" class="anime-bounce-out" class="anime-bounce-out-down" class="anime-bounce-out-left" class="anime-bounce-out-right" class="anime-bounce-out-up" class="anime-flip-in-x" class="anime-flip-in-y" class="anime-flip-out-x" class="anime-flip-out-y" class="anime-zoom-in" class="anime-zoom-out" class="anime-zoom-in-enlarge" class="anime-zoom-out-enlarge" class="anime-shrink-in" class="anime-shrink-out" class="anime-shrink-in-enlarge" class="anime-shrink-out-enlarge"

If you want the some effects, add the class to the DOM

如果需要一些其他属性，添加 class 到 DOM

class="infinite" class="alternate" class="reverse"

effect display

view

audio

code

Add the class to the DOM

添加 class 到 DOM

class="audio-error" class="audio-right" class="audio-trigger" class="audio-brilliant" class="audio-notify" class="audio-button" class="audio-aeolian" class="audio-bounce" class="audio-boxing" class="audio-ding" class="audio-drip" class="audio-drum" class="audio-dulcimer" class="audio-wave" class="audio-audio"

effect display

view

button

code

Add the class to the DOM

添加 class 到 DOM

class="btn"

Empty button

空按钮

class="btn btn-empty"

Color button, please refer to color

颜色按钮，请参考 color

class="btn bg-red"

Color empty button, please refer to color

颜色空按钮，请参考 color

class="btn co-red"

Button disable

按钮禁用

<a class="btn" disabled>button</a>

Button ico

按钮图标

<a class="btn"><i class="ico ico-search"></i><span>button</span></a>

Button flex group

按钮flex分组

<div class="btn-flex"> <a class="btn">button</a> <a class="btn">button</a> </div>

effect display

view

clue

code

clue replaces the default title style, add the attribute to the DOM, If the element has a title, the value of clue will become the value of title

clue 替换默认的 title 样式，添加属性到 DOM，如果元素有 title，clue 的值会变成 title 的值

clue=""

You can add left or right or bottom to change the position of the clue

你可以添加 left 或 right 或 bottom 来改变 clue 的位置

effect display

view

cookie

code

Save cookies, run javascript

保存 cookies，运行 javascript

setCookie('name','value','time')

Get cookies, run javascript

获取 cookies，运行 javascript

getCookie('name')

effect display

view

copy

Warning : This function can work normally only after obtaining user clipboard authorization or under the https security domain

警告：此功能仅在获取用户剪切板授权或在 https 安全域名下才能正常工作

code

Add the attribute to the DOM

添加属性到 DOM

copy-val copy-btn

If you need more than one, set different values for different groups

如果需要多个，为不同的组设置不同的值

copy-val="copy1" copy-btn="copy1"

If you need select copy, add the attribute to the DOM

如果需要划词选择自动复制，添加属性到 DOM

copy-select

effect display

view

countdown

code

Add the code to the DOM

添加代码到 DOM

<countdown> <d>00</d> <h>00</h> <m>00</m> <s>00</s> </countdown>

run javascript, requires a date parameter

运行 javascript，需要传入日期参数

countdown('2026/12/31 23:59:59')

effect display

view

crumb

code

Add the code to the DOM

添加代码到 DOM

<crumb> <li><a href="/">home</a></li> <li><a href="">layer</a></li> <li><a href="">layer</a></li> </crumb>

effect display

view

disable

code

If you need to prevent users from viewing your code, run javascript

如果需要防止用户查看你的代码，运行 javascript

disable() view

drop

code

Add the code to the DOM

添加代码到 DOM

<drop> <drop-list> <ul> <li><a>drop 1</a></li> <li><a>drop 2</a></li> <li><a>drop 3</a></li> </ul> </drop-list> </drop>

If you need to add a submenu, just add drop-list to li, you can have unlimited sets of dolls

如果需要添加子菜单，只需要在 li 上添加 drop-list，你可以拥有无限套娃

effect display

view

empty

code

Add the code to the DOM

添加代码到 DOM

<empty></empty>

You can also customize the content, add the code to the DOM

你也可以自定义内容，添加代码到 DOM

<empty><i class="ico ico-emot-smile"></i><h3>text</h3></empty>

If vertical arrangement is required, add DOM around the content

如果需要垂直排列，添加 DOM 包裹内容

<empty><div><i class="ico ico-emot-smile"></i><h3>text</h3></div></empty>

effect display

view

fold

code

Add the code to the DOM

添加代码到 DOM

<fold> <fold-group> <fold-title><h5>title</h5><u></u></fold-title> <fold-cont>article</fold-cont> </fold-group> </fold>

If you need to expand all by default, you only need to add show attribute to fold

如果需要默认展开所有，只需要在 fold 上添加 show 属性

show

effect display

view

font

web font

Add the class to the DOM

添加 class 到 DOM

class="font-aclonica" class="font-aller" class="font-amaranth" class="font-arvo" class="font-avenir" class="font-clarendon" class="font-din" class="font-encode" class="font-geo" class="font-gotham" class="font-lat" class="font-montserrat" class="font-moto" class="font-museo" class="font-neo" class="font-overpass" class="font-philosopher" class="font-portada" class="font-raleway" class="font-read" class="font-renault" class="font-roboto" class="font-santander" class="font-steel" class="font-tanseek" class="font-ubuntu"

Set font-family in CSS, because UIGG uses UIGG fonts by default, you maybe need !important

在 CSS 中设置 font-family 你可能需要添加 !important，因为 UIGG 默认使用 UIGG 字体

font-family: 'aclonica' font-family: 'aller' font-family: 'amaranth' font-family: 'arvo' font-family: 'avenir' font-family: 'clarendon' font-family: 'din' font-family: 'encode' font-family: 'geo' font-family: 'gotham' font-family: 'lat' font-family: 'montserrat' font-family: 'moto' font-family: 'museo' font-family: 'neo' font-family: 'overpass' font-family: 'philosopher' font-family: 'portada' font-family: 'raleway' font-family: 'read' font-family: 'renault' font-family: 'roboto' font-family: 'santander' font-family: 'steel' font-family: 'tanseek' font-family: 'ubuntu'

Web fonts are independent elements, and you can introduce a single font from a domestic CDN

Web字体是独立的元素，你可以从国内 CDN 引入单个字体

@import url('//ui.gg/lib/font/aclonica.css');

International CDN

国际CDN

@import url('//cdn.jsdelivr.net/npm/uigg/font/aclonica.min.css');

local font

Add the class to the DOM (Local font is only valid on the computer side)

添加 class 到 DOM (本地字体只在电脑端有效)

class="font-uigg" class="font-yahei" class="font-jhenghei" class="font-nsimsun" class="font-kaiti" class="font-lisu" class="font-youyuan" class="font-fangsong" class="font-xingkai" class="font-xinwei" class="font-arial" class="font-tahoma"

effect display

view

form

filter

Add the code to the DOM

添加代码到 DOM

<section class="form filter"> <form> <li><span>name</span><input type="text"></li> <li><span>time</span><input type="date"></li> <li><span>select</span><div class="select"><select><option selected disabled>select</option><option>select</option></select></div></li> <li><a class="btn">search</a></li> </form> </section>

form

Add the code to the DOM

添加代码到 DOM

<section class="form"> <form> <li><span>account</span> <input class="wide-20" type="text" required> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>password</span> <div class="input wide-20"><input type="password" required><o class="password"></o></div> <cite class="co-red">Password error</cite> </li> <li><span>scaler</span> <scaler><input step="1" min="0" max="100" value="1"></scaler> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>radio</span> <div class="parent"> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>checkbox</span> <div class="parent"> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox checkbox-all"></o><span>checkbox all</span> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>toggle</span> <o class="toggle"></o> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>progress</span> <progress class="wide-20" max="100" value="50"></progress> </li> <li><span>range</span> <input class="wide-20" type="range" min="0" max="100" step="0" value="50"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>file</span> <input class="wide-30" type="file"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>color</span> <input type="color"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>date</span> <input class="wide-20" type="date"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>datetime</span> <input class="wide-20" type="datetime-local"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>month</span> <input class="wide-20" type="month"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>week</span> <input class="wide-20" type="week"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>time</span> <input class="wide-20" type="time"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <div class="select wide-20"> <select> <option selected disabled>select</option> <option>select</option> </select> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>choice</span> <drop class="wide-20"> <a>choice 1</a> <drop-list> <a>choice 1</a> <a>choice 2</a> </drop-list> </drop> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="wide-10" type="text"> <a class="code" uigg="color"><img uigg="color"></a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>code</span> <input class="wide-10" type="text"> <a class="btn code">get code</a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>message</span> <textarea class="wide"></textarea> </li> <li><span>editor</span> <div class="editor-simple"></div> </li> <li><span>images</span> <div class="upload"> <div class="ico upload-group"><input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"><n class="ico"></n></div> <div class="ico upload-add"></div> </div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li class="resolve"><o class="checkbox"></o><span>I've read and agreed</span><a>"User agreement"</a></li> <li class="resolve"><button class="btn btn-submit">cancel</button><button class="btn btn-submit">submit</button></li> </form> </section>

effect display

view

fullscreen

code

Add the class to the DOM

添加 class 到 DOM

class="fullscreen"

effect display

view

hop

code

Add the class to the DOM, if you need align right or align bottom, add attribute right or bottom or center to hop

添加 class 到 DOM，如果需要右对齐或底对齐，添加属性 right 或 bottom 或 center 到 hop

<hop> <a>link</a> <hop-cont> <a>link</a> <a>link</a> <a>link</a> </hop-cont> </hop>

effect display

view

horn

code

Add the class to the DOM, if you need align left, add attribute left to n

添加 class 到 DOM，如果需要左对齐，添加属性 left 到 n

<n></n>

effect display

view

language

To use the language plug-in, you need to create lang/ directory, create language json file in the directory, For example, English: en.json

使用语言插件，需要创建 lang/ 目录，在目录中创建语言 json 文件，例如英文：en.json

set language cookie

Add the attribute to the DOM, json is the json file name in the lang/

添加属性到 DOM，json 是 lang/ 目录中的 json 文件名

lang-set="json"

get language cookie

run javascript

运行 javascript

getCookie('lang')

language mark

Add the attribute to the DOM, lang-name is the structure in json, lang to html, lang-placeholder to placeholder, lang-value to value, lang-content to content

添加属性到 DOM，lang-name 是 json 中的结构，lang 到 html，lang-placeholder 到 placeholder，lang-value 到 value，lang-content 到 content

lang="lang-name" lang-placeholder="lang-name" lang-value="lang-name" lang-content="lang-name"

effect display

view

menu

code

Add the code to the DOM

添加代码到 DOM

<menu> <menu-cont> <li><a href="">one</a></li> <li><a>two</a> <menu-group> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-group> </li> <li><a>three</a> <menu-group> <menu-list> <h6>group</h6> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-list> <menu-list> <h6>group</h6> <a href="">one</a> <a href="">two</a> <a href="">three</a> </menu-list> </menu-group> </li> </menu-cont> </menu>

effect display

view

mix

code

Add the class to the DOM

添加 class 到 DOM

class="mix-abrazine" class="mix-hue" class="mix-multiply" class="mix-screen" class="mix-luminosity" class="mix-difference" class="mono" class="mono-click"

effect display

view

notice

code

Add the code to the DOM

添加代码到 DOM

<notice href="/"><a href=""></a></notice>

effect display

view

notify

code

Run javascript

运行 javascript

notify('notify')

If you need align bottom, add second value

如果需要底对齐，添加第二个值

notify('notify','bottom')

If you need auto close, add third value (milliseconds)

如果需要自动关闭，添加第三个值（毫秒）

notify('notify','bottom','5000')

effect display

view

page

code

Add the code to the DOM, set totalpagelimit attributes, UIGG auto-generates pagination HTML

添加代码到 DOM，设置 total/page/limit 属性，UIGG 自动生成分页 HTML

<page total="100" page="1" limit="10"></page>

If you need to listen for page changes, bind the pagechange event

如果需要监听翻页事件，绑定 pagechange 事件

document.querySelector('page').addEventListener('pagechange', (e) => { console.log(e.detail.page, e.detail.limit, e.detail.total, e.detail.pages) })

If you need to update total and jump to a page, run javascript

如果需要更新总数并跳转，运行 javascript

document.querySelector('page').jumpTo(1, 200) // jump to page 1, new total 200

effect display

view

pop

You can use the pop attribute to quickly bind buttons and pop

可以使用 pop 属性快速绑定按钮和弹窗

<a pop="name"></a> <pop pop="name"> ... </pop>

pop center code

Add the code to the DOM

添加代码到 DOM

<pop> <pop-main> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> <pop-solve> <a href="" class="btn">previous</a> <a href="" class="btn">cancel</a> <button class="btn">submit</button> <a href="" class="btn">confirm</a> </pop-solve> </pop-main> </pop>

pop choice code

Add the code to the DOM

添加代码到 DOM

<pop> <pop-choice> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> <pop-solve> <a href="" class="btn">previous</a> <a href="" class="btn">cancel</a> <button class="btn">submit</button> <a href="" class="btn">confirm</a> </pop-solve> </pop-choice> </pop>

pop sider code

Add the code to the DOM, if you need pop align right, add right attribute to pop

添加代码到 DOM，如果需要右对齐，添加 right 属性到 pop

<pop> <pop-sider> <pop-title><h3>title</h3><a class="close"></a></pop-title> <pop-cont>article</pop-cont> </pop-sider> </pop>

effect display

view

random

Warning : When the defined element is missing the default value, the remote value will be obtained automatically

警告：当定义的元素缺失默认值时，会自动获取远程值

code

Add the attribute to the DOM, When the element is img will be given src and alt ,Other elements will be given background-image

添加属性到 DOM，当元素是 img 时会给 src 和 alt，其他元素会给 background-image

uigg="img" uigg="product" uigg="bg" uigg="avatar" uigg="color"

If you need random text, add the attribute to the DOM

如果需要随机文本，添加属性到 DOM

uigg="title" uigg="txt"

If you need emot, add the attribute to the DOM

如果需要表情，添加属性到 DOM

uigg="emot"

effect display

view

rate

code

Add the code to the DOM, value is the default star

添加代码到 DOM，value 是默认星星

<rate value=""></rate>

If you need edit it, add edit attribute to the rate

如果需要编辑，添加 edit 属性到 rate

edit

If you need other styles, you can add heartthumbcircular to change the appearance of the rate

如果需要其他样式，可以添加 heart 和 thumb 和 circular 来改变 rate 的外观

heart thumb circular

effect display

view

recording

code

Add the class to the DOM

添加 class 到 DOM

class="recording"

effect display

view

reminder

code

Add the code to the DOM

添加代码到 DOM

<reminder></reminder>

effect display

view

scaler

code

Add the code to the DOM, you can add the stepminmax attribute to the input

添加代码到 DOM，可以添加 step 或 min 或 max 属性到 input

<scaler> <input value="1"> </scaler>

effect display

view

smooth

code

Add the code to the DOM

添加代码到 DOM

<a class="smooth" href="#id"></a>

effect display

view

step

code

Add the code to the DOM

添加代码到 DOM

<step> <li class="active">step 1</li> <li>step 2</li> <li>step 3</li> </step>

If you need flex vertical arrangement, add column attribute to step

如果需要垂直排列，添加 column 属性到 step

column

effect display

view

tab

code

Add the code to the DOM

添加代码到 DOM

<tab> <tab-list> <li class="active"><a>one</a></li> <li><a>two</a></li> <li><a>three</a></li> </tab-list> <tab-cont> <tab-group class="active">one</tab-group> <tab-group>two</tab-group> <tab-group>three</tab-group> </tab-cont> </tab>

effect display

view

table

code

Add the code to the DOM

添加代码到 DOM

<section class="table"> <table> <thead> <tr> <th>classify</th> <td>classify</td> <td>classify</td> <td>classify</td> </tr> </thead> <tbody> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> </tbody> <tfoot> <tr> <th>list</th> <td>content</td> <td>content</td> <td>content</td> </tr> </tfoot> </table> </section>

effect display

view

tip

code

run javascript, you can specify the color and display time

运行 javascript，可指定颜色和显示时间

tip('tip') tip('tip', 'green') tip('tip', 'red') tip('tip', 'orange') tip('tip', 'white') tip('tip', 'black', 1000)

effect display

view

title

code 1

Add the code to the DOM

添加代码到 DOM

<section class="title"> <em>~</em> <h3>title</h3> <em>~</em> </section>

code 2

Add the code to the DOM

添加代码到 DOM

<section class="title"> <h3>title</h3> <span>subtitle</span> </section>

code 3

Add the code to the DOM

添加代码到 DOM

<section class="title-flex"> <h3>title</h3> </section>

effect display

view

toggle

code

Add the code to the DOM

添加代码到 DOM

<o class="radio"></o> <o class="radio"></o> <o class="radio-done"></o> <o class="checkbox"></o> <o class="checkbox-done"></o> <o class="checkbox checkbox-all"></o> <o class="checkbox-cancel"></o> <o class="favorite"></o> <o class="star"></o> <o class="visibility"></o> <o class="password"></o> <o class="mic"></o> <o class="volume"></o> <o class="muzak"></o> <o class="phonecard"></o> <o class="cinema"></o> <o class="camera"></o> <o class="aim"></o> <o class="semaphore"></o> <o class="suitcase"></o> <o class="light"></o> <o class="devicerotate"></o> <o class="thumbtack"></o> <o class="bell"></o> <o class="place"></o> <o class="link"></o> <o class="blur"></o> <o class="toggle"></o>

If you need effective association, add the class to the DOM

如果需要有效关联，添加 class 到 DOM

class="parent"

effect display

view

top

code

Add the class to the DOM

添加 class 到 DOM

class="top"

If you need a separate button, add the class to the DOM

如果需要单独的按钮，添加 class 到 DOM

class="top btn"

effect display

view

touch

code

Run javascript, touch accepts a selector string or DOM element as first argument, direction as second, callback as third, and optional threshold (default 100px) as fourth

运行 javascript，touch 第一个参数接受选择器字符串或 DOM 元素，第二个参数为方向，第三个为回调函数，第四个参数为滑动阈值（默认 100px）

touch('#element', 'up', function(){}, 200) touch('#element', 'down', function(){}, 200) touch('#element', 'left', function(){}, 200) touch('#element', 'right', function(){}, 200) touch('#element', 'all', function(){}, 200)

When direction is all, callback receives the direction string as argument

当方向为 all 时，回调函数会收到方向字符串作为参数

touch('#element', 'all', function(dir){ console.log('swiped:', dir) // 'up' | 'down' | 'left' | 'right' })

effect display

view

name

name code

Add the code to the DOM

添加代码到 DOM

<name> <a class="ico ico-return-left return"></a> <h2>name</h2> <a href="" class="ico ico-menu"></a> </name>

left name code

Add the code to the DOM

添加代码到 DOM

<name> <a class="ico ico-return-left return"></a> <h3>name</h3> <a href="" class="ico ico-menu"></a> </name>

logo name code

Add the code to the DOM

添加代码到 DOM

<name> <a class="ico ico-return-left return"></a> <name-logo><img src="../images/ico.svg"><h1>UIGG</h1></name-logo> <a href="" class="ico ico-menu"></a> </name>

search name code

Add the code to the DOM

添加代码到 DOM

<name> <a class="ico ico-return-left return"></a> <name-search><input type="text" placeholder="Search"></name-search> <a href="" class="ico ico-menu"></a> </name>

effect display

view

nav

code

Add the code to the DOM

添加代码到 DOM

<nav> <li><a href=""><i class="ico ico-home"></i><span>home</span></a></li> <li><a href=""><i class="ico ico-app"></i><span>apps</span></a></li> <li><a href=""><i class="ico ico-shoppingcart"></i><span>shop</span></a></li> <li><a href=""><i class="ico ico-user"></i><span>user</span></a></li> </nav>

If you need the uigg style, add uigg attribute to nav and specify the background color

如果需要 uigg 风格，添加 uigg 属性到 nav 并指定背景颜色

uigg="#ccc"

effect display

view

music

code

Add the code to the DOM

添加代码到 DOM

<music> <audio src="../"></audio> </music>

If you need pause by default, add pause attribute to music

如果需要默认暂停，添加 pause 属性到 music

pause

effect display

view

admin (Preview)

admin general template

We provide a common function management interface

我们提供一个通用的功能管理界面

login admin

chat (Preview)

chat general template

We provide a common chat interface

我们提供一个通用的聊天界面

view

swiper

You can go to swiper to see more parameters. UIGG only provides a few common models

您可以去 swiper 查看更多参数。UIGG 只提供一些常见的模型

Swiper API

about loop

Warning : Amount of slides in loop mode should be at least 2x of slidesPerView value

警告：循环模式中幻灯片数量应至少为 slidesPerView 值的 2 倍

code

Add styles and javascript from the domestic CDN to the head

从国内 CDN 添加样式和 javascript 到 head

<link rel="stylesheet" href="//ui.gg/lib/swiper-bundle.min.css"> <script src="//ui.gg/lib/swiper-bundle.min.js"></script>

International CDN

国际CDN

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"> <script src="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

swiper banner code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-banner"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var swiper = new Swiper('.swiper-banner',{ spaceBetween: 10, loop: true, keyboard: {enabled: true}, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </section>

swiper list code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-list"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var swiper = new Swiper('.swiper-list',{ slidesPerView: 3, //slidesPerGroup: 3 loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 320: { slidesPerView: 1, spaceBetween: 10 }, 720: { slidesPerView: 2, spaceBetween: 15 }, 960: { slidesPerView: 3, spaceBetween: 20 }, }, }) </script> </section>

swiper vertical code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-vertical"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper('.swiper-vertical',{ direction: 'vertical', slidesPerView: 1, spaceBetween: 10, mousewheel: true, keyboard: {enabled: true}, pagination: { el: '.swiper-pagination', clickable: true, }, }) </script> </section>

swiper gallery code

Add the code to the DOM

添加代码到 DOM

<section class="swiper-gallery"> <div class="swiper gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="swiper gallery-thumb"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var galleryThumbs = new Swiper('.gallery-thumb',{ spaceBetween: 10, slidesPerView: 4, loop: true, freeMode: true, watchSlidesProgress: true, }) var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, thumbs: {swiper: galleryThumbs}, }) </script> </section>

swiper animate code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-animate"> <div class="swiper-wrapper"> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> <div class="swiper-slide"><div class="swiper-anime anime-fade-in"></div></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <script> var swiper = new Swiper('.swiper-animate',{ pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </section>

swiper lug code

Add the code to the DOM

添加代码到 DOM

<section class="swiper-lug"> <div class="lug-thumbs"> <a id="lug-1" class="active"></a> <a id="lug-2"></a> <a id="lug-3"></a> </div> <div class="swiper lug-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> var swiperLug = new Swiper('.lug-top',{}) ;[0,1,2,3,4].forEach(function(i){document.getElementById('lug-'+(i+1)).addEventListener('click',function(){swiperLug.slideToLoop(i, 1000, false)})}) </section>

swiper hash code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-hash"> <div class="swiper-wrapper"> <div data-hash="one" class="swiper-slide">one</div> <div data-hash="two" class="swiper-slide">two</div> <div data-hash="three" class="swiper-slide">three</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper(".swiper-hash",{ spaceBetween: 30, hashNavigation: {watchState: true}, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }) </script> </section>

swiper scrollbar code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-scroll"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-scrollbar"></div> <script> var swiper = new Swiper('.swiper-scroll',{ scrollbar: { el: '.swiper-scrollbar', hide: true, }, }) </script> </section>

swiper coverflow code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-coverflow"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination"></div> <script> var swiper = new Swiper('.swiper-coverflow',{ effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: {el: '.swiper-pagination'}, }) </script> </section>

swiper parallax code

Add the code to the DOM

添加代码到 DOM

<section class="swiper swiper-parallax"> <div class="parallax-bg" style="background-image: url()" data-swiper-parallax="-23%"></div> <div class="swiper-wrapper"> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> <div class="swiper-slide"> <h3 data-swiper-parallax="-300"><span data-swiper-parallax="100"></span></h3> </div> </div> <script> var swiper = new Swiper('.swiper-parallax',{ speed: 600, parallax: true, }) </script> </section>

effect display

view

editor

You can go to tiny to see more parameters. UIGG only provides a few common models

你可以去 tiny 看看更多参数，UIGG 只提供一些常用的模型

tiny API

code

Add javascript from domestic CDN to head

从国内 CDN 添加 javascript 到 head

<script src="//ui.gg/lib/editor/editor.js"></script>

International CDN

国际CDN

<script src="//cdn.jsdelivr.net/npm/uigg/editor/editor.min.js"></script>

Select different editors according to requirements,Add the class to the DOM

根据需求选择不同的编辑器，添加 class 到 DOM

class="editor" class="editor-simple" class="editor-upload" class="editor-all"

effect display

view

function

global function reference

Global function provided by UIGG

UIGG 库提供的全局函数

class

custom element and init function reference

Custom element class and initialization functions exported by UIGG

UIGG 导出的自定义元素类和初始化函数

attribute

independent attribute

Common available attributes in UIGG

UIGG 中通用的可用属性

label

label quick reference

UIGG exclusive label definition

UIGG 独有标签定义

color

CSS functions

UIGG preset some common color functions

UIGG 预置一些常用的颜色函数

ico

UIGG iconfont

UIGG iconfont is a library free licensed font families and api for conveniently using the fonts via iconfont, img, unicode, symbol and css. We also provide delightful, beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web.

UIGG 图标字体是一个免费许可的字体家族和 api，通过 iconfont、img、unicode、symbol 和 css 方便地使用字体，我们还提供精美的图标，用于常见的操作和项目。在你的数字产品中使用它们，用于 Android、iOS 和 web。

view download

lib

emot

Library related connections from domestic CDN, from 1.svg to 100.svg

国内 CDN 库相关连接，从 1.svg 到 100.svg

//ui.gg/lib/emot/1.svg

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/emot/1.svg

font

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/font/font.css //ui.gg/lib/font/aclonica.css //ui.gg/lib/font/aller.css ...

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/font/font.min.css //cdn.jsdelivr.net/npm/uigg/font/aclonica.min.css //cdn.jsdelivr.net/npm/uigg/font/aller.min.css ...

ico

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/ico/ico.css //ui.gg/lib/ico/ico.js //ui.gg/lib/ico/ico.json //ui.gg/lib/ico/ico.woff2

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/ico/ico.min.css //cdn.jsdelivr.net/npm/uigg/ico/ico.min.js //cdn.jsdelivr.net/npm/uigg/ico/ico.json //cdn.jsdelivr.net/npm/uigg/ico/ico.woff2

Library related connections, category name and icon name, for example:

库相关连接，分类名称和图标名称，例如：

//ui.gg/lib/ico/svg/brand/uigg.svg

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/ico/svg/brand/uigg.svg

editor

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/editor/editor.js

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/editor/editor.min.js

jquery

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/jquery.min.js

International CDN

国际CDN

//cdn.jsdelivr.net/npm/jquery

animejs

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/anime.min.js

International CDN

国际CDN

//cdn.jsdelivr.net/npm/animejs

swiper

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/swiper-bundle.min.css //ui.gg/lib/swiper-bundle.min.js

International CDN

国际CDN

//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css //cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js

media

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/media/aeolian.mp3 //ui.gg/lib/media/audio.mp3 //ui.gg/lib/media/bounce.mp3 //ui.gg/lib/media/boxing.mp3 //ui.gg/lib/media/brilliant.mp3 //ui.gg/lib/media/button.mp3 //ui.gg/lib/media/ding.mp3 //ui.gg/lib/media/drip.mp3 //ui.gg/lib/media/drum.mp3 //ui.gg/lib/media/dulcimer.mp3 //ui.gg/lib/media/error.mp3 //ui.gg/lib/media/notify.mp3 //ui.gg/lib/media/right.mp3 //ui.gg/lib/media/wave.mp3 //ui.gg/lib/media/video.mp4 //ui.gg/lib/media/loop.mp4

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/media/aeolian.mp3 //cdn.jsdelivr.net/npm/uigg/media/audio.mp3 //cdn.jsdelivr.net/npm/uigg/media/bounce.mp3 //cdn.jsdelivr.net/npm/uigg/media/boxing.mp3 //cdn.jsdelivr.net/npm/uigg/media/brilliant.mp3 //cdn.jsdelivr.net/npm/uigg/media/button.mp3 //cdn.jsdelivr.net/npm/uigg/media/ding.mp3 //cdn.jsdelivr.net/npm/uigg/media/drip.mp3 //cdn.jsdelivr.net/npm/uigg/media/drum.mp3 //cdn.jsdelivr.net/npm/uigg/media/dulcimer.mp3 //cdn.jsdelivr.net/npm/uigg/media/error.mp3 //cdn.jsdelivr.net/npm/uigg/media/notify.mp3 //cdn.jsdelivr.net/npm/uigg/media/right.mp3 //cdn.jsdelivr.net/npm/uigg/media/wave.mp3 //cdn.jsdelivr.net/npm/uigg/media/video.mp4 //cdn.jsdelivr.net/npm/uigg/media/loop.mp4

images

Library related connections from domestic CDN

国内 CDN 库相关连接

//ui.gg/lib/images/avatar/ //ui.gg/lib/images/bg/ //ui.gg/lib/images/color/ //ui.gg/lib/images/img/ //ui.gg/lib/images/product/