mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Add NavOverflow component and use it in the preview navbar (#3240)
Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: codecalm <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
16 files changed
+1914
-7
No files matched your search
@@ -0,0 +1,206 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
||||
import Card from '@ui/Card.astro'
|
||||
import CardBody from '@ui/CardBody.astro'
|
||||
import CardTitle from '@ui/CardTitle.astro'
|
||||
import CardSubtitle from '@ui/CardSubtitle.astro'
|
||||
import DocsLink from '@ui/DocsLink.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
|
||||
const links = ['Home', 'Dashboard', 'Products', 'Services', 'Analytics', 'Reports', 'Settings', 'Help']
|
||||
|
||||
const navbarLinks = [
|
||||
{ title: 'Home', icon: 'home' },
|
||||
{ title: 'Analytics', icon: 'chart-bar' },
|
||||
{ title: 'Products', icon: 'package' },
|
||||
{ title: 'Customers', icon: 'users' },
|
||||
{ title: 'Reports', icon: 'file-text' },
|
||||
{ title: 'Settings', icon: 'settings' },
|
||||
]
|
||||
---
|
||||
|
||||
<DefaultLayout title="Nav overflow" pageMenu="base.nav-overflow" description="Nav overflow moves nav items that do not fit into a More dropdown.">
|
||||
<DocsLink slot="page-header-actions" path="/ui/components/nav-overflow" />
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pills</CardTitle>
|
||||
<CardSubtitle>Wrap a <code>.nav</code> in <code>.nav-overflow</code> with <code>data-bs-toggle="nav-overflow"</code>.</CardSubtitle>
|
||||
<div class="nav-overflow" data-bs-toggle="nav-overflow">
|
||||
<ul class="nav nav-pills">
|
||||
{
|
||||
links.map((link, index) => (
|
||||
<li class="nav-item">
|
||||
<a class:list={['nav-link', index === 0 && 'active']} aria-current={index === 0 ? 'page' : undefined} href="#">
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Tabs</CardTitle>
|
||||
<CardSubtitle>Works with <code>.nav-tabs</code> and keeps <code>.active</code> and <code>.disabled</code> in the menu.</CardSubtitle>
|
||||
<div class="nav-overflow" data-bs-toggle="nav-overflow">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Overview</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">History</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Activity</a></li>
|
||||
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Comments</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Attachments</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Keep items visible</CardTitle>
|
||||
<CardSubtitle>Add <code>.nav-overflow-keep</code> to items that must never move to the menu.</CardSubtitle>
|
||||
<div class="nav-overflow" data-bs-toggle="nav-overflow">
|
||||
<ul class="nav nav-underline">
|
||||
<li class="nav-item nav-overflow-keep"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Products</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Careers</a></li>
|
||||
<li class="nav-item nav-overflow-keep"><a class="nav-link" href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With dropdowns</CardTitle>
|
||||
<CardSubtitle>A nav item with a dropdown becomes a nested dropdown in the menu.</CardSubtitle>
|
||||
<div class="nav-overflow" data-bs-toggle="nav-overflow">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">Products</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Laptops</a>
|
||||
<a class="dropdown-item" href="#">Phones</a>
|
||||
<a class="dropdown-item" href="#">Tablets</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">Company</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">About</a>
|
||||
<a class="dropdown-item" href="#">Careers</a>
|
||||
<a class="dropdown-item" href="#">Press</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Icon-only toggle</CardTitle>
|
||||
<CardSubtitle>Set <code>data-bs-more-text="false"</code> to show only the icon.</CardSubtitle>
|
||||
<div class="nav-overflow" data-bs-toggle="nav-overflow" data-bs-more-text="false">
|
||||
<ul class="nav nav-pills">
|
||||
{
|
||||
links.map((link, index) => (
|
||||
<li class="nav-item">
|
||||
<a class:list={['nav-link', index === 0 && 'active']} aria-current={index === 0 ? 'page' : undefined} href="#">
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>In a navbar</CardTitle>
|
||||
<CardSubtitle>Wrap the <code>.navbar-nav</code> of a navbar in <code>.nav-overflow</code>.</CardSubtitle>
|
||||
<div class="navbar navbar-expand rounded border">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
<nav class="nav-overflow" data-bs-toggle="nav-overflow" aria-label="Demo">
|
||||
<ul class="navbar-nav">
|
||||
{
|
||||
navbarLinks.map((link, index) => (
|
||||
<li class:list={['nav-item', index === 0 && 'active']}>
|
||||
<a class="nav-link" href="#" aria-current={index === 0 ? 'page' : undefined}>
|
||||
<span class="nav-link-icon">
|
||||
<Icon name={link.icon} />
|
||||
</span>
|
||||
<span class="nav-link-title">{link.title}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
|
||||
<span class="nav-link-icon">
|
||||
<Icon name="help" />
|
||||
</span>
|
||||
<span class="nav-link-title">Help</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Documentation</a>
|
||||
<a class="dropdown-item" href="#">Changelog</a>
|
||||
<a class="dropdown-item" href="#">Support</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Colored navbar</CardTitle>
|
||||
<CardSubtitle>The overflow menu follows the theme of the navbar, here <code>data-bs-theme="dark"</code>.</CardSubtitle>
|
||||
<div class="navbar navbar-expand rounded bg-primary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
<nav class="nav-overflow" data-bs-toggle="nav-overflow" aria-label="Colored demo">
|
||||
<ul class="navbar-nav">
|
||||
{
|
||||
navbarLinks.map((link, index) => (
|
||||
<li class:list={['nav-item', index === 0 && 'active']}>
|
||||
<a class="nav-link" href="#" aria-current={index === 0 ? 'page' : undefined}>
|
||||
<span class="nav-link-title">{link.title}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
Reference in new issue
Block a user