Ything-RepoMirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-25 04:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

new Tags component (#1550) (#1582)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
Saran Pariyar
2023-06-09 14:57:00 +05:45
committed by GitHub
parent 1ca1274595
commit c276a8b4d1
13 changed files with 243 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/clean-carrots-sort.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": minor
---
Add new `Tag` component

3
src/pages/_data/menu.yml
View File

@@ -167,6 +167,9 @@ base:
tabs:
url: tabs.html
title: Tabs
tags:
url: tags.html
title: Tags
tables:
url: tables.html
title: Tables

4
src/pages/_includes/ui/badge.html
View File

@@ -1,5 +1,6 @@
{% removeemptylines %}
{% assign el = 'span' %}
<{{ el }} class="badge{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<{{ el }} class="badge{% if include['size'] %} badge-{{ include['size'] }}{% endif %}{% if include.color %} bg-{{ include.color }} text-{{ include.color }}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.person-id %}
{% assign person-id = include.person-id | minus: 1 %}
{% assign person = site.data.people[person-id] %}
@@ -16,3 +17,4 @@
{% endif %}
{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif %}
</{{ el }}>
{% endremoveemptylines %}

2
src/pages/_includes/ui/dropdown-menu.html
View File

@@ -33,7 +33,7 @@
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary ms-auto">12</span>{% endif %}
{% if include.badge %}<span class="badge bg-primary text-primary-fg ms-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action

21
src/pages/_includes/ui/tag.html Normal file
View File

@@ -0,0 +1,21 @@
<span class="tag">
{% if include.flag %}
{% include ui/flag.html flag=include.flag size="xs" class="tag-flag" %}
{% elsif include.icon %}
{% include ui/icon.html icon=include.icon size="xs" class="tag-icon" %}
{% elsif include.person %}
{% include ui/avatar.html person=include.person size="xs" class="tag-avatar" %}
{% elsif include.status %}
{% include ui/badge.html color=include.status class="tag-status badge-empty" text="" %}
{% elsif include.legend %}
<span class="legend bg-{{ include.legend }}"></span>
{% elsif include.checkbox %}
<input type="checkbox" class="form-check-input tag-check"{% if include.checked %} checked{% endif %}/>
{% endif %}
{{ include.text }}
{% if include.badge %}
{% include ui/badge.html color=include.status class="tag-badge" text=include.badge size="sm" %}
{% endif %}
<a href="#" class="btn-close"></a>
</span>

6
src/pages/badges.html
View File

@@ -24,7 +24,7 @@ menu: base.badges
<div class="card-body">
<div class="badges-list">
{% for color in site.colors %}
<span class="badge bg-{{ color[0] }}">{{ color[1].title }}</span>
<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span>
{% endfor %}
</div>
</div>
@@ -64,7 +64,7 @@ menu: base.badges
<div class="card-body">
<div class="btn-list">
{% for color in site.colors %}
<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} ms-2">{{ forloop.index }}</span></button>
<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
{% endfor %}
</div>
</div>
@@ -75,7 +75,7 @@ menu: base.badges
<div class="card-body">
<div class="btn-list">
{% for color in site.colors %}
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-pill">{{ forloop.index }}</span></button>
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
{% endfor %}
</div>
</div>

123
src/pages/tags.html Normal file
View File

@@ -0,0 +1,123 @@
---
title: Tags
page-header: Tags
menu: base.tags
---
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Default tags</h3>
<div class="tags-list">
{% for i in (1..14) %}
{% capture text %}Label {{ i }}{% endcapture %}
{% include ui/tag.html text=text %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tags with flag</h3>
<div class="tags-list">
{% for country in site.data.countries limit: 9 %}
{% include ui/tag.html text=country.name flag=country.code %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tags with icon</h3>
<div class="tags-list">
{% for icon in icons %}
{% include ui/tag.html text=icon icon=icon %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tags with avatar</h3>
<div class="tags-list">
{% for person in site.data.people limit: 8 %}
{% include ui/tag.html text=person.full_name person=person %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tags with status</h3>
<div class="tags-list">
{% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %}
{% include ui/tag.html text=text status=status %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tags with legend</h3>
<div class="tags-list">
{% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %}
{% include ui/tag.html text=text legend=status %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Default tags</h3>
<div class="tags-list">
{% for i in (1..6) %}
{% capture text %}Label {{ i }}{% endcapture %}
{% include ui/tag.html text=text checkbox=true %}
{% endfor %}
{% for i in (7..12) %}
{% capture text %}Label {{ i }}{% endcapture %}
{% include ui/tag.html text=text checkbox=true checked=true %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Default tags</h3>
<div class="tags-list">
{% for i in (1..12) %}
{% include ui/tag.html text="Label" badge=i %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>

4
src/scss/_core.scss
View File

@@ -53,6 +53,7 @@
@import "ui/status";
@import "ui/switch-icon";
@import "ui/tables";
@import "ui/tags";
@import "ui/toasts";
@import "ui/toolbar";
@import "ui/tracking";
@@ -70,3 +71,6 @@
@import "utils/text";
@import "debug";
@import "debug";

12
src/scss/_variables.scss
View File

@@ -326,10 +326,10 @@ $kbd-bg: var(--#{$prefix}code-bg) !default;
$kbd-border-radius: var(--#{$prefix}border-radius) !default;
// Avatars
$avatar-size: 2.5rem !default;
$avatar-size: 2rem !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: (
"xs": 1.5rem,
"xs": 1rem,
"sm": 2rem,
"md": 4rem,
"lg": 5.5rem,
@@ -515,6 +515,8 @@ $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
$badge-padding-y: 0.25em !default;
$badge-padding-x: 0.5em !default;
$badge-empty-size: 0.5rem !default;
$badge-color: var(--#{$prefix}secondary) !default;
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
// Buttons
$input-btn-line-height: $line-height-base !default;
@@ -595,8 +597,10 @@ $carousel-indicator-thumb-width: 4rem !default;
$carousel-indicator-dot-width: 0.5rem !default;
// Close
$btn-close-width: 0.75rem !default;
$btn-close-opacity: 0.3 !default;
$btn-close-width: 1em !default;
$btn-close-opacity: 0.4 !default;
$btn-close-color: $body-color !default;
// Datagrid
$datagrid-padding: 1.5rem !default;

25
src/scss/ui/_badges.scss
View File

@@ -1,7 +1,7 @@
.badge {
justify-content: center;
align-items: center;
background: $gray-500;
background: $badge-bg-color;
overflow: hidden;
user-select: none;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
@@ -14,17 +14,6 @@
color: $card-bg;
}
&:empty {
display: inline-block;
width: $badge-empty-size;
height: $badge-empty-size;
min-width: 0;
min-height: auto;
padding: 0;
border-radius: $border-radius-pill;
vertical-align: baseline;
}
.avatar {
box-sizing: content-box;
width: 1.25rem;
@@ -40,6 +29,18 @@
}
}
.badge:empty,
.badge-empty {
display: inline-block;
width: $badge-empty-size;
height: $badge-empty-size;
min-width: 0;
min-height: auto;
padding: 0;
border-radius: $border-radius-pill;
vertical-align: baseline;
}
//
// Outline badge
//

4
src/scss/ui/_flags.scss
View File

@@ -5,7 +5,7 @@ $countries: (
.flag {
position: relative;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
aspect-ratio: 1.33333;
background: no-repeat center/cover;
box-shadow: $flag-box-shadow;
@@ -26,6 +26,6 @@ $countries: (
@each $flag-size, $size in $flag-sizes {
.flag-#{$flag-size} {
width: $size;
height: $size;
}
}

1
src/scss/ui/_legend.scss
View File

@@ -8,4 +8,5 @@ Legend
width: var(--#{$prefix}legend-size);
height: var(--#{$prefix}legend-size);
border-radius: $legend-border-radius;
border: 1px solid var(--#{$prefix}border-color-translucent);
}

56
src/scss/ui/_tags.scss Normal file
View File

@@ -0,0 +1,56 @@
.tag {
--#{$prefix}tag-height: 1.5rem;
border: $border-width solid var(--#{$prefix}border-color);
display: flex;
align-items: center;
height: var(--#{$prefix}tag-height);
border-radius: var(--#{$prefix}border-radius);
padding: 0 0.5rem;
background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}box-shadow-input);
gap: .5rem;
.btn-close {
margin-right: -0.25rem;
margin-left: -0.125rem;
padding: 0;
width: 1rem;
height: 1rem;
font-size: .5rem;
}
}
.tag-badge {
--#{$prefix}badge-font-size: #{$h6-font-size};
--#{$prefix}badge-padding-x: .25rem;
--#{$prefix}badge-padding-y: .125rem;
margin-right: -.25rem;
}
.tag-avatar,
.tag-flag,
.tag-icon,
.tag-check {
margin-left: -.25rem;
}
.tag-icon {
color: var(--#{$prefix}secondary);
margin-right: -0.125rem;
width: 1rem;
height: 1rem;
}
.tag-check {
width: 1rem;
height: 1rem;
background-size: 1rem;
}
//
// Tags list
//
.tags-list {
@include elements-list;
}