get UIGG

download zip

You can download UIGG from the official website

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.com/mixice/uigg.git gitHub

get npm

You can get UIGG from npm

npm i uigg

Add style module

import 'uigg/uigg.css'

Add javascript module

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>

responsive rule

PC rule

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

class="main"

mobile rule

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

class="mobile"

unit conversion

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

layout preset

basic

Add the class to the 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="transition"

absolute

Add the class to the DOM

class="absolute" class="absolute-center" class="absolute-left" class="absolute-left-center" class="absolute-right" class="absolute-right-center" class="absolute-top" class="absolute-top-left" class="absolute-top-right" class="absolute-top-center" class="absolute-bottom" class="absolute-bottom-left" class="absolute-bottom-right" class="absolute-bottom-center" class="fixed" class="fixed-center" class="fixed-left" class="fixed-left-center" class="fixed-right" class="fixed-right-center" class="fixed-top" class="fixed-top-left" class="fixed-top-right" class="fixed-top-center" class="fixed-bottom" class="fixed-bottom-left" class="fixed-bottom-right" class="fixed-bottom-center"

load

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

<load></load>

corner

Add the class to the DOM

class="corner"

Styles demo

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

shadow

Add the class to the DOM

class="shadow"

Styles demo

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

adrift

Add the class to the DOM

class="adrift"

Styles demo

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

return

Add the class to the DOM

class="return"

alert

code

Add the javascript to the DOM

alert('alert')

If you need confirm, run confirm()

confirm('confirm')

effect display

view

alone

code

Add the javascript to the DOM

alone = $('element')

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

$(function(){ $('element z') })

effect display

view

anime

code

Add the class to the 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="infinite" class="alternate" class="reverse"

effect display

view

button

code

Add the class to the DOM

class="btn"

Empty button

class="btn btn-empty"

Color button, please refer to color

class="btn bg-red"

Color empty button, please refer to 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

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

effect display

view

clue

code

Add the attribute to the DOM

title=""

effect display

view

cookie

code

Save cookies, add the javascript to the DOM

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

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

code

Add the attribute to the 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 class to the button

class="copy-select"

effect display

view

countdown

code

Add the code to the DOM

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

Add the javascript to the DOM

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

effect display

view

crumb

code

Add the code to the 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

disable() view

drop

code

Add the code to the 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

effect display

view

empty

code

Add the code to the DOM

<empty></empty>

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

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

If vertical arrangement is required, add DOM around the content

<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

<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

show

effect display

view

font

web font

Add the class to the 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

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

@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="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

<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

<section class="form"> <form> <li><span>account</span> <input class="med" type="text" required> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>password</span> <div class="input sml"><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> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> <o class="radio"></o><span>radio</span> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>checkbox</span> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox"></o><span>checkbox</span> <o class="checkbox checkbox-all"></o><span>checkbox all</span> <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="med" max="100" value="50"></progress> </li> <li><span>range</span> <input class="sml" type="range" min="0" max="100" step="0" value="50"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>file</span> <input class="med" 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="sml" type="date"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>datetime</span> <input class="sml" type="datetime-local"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>month</span> <input class="sml" type="month"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>week</span> <input class="sml" type="week"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>time</span> <input class="min" type="time"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <div class="select sml"><select><option selected disabled>select</option><option>select</option></select></div> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="min" type="text"> <a class="code"><img uigg="color"></a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>code</span> <input class="min" type="text"> <a class="btn code">get code</a> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>message</span> <textarea class="big"></textarea> </li> <li><span>images</span> <div class="upload max"> <div class="ico upload-group"><input type="file"><horn class="ico"></horn></div> <div class="ico upload-add"></div> </div> </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="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

<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

<horn></horn>

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

set language cookie

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

lang-set="json"

get language cookie

Add the javascript to the 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

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

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

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

effect display

view

notify

code

Run 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

<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" href="">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 center code

Add the code to the 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

<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

<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 ,Other elements will be given background-image

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

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

uigg="title" uigg="txt"

If you need emot, add the attribute to the DOM

uigg="emot"

effect display

view

rate

code

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

<rate value=""></rate>

If you need edit it, add the edit attribute to the 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

effect display

view

recording

code

Add the class to the DOM

class="recording"

effect display

view

reminder

code

Add the code to the 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

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

effect display

view

smooth

code

Add the code to the DOM

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

effect display

view

step

code

Add the code to the DOM

<step> <ul> <li>step 1</li> <li>step 2</li> <li>step 3</li> </ul> </step>

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

column

effect display

view

tab

code

Add the code to the 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

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

tip('tip')

effect display

view

title

code 1

Add the code to the DOM

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

code 2

Add the code to the DOM

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

code 3

Add the code to the DOM

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

effect display

view

toggle

code

Add the code to the 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="telecamera"></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>

effect display

view

top

code

Add the class to the DOM

class="top"

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

class="top btn"

effect display

view

name

name code

Add the code to the 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

<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

<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

<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

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

effect display

view

muzak

code

Add the code to the DOM

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

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

pause

effect display

view

touch

Warning: Touch is only available on the mobile terminal

code

Add the code to the DOM

class="touch-left" class="touch-right" class="touch-up" class="touch-down" class="touch-all" <script> $('.touch-up').bindmove('touchup','event') $('.touch-down').bindmove('touchdown','event') $('.touch-left').bindmove('touchleft','event') $('.touch-right').bindmove('touchright','event') $('.touch-all').bindmove('touchall','event') </script>

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 function management interface

view

swiper

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

Swiper API

about loop

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

code

Add the style and javascript to the 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

<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, centeredSlides: true, 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

<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

<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

<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

<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

<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

<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

<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

<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

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

code

Add the javascript to the 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="editor" class="editor-simple" class="editor-upload" class="editor-all"

uigg upload

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

download

effect display

view

color

CSS functions

UIGG preset some common color functions

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

view

attribute

independent attribute

Common available attributes in UIGG

label

label quick reference

UIGG exclusive label definition

lib

emot

Library related connections, from 1.svg to 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 //ui.gg/lib/ico/ico.zip

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/

qrcode

Library related connections

//ui.gg/lib/qr/mixice.com.svg //ui.gg/lib/qr/mssay.com.svg //ui.gg/lib/qr/ui.gg.svg //ui.gg/lib/qr/wechat.svg //ui.gg/lib/qr/wechat-mssay.svg