mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 12:22:23 +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
@@ -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 %}
|
||||
Reference in New Issue
Block a user