Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

feat: Enhance segmented navigation component with new options for items and icons in all-elements and logs pages

Browse Source
This commit is contained in:
codecalm
2025-11-30 23:15:21 +01:00
parent f90b7547fb
commit 127448661b
3 changed files with 70 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
preview/pages/all-elements.html
View File

@@ -714,25 +714,22 @@ permalink: all-elements.html
<div class="card-body">
<h4>Basic Segmented</h4>
<div class="mb-3">
{% include "ui/nav-segmented.html" %}
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
</div>
<h4>With Icons</h4>
<div class="mb-3">
<nav class="nav nav-segmented" role="tablist">
<button class="nav-link active" role="tab">
{% include "ui/icon.html" icon="home" class="nav-link-icon" %}
Home
</button>
<button class="nav-link" role="tab">
{% include "ui/icon.html" icon="user" class="nav-link-icon" %}
Profile
</button>
<button class="nav-link" role="tab">
{% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
Settings
</button>
</nav>
{% include "ui/nav-segmented.html" icons="home,user,settings" %}
</div>
<h4>With Emojis</h4>
<div class="mb-3">
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
</div>
<h4>With Icons and Text</h4>
<div class="mb-3">
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
</div>
</div>
</div>

38
preview/pages/logs.html
View File

@@ -6,7 +6,9 @@ layout: default
permalink: logs.html
---
<div class="card">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4>
Checked URL
@@ -29,4 +31,38 @@ permalink: logs.html
<h4>Escalation</h4>
<div>Entire team</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4>
Application Log
</h4>
<div>
<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
2024-01-15 14:23:46 [DEBUG] Database connection established
2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
</div>
<h4>Log Levels</h4>
<div>
<div class="mb-2">
{% include "ui/badge.html" text="INFO" color="success" %}
{% include "ui/badge.html" text="WARNING" color="warning" %}
{% include "ui/badge.html" text="ERROR" color="disabled" %}
{% include "ui/badge.html" text="DEBUG" color="disabled" %}
</div>
</div>
</div>
<div class="card-footer">
<h4>Log Source</h4>
<div>Application Server (prod-01)</div>
</div>
</div>
</div>
</div>

4
shared/includes/ui/nav-segmented.html
View File

@@ -1,5 +1,5 @@
{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
{% assign segmented-icons = include.icons | default: "" | split: "," %}
{% assign segmented-items = include.items | default: "" | split: "," %}
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
{% assign segmented-hover = include.hover | default: "" %}
{% assign segmented-default = include.default | default: 1 | plus: 0 %}
@@ -18,7 +18,7 @@
{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}{% if is-default %} active{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
{% if segmented-icons[forloop.index0] %}
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
{% endif %}