UI

Welcome to Our Web UI-gilob. <Front-end development> 🥴

Generate Convert Improve

Install / Use

/learn @uigilob/UI

About this skill

Quality Score

0/100

README

<p align="center"> <a href="https://ui-gilob.in"> <img width="20%" src="http://ui.gilob.in/@asset/logo.svg" alt="ui-gilob" /> <h1 align="center">UI-Gilob</h1> </a> </p> </br>

CDN

<link href="https://cdn.gilob.in/public/min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.gilob.in/public/min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>smaple</title> <!-- defulat  scropts-->
  <link href="./src/ui-gilob.css" rel="stylesheet" type="text/css">
  <script src="./src/ui-gilob.js"></script>
</head>

<body>
  <div class="h1 t-center">Hello World</div>
  <script>
   $alert("Hello World")
 </script>
</body>

</html>

dynamic-load

<div
    htp-get="/hello.html"
    htp-load="[event]"
    htp-t="[target]" 
    htp-swap="[swap-method]">
</div>

<div class="target"
    htp-get="/hello.html"
    htp-swap="append"
    htp-sync="true"
    htp-load="click">
  Click show button to load Content
</div>

dropdown

<button class="dropdown" d-event="click" data="post-id-2" d-defind="rest" dropdown="trigger">rest</button>

<ul class="dropdown-menu" overflow-x="nowrap" d-event="mouseover" d-defind="rest">
    <a href="#home">Home</a>
    <a>About</a>
    <a disabled>Services</a> <!-- Target disabled: This item is disabled and cannot be clicked. -->
    <a event="remove">Contact</a>
    <!-- Not closeable when clicked: This item will not close the dropdown when clicked. -->
    <button event="remove">Button</button>
</ul>

$http GET

  var req = $http.get('/data', { param1: 'value1', param2: 'value2' });

   req.done(function(response) {
     console.log('GET request successful:', response);
   }).error(function() {
     console.log('Error occurred during the GET request.');
   });

Theme

<ul> <a href="https://ui.gilob.in/theme/css/" class='h2 bold' style='padding:30px;padding-left:0'>Css</a> <ul> <li><a href='https://ui.gilob.in/theme/css/divider/'>Divider</a></li> <li><a href='https://ui.gilob.in/theme/css/icon/'>Icon</a></li> </ul> <li><a href='https://ui.gilob.in/theme/dark/'>Dark</a></li> <li><a href='https://ui.gilob.in/theme/rules/'>Rules</a></li> <li><a href='https://ui.gilob.in/theme/switcher/'>Switcher</a></li> <li><a href='https://ui.gilob.in/theme/variables/'>Variables</a></li> </ul>

Ajax

<ul> <li><a href='https://ui.gilob.in/ajax/$htp/'>$Htp</a></li> <li><a href='https://ui.gilob.in/ajax/$http/'>$Http</a></li> <li><a href='https://ui.gilob.in/ajax/dynamic/'>Dynamic</a></li> </ul>

components

<ul> <li><a href='https://ui.gilob.in/components/alert/'>Alert</a></li> <li><a href='https://ui.gilob.in/components/avatar/'>Avatar</a></li> <li><a href='https://ui.gilob.in/components/breadcrumbs/'>Breadcrumbs</a></li> <li><a href='https://ui.gilob.in/components/button/'>Button</a></li> <li><a href='https://ui.gilob.in/components/carousel/'>Carousel</a></li> <li><a href='https://ui.gilob.in/components/clipboard/'>Clipboard</a></li> <li><a href='https://ui.gilob.in/components/collapsible/'>Collapsible</a></li> <li><a href='https://ui.gilob.in/components/dialog/'>Dialog</a></li> <li><a href='https://ui.gilob.in/components/dropdown/'>Dropdown</a></li> <div class='h2 bold' style='padding:30px;padding-left:0'>Form</div> <ul> <li><a href='https://ui.gilob.in/components/form/checkbox/'>Checkbox</a></li> <li><a href='https://ui.gilob.in/components/form/input/'>Input</a></li> <li><a href='https://ui.gilob.in/components/form/radio/'>Radio</a></li> <li><a href='https://ui.gilob.in/components/form/select/'>Select</a></li> <li><a href='https://ui.gilob.in/components/form/textarea/'>Textarea</a></li> </ul> <li><a href='https://ui.gilob.in/components/image/'>Image</a></li> <li><a href='https://ui.gilob.in/components/loader/'>Loader</a></li> <li><a href='https://ui.gilob.in/components/pagination/'>Pagination</a></li> <li><a href='https://ui.gilob.in/components/pop-title/'>Pop Title</a></li> <li><a href='https://ui.gilob.in/components/table/'>Table</a></li> <li><a href='https://ui.gilob.in/components/tabs/'>Tabs</a></li> <li><a href='https://ui.gilob.in/components/tabstack/'>Tabstack</a></li> </ul>

functions

<ul> <li><a href='https://ui.gilob.in/functions/cmd/'>Cmd</a></li> <li><a href='https://ui.gilob.in/functions/device/'>Device</a></li> <li><a href='https://ui.gilob.in/functions/parserHTML/'>Parserhtml</a></li> <li><a href='https://ui.gilob.in/functions/reactFrom/'>Reactfrom</a></li> <li><a href='https://ui.gilob.in/functions/visibility/'>Visibility</a></li> </ul>

events

template

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>smaple</title>
    <link href="https://cdn.jsdelivr.net/gh/uigilob/UI@main/src/ui-gilob.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/uigilob/UI@main/src/ui-gilob.js"></script>
</head>

<body class="theme fixed p0 over-x-adjust center">
    <!-- Sidebar -->
    <nav class="sidebar b-right" s-defind="menu">
        <!-- Sidebar Header -->
        <div class="padding-cnt bar-exp">Sidebar Header</div>

        <!-- Sidebar Content -->
        <div class="sidebar-content flex flex-col gap-l-f padding-cnt">
            Sidebar Content
        </div>

        <!-- Sidebar Footer -->
        <div class="padding-cnt" cnt-tag="footer">Sidebar Footer</div>
    </nav>

    <!-- Main Content Body -->
    <div class="body flex flex-col">
        <!-- Header -->
        <header class=" center-tb b-b p gap" md-fix="true">
            <a href="/" class="h6 bold c-p ">BRAND</a>
            <button class="button m-auto-l" sidebar="trigger" s-defind="menu">Menu</button>
        </header>

        <!-- Content Area -->
        <div class="home padding-cnt d-scroll">
            <h1 class="h1 t-center">Heading of a Blog Post</h1>
            <!-- Add your main content here -->
        </div>
    </div>

    <!-- Add your scripts or other body elements here -->

</body>

</html>

Getting Started

Visit https://ui.gilob.in/get-started to get started with UI-Gilob.

Related Skills

node-connect

343.3k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

92.1k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

343.3k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

343.3k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。