<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><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><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> 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.');
});- Alert
- Avatar
- Breadcrumbs
- Button
- Carousel
- Clipboard
- Collapsible
- Dialog
- Dropdown
- Image
- Loader
- Pagination
- Pop Title
- Table
- Tabs
- Tabstack
Form
<!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>Visit https://ui.gilob.in/get-started to get started with UI-Gilob.