mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Refactor breadcrumb and vector map components, add clipboard functionality (#2378)
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/lovely-trees-divide.md
Normal file
5
.changeset/lovely-trees-divide.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Add clipboard functionality to Tabler documentation
|
||||
@@ -47,7 +47,7 @@ Markdown
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
> pre {
|
||||
pre {
|
||||
max-height: 20rem;
|
||||
}
|
||||
}
|
||||
@@ -10,50 +10,56 @@ bootstrapLink: components/badge/
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge bg-blue-lt">Blue</span>
|
||||
<span class="badge bg-azure-lt">Azure</span>
|
||||
<span class="badge bg-indigo-lt">Indigo</span>
|
||||
<span class="badge bg-purple-lt">Purple</span>
|
||||
<span class="badge bg-pink-lt">Pink</span>
|
||||
<span class="badge bg-red-lt">Red</span>
|
||||
<span class="badge bg-orange-lt">Orange</span>
|
||||
<span class="badge bg-yellow-lt">Yellow</span>
|
||||
<span class="badge bg-lime-lt">Lime</span>
|
||||
<span class="badge bg-green-lt">Green</span>
|
||||
<span class="badge bg-teal-lt">Teal</span>
|
||||
<span class="badge bg-cyan-lt">Cyan</span>
|
||||
<div class="badges-list">
|
||||
{% for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title %}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Headings
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
<h1>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h1>
|
||||
<h2>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h2>
|
||||
<h3>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h3>
|
||||
<h4>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h4>
|
||||
<h5>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h5>
|
||||
<h6>
|
||||
Example heading
|
||||
{% include "ui/badge.html" text="New" -%}
|
||||
</h6>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Outline badges
|
||||
## Light versions of badges
|
||||
|
||||
You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-outline text-blue">blue</span>
|
||||
<span class="badge badge-outline text-azure">azure</span>
|
||||
<span class="badge badge-outline text-indigo">indigo</span>
|
||||
<span class="badge badge-outline text-purple">purple</span>
|
||||
<span class="badge badge-outline text-pink">pink</span>
|
||||
<span class="badge badge-outline text-red">red</span>
|
||||
<span class="badge badge-outline text-orange">orange</span>
|
||||
<span class="badge badge-outline text-yellow">yellow</span>
|
||||
<span class="badge badge-outline text-lime">lime</span>
|
||||
<span class="badge badge-outline text-green">green</span>
|
||||
<span class="badge badge-outline text-teal">teal</span>
|
||||
<span class="badge badge-outline text-cyan">cyan</span>
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title light %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -62,18 +68,44 @@ The default badges are square and come in the basic set of colors.
|
||||
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-pill bg-blue-lt">1</span>
|
||||
<span class="badge badge-pill bg-azure-lt">2</span>
|
||||
<span class="badge badge-pill bg-indigo-lt">3</span>
|
||||
<span class="badge badge-pill bg-purple-lt">4</span>
|
||||
<span class="badge badge-pill bg-pink-lt">5</span>
|
||||
<span class="badge badge-pill bg-red-lt">6</span>
|
||||
<span class="badge badge-pill bg-orange-lt">7</span>
|
||||
<span class="badge badge-pill bg-yellow-lt">8</span>
|
||||
<span class="badge badge-pill bg-lime-lt">9</span>
|
||||
<span class="badge badge-pill bg-green-lt">10</span>
|
||||
<span class="badge badge-pill bg-teal-lt">11</span>
|
||||
<span class="badge badge-pill bg-cyan-lt">12</span>
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
{%- for color in site.colors -%}
|
||||
{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %}
|
||||
{%- endfor -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Badges with icons
|
||||
|
||||
You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon="star" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon="heart" -%}
|
||||
{% include "ui/badge.html" text="Check" icon="check" -%}
|
||||
{% include "ui/badge.html" text="X" icon="x" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon="plus" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon="minus" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -99,14 +131,55 @@ Place the badge within an `<a>` element if you want it to perform the function o
|
||||
|
||||
## Button with badge
|
||||
|
||||
Badges can be used as part of links or buttons to provide, for example, a counter.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-red-lt ms-2">4</span>
|
||||
Notifications {% include "ui/badge.html" text="2" color="red" class="ms-2" -%}
|
||||
</button>
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-green-lt ms-2">4</span>
|
||||
Inbox {% include "ui/badge.html" text="4" color="red" class="badge-notification" -%}
|
||||
</button>
|
||||
<button type="button" class="btn">
|
||||
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification" -%}
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Animated badges
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">
|
||||
Profile {% include "ui/badge.html" text="" color="red" class="badge-notification badge-blink" -%}
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Size Options
|
||||
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" scale="sm" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" scale="sm" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" color="primary" scale="lg" text="New" class="badge-sm" -%}
|
||||
{% include "ui/badge.html" color="primary" scale="lg" text="1" class="badge-pill" -%}
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
|
||||
## More examples
|
||||
|
||||
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.
|
||||
@@ -12,19 +12,9 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett
|
||||
Look at the example below to see how breadcrumbs work in practice.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Different separators
|
||||
|
||||
@@ -33,60 +23,18 @@ You can use different breadcrumb styles to match your website or app design. Cho
|
||||
This example shows how to use different breadcrumb styles.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb breadcrumb-dots">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-arrows">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-bullets">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %}
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %}
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
{% include "docs/example.html" html=html vertical separated centered %}
|
||||
|
||||
## With icon
|
||||
|
||||
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
|
||||
@@ -95,19 +43,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
|
||||
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.
|
||||
|
||||
{% capture html -%}
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-muted">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
@@ -119,24 +55,9 @@ You can use breadcrumbs in headers to show the current page location and provide
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center mw-100">
|
||||
<div class="col">
|
||||
<div class="mb-1">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Articles</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}
|
||||
<h2 class="page-title">
|
||||
<span class="text-truncate"
|
||||
>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
|
||||
woods.</span
|
||||
>
|
||||
<span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
@@ -151,5 +72,5 @@ You can use breadcrumbs in headers to show the current page location and provide
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ As one of the most common elements of UI design, buttons have a very important f
|
||||
<input type="submit" class="btn" value="Submit" />
|
||||
<input type="reset" class="btn" value="Reset" />
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Default button
|
||||
|
||||
@@ -25,7 +25,7 @@ The standard button creates a white background and subtle hover animation. It's
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button variations
|
||||
|
||||
@@ -41,7 +41,7 @@ Use the button classes that correspond to the function of your button. The big r
|
||||
<a href="#" class="btn btn-dark">Dark</a>
|
||||
<a href="#" class="btn btn-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Disabled buttons
|
||||
|
||||
@@ -57,7 +57,7 @@ Make buttons look inactive to show that an action is possible once the user meet
|
||||
<a href="#" class="btn btn-dark disabled">Dark</a>
|
||||
<a href="#" class="btn btn-light disabled">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Color variations
|
||||
|
||||
@@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d
|
||||
<a href="#" class="btn btn-teal">Teal</a>
|
||||
<a href="#" class="btn btn-cyan">Cyan</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
{%- include "docs/example.html" html=html separated centered %}
|
||||
|
||||
## Ghost buttons
|
||||
|
||||
@@ -95,7 +95,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
|
||||
<a href="#" class="btn btn-ghost-light">Light</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical -%}
|
||||
{%- include "docs/example.html" html=html separated vertical %}
|
||||
|
||||
## Square buttons
|
||||
|
||||
@@ -104,7 +104,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-square">Square button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Pill buttons
|
||||
|
||||
@@ -113,7 +113,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-pill">Pill button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Outline buttons
|
||||
|
||||
@@ -129,7 +129,7 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
|
||||
<a href="#" class="btn btn-outline-dark">Dark</a>
|
||||
<a href="#" class="btn btn-outline-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button size
|
||||
|
||||
@@ -139,13 +139,13 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-lg">Large button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-sm">Small button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
@@ -179,7 +179,7 @@ See all icons at [tabler.io/icons]({{ site.icons.link }}).
|
||||
Comment
|
||||
</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Social buttons
|
||||
|
||||
@@ -243,7 +243,7 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
Tabler
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook">
|
||||
@@ -298,7 +298,7 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
{%- include "ui/icon.html" icon="brand-tabler" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated vertical hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
@@ -333,7 +333,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
{%- include "ui/icon.html" icon="git-merge" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code %}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
@@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered hide-code height="260px" -%}
|
||||
{%- include "docs/example.html" html=html centered hide-code height="260px" %}
|
||||
|
||||
```html
|
||||
<div class="dropdown">
|
||||
@@ -399,7 +399,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
Loading button with loooong content
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary">
|
||||
@@ -407,7 +407,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
Button
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## List of buttons
|
||||
|
||||
@@ -420,7 +420,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
|
||||
<a href="#" class="btn btn-danger">Cancel</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
|
||||
|
||||
@@ -447,7 +447,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
|
||||
<a href="#" class="btn">Nineteen</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
|
||||
|
||||
@@ -457,7 +457,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list justify-content-end">
|
||||
@@ -465,7 +465,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
@@ -474,7 +474,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
@@ -507,4 +507,4 @@ Use buttons with avatars to simplify the process of interaction and make your de
|
||||
Avatar
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -14,55 +14,22 @@ To use vector maps in your project, you need to include the jsVectorMap library
|
||||
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
|
||||
```
|
||||
|
||||
## Sample demo
|
||||
## Default map
|
||||
|
||||
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
|
||||
|
||||
```html
|
||||
<div id="map-world" class="w-100 h-100"></div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world",
|
||||
map: "world",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="empty" %}
|
||||
{{ script }}
|
||||
```
|
||||
|
||||
## Sample demo
|
||||
|
||||
Look at the example below to see how the vector map works with a world map.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div>
|
||||
<div id="map-world" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world",
|
||||
map: "world",
|
||||
backgroundColor: "transparent",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: "var(--tblr-body-bg)",
|
||||
stroke: "var(--tblr-border-color)",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="world" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
@@ -71,99 +38,17 @@ Look at the example below to see how the vector map works with a world map.
|
||||
You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div>
|
||||
<div id="map-world-markers" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const map = new jsVectorMap({
|
||||
selector: "#map-world-markers",
|
||||
map: "world_merc",
|
||||
backgroundColor: "transparent",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: "var(--tblr-body-bg)",
|
||||
stroke: "var(--tblr-border-color)",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
markers: [
|
||||
{
|
||||
coords: [61.524, 105.3188],
|
||||
name: "Russia",
|
||||
},
|
||||
{
|
||||
coords: [56.1304, -106.3468],
|
||||
name: "Canada",
|
||||
},
|
||||
{
|
||||
coords: [71.7069, -42.6043],
|
||||
name: "Greenland",
|
||||
},
|
||||
{
|
||||
coords: [26.8206, 30.8025],
|
||||
name: "Egypt",
|
||||
},
|
||||
{
|
||||
coords: [-14.235, -51.9253],
|
||||
name: "Brazil",
|
||||
},
|
||||
{
|
||||
coords: [35.8617, 104.1954],
|
||||
name: "China",
|
||||
},
|
||||
{
|
||||
coords: [37.0902, -95.7129],
|
||||
name: "United States",
|
||||
},
|
||||
{
|
||||
coords: [60.472024, 8.468946],
|
||||
name: "Norway",
|
||||
},
|
||||
{
|
||||
coords: [48.379433, 31.16558],
|
||||
name: "Ukraine",
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 4,
|
||||
stroke: "#fff",
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: 0.5,
|
||||
fill: "var(--tblr-primary)",
|
||||
},
|
||||
hover: {
|
||||
fill: "var(--tblr-primary)",
|
||||
stroke: "var(--tblr-primary)",
|
||||
},
|
||||
},
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name;
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% include "ui/map-vector.html" map-id="world-markers" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Lines
|
||||
|
||||
You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/map-vector.html" map-id="world-lines" %}
|
||||
{{ script }}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
@@ -163,7 +163,17 @@ export default function (eleventyConfig) {
|
||||
children: []
|
||||
}
|
||||
}).sort((a, b) => {
|
||||
return (a.data.order || 999) - (b.data.order || 999);
|
||||
const orderA = a.data.order ?? 999;
|
||||
const orderB = b.data.order ?? 999;
|
||||
|
||||
if (orderA !== orderB) {
|
||||
return orderA - orderB;
|
||||
}
|
||||
|
||||
const titleA = a.data.title ?? '';
|
||||
const titleB = b.data.title ?? '';
|
||||
|
||||
return titleA.localeCompare(titleB);
|
||||
});
|
||||
|
||||
return buildCollectionTree(a);
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.8.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
|
||||
37
pnpm-lock.yaml
generated
37
pnpm-lock.yaml
generated
@@ -128,6 +128,9 @@ importers:
|
||||
choices.js:
|
||||
specifier: ^11.1.0
|
||||
version: 11.1.0
|
||||
clipboard:
|
||||
specifier: ^2.0.11
|
||||
version: 2.0.11
|
||||
countup.js:
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.2
|
||||
@@ -216,6 +219,9 @@ importers:
|
||||
choices.js:
|
||||
specifier: ^11.1.0
|
||||
version: 11.1.0
|
||||
clipboard:
|
||||
specifier: ^2.0.11
|
||||
version: 2.0.11
|
||||
countup.js:
|
||||
specifier: ^2.8.2
|
||||
version: 2.8.2
|
||||
@@ -1235,6 +1241,9 @@ packages:
|
||||
resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
|
||||
engines: {node: '>= 10.0'}
|
||||
|
||||
clipboard@2.0.11:
|
||||
resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
|
||||
|
||||
cliui@8.0.1:
|
||||
resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -1360,6 +1369,9 @@ packages:
|
||||
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
|
||||
engines: {node: '>=0.4.0'}
|
||||
|
||||
delegate@3.2.0:
|
||||
resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
|
||||
|
||||
depd@2.0.0:
|
||||
resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
|
||||
engines: {node: '>= 0.8'}
|
||||
@@ -1722,6 +1734,9 @@ packages:
|
||||
resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
good-listener@1.2.2:
|
||||
resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
|
||||
|
||||
gopd@1.2.0:
|
||||
resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -2624,6 +2639,9 @@ packages:
|
||||
resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
select@1.1.2:
|
||||
resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
|
||||
|
||||
semver-compare@1.0.0:
|
||||
resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
|
||||
|
||||
@@ -2870,6 +2888,9 @@ packages:
|
||||
thenby@1.3.4:
|
||||
resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
|
||||
|
||||
tiny-emitter@2.1.0:
|
||||
resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
|
||||
|
||||
tinyglobby@0.2.13:
|
||||
resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
@@ -4273,6 +4294,12 @@ snapshots:
|
||||
dependencies:
|
||||
source-map: 0.6.1
|
||||
|
||||
clipboard@2.0.11:
|
||||
dependencies:
|
||||
good-listener: 1.2.2
|
||||
select: 1.1.2
|
||||
tiny-emitter: 2.1.0
|
||||
|
||||
cliui@8.0.1:
|
||||
dependencies:
|
||||
string-width: 4.2.3
|
||||
@@ -4385,6 +4412,8 @@ snapshots:
|
||||
|
||||
delayed-stream@1.0.0: {}
|
||||
|
||||
delegate@3.2.0: {}
|
||||
|
||||
depd@2.0.0: {}
|
||||
|
||||
dependency-graph@1.0.0: {}
|
||||
@@ -4760,6 +4789,10 @@ snapshots:
|
||||
merge2: 1.4.1
|
||||
slash: 3.0.0
|
||||
|
||||
good-listener@1.2.2:
|
||||
dependencies:
|
||||
delegate: 3.2.0
|
||||
|
||||
gopd@1.2.0: {}
|
||||
|
||||
graceful-fs@4.2.11: {}
|
||||
@@ -5611,6 +5644,8 @@ snapshots:
|
||||
extend-shallow: 2.0.1
|
||||
kind-of: 6.0.3
|
||||
|
||||
select@1.1.2: {}
|
||||
|
||||
semver-compare@1.0.0: {}
|
||||
|
||||
semver@5.7.2: {}
|
||||
@@ -5874,6 +5909,8 @@ snapshots:
|
||||
|
||||
thenby@1.3.4: {}
|
||||
|
||||
tiny-emitter@2.1.0: {}
|
||||
|
||||
tinyglobby@0.2.13:
|
||||
dependencies:
|
||||
fdir: 6.4.4(picomatch@4.0.2)
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.8.2",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
|
||||
"typed.js": "typed.js/dist/typed.umd.js",
|
||||
"signature_pad": "signature_pad/dist/signature_pad.umd.min.js",
|
||||
"clipboard": "clipboard/dist/clipboard.min.js",
|
||||
"fullcalendar": "fullcalendar/index.global.min.js"
|
||||
},
|
||||
"js-head": {
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
{
|
||||
"empty": {
|
||||
"title": "Empty map",
|
||||
"map": "world",
|
||||
"color": "primary"
|
||||
},
|
||||
"world": {
|
||||
"title": "World map",
|
||||
"map": "world",
|
||||
|
||||
@@ -34,6 +34,17 @@ export function appFilters(eleventyConfig) {
|
||||
}
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("escape_attribute", (text) => {
|
||||
return text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/\r\n/g, ' ')
|
||||
.replace(/[\r\n]/g, ' ');
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("contains", (items, item) => {
|
||||
return items && Array.isArray(items) && items.includes(item);
|
||||
});
|
||||
@@ -149,7 +160,6 @@ export function appFilters(eleventyConfig) {
|
||||
|
||||
// Convert a URL path to an absolute URL
|
||||
eleventyConfig.addFilter("absolute_url", function (url) {
|
||||
// Base URL for the site - change this to your production domain
|
||||
const baseUrl = "https://docs.tabler.io";
|
||||
|
||||
// Ensure url starts with a slash
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
<!--EXAMPLE-->
|
||||
<div
|
||||
class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
|
||||
{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} justify-content-center flex-fill flex-wrap gap-2{% if include.vertical %} flex-column{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
|
||||
{{ html | remove-href }}
|
||||
{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
|
||||
{{ include.html | remove-href }}
|
||||
{%- unless include.raw -%}</div>{%- endunless -%}
|
||||
</div>
|
||||
|
||||
{% unless include.hide-code %}
|
||||
<div class="position-relative">
|
||||
<a class="btn btn-icon btn-dark position-absolute m-2 top-0 end-0 z-3" data-clipboard-text="{{ include.html | escape_attribute }}">
|
||||
{% include "ui/icon.html" icon="clipboard" %}
|
||||
{% include "ui/icon.html" icon="check" class="d-none" %}
|
||||
</a>
|
||||
|
||||
```html
|
||||
{{ html }}
|
||||
{{ include.html }}
|
||||
```
|
||||
|
||||
</div>
|
||||
{% endunless %}
|
||||
<!--/EXAMPLE-->
|
||||
@@ -1,5 +1,9 @@
|
||||
{%- assign el = 'span' -%}
|
||||
<{{ 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 %}">
|
||||
<{{ el }} class="badge{% if include.scale %} badge-{{ include.scale }}{% endif %}{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% endif %} text-{{ include.color }}{% if include.light %}-lt{% endif %}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{%- if include.icon -%}
|
||||
{%- assign icon = include.icon -%}
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
{%- endif -%}
|
||||
{%- if include.person-id -%}
|
||||
{%- assign person-id = include.person-id | minus: 1 -%}
|
||||
{%- assign person = people[person-id] -%}
|
||||
|
||||
@@ -1,10 +1,20 @@
|
||||
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," %}
|
||||
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
|
||||
{% for page in breadcrumb-pages %}
|
||||
{% if forloop.last %}
|
||||
<li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-item"><a href="#">{{ page }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
|
||||
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}" aria-label="breadcrumbs">
|
||||
{%- for page in breadcrumb-pages -%}
|
||||
{%- if forloop.last -%}
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
<a href="#">{{ page }}</a>
|
||||
</li>
|
||||
{%- else -%}
|
||||
<li class="breadcrumb-item">
|
||||
{% if forloop.first and include.home-icon-%}
|
||||
<a href="{{ site.baseurl }}/">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</a>
|
||||
{%- else -%}
|
||||
<a href="#">{{ page }}</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ol>
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
{% removeemptylines %}
|
||||
{% assign id = include.map-id %}
|
||||
{% assign data = maps-vector[id] %}
|
||||
{% assign color = include.color | default: data.color | default: 'green' %}
|
||||
{% assign color = include.color | default: data.color | default: 'primary' %}
|
||||
|
||||
{% if data %}
|
||||
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
|
||||
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
|
||||
<div>
|
||||
<div id="map-{{ id }}" class="w-100 h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture script %}
|
||||
<script>
|
||||
{% capture script %}
|
||||
{% removeemptylines %}
|
||||
<script>
|
||||
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
@@ -104,14 +106,12 @@
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% endremoveemptylines %}
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
|
||||
{% if include.show-scripts %}
|
||||
{% capture_script %}
|
||||
{{ script }}
|
||||
{% else %}
|
||||
{% capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
{% endif %}
|
||||
{% endcapture_script %}
|
||||
{% endif %}
|
||||
{% endremoveemptylines %}
|
||||
@@ -178,9 +178,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if docs-libs -%}
|
||||
{% for lib in libs.js -%}
|
||||
{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%}
|
||||
{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] or lib[0] == "clipboard" -%}
|
||||
{% for file in lib[1] -%}
|
||||
<script
|
||||
src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}"
|
||||
@@ -188,7 +187,41 @@
|
||||
{% endfor -%}
|
||||
{% endif -%}
|
||||
{% endfor -%}
|
||||
{% endif -%}
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elements = document.querySelectorAll('[data-clipboard-text]');
|
||||
|
||||
elements.forEach(function (element) {
|
||||
const clipboard = new ClipboardJS(element, {
|
||||
text: function (trigger) {
|
||||
return element.getAttribute('data-clipboard-text');
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
e.clearSelection();
|
||||
e.trigger.classList.add('btn-success');
|
||||
e.trigger.classList.remove('btn-dark');
|
||||
e.trigger.children[0].classList.add('d-none');
|
||||
e.trigger.children[1].classList.remove('d-none');
|
||||
|
||||
setTimeout(function () {
|
||||
e.trigger.classList.remove('btn-success');
|
||||
e.trigger.classList.add('btn-dark');
|
||||
|
||||
e.trigger.children[0].classList.remove('d-none');
|
||||
e.trigger.children[1].classList.add('d-none');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
console.error('Error copying text: ', e);
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
|
||||
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
|
||||
|
||||
Reference in New Issue
Block a user