Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

tags docs

Browse Source
This commit is contained in:
codecalm
2018-02-22 01:13:37 +01:00
parent 4798176d1c
commit 166ed95ec2
3 changed files with 232 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/tags.md
+132
View File
@@ -0,0 +1,132 @@
---
title: Tags
icon: fe fe-tag
description: Small tag labels to insert anywhere
---
### Default tag
{% example html wrapper=tags %}
<span class="tag">First tag</span>
<span class="tag">Second tag</span>
<span class="tag">Third tag</span>
{% endexample %}
### Link tag
{% example html wrapper=tags %}
<a href="#" class="tag">First tag</a>
<a href="#" class="tag">Second tag</a>
<a href="#" class="tag">Third tag</a>
{% endexample %}
### Rounded tag
{% example html wrapper=tags %}
<span class="tag tag-rounded">First tag</span>
<span class="tag tag-rounded">Second tag</span>
<span class="tag tag-rounded">Third tag</span>
{% endexample %}
### Color tag
{% example html wrapper=tags %}
{% for color in site.colors %}
<span class="tag tag-{{ color[0] }}">{{ color[1].name }} tag</span>
{% endfor %}
{% endexample %}
### Avatar tag
{% example html wrapper=tags %}
{% for user in site.data.users limit: 8 %}
<span class="tag">
<span class="tag-avatar avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
{{ user.name }}
</span>
{% endfor %}
{% endexample %}
### List of tags
You can create a list of tags with the `.tags` container.
{% example html %}
<div class="tags">
<span class="tag">First tag</span>
<span class="tag">Second tag</span>
<span class="tag">Third tag</span>
</div>
{% endexample %}
If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.
{% example html %}
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
<span class="tag">Four</span>
<span class="tag">Five</span>
<span class="tag">Six</span>
<span class="tag">Seven</span>
<span class="tag">Eight</span>
<span class="tag">Nine</span>
<span class="tag">Ten</span>
<span class="tag">Eleven</span>
<span class="tag">Twelve</span>
<span class="tag">Thirteen</span>
<span class="tag">Fourteen</span>
<span class="tag">Fifteen</span>
<span class="tag">Sixteen</span>
<span class="tag">Seventeen</span>
<span class="tag">Eighteen</span>
<span class="tag">Nineteen</span>
<span class="tag">Twenty</span>
</div>
{% endexample %}
### Tag remove
{% example html %}
<div class="tags">
<span class="tag">
One
<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
</span>
<span class="tag">
Two
<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
</span>
<span class="tag">
Three
<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
</span>
<span class="tag">
Four
<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
</span>
</div>
{% endexample %}
### Tag addons
{% example html wrapper=tags %}
<div class="tag">
npm
<a href="#" class="tag-addon"><i class="fe fe-x"></i></a>
</div>
<div class="tag tag-danger">
npm
<span class="tag-addon"><i class="fe fe-activity"></i></span>
</div>
<div class="tag">
bundle
<span class="tag-addon tag-success">passing</span>
</div>
<span class="tag tag-dark">
CSS gzip size
<span class="tag-addon tag-warning">20.9 kB</span>
</span>
{% endexample %}
assets/scss/dashboard/_chips.scss
+8 -8
View File
@@ -26,14 +26,14 @@
border-radius: 50%;
}
.close {
cursor: pointer;
float: right;
font-size: 1.3rem;
padding-left: .5rem;
line-height: inherit;
margin-left: .25rem;
}
//.close {
// cursor: pointer;
// float: right;
// font-size: 1.3rem;
// padding-left: .5rem;
// line-height: inherit;
// margin-left: .25rem;
//}
@at-root a#{&} {
&:hover {
assets/scss/dashboard/_tag.scss
+92 -7
View File
@@ -1,12 +1,97 @@
.tag {
display: inline-block;
font-size: px2rem(12px);
color: $text-muted-dark;
background-color: rgba($text-muted-dark, .1);
background-color: $gray-200;
border-radius: 3px;
padding: 2px 5px;
margin-right: 2px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0 .5rem;
line-height: 2em;
display: inline-flex;
cursor: default;
}
font-weight: 400;
user-select: none;
@at-root a#{&} {
text-decoration: none;
cursor: pointer;
transition: .3s color, .3s background;
&:hover {
background-color: rgba($text-muted-dark, .20);
color: inherit;
}
}
}
.tag-addon {
display: inline-block;
padding: 0 .5rem;
color: inherit;
text-decoration: none;
background: rgba(#000, .06);
margin: 0 -.5rem 0 .5rem;
text-align: center;
min-width: 1.5rem;
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
i {
vertical-align: middle;
margin: 0 -.25rem;
}
@at-root a#{&} {
text-decoration: none;
cursor: pointer;
transition: .3s color, .3s background;
&:hover {
background: rgba(#000, .16);
color: inherit;
}
}
}
.tag-avatar {
width: 1.5rem;
height: 1.5rem;
border-radius: 3px 0 0 3px;
margin: 0 .5rem 0 -.5rem;
}
@each $vendor, $color in $colors {
.tag-#{$vendor} {
background-color: $color;
color: #fff;
}
}
@each $vendor, $color in $theme-colors {
.tag-#{$vendor} {
background-color: $color;
color: #fff;
}
}
.tag-rounded {
border-radius: 50px;
.tag-avatar {
border-radius: 50px;
}
}
.tags {
margin-bottom: -.5rem;
font-size: 0;
>.tag {
margin-bottom: .5rem;
&:not(:last-child) {
margin-right: .5rem;
}
}
}