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 { $, $$, Menu } from 'uigg'

quote

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

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

//ui.gg/lib/uigg.css //ui.gg/lib/uigg.js

International CDN

国际CDN

//cdn.jsdelivr.net/npm/uigg/uigg.min.css //cdn.jsdelivr.net/npm/uigg

unpkg

You can also use unpkg

你还可以使用 unpkg 包

//unpkg.com/uigg/uigg.css //unpkg.com/uigg

You can also use esm CDN

你还可以使用解构 CDN

//esm.sh/uigg/uigg.css //esm.sh/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-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" class="wide"

load

If you need to wait for the page to be displayed after loading, write load to the body

如果需要等待页面加载后显示，将 load 写到body下

<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 a free projection without subject restriction is needed, 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('element')

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="name" copy-btn="name"

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

effect display

view

drag

code

The li in the container with the drag attribute can be dragged and sorted, add the code to the DOM

拥有 drag 属性的容器中的 li 可以拖拽排序，添加代码到 DOM

<ul drag> <li></li> <li></li> <li></li> </ul>

Give the drag attribute a class to limit only elements with that class can be dragged

给 drag 属性增加 class 指定，可以限定仅包含该 class 的元素可以拖拽

<ol drag=".handle"> <li><span class="handle">⠿</span></li> <li><span class="handle">⠿</span></li> <li><span class="handle">⠿</span></li> </ol>

重新排序后，可以抛出 sort 事件，以获取新的列表顺序

Uigg.$('[drag]').addEventListener('sort', e => { [...e.target.children].forEach((li, i) => { console.log(i, li.textContent) }) })

effect display

view

drop

code

Add the code to the DOM

添加代码到 DOM

<drop> <drop-list> <ul> <li><a></a></li> <li><a></a></li> <li><a></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

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

<form class="form filter"> <item><alia>keyword</alia><cont><input type="text" name="keyword"></cont></item> <item><alia>time</alia><cont><input type="date" name="time"></cont></item> <item><alia>select</alia> <cont> <div class="select"> <select name="select"> <option selected disabled>select</option> <option>select</option> </select> </div> </cont> </item> <item><cont><a class="btn">search</a></cont></item> </form>

form

Add the code to the DOM

添加代码到 DOM

<form class="form"> <item><alia>account</alia> <cont><input class="wide-20" type="text" name="account" required></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>password</alia> <cont><div class="input wide-20"><input type="password" name="password" required><o class="password"></o></div></cont> <hint>Password error</hint> </item> <item><alia>scaler</alia> <cont><scaler><input step="1" min="0" max="100" value="1" name="scaler"></scaler></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>radio</alia> <cont> <div class="parent" name="radio"> <o class="radio" data="radio1"></o><span>radio</span> <o class="radio" data="radio2"></o><span>radio</span> <o class="radio" data="radio3"></o><span>radio</span> </div> </cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>checkbox</alia> <cont> <div class="parent" name="checkbox"> <o class="checkbox" data="checkbox1"></o><span>checkbox</span> <o class="checkbox" data="checkbox2"></o><span>checkbox</span> <o class="checkbox checkbox-all" data="checkboxall"></o><span>checkbox all</span> </div> </cont> </item> <item><alia>toggle</alia> <cont><o class="toggle" name="toggle"></o></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>progress</alia> <cont><progress class="wide-20" max="100" value="50"></progress></cont> </item> <item><alia>range</alia> <cont><input class="wide-20" type="range" min="0" max="100" step="0" value="50" name="range"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>file</alia> <cont><input class="wide-30" type="file" name="file"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>color</alia> <cont><input type="color" name="color"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>date</alia> <cont><input class="wide-20" type="date" name="date"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>datetime</alia> <cont><input class="wide-20" type="datetime-local" name="datetime"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>month</alia> <cont><input class="wide-20" type="month" name="month"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>week</alia> <cont><input class="wide-20" type="week" name="week"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>time</alia> <cont><input class="wide-20" type="time" name="time"></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>select</alia> <cont><div class="select wide-20"><select name="select"><option selected disabled>select</option><option>select</option></select></div></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>choice</alia> <cont> <choice class="wide-20" name="choice"> <a>choice</a> <choice-list> <a>choice</a> <a>choice</a> </choice-list> </choice> </cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>robot</alia> <cont> <input class="wide-10" type="text" name="robot"> <a class="code" uigg="color"><img uigg="color"></a> </cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>code</alia> <cont> <input class="wide-10" type="text" name="code"> <a class="btn code">get code</a> </cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia>message</alia> <cont><textarea class="wide" name="message"></textarea></cont> </item> <item><alia>editor</alia> <cont><div class="editor-simple" name="editor"></div></cont> </item> <item><alia>images</alia> <cont><images name="images"></images></cont> <hint>Lorem ipsum dolor sit amet</hint> </item> <item><alia></alia> <cont> <o class="checkbox" name="agreement"></o><span>I've read and agreed</span><a>"User agreement"</a> </cont> </item> <item><alia></alia> <cont> <a class="btn" id="get">get</a> <a class="btn" id="set">set</a> <a class="btn" reset>reset</a> <a class="btn" submit>submit</a> </cont> </item> </form>

Adding auto to the form can enable automatic processing of the form. Adding the reset attribute to the button can reset the form, and adding the submit attribute to the button can validate and submit the form

在 form 上添加 auto 可以对表单自动化处理，按钮添加 reset 属性可以重置表单，按钮添加 submit 属性可以验证并提交表单

<form auto> <a reset></a> <a submit></a> </form>

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

form.getData() // get value form.setData({name: value}) // set value

To validate form data

如果你需要验证表单数据

form.validate()

Clicking the button containing the submit attribute will trigger validation and submission

点击包含 submit 属性的按钮会触发验证并提交

form.onSubmit = async (data) => { await fetch('', {method:'POST', body: JSON.stringify(data)}) }

You can also automatically verify and submit

你也可以自动验证并提交

form.submit(async (data) => { await fetch('/api/save', {method:'POST', body: JSON.stringify(data)}) })

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></a> <hop-cont> <a></a> <a></a> <a></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

images

code

Add the class to the DOM, support single or multiple image uploads in common formats

添加 class 到 DOM，支持单张或多张常用格式图片上传

<images></images> // single image <images multiple></images> // multiple images

You can use the accept attribute to limit the image format

你可以使用 accept 属性来限定图片格式

accept="png"

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

images.getData() // get value images.setData() // set value

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, langname is the json file name in the lang/, when it is clicked, it will set the language cookie

添加属性到 DOM，langname 是 lang/ 目录中的 json 文件名，当它被点击时，会设置语言 cookie

lang-set="langname"

The default language of the language plug-in is en, if you need other default languages, you can also set them manually in javascript

语言插件的默认语言是en，如需要其他默认语言，你也可以在javascript中手动设置

setCookie('lang','zh','30')

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"

You can also use in javascript

你也可以在 javascript 中使用

lang('lang-name')

effect display

view

menu

code

Add the code to the DOM

添加代码到 DOM

<menu> <menu-cont> <li><a href=""></a></li> <li><a></a> <menu-group> <a href=""></a> <a href=""></a> <a href=""></a> </menu-group> </li> <li><a></a> <menu-group> <menu-list> <h6></h6> <a href=""></a> <a href=""></a> <a href=""></a> </menu-list> <menu-list> <h6></h6> <a href=""></a> <a href=""></a> <a href=""></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-multiply" class="mix-screen" 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 totalpagelimitparam attributes, UIGG auto-generates pagination HTML, when the page changes, the URL parameter is automatically updated and redirected

添加代码到 DOM，设置 total/page/limit/param 属性，UIGG 自动生成分页 HTML，翻页时自动更新 URL 参数并跳转

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

If param is empty or omitted, bind the pagechange event to handle manually

param 为空或未设置时，绑定 pagechange 事件手动处理

Uigg.$('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

Uigg.$('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

progress

code

Add the class to the DOM

添加 class 到 DOM

<progress value="75" max="100"></progress>

If you need circle progress, add the circle attribute to the DOM

如果需要圆形进度条，添加 circle 属性到 DOM

circle

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

progress.getData() // get value progress.setData() // set value

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, default star appearance

添加代码到 DOM，默认星星外观

<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

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

rate.getData() // get value rate.setData() // set value

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>

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

scaler.getData() // get value scaler.setData() // set value

effect display

view

smooth

code

Add the code to the DOM

添加代码到 DOM

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

effect display

view

state

code

Add the code to the DOM, where empty, error, done have default values

添加代码到 DOM，其中 empty，error，done 有默认值

<load></load> <empty></empty> <error></error> <done></done>

Use state to create a state tag

使用 state 可以给标签创建状态

state('el', 'load') state('el', 'empty') state('el', 'error') state('el', 'done')

You can also pass content to write into the current state tag

也可以传入内容写入当前状态标签

state('el', 'error', 'failed')

effect display

view

step

code

Add the code to the DOM

添加代码到 DOM

<step> <li class="active"></li> <li></li> <li></li> </step>

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

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

column

effect display

view

swiper

code

Add the code to the DOM

添加代码到 DOM

<swiper> <swiper-wrapper> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> </swiper-wrapper> <swiper-arrow></swiper-arrow> <swiper-dot></swiper-dot> </swiper>

If you need loop, add the loop attribute to swiper

如果你需要循环，在 swiper 上添加 loop 属性

loop

If you need auto play, add the autoplay attribute and value to swiper

如果你需要自动播放，在 swiper 上添加 autoplay 属性和值

autoplay="3"

If you need display multiple, add the view attribute and value to swiper, you can set single or responsive multi-resolution display

如果你需要显示多张，在 swiper 上添加 view 属性和值，可以设置单个或响应式多分辨率显示

view="4" //single setting view="320:2,640:4,960:6" //responsive multi-resolution settings

If you need vertical direction, add the vertical attribute to swiper

如果你需要垂直方向，在 swiper 上添加 vertical 属性

vertical

If you need to fade in and fade out, you can add the fade attribute, but note that fade cannot be used with view multiple

如果需要淡入淡出，你可以添加 fade 属性，但需要注意 fade 下无法使用 view 多张

fade

If you need thumbnail, you need to create two groups of swiper and add gallery and thumb attributes to each group. If there are multiple thumbnails on the same page, you also need to give the same value to the gallery and thumb attributes of the same group to bind them together

如果你需要缩略图，需要创建两组 swiper 并分别添加 gallery 和 thumb 属性。如果同一个页面有多个缩略图，还需要给同组的 gallery 和 thumb 指定相同的值来绑定关系

<swiper gallery> <swiper-wrapper> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> </swiper-wrapper> <swiper-arrow></swiper-arrow> </swiper> <swiper thumb view="3"> <swiper-wrapper> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> </swiper-wrapper> </swiper>

If you need anchor jump, add the hash attribute to swiper-slide and jump through id

如果你需要锚点跳转，在 swiper-slide 上添加 hash 属性值，并通过 id 跳转

<a href="#a" class="btn">1</a> <a href="#b" class="btn">2</a> <a href="#c" class="btn">3</a> <swiper> <swiper-wrapper> <swiper-slide hash="a"></swiper-slide> <swiper-slide hash="b"></swiper-slide> <swiper-slide hash="c"></swiper-slide> </swiper-wrapper> <swiper-arrow></swiper-arrow> <swiper-dot></swiper-dot> </swiper>

If you don't need the entire group of arrows (left and right), you can delete swiper-arrow and replace it with a single DOM

如果你不需要整组箭头（左右）你可以删掉 swiper-arrow 改用单独的标签

<swiper-prev></swiper-prev> <swiper-next></swiper-next>

You can directly add href and target attributes to swiper-slide

你可以直接在 swiper-slide 上添加 href 和 target 属性

<swiper-slide href="" target="_blank"></swiper-slide>

If swiper is interfering with your interaction component, you can add the ignore attribute to your component to filter

如果 swiper 干扰了你的交互组件，你可以给你的组件添加 ignore 属性过滤

ignore

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></th><td></td></tr> </thead> <tbody> <tr><th></th><td></td></tr> <tr><th></th><td></td></tr> </tbody> <tfoot> <tr><th></th><td></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></h3> <em></em> </section>

code 2

Add the code to the DOM

添加代码到 DOM

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

code 3

Add the code to the DOM

添加代码到 DOM

<section class="title-flex"> <h3></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="thumb-up"></o> <o class="thumb-down"></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, Radio elements in the same parent are mutually exclusive

如果需要有效关联，添加 class 到 DOM，同一 parent 内的 radio 自动互斥

class="parent"

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

o.getData() // true | false o.setData(true) // set value true

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

code

Add the code to the DOM

添加代码到 DOM

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

left

Add the code to the DOM

添加代码到 DOM

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

logo

Add the code to the DOM

添加代码到 DOM

<name> <a class="ico ico-return-left return"></a> <name-logo><img><h1></h1></name-logo> <a href="" class="ico ico-menu"></a> </name>

search

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></span></a></li> <li><a href=""><i class="ico ico-app"></i><span></span></a></li> <li><a href=""><i class="ico ico-diamond"></i><span></span></a></li> <li><a href=""><i class="ico ico-user"></i><span></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></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

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 China CDN to head

从中国 CDN 添加 javascript 到 head

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

International CDN

国际CDN

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

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

根据需求选择不同的编辑器，添加 class 到 DOM，图片上传需要在 upload 属性中指定上传接口

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

You can quickly get and set values through internal methods

你可以通过内部方法快速获取和设置值

editor.getData() // get value editor.setData('<p>Hello World</p>') // set value

effect display

view

selector

$

Shortcut for querySelector, returns the first matching element, equivalent to document.querySelector()

querySelector 快捷方式，返回第一个匹配元素，等价于 document.querySelector()

Uigg.$('.btn') Uigg.$('section', parent) // scoped to parent

$$

Shortcut for querySelectorAll, returns a real Array, unlike querySelectorAll which returns a NodeList, so you can directly use array methods like mapfilterreduce

querySelectorAll 快捷方式，返回真数组，区别于 querySelectorAll 返回的 NodeList，可直接使用 map/filter/reduce 等数组方法

Uigg.$$('a') // real Array, can use map/filter/reduce Uigg.$$('.item', parent) // scoped to parent

Both methods accept a context parameter to scope the query

两个方法都支持传入父容器限定查询范围

const box = Uigg.$('.box') Uigg.$('a', box) // find a inside .box Uigg.$$('li', box) // find all li inside .box

ready

DOM ready shortcut, fires callback when DOM is fully parsed, or immediately if already ready

DOM 就绪快捷方式，DOM 解析完成后执行回调，若已就绪则立即执行

ready(() => { Uigg.$('.btn').addEventListener('click', ...) })

function

global function reference

Global function provided by UIGG

UIGG 库提供的全局函数

init function reference

initialization functions provided by UIGG

UIGG 库提供的初始化函数

class

custom element

Custom element class 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 free licensed font family and api, through iconfont, img, unicode, symbol and css easily use the font 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 China 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

China 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

China 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

China CDN

中国 CDN

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

International CDN

国际CDN

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

jquery

International CDN

国际CDN

//cdn.jsdelivr.net/npm/jquery

animejs

China CDN

中国 CDN

//esm.sh/animejs

International CDN

国际CDN

//cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js

gsap

Esm CDN

解包 CDN

//esm.sh/gsap

International CDN

国际CDN

//cdn.jsdelivr.net/npm/gsap

swiper

Esm CDN

解包 CDN

//esm.sh/swiper/swiper-bundle.min.css //esm.sh/swiper

International CDN

国际CDN

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

media

China 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

images

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