• using uigg
  • preset function
  • mobile terminal
  • internal
  • external
  • general library
  • Using uigg

    get uigg

    download zip

    You can download uigg from the official website

    uigg download
    get gitHub

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

    https://github.com/mixice/uigg.git gitHub
    get npm

    You can get uigg from npm

    npm install uigg
    download design template

    We have prepared the design specification of rapid prototyping for designers

    Adobe XD
    quote

    You also refer to files directly from the web

    <link rel="stylesheet" href="https://ui.gg/uigg/styles/uigg.css"> <script src="https://ui.gg/uigg/js/uigg.js"></script>
    CDN

    You can use third-party network acceleration

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mixice/uigg/styles/uigg.min.css"> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/uigg.min.js"></script>
    plugin

    Load the following plug-ins on demand jquery is must

    <link rel="stylesheet" href="https://ui.gg/uigg/styles/swiper-bundle.min.css"> <script src="https://ui.gg/uigg/js/jquery.min.js"></script> <script src="https://ui.gg/uigg/js/less.min.js"></script> <script src="https://ui.gg/uigg/js/anime.min.js"></script> <script src="https://ui.gg/uigg/js/swiper-bundle.min.js"></script>
    plugin CDN

    You can use third-party network acceleration

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mixice/uigg/styles/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/less.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/anime.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/mixice/uigg/js/swiper-bundle.min.js"></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 preset

    Add the class to the DOM

    class="block" class="clear" class="hide" class="show" class="center" class="float-left" class="float-right" class="flex" class="flex-column" class="full" class="full-device"
    absolute preset

    Add the class to the DOM

    class="absolute" class="absolute-left" class="absolute-right" class="absolute-top" class="absolute-bottom" class="absolute-top-left" class="absolute-top-right" class="absolute-bottom-left" class="absolute-bottom-right" class="fixed" class="fixed-left" class="fixed-right" class="fixed-top" class="fixed-bottom" class="fixed-top-left" class="fixed-top-right" class="fixed-bottom-left" class="fixed-bottom-right"
    special preset

    Add the code to the DOM

    <corner></corner> <shadow></shadow>

    Preset function

    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

    anew

    code

    Add the class to the DOM

    class="anew"

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

    class="anew btn"
    effect display
    view

    anime

    code

    Add the class to the DOM

    class="anime-pulse" class="anime-rotate" 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-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"
    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

    class="btn btn-disable"

    Button ico

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

    Button flex group

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

    copy

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

    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> <li><h5></h5></li> <aside></aside> </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-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"

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

    @import url('https://ui.gg/lib/font/font.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

    code

    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>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>time</span> <input class="sml" type="date"> <input class="sml" type="datetime-local"> <input class="min" type="time"> <input class="sml" type="week"> <input class="sml" type="month"> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>select</span> <select class="sml"><option selected disabled>select</option><option>select</option></select> <select class="sml"><option selected disabled>select</option><option>select</option></select> <cite>Lorem ipsum dolor sit amet</cite> </li> <li><span>robot</span> <input class="min" type="text"> <a class="code"><img src="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"><x class="ico"></x></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">cancel</button><button class="btn">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

    <hop> <a>link</a> <hop-cont> <a>link</a> <a>link</a> <a>link</a> </hop-cont> </hop>
    effect display
    view

    load

    code

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

    <load></load>

    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

    notify

    code

    Use notifyVal to define what you want to notify, run notify()

    notifyVal = 'notify'; notify();
    effect display
    view

    page

    code

    Add the code to the DOM, if you just want a simple, add the min attribute

    <page value="3" max="9"></page>
    effect display
    view

    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

    <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

    code

    Put the tags below into src and background , and you'll get random images

    uigg-img uigg-product uigg-bg uigg-avatar uigg-color

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

    <uigg-title></uigg-title> <uigg-txt></uigg-txt> <uigg-emot></uigg-emot>

    If you need emot, add the code to the DOM

    <uigg-emot></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
    effect display
    view

    return

    code

    Add the class to the DOM

    class="return"

    scaler

    code

    Add the code to the DOM

    <scaler> <input type="text" value="1"> </scaler>
    effect display
    view

    smooth

    code

    Add the code to the DOM

    <a class="smooth" href="#id"></a>
    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

    Use tipVal to define what you want to tip, run tip()

    tipVal = '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-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="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="toggle"></o>
    effect display
    view

    Mobile terminal

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

    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

    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

    Internal components

    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

    External components

    swiper

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

    Swiper API
    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> <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, loopFillGroupWithBlank: 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> <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> </div> <script> var galleryThumbs = new Swiper('.gallery-thumb', { spaceBetween: 10, slidesPerView: 4, freeMode: true, loop: true, loopedSlides: 5, //looped slides should be the same watchSlidesVisibility: true, watchSlidesProgress: true, }); var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, loop:true, loopedSlides: 5, //looped slides should be the same navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, thumbs: { swiper: galleryThumbs, }, }); </script> </section>
    swiper relative code

    Add the code to the DOM

    <section class="swiper-relative"> <div class="swiper relative-top"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <div class="swiper relative-thumb"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script> var relativeTop = new Swiper('.relative-top',{ loop: true, loopedSlides: 5, }); var relativeThumb = new Swiper('.relative-thumb',{ spaceBetween: 10, slidesPerView : 5, centeredSlides : true, loop: true, loopedSlides: 5, slideToClickedSlide: true, controller: { control: relativeTop, }, }); </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 center">one</div> <div data-hash="two" class="swiper-slide center">two</div> <div data-hash="three" class="swiper-slide center">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

    General library

    color

    CSS functions

    Uigg preset some common color functions

    view

    ico

    uigg iconfont

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

    label

    label quick reference

    Uigg exclusive label definition

    labeldefinition
    <u></u>second tag, inheriting the underline of HTML
    <s></s>third tag, inheriting the underline of HTML, seconds in time component
    <i></i>icon definition
    <x></x>close button and close layer
    <z></z>lonely element
    <o></o>global toggle element
    <m></m>minute in time component
    <d></d>day in time component
    <h></h>hour in time component
    <cite></cite>prompt text

    lib

    font

    Library related connections

    https://ui.gg/lib/font/font.css
    iconfont

    Library related connections

    https://ui.gg/lib/ico/iconfont/ico.css https://ui.gg/lib/ico/iconfont/ico.js https://ui.gg/lib/ico/iconfont/ico.json https://ui.gg/lib/ico/iconfont/ico.woff https://ui.gg/lib/ico/iconfont/ico.woff2
    images

    Library related connections

    https://ui.gg/lib/images/avatar/ https://ui.gg/lib/images/bg/ https://ui.gg/lib/images/color/ https://ui.gg/lib/images/img/ https://ui.gg/lib/images/product/
    media

    Library related connections

    https://ui.gg/lib/media/audio.mp3 https://ui.gg/lib/media/bounce.mp3 https://ui.gg/lib/media/ding.mp3 https://ui.gg/lib/media/dulcimer.mp3 https://ui.gg/lib/media/notify.mp3 https://ui.gg/lib/media/right.mp3 https://ui.gg/lib/media/video.mp4
    qrcode

    Library related connections

    https://ui.gg/lib/qr/icox.cc.svg https://ui.gg/lib/qr/mix.vc.svg https://ui.gg/lib/qr/mixice.com.svg https://ui.gg/lib/qr/mssay.com.svg https://ui.gg/lib/qr/ui.gg.svg https://ui.gg/lib/qr/wechat.svg https://ui.gg/lib/qr/wechat-mssay.svg