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'

quote

You also refer to files directly from the web

你也可以直接从网页引用文件

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

CDN

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

unpkg

You can use unpkg

你可以使用 unpkg

https://unpkg.com/uigg

responsive rule

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, add the javascript to the DOM

如果需要强制移动模式，添加 javascript 到 DOM

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

如果需要警告，运行 alert()

alert('alert')

If you need confirm, run confirm()

如果需要确认，运行 confirm()

confirm('confirm')

If you need prompt, run prompt()

如果需要键入，运行 prompt()

prompt('prompt')

effect display

view

alone

code

alone splits text into individual characters for animating each one separately, add the javascript to the DOM

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

alone = $('element')

If you need manipulating character objects, must choose Z in $(document).ready()

如果需要操作字符对象，必须选择 Z 在 $(document).ready()中

$(function(){ $('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, add the javascript to the DOM

保存 cookies，添加 javascript 到 DOM

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

Get cookies, add the javascript to the DOM

获取 cookies，添加 javascript 到 DOM

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>

Add the javascript to the DOM

添加 javascript 到 DOM

countDate = '0000/00/00 00:00:00' countdown()

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, add the function to the DOM

如果需要防止用户查看你的代码，添加函数到 DOM

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 the show attribute to the 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-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: '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'

Webfont is an independent element, you can introduce it directly into your styles

Web字体是独立的元素，你可以直接引入到你的样式中

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

CDN

@import url('//cdn.jsdelivr.net/npm/uigg/font/font.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 horn

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

<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

Add the javascript to the DOM

添加 javascript 到 DOM

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

运行 notify()

notify('notify')

If you need align bottom, add second value

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

notify('notify','bottom')

If you need auto close, add third value

如果需要自动关闭，添加第三个值

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

effect display

view

page

code

Add the code to the DOM

添加代码到 DOM

<page> <a class="ico ico-alone-side-left"></a> <a class="ico ico-alone-left"></a> <a href="">1</a> <a href="">2</a> <a class="active">3</a> <a href="">4</a> <a href="">5</a> <a class="ico ico-alone-right"></a> <a class="ico ico-alone-side-right"></a> <span>1/10</span> <input type="text"> <a class="ico ico-arrow-enter"></a> </page>

effect display

view

pop

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

可以使用 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 the edit attribute to the rate

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

edit

If you need other styles, you can add heart and thumb and circular 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 step or min or max 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 the column attribute to the 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

Add the javascript to the DOM

添加 javascript 到 DOM

tip('tip') tip('tip', 'ok') // green tip('tip', 'error') // red tip('tip', 'warning') // orange tip('tip', 'info') // color

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

Add the javascript to the DOM

添加 javascript 到 DOM

$('').touch('up',function(){}) $('').touch('down',function(){}) $('').touch('left',function(){}) $('').touch('right',function(){}) $('').touch('all',function(){})

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 the uigg attribute to the nav and specify the background color uigg="#ccc"

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

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 the pause attribute to the 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 the style and javascript to the head

添加样式和 javascript 到 head

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

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> <script> var swiperLug = new Swiper('.lug-top',{ //effect : 'fade', }) $('#lug-1').click(function(){swiperLug.slideToLoop(0, 1000, false)}) $('#lug-2').click(function(){swiperLug.slideToLoop(1, 1000, false)}) $('#lug-3').click(function(){swiperLug.slideToLoop(2, 1000, false)}) lug() </script> </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 the javascript to the head

添加 javascript 到 head

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

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"

PHP upload

If you need upload image, you must download upload.zip to your website directory and configure php

如果需要上传图片，你必须下载 upload.zip 到你的网站目录，并配置 php

download

effect display

view

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

attribute

independent attribute

Common available attributes in UIGG

UIGG 中通用的可用属性

label

label quick reference

UIGG exclusive label definition

UIGG 独有标签定义

lib

emot

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

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

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

CDN

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

font

Library related connections

库相关连接

//ui.gg/lib/font/font.css

CDN

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

ico

Library related connections

库相关连接

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

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

CDN

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

editor

Library related connections

库相关连接

//ui.gg/lib/editor/editor.js //ui.gg/lib/editor/upload.zip

CDN

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

jquery

Library related connections

库相关连接

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

CDN

//cdn.jsdelivr.net/npm/jquery

animejs

Library related connections

库相关连接

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

CDN

//cdn.jsdelivr.net/npm/animejs

swiper

Library related connections

库相关连接

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

CDN

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

media

Library related connections

库相关连接

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

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

库相关连接

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