mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
cb278c762d
* Add segmented control component and update related files * Implement segmented navigation component and update related styles * Create grumpy-flowers-act.md * Refactor .gitignore and move playground pages to preview directory * Enhance segmented navigation with hover state and class support * Refactor segmented control layout for improved responsiveness and alignment
110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
---
|
|
layout: default
|
|
title: Segmented control
|
|
permalink: /segmented-control.html
|
|
page-header: Segmented control
|
|
page-menu: base.segmented-control
|
|
---
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="1,2,3,4" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" vertical %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" vertical disabled="3" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" disabled="4,5" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" vertical=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" name="checkbox" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" full-width=true %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="space-y">
|
|
<div>{% include "ui/nav-segmented.html" items="Overview,Analytics,Reports,Notifications" full-width=true %}</div>
|
|
<div>{% include "ui/nav-segmented.html" items="Account,Password" full-width=true %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="space-y">
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="sm" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="lg" %}</div>
|
|
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
|
|
|
|
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" %}</div>
|
|
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|