mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: Enhance segmented navigation component with new options for items and icons in all-elements and logs pages
This commit is contained in:
codecalm
@@ -714,25 +714,22 @@ permalink: all-elements.html
|
|||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4>Basic Segmented</h4>
|
<h4>Basic Segmented</h4>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
{% include "ui/nav-segmented.html" %}
|
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>With Icons</h4>
|
<h4>With Icons</h4>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<nav class="nav nav-segmented" role="tablist">
|
{% include "ui/nav-segmented.html" icons="home,user,settings" %}
|
||||||
<button class="nav-link active" role="tab">
|
</div>
|
||||||
{% include "ui/icon.html" icon="home" class="nav-link-icon" %}
|
|
||||||
Home
|
<h4>With Emojis</h4>
|
||||||
</button>
|
<div class="mb-3">
|
||||||
<button class="nav-link" role="tab">
|
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
|
||||||
{% include "ui/icon.html" icon="user" class="nav-link-icon" %}
|
</div>
|
||||||
Profile
|
|
||||||
</button>
|
<h4>With Icons and Text</h4>
|
||||||
<button class="nav-link" role="tab">
|
<div class="mb-3">
|
||||||
{% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
|
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
|
||||||
Settings
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,27 +6,63 @@ layout: default
|
|||||||
permalink: logs.html
|
permalink: logs.html
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="card">
|
<div class="row">
|
||||||
<div class="card-body">
|
<div class="col-lg-6">
|
||||||
<h4>
|
<div class="card">
|
||||||
Checked URL
|
<div class="card-body">
|
||||||
</h4>
|
<h4>
|
||||||
<div>
|
Checked URL
|
||||||
<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
|
</h4>
|
||||||
</div>
|
<div>
|
||||||
|
<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
|
||||||
<h4>Request Timing</h4>
|
</div>
|
||||||
<div>
|
|
||||||
<pre>Effective URL <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count 0<br>Name lookup time 3.4e-05<br>Connect time 0.000521<br>Pre-transfer time 0.0<br>Start-transfer time 0.0<br>App connect time 0.0<br>Redirect time 0.0<br>Total time 28.000601<br>Response code 0<br>Return keyword operation_timedout</pre>
|
<h4>Request Timing</h4>
|
||||||
</div>
|
<div>
|
||||||
|
<pre>Effective URL <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count 0<br>Name lookup time 3.4e-05<br>Connect time 0.000521<br>Pre-transfer time 0.0<br>Start-transfer time 0.0<br>App connect time 0.0<br>Redirect time 0.0<br>Total time 28.000601<br>Response code 0<br>Return keyword operation_timedout</pre>
|
||||||
<h4>Response Headers</h4>
|
</div>
|
||||||
<div>
|
|
||||||
<pre>HTTP/1.1 200 Connection established</pre>
|
<h4>Response Headers</h4>
|
||||||
|
<div>
|
||||||
|
<pre>HTTP/1.1 200 Connection established</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<h4>Escalation</h4>
|
||||||
|
<div>Entire team</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="col-lg-6">
|
||||||
<h4>Escalation</h4>
|
<div class="card">
|
||||||
<div>Entire team</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
|
|
||||||
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
||||||
|
{% assign segmented-items = include.items | default: "" | split: "," %}
|
||||||
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
||||||
{% assign segmented-hover = include.hover | default: "" %}
|
{% assign segmented-hover = include.hover | default: "" %}
|
||||||
{% assign segmented-default = include.default | default: 1 | plus: 0 %}
|
{% 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 %}<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] %}
|
{% if segmented-icons[forloop.index0] %}
|
||||||
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
|
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
Reference in New Issue
Block a user