Updateing Docs
This commit is contained in:
551
docs/components_old/navbar.md
Normal file
551
docs/components_old/navbar.md
Normal file
@@ -0,0 +1,551 @@
|
||||
# Navbar
|
||||
|
||||
Navigation bar component for creating responsive headers with logo, navigation links, and actions.
|
||||
|
||||
## Tag
|
||||
|
||||
`Navbar`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | `-` | Navbar content (should contain left, center, right sections) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Navbar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Navigation Links
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, '#demo-links');
|
||||
```
|
||||
|
||||
### With Dropdown Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-dropdown" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, '#demo-dropdown');
|
||||
```
|
||||
|
||||
### With Search
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, '#demo-search');
|
||||
```
|
||||
|
||||
### With Avatar and Dropdown
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, '#demo-avatar');
|
||||
```
|
||||
|
||||
### Responsive Navbar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, '#demo-responsive');
|
||||
```
|
||||
|
||||
### With Brand and Actions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, '#demo-brand');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initNavbarExamples = () => {
|
||||
|
||||
// 1. Basic Navbar
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Navigation Links
|
||||
const linksTarget = document.querySelector('#demo-links');
|
||||
if (linksTarget && !linksTarget.hasChildNodes()) {
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, linksTarget);
|
||||
}
|
||||
|
||||
// 3. With Dropdown Menu
|
||||
const dropdownTarget = document.querySelector('#demo-dropdown');
|
||||
if (dropdownTarget && !dropdownTarget.hasChildNodes()) {
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, dropdownTarget);
|
||||
}
|
||||
|
||||
// 4. With Search
|
||||
const searchTarget = document.querySelector('#demo-search');
|
||||
if (searchTarget && !searchTarget.hasChildNodes()) {
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, searchTarget);
|
||||
}
|
||||
|
||||
// 5. With Avatar and Dropdown
|
||||
const avatarTarget = document.querySelector('#demo-avatar');
|
||||
if (avatarTarget && !avatarTarget.hasChildNodes()) {
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, avatarTarget);
|
||||
}
|
||||
|
||||
// 6. Responsive Navbar
|
||||
const responsiveTarget = document.querySelector('#demo-responsive');
|
||||
if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, responsiveTarget);
|
||||
}
|
||||
|
||||
// 7. With Brand and Actions
|
||||
const brandTarget = document.querySelector('#demo-brand');
|
||||
if (brandTarget && !brandTarget.hasChildNodes()) {
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, brandTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initNavbarExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initNavbarExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user