Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit72a1d67

Browse files
Refactor breadcrumb and vector map components, add clipboard functionality (#2378)
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
1 parent638f36c commit72a1d67

File tree

19 files changed

+417
-413
lines changed

19 files changed

+417
-413
lines changed

‎.changeset/lovely-trees-divide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@tabler/core":patch
3+
---
4+
5+
Add clipboard functionality to Tabler documentation

‎core/scss/ui/_markdown.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ Markdown
4747
border:1pxsolidvar(--#{$prefix}border-color);
4848
}
4949

50-
>pre {
50+
pre {
5151
max-height:20rem;
5252
}
5353
}

‎docs/content/ui/components/badges.md‎

Lines changed: 119 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,56 @@ bootstrapLink: components/badge/
1010
The default badges are square and come in the basic set of colors.
1111

1212
{% capture html -%}
13-
<spanclass="badge bg-blue-lt">Blue</span>
14-
<spanclass="badge bg-azure-lt">Azure</span>
15-
<spanclass="badge bg-indigo-lt">Indigo</span>
16-
<spanclass="badge bg-purple-lt">Purple</span>
17-
<spanclass="badge bg-pink-lt">Pink</span>
18-
<spanclass="badge bg-red-lt">Red</span>
19-
<spanclass="badge bg-orange-lt">Orange</span>
20-
<spanclass="badge bg-yellow-lt">Yellow</span>
21-
<spanclass="badge bg-lime-lt">Lime</span>
22-
<spanclass="badge bg-green-lt">Green</span>
23-
<spanclass="badge bg-teal-lt">Teal</span>
24-
<spanclass="badge bg-cyan-lt">Cyan</span>
13+
<divclass="badges-list">
14+
{% for color in site.colors -%}
15+
{% include "ui/badge.html" color=color[0] text=color[1].title %}
16+
{%- endfor -%}
17+
</div>
2518
{%- endcapture %}
2619
{% include "docs/example.html" html=html centered %}
2720

2821
##Headings
2922

23+
Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from`<h1>` to`<h6>`. The example below shows how to use badges in headings.
24+
3025
{% capture html -%}
31-
<h1>Example heading <spanclass="badge">New</span></h1>
32-
<h2>Example heading <spanclass="badge">New</span></h2>
33-
<h3>Example heading <spanclass="badge">New</span></h3>
34-
<h4>Example heading <spanclass="badge">New</span></h4>
35-
<h5>Example heading <spanclass="badge">New</span></h5>
36-
<h6>Example heading <spanclass="badge">New</span></h6>
26+
<h1>
27+
Example heading
28+
{% include "ui/badge.html" text="New" -%}
29+
</h1>
30+
<h2>
31+
Example heading
32+
{% include "ui/badge.html" text="New" -%}
33+
</h2>
34+
<h3>
35+
Example heading
36+
{% include "ui/badge.html" text="New" -%}
37+
</h3>
38+
<h4>
39+
Example heading
40+
{% include "ui/badge.html" text="New" -%}
41+
</h4>
42+
<h5>
43+
Example heading
44+
{% include "ui/badge.html" text="New" -%}
45+
</h5>
46+
<h6>
47+
Example heading
48+
{% include "ui/badge.html" text="New" -%}
49+
</h6>
3750
{%- endcapture %}
3851
{% include "docs/example.html" html=html %}
3952

40-
##Outline badges
53+
##Light versions of badges
4154

55+
You can use the`-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
4256

57+
For example you can use the`bg-blue-lt` class to create a light blue badge. If you add the`text-blue-lt-fg` class, the text will be blue as well.
4358

4459
{% capture html -%}
45-
<spanclass="badge badge-outline text-blue">blue</span>
46-
<spanclass="badge badge-outline text-azure">azure</span>
47-
<spanclass="badge badge-outline text-indigo">indigo</span>
48-
<spanclass="badge badge-outline text-purple">purple</span>
49-
<spanclass="badge badge-outline text-pink">pink</span>
50-
<spanclass="badge badge-outline text-red">red</span>
51-
<spanclass="badge badge-outline text-orange">orange</span>
52-
<spanclass="badge badge-outline text-yellow">yellow</span>
53-
<spanclass="badge badge-outline text-lime">lime</span>
54-
<spanclass="badge badge-outline text-green">green</span>
55-
<spanclass="badge badge-outline text-teal">teal</span>
56-
<spanclass="badge badge-outline text-cyan">cyan</span>
60+
{%- for color in site.colors -%}
61+
{% include "ui/badge.html" color=color[0] text=color[1].title light %}
62+
{%- endfor -%}
5763
{%- endcapture %}
5864
{% include "docs/example.html" html=html centered %}
5965

@@ -62,18 +68,44 @@ The default badges are square and come in the basic set of colors.
6268
Use the`.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
6369

6470
{% capture html -%}
65-
<spanclass="badge badge-pill bg-blue-lt">1</span>
66-
<spanclass="badge badge-pill bg-azure-lt">2</span>
67-
<spanclass="badge badge-pill bg-indigo-lt">3</span>
68-
<spanclass="badge badge-pill bg-purple-lt">4</span>
69-
<spanclass="badge badge-pill bg-pink-lt">5</span>
70-
<spanclass="badge badge-pill bg-red-lt">6</span>
71-
<spanclass="badge badge-pill bg-orange-lt">7</span>
72-
<spanclass="badge badge-pill bg-yellow-lt">8</span>
73-
<spanclass="badge badge-pill bg-lime-lt">9</span>
74-
<spanclass="badge badge-pill bg-green-lt">10</span>
75-
<spanclass="badge badge-pill bg-teal-lt">11</span>
76-
<spanclass="badge badge-pill bg-cyan-lt">12</span>
71+
{%- for color in site.colors -%}
72+
{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %}
73+
{%- endfor -%}
74+
{%- endcapture %}
75+
{% include "docs/example.html" html=html centered %}
76+
77+
You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
78+
79+
{% capture html -%}
80+
{%- for color in site.colors -%}
81+
{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %}
82+
{%- endfor -%}
83+
{%- endcapture %}
84+
{% include "docs/example.html" html=html centered %}
85+
86+
##Badges with icons
87+
88+
You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
89+
90+
{% capture html -%}
91+
{% include "ui/badge.html" text="Star" icon="star" -%}
92+
{% include "ui/badge.html" text="Heart" icon="heart" -%}
93+
{% include "ui/badge.html" text="Check" icon="check" -%}
94+
{% include "ui/badge.html" text="X" icon="x" -%}
95+
{% include "ui/badge.html" text="Plus" icon="plus" -%}
96+
{% include "ui/badge.html" text="Minus" icon="minus" -%}
97+
{%- endcapture %}
98+
{% include "docs/example.html" html=html centered %}
99+
100+
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
101+
102+
{% capture html -%}
103+
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
104+
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
105+
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
106+
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
107+
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
108+
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
77109
{%- endcapture %}
78110
{% include "docs/example.html" html=html centered %}
79111

@@ -99,14 +131,55 @@ Place the badge within an `<a>` element if you want it to perform the function o
99131

100132
##Button with badge
101133

102-
Badges can be used as part of links or buttons to provide, for example, a counter.
134+
Badges can be used as parts of links or buttons to provide, for example, a counter. Use the`.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
135+
136+
If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
103137

104138
{% capture html -%}
105139
<buttontype="button"class="btn">
106-
Notifications<spanx x-first x-last"> bg-red-ltms-2">4</span>
140+
Notifications{% include "ui/badge.html" text="2" color="red" -%}
107141
</button>
108142
<buttontype="button"class="btn">
109-
Notifications <spanclass="badge bg-green-lt ms-2">4</span>
143+
Inbox {% include "ui/badge.html" text="4" color="red" class="badge-notification" -%}
144+
</button>
145+
<buttontype="button"class="btn">
146+
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification" -%}
110147
</button>
111148
{%- endcapture %}
112149
{% include "docs/example.html" html=html centered %}
150+
151+
##Animated badges
152+
153+
You can use the`.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
154+
155+
{% capture html -%}
156+
<buttontype="button"class="btn">
157+
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification badge-blink" -%}
158+
</button>
159+
{% endcapture %}
160+
{% include "docs/example.html" html=html centered %}
161+
162+
##Size Options
163+
164+
Use`.badge-sm` or`.badge-lg` to change badge size according to your needs. The default size is`.badge` and it is used in the examples above.
165+
166+
{% capture html -%}
167+
<div>
168+
{% include "ui/badge.html" color="primary" scale="sm" text="New" class="badge-sm" -%}
169+
{% include "ui/badge.html" color="primary" scale="sm" text="1" class="badge-pill" -%}
170+
</div>
171+
<div>
172+
{% include "ui/badge.html" color="primary" text="New" class="badge-sm" -%}
173+
{% include "ui/badge.html" color="primary" text="1" class="badge-pill" -%}
174+
</div>
175+
<div>
176+
{% include "ui/badge.html" color="primary" scale="lg" text="New" class="badge-sm" -%}
177+
{% include "ui/badge.html" color="primary" scale="lg" text="1" class="badge-pill" -%}
178+
</div>
179+
{%- endcapture %}
180+
{% include "docs/example.html" html=html centered vertical %}
181+
182+
183+
##More examples
184+
185+
If you want to see more examples of badges, you can check out the[Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler[Badges](https://preview.tabler.io/badges.html) preview.

‎docs/content/ui/components/breadcrumb.md‎

Lines changed: 11 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,9 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett
1212
Look at the example below to see how breadcrumbs work in practice.
1313

1414
{% capture html -%}
15-
<olclass="breadcrumb">
16-
<liclass="breadcrumb-item">
17-
<a href="#">Home</a>
18-
</li>
19-
<liclass="breadcrumb-item">
20-
<a href="#">Library</a>
21-
</li>
22-
<liclass="breadcrumb-item active">
23-
<a href="#">Data</a>
24-
</li>
25-
</ol>
15+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" %}
2616
{%- endcapture %}
27-
{% include "docs/example.html" html=htmlvertical separated %}
17+
{% include "docs/example.html" html=htmlcentered %}
2818

2919
##Different separators
3020

@@ -33,60 +23,18 @@ You can use different breadcrumb styles to match your website or app design. Cho
3323
This example shows how to use different breadcrumb styles.
3424

3525
{% capture html -%}
36-
<olclass="breadcrumb breadcrumb-dots">
37-
<liclass="breadcrumb-item">
38-
<a href="#">Home</a>
39-
</li>
40-
<liclass="breadcrumb-item">
41-
<a href="#">Library</a>
42-
</li>
43-
<liclass="breadcrumb-item active">
44-
<a href="#">Data</a>
45-
</li>
46-
</ol>
47-
<olclass="breadcrumb breadcrumb-arrows">
48-
<liclass="breadcrumb-item">
49-
<a href="#">Home</a>
50-
</li>
51-
<liclass="breadcrumb-item">
52-
<a href="#">Library</a>
53-
</li>
54-
<liclass="breadcrumb-item active">
55-
<a href="#">Data</a>
56-
</li>
57-
</ol>
58-
<olclass="breadcrumb breadcrumb-bullets">
59-
<liclass="breadcrumb-item">
60-
<a href="#">Home</a>
61-
</li>
62-
<liclass="breadcrumb-item">
63-
<a href="#">Library</a>
64-
</li>
65-
<liclass="breadcrumb-item active">
66-
<a href="#">Data</a>
67-
</li>
68-
</ol>
26+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %}
27+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %}
28+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %}
6929
{%- endcapture %}
70-
{% include "docs/example.html" html=html vertical separated %}
30+
{% include "docs/example.html" html=html vertical separatedcentered%}
7131

7232
##With icon
7333

7434
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
7535

7636
{% capture html -%}
77-
<olclass="breadcrumb">
78-
<liclass="breadcrumb-item">
79-
<a href="#">
80-
{% include "ui/icon.html" icon="home" %}
81-
</a>
82-
</li>
83-
<liclass="breadcrumb-item">
84-
<a href="#">Library</a>
85-
</li>
86-
<liclass="breadcrumb-item active">
87-
<a href="#">Data</a>
88-
</li>
89-
</ol>
37+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %}
9038
{%- endcapture %}
9139
{% include "docs/example.html" html=html vertical separated %}
9240

@@ -95,19 +43,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
9543
You can use the`breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
9644

9745
{% capture html -%}
98-
<navaria-label="breadcrumb">
99-
<olclass="breadcrumb breadcrumb-muted">
100-
<li class="breadcrumb-item">
101-
<a href="#">Home</a>
102-
</li>
103-
<li class="breadcrumb-item">
104-
<a href="#">Library</a>
105-
</li>
106-
<li class="breadcrumb-item active">
107-
<a href="#">Data</a>
108-
</li>
109-
</ol>
110-
</nav>
46+
{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %}
11147
{%- endcapture %}
11248
{% include "docs/example.html" html=html %}
11349

@@ -119,24 +55,9 @@ You can use breadcrumbs in headers to show the current page location and provide
11955
<divclass="page-header">
12056
<divclass="row align-items-center mw-100">
12157
<div class="col">
122-
<div class="mb-1">
123-
<ol class="breadcrumb">
124-
<li class="breadcrumb-item">
125-
<a href="#">Home</a>
126-
</li>
127-
<li class="breadcrumb-item">
128-
<a href="#">Library</a>
129-
</li>
130-
<li class="breadcrumb-item active">
131-
<a href="#">Articles</a>
132-
</li>
133-
</ol>
134-
</div>
58+
{% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}
13559
<h2 class="page-title">
136-
<span class="text-truncate"
137-
>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
138-
woods.</span
139-
>
60+
<span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
14061
</h2>
14162
</div>
14263
<div class="col-auto">
@@ -151,5 +72,5 @@ You can use breadcrumbs in headers to show the current page location and provide
15172
</div>
15273
</div>
15374
{%- endcapture %}
154-
{% include "docs/example.html" html=html %}
75+
{% include "docs/example.html" html=htmlcentered vertical%}
15576

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp