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

Merge branch 'dev' of https://github.com/tabler/tabler into dev

Browse Source
This commit is contained in:
codecalm
2025-05-17 13:58:46 +02:00
parent 85f212293d 72a1d67709
commit 8e2acc82e0
36 changed files with 738 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/fifty-ways-mix.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Refactor SCSS variable names for shadows
.changeset/giant-ligers-joke.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fix some marketing site rows overflowing on mobile
.changeset/grumpy-bobcats-kick.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Use primary color for `::selection` inside `<code>` in docs
.changeset/lovely-trees-divide.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Add clipboard functionality to Tabler documentation
core/scss/tabler-vendors.scss
+1 -1
View File
@@ -13,4 +13,4 @@
@import "vendor/coloris";
@import "vendor/typed";
@import "vendor/turbo";
@import "vendor/fullcalendar";
core/scss/ui/_markdown.scss
+1 -1
View File
@@ -47,7 +47,7 @@ Markdown
border: 1px solid var(--#{$prefix}border-color);
}
> pre {
pre {
max-height: 20rem;
}
}
core/scss/vendor/_fullcalendar.scss
Vendored
+55
View File
@@ -0,0 +1,55 @@
:root {
--fc-border-color: var(--#{$prefix}border-color);
--fc-daygrid-event-dot-width: 5px;
--fc-event-bg-color: var(--#{$prefix}primary-lt);
--fc-event-border-color: var(--#{$prefix}primary-200);
--fc-event-text-color: var(--#{$prefix}body-color);
}
.fc-toolbar-title {
font-size: var(--#{$prefix}font-size-h3) !important;
font-weight: var(--#{$prefix}font-weight-medium);
}
.fc-daygrid-dot-event {
background-color: var(--fc-event-bg-color);
border: 1px solid var(--fc-event-border-color);
color: var(--fc-event-text-color);
padding-top: 1px;
padding-bottom: 1px;
.fc-event-title {
font-weight: inherit;
}
}
.fc-col-header-cell {
background-color: var(--#{$prefix}bg-surface-secondary);
color: var(--#{$prefix}secondary);
text-transform: uppercase;
font-weight: var(--#{$prefix}font-weight-medium);
font-size: var(--#{$prefix}font-size-h5);
padding-top: .5rem !important;
padding-bottom: .5rem !important;
line-height: 1;
}
.fc-event-time {
font-weight: var(--#{$prefix}font-weight-bold) !important;
}
.fc-col-header-cell-cushion {
color: inherit;
}
.fc-daygrid-day-number {
color: var(--#{$prefix}secondary);
}
.fc-button {
color: var(--#{$prefix}body-color) !important;
background-color: transparent !important;
border-color: var(--#{$prefix}border-color) !important;
font-weight: var(--#{$prefix}font-weight-medium) !important;
}
docs/content/ui/components/badges.md
+119 -46
View File
@@ -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.
docs/content/ui/components/breadcrumb.md
+11 -90
View File
@@ -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 %}
docs/content/ui/components/buttons.md
+24 -24
View File
@@ -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 %}
docs/content/ui/components/vector-maps.md
+19 -134
View File
@@ -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 %}
docs/eleventy.config.mjs
+11 -1
View File
@@ -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);
docs/js/docs.js
+1 -1
View File
@@ -5,4 +5,4 @@ docsearch({
appId: "NE1EGTYLS9",
indexName: "tabler",
apiKey: "016353235ef1dd32a6c392be0e939058",
});
});
docs/package.json
+1
View File
@@ -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",
docs/scss/docs.scss
+6
View File
@@ -53,3 +53,9 @@
background: var(--tblr-gray-900) !important;
color: var(--tblr-gray-300) !important;
}
code {
::selection {
background: var(--tblr-primary);
}
}
pnpm-lock.yaml
Generated
+158 -41
View File
@@ -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
@@ -188,7 +191,7 @@ importers:
version: 6.1.8
shiki:
specifier: ^3.2.2
version: 3.3.0
version: 3.2.2
preview:
dependencies:
@@ -213,6 +216,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
@@ -225,6 +231,9 @@ importers:
fslightbox:
specifier: ^3.6.0
version: 3.6.0
fullcalendar:
specifier: ^6.1.17
version: 6.1.17
hugerte:
specifier: ^1.0.9
version: 1.0.9
@@ -561,6 +570,34 @@ packages:
'@emnapi/runtime@1.4.3':
resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
'@fullcalendar/core@6.1.17':
resolution: {integrity: sha512-0W7lnIrv18ruJ5zeWBeNZXO8qCWlzxDdp9COFEsZnyNjiEhUVnrW/dPbjRKYpL0edGG0/Lhs0ghp1z/5ekt8ZA==}
'@fullcalendar/daygrid@6.1.17':
resolution: {integrity: sha512-K7m+pd7oVJ9fW4h7CLDdDGJbc9szJ1xDU1DZ2ag+7oOo1aCNLv44CehzkkknM6r8EYlOOhgaelxQpKAI4glj7A==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/interaction@6.1.17':
resolution: {integrity: sha512-AudvQvgmJP2FU89wpSulUUjeWv24SuyCx8FzH2WIPVaYg+vDGGYarI7K6PcM3TH7B/CyaBjm5Rqw9lXgnwt5YA==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/list@6.1.17':
resolution: {integrity: sha512-fkyK49F9IxwlGUBVhJGsFpd/LTi/vRVERLIAe1HmBaGkjwpxnynm8TMLb9mZip97wvDk3CmZWduMe6PxscAlow==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/multimonth@6.1.17':
resolution: {integrity: sha512-ZxA9mkTzKayCdxR5je9P9++qqhSeSbuvXmvZ6doZw6omv8K52cD7XJii+P7gvxATXxtI6hg4i+DuMyOHxP1E2g==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/timegrid@6.1.17':
resolution: {integrity: sha512-K4PlA3L3lclLOs3IX8cvddeiJI9ZVMD7RA9IqaWwbvac771971foc9tFze9YY+Pqesf6S+vhS2dWtEVlERaGlQ==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@hotwired/turbo@8.0.13':
resolution: {integrity: sha512-M7qXUqcGab6G5PKOiwhgbByTtrPgKPFCTMNQ52QhzUEXEqmp0/ApEguUesh/FPiUjrmFec+3lq98KsWnYY2C7g==}
engines: {node: '>= 14'}
@@ -901,23 +938,23 @@ packages:
cpu: [x64]
os: [win32]
'@shikijs/core@3.3.0':
resolution: {integrity: sha512-CovkFL2WVaHk6PCrwv6ctlmD4SS1qtIfN8yEyDXDYWh4ONvomdM9MaFw20qHuqJOcb8/xrkqoWQRJ//X10phOQ==}
'@shikijs/core@3.2.2':
resolution: {integrity: sha512-yvlSKVMLjddAGBa2Yu+vUZxuu3sClOWW1AG+UtJkvejYuGM5BVL35s6Ijiwb75O9QdEx6IkMxinHZSi8ZyrBaA==}
'@shikijs/engine-javascript@3.3.0':
resolution: {integrity: sha512-XlhnFGv0glq7pfsoN0KyBCz9FJU678LZdQ2LqlIdAj6JKsg5xpYKay3DkazXWExp3DTJJK9rMOuGzU2911pg7Q==}
'@shikijs/engine-javascript@3.2.2':
resolution: {integrity: sha512-tlDKfhWpF4jKLUyVAnmL+ggIC+0VyteNsUpBzh1iwWLZu4i+PelIRr0TNur6pRRo5UZIv3ss/PLMuwahg9S2hg==}
'@shikijs/engine-oniguruma@3.3.0':
resolution: {integrity: sha512-l0vIw+GxeNU7uGnsu6B+Crpeqf+WTQ2Va71cHb5ZYWEVEPdfYwY5kXwYqRJwHrxz9WH+pjSpXQz+TJgAsrkA5A==}
'@shikijs/engine-oniguruma@3.2.2':
resolution: {integrity: sha512-vyXRnWVCSvokwbaUD/8uPn6Gqsf5Hv7XwcW4AgiU4Z2qwy19sdr6VGzMdheKKN58tJOOe5MIKiNb901bgcUXYQ==}
'@shikijs/langs@3.3.0':
resolution: {integrity: sha512-zt6Kf/7XpBQKSI9eqku+arLkAcDQ3NHJO6zFjiChI8w0Oz6Jjjay7pToottjQGjSDCFk++R85643WbyINcuL+g==}
'@shikijs/langs@3.2.2':
resolution: {integrity: sha512-NY0Urg2dV9ETt3JIOWoMPuoDNwte3geLZ4M1nrPHbkDS8dWMpKcEwlqiEIGqtwZNmt5gKyWpR26ln2Bg2ecPgw==}
'@shikijs/themes@3.3.0':
resolution: {integrity: sha512-tXeCvLXBnqq34B0YZUEaAD1lD4lmN6TOHAhnHacj4Owh7Ptb/rf5XCDeROZt2rEOk5yuka3OOW2zLqClV7/SOg==}
'@shikijs/themes@3.2.2':
resolution: {integrity: sha512-Zuq4lgAxVKkb0FFdhHSdDkALuRpsj1so1JdihjKNQfgM78EHxV2JhO10qPsMrm01FkE3mDRTdF68wfmsqjt6HA==}
'@shikijs/types@3.3.0':
resolution: {integrity: sha512-KPCGnHG6k06QG/2pnYGbFtFvpVJmC3uIpXrAiPrawETifujPBv0Se2oUxm5qYgjCvGJS9InKvjytOdN+bGuX+Q==}
'@shikijs/types@3.2.2':
resolution: {integrity: sha512-a5TiHk7EH5Lso8sHcLHbVNNhWKP0Wi3yVnXnu73g86n3WoDgEra7n3KszyeCGuyoagspQ2fzvy4cpSc8pKhb0A==}
'@shikijs/vscode-textmate@10.0.2':
resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -1195,6 +1232,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'}
@@ -1320,6 +1360,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'}
@@ -1398,6 +1441,9 @@ packages:
electron-to-chromium@1.5.149:
resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
emoji-regex-xs@1.0.0:
resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1620,6 +1666,9 @@ packages:
fslightbox@3.6.0:
resolution: {integrity: sha512-ZQFlDDy0BLTbcoKss9KIcNv5g2IJ8vxFzuSIqRZe0iL7cYq9yyPXpnRYey/+jznN0DN3KanYQb+G+ncH7qz3XA==}
fullcalendar@6.1.17:
resolution: {integrity: sha512-5pq3jYo9cJnVn8TrnukJdP3uNZWk2V1uiTqVXIaSbO5qIXeF3H1jE11PAB5fBOacnZ9HLI/98IT82Y1rz/2VIw==}
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@@ -1679,6 +1728,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'}
@@ -2218,11 +2270,11 @@ packages:
resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
engines: {node: '>=6'}
oniguruma-parser@0.12.1:
resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
oniguruma-parser@0.11.2:
resolution: {integrity: sha512-F7Ld4oDZJCI5/wCZ8AOffQbqjSzIRpKH7I/iuSs1SkhZeCj0wS6PMZ4W6VA16TWHrAo0Y9bBKEJOe7tvwcTXnw==}
oniguruma-to-es@4.3.3:
resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
oniguruma-to-es@4.2.0:
resolution: {integrity: sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g==}
openapi-fetch@0.13.5:
resolution: {integrity: sha512-AQK8T9GSKFREFlN1DBXTYsLjs7YV2tZcJ7zUWxbjMoQmj8dDSFRrzhLCbHPZWA1TMV3vACqfCxLEZcwf2wxV6Q==}
@@ -2405,6 +2457,9 @@ packages:
resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==}
engines: {node: '>=12.0.0'}
preact@10.12.1:
resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
preact@10.26.5:
resolution: {integrity: sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==}
@@ -2566,6 +2621,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==}
@@ -2627,8 +2685,8 @@ packages:
engines: {node: '>=18'}
hasBin: true
shiki@3.3.0:
resolution: {integrity: sha512-j0Z1tG5vlOFGW8JVj0Cpuatzvshes7VJy5ncDmmMaYcmnGW0Js1N81TOW98ivTFNZfKRn9uwEg/aIm638o368g==}
shiki@3.2.2:
resolution: {integrity: sha512-0qWBkM2t/0NXPRcVgtLhtHv6Ak3Q5yI4K/ggMqcgLRKm4+pCs3namgZlhlat/7u2CuqNtlShNs9lENOG6n7UaQ==}
shx@0.4.0:
resolution: {integrity: sha512-Z0KixSIlGPpijKgcH6oCMCbltPImvaKy0sGH8AkLRXw1KyzpKtaCTizP2xen+hNDqVF4xxgvA0KXSb9o4Q6hnA==}
@@ -2813,6 +2871,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'}
@@ -3572,6 +3633,32 @@ snapshots:
tslib: 2.8.1
optional: true
'@fullcalendar/core@6.1.17':
dependencies:
preact: 10.12.1
'@fullcalendar/daygrid@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/interaction@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/list@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/multimonth@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/timegrid@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@hotwired/turbo@8.0.13': {}
'@img/sharp-darwin-arm64@0.33.5':
@@ -3847,33 +3934,33 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.40.2':
optional: true
'@shikijs/core@3.3.0':
'@shikijs/core@3.2.2':
dependencies:
'@shikijs/types': 3.3.0
'@shikijs/types': 3.2.2
'@shikijs/vscode-textmate': 10.0.2
'@types/hast': 3.0.4
hast-util-to-html: 9.0.5
'@shikijs/engine-javascript@3.3.0':
'@shikijs/engine-javascript@3.2.2':
dependencies:
'@shikijs/types': 3.3.0
'@shikijs/types': 3.2.2
'@shikijs/vscode-textmate': 10.0.2
oniguruma-to-es: 4.3.3
oniguruma-to-es: 4.2.0
'@shikijs/engine-oniguruma@3.3.0':
'@shikijs/engine-oniguruma@3.2.2':
dependencies:
'@shikijs/types': 3.3.0
'@shikijs/types': 3.2.2
'@shikijs/vscode-textmate': 10.0.2
'@shikijs/langs@3.3.0':
'@shikijs/langs@3.2.2':
dependencies:
'@shikijs/types': 3.3.0
'@shikijs/types': 3.2.2
'@shikijs/themes@3.3.0':
'@shikijs/themes@3.2.2':
dependencies:
'@shikijs/types': 3.3.0
'@shikijs/types': 3.2.2
'@shikijs/types@3.3.0':
'@shikijs/types@3.2.2':
dependencies:
'@shikijs/vscode-textmate': 10.0.2
'@types/hast': 3.0.4
@@ -4172,6 +4259,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
@@ -4284,6 +4377,8 @@ snapshots:
delayed-stream@1.0.0: {}
delegate@3.2.0: {}
depd@2.0.0: {}
dependency-graph@1.0.0: {}
@@ -4357,6 +4452,8 @@ snapshots:
electron-to-chromium@1.5.149: {}
emoji-regex-xs@1.0.0: {}
emoji-regex@8.0.0: {}
emoji-regex@9.2.2: {}
@@ -4572,6 +4669,15 @@ snapshots:
fslightbox@3.6.0: {}
fullcalendar@6.1.17:
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/interaction': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/list': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/multimonth': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/timegrid': 6.1.17(@fullcalendar/core@6.1.17)
function-bind@1.1.2: {}
fuse.js@7.1.0: {}
@@ -4650,6 +4756,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: {}
@@ -5139,11 +5249,12 @@ snapshots:
dependencies:
mimic-fn: 2.1.0
oniguruma-parser@0.12.1: {}
oniguruma-parser@0.11.2: {}
oniguruma-to-es@4.3.3:
oniguruma-to-es@4.2.0:
dependencies:
oniguruma-parser: 0.12.1
emoji-regex-xs: 1.0.0
oniguruma-parser: 0.11.2
regex: 6.0.1
regex-recursion: 6.0.2
@@ -5304,6 +5415,8 @@ snapshots:
posthtml-parser: 0.11.0
posthtml-render: 3.0.0
preact@10.12.1: {}
preact@10.26.5: {}
prettier@2.8.8: {}
@@ -5488,6 +5601,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: {}
@@ -5568,14 +5683,14 @@ snapshots:
interpret: 1.4.0
rechoir: 0.6.2
shiki@3.3.0:
shiki@3.2.2:
dependencies:
'@shikijs/core': 3.3.0
'@shikijs/engine-javascript': 3.3.0
'@shikijs/engine-oniguruma': 3.3.0
'@shikijs/langs': 3.3.0
'@shikijs/themes': 3.3.0
'@shikijs/types': 3.3.0
'@shikijs/core': 3.2.2
'@shikijs/engine-javascript': 3.2.2
'@shikijs/engine-oniguruma': 3.2.2
'@shikijs/langs': 3.2.2
'@shikijs/themes': 3.2.2
'@shikijs/types': 3.2.2
'@shikijs/vscode-textmate': 10.0.2
'@types/hast': 3.0.4
@@ -5751,6 +5866,8 @@ snapshots:
thenby@1.3.4: {}
tiny-emitter@2.1.0: {}
tinyglobby@0.2.13:
dependencies:
fdir: 6.4.4(picomatch@4.0.2)
preview/package.json
+2
View File
@@ -38,10 +38,12 @@
"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",
"fslightbox": "^3.6.0",
"fullcalendar": "^6.1.17",
"hugerte": "^1.0.9",
"imask": "^7.6.1",
"jsvectormap": "^1.6.0",
preview/pages/fullcalendar.html
+14
View File
@@ -0,0 +1,14 @@
---
title: Fullcalendar
page-header: Fullcalendar
page-menu: plugins.fullcalendar
layout: default
permalink: fullcalendar.html
page-libs: [fullcalendar]
---
<div class="card">
<div class="card-body">
{% include "ui/fullcalendar.html" sample-events %}
</div>
</div>
preview/pages/marketing/real-estate.html
+2 -2
View File
@@ -8,7 +8,7 @@ permalink: marketing/real-estate.html
<div class="container-narrow">
<h1 class="hero-title text-white">Find your forever home</h1>
<p class="hero-description mb-5 text-white text-opacity-50">It's time to find the home of your dreams, and you search begins here. We make it easy to find the property that fits your needs and budget.</p>
<div class="row gx-5 justify-content-center">
<div class="row gx-lg-5 justify-content-center">
<div class="col-xl-6 col-lg-8 text-center">
<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
<div class="col flex-grow-1">
@@ -25,7 +25,7 @@ permalink: marketing/real-estate.html
<section class="section section-white">
{% include "marketing/section-divider.html" divider="arc" %}
<div class="container">
<div class="row g-6">
<div class="row g-lg-6">
{% for building in real-estate %}
<div class="col-md-6 col-lg-4">
<div class="card">
shared/data/libs.json
+3 -1
View File
@@ -21,7 +21,9 @@
"star-rating.js": "star-rating.js/dist/star-rating.min.js",
"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"
"signature_pad": "signature_pad/dist/signature_pad.umd.min.js",
"clipboard": "clipboard/dist/clipboard.min.js",
"fullcalendar": "fullcalendar/index.global.min.js"
},
"js-head": {
"turbo": "@hotwired/turbo/dist/turbo.es2017-umd.js"
shared/data/maps-vector.json
+5
View File
@@ -1,4 +1,9 @@
{
"empty": {
"title": "Empty map",
"map": "world",
"color": "primary"
},
"world": {
"title": "World map",
"map": "world",
shared/data/menu.json
+4
View File
@@ -410,6 +410,10 @@
"title": "Dropzone",
"url": "dropzone.html"
},
"fullcalendar": {
"url": "fullcalendar.html",
"title": "Fullcalendar"
},
"plyr": {
"title": "Inline player",
"url": "inline-player.html"
shared/e11ty/filters.mjs
+11 -1
View File
@@ -34,6 +34,17 @@ export function appFilters(eleventyConfig) {
}
});
eleventyConfig.addFilter("escape_attribute", (text) => {
return text
.replace(/&/g, '&amp;')
.replace(/'/g, '&apos;')
.replace(/"/g, '&quot;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\r\n/g, '&#13;')
.replace(/[\r\n]/g, '&#13;');
});
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
shared/includes/docs/example.html
+11 -3
View File
@@ -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-->
shared/includes/marketing/hero/side.html
+1 -1
View File
@@ -1,6 +1,6 @@
<header class="hero">
<div class="container">
<div class="row g-8 align-items-center">
<div class="row g-lg-8 align-items-center">
<div class="col-md-6 text-center text-md-start">
<div class="hero-subheader">Tabler Emails</div>
<h1 class="hero-title">
shared/includes/marketing/sections/companies.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="section-header mb-6">
<h2 class="section-title text-secondary">Trusted by over 3,000 companies</h2>
</div>
<div class="row g-8 align-items-center justify-content-center">
<div class="row g-lg-8 align-items-center justify-content-center">
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/baremetrics.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/cgi.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/docplanner.svg" %}</a></div>
shared/includes/marketing/sections/faq.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="section-header">
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
<div class="row g-4">
<div class="row g-lg-4">
<div class="col-md-4 markdown">
<h3 class="h2">How is Tabler Pro different from Tabler?</h3>
<p class="text-secondary">Tabler offers fundamental components that you can piece together to build your app or website. However, Tabler Pro offers an elevated convenience by providing pre-assembled components and page templates, acting as ready-to-use building blocks that can be swiftly integrated into your app, thereby saving development time.</p>
shared/includes/marketing/sections/features-2.html
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="row g-10">
<div class="row g-lg-10">
<div class="col-lg-6 mb-3 mb-lg-0">{% include "ui/svg.html" width=500 height=400 border=true %}</div>
<div class="col-lg-6">
<div class="space-y-6">
shared/includes/marketing/sections/features-3.html
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="row g-10">
<div class="row g-lg-10">
<div class="col-lg-6">
<div class="space-y-6">
<div>
shared/includes/marketing/sections/testimonials.html
+2 -2
View File
@@ -9,12 +9,12 @@
</div>
{% endunless %}
<div class="row g-6">
<div class="row g-lg-6">
{% assign i = 1 %}
{% assign filtered-testimonials = testimonials | slice: 0, limit | split_to_n: 3 %}
{% for group in filtered-testimonials %}
<div class="col-md-6 col-lg-4">
<div class="row g-6">
<div class="row g-lg-6">
{% for testimonial in group %}
{% assign person = people[i] %}
<div class="col-12">
shared/includes/ui/badge.html
+5 -1
View File
@@ -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] -%}
shared/includes/ui/breadcrumb.html
+19 -9
View File
@@ -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>
shared/includes/ui/fullcalendar.html
+87
View File
@@ -0,0 +1,87 @@
{% removeemptylines %}
{% assign id = include.id | default: 'default' -%}
<div id="calendar-{{ id }}"></div>
{% capture script %}
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar-{{ id }}');
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
{% if include.sample-events %}
events: [
{
title: "Offsite Retreat",
start: new Date(currentYear, currentMonth, 2, 9, 0),
end: new Date(currentYear, currentMonth, 4, 17, 0),
color: 'var(--tblr-red)',
backgroundColor: 'var(--tblr-red-lt)',
borderColor: 'var(--tblr-red-200)',
},
{
title: "Monthly Planning",
start: new Date(currentYear, currentMonth, 1, 10, 0),
end: new Date(currentYear, currentMonth, 1, 11, 30),
},
{
title: "Marketing Strategy Call",
start: new Date(currentYear, currentMonth, 4, 14, 0),
end: new Date(currentYear, currentMonth, 4, 15, 0)
},
{
title: "Design Sprint",
start: new Date(currentYear, currentMonth, 7, 9, 0),
end: new Date(currentYear, currentMonth, 7, 12, 0)
},
{
title: "Dev Team Check-in",
start: new Date(currentYear, currentMonth, 10, 11, 0),
end: new Date(currentYear, currentMonth, 10, 11, 30)
},
{
title: "Customer Feedback Review",
start: new Date(currentYear, currentMonth, 13, 13, 0),
end: new Date(currentYear, currentMonth, 13, 14, 0)
},
{
title: "Mid-Month Review",
start: new Date(currentYear, currentMonth, 15, 10, 30),
end: new Date(currentYear, currentMonth, 15, 11, 30)
},
{
title: "Webinar: Product Update",
start: new Date(currentYear, currentMonth, 18, 16, 0),
end: new Date(currentYear, currentMonth, 18, 17, 0)
},
{
title: "Sales Training",
start: new Date(currentYear, currentMonth, 21, 9, 30),
end: new Date(currentYear, currentMonth, 21, 11, 0)
},
{
title: "Company All-Hands",
start: new Date(currentYear, currentMonth, 25, 15, 0),
end: new Date(currentYear, currentMonth, 25, 16, 0)
},
{
title: "End-of-Month Wrap-up",
start: new Date(currentYear, currentMonth, 31, 10, 0),
end: new Date(currentYear, currentMonth, 31, 11, 0)
}
],
{% endif %}
});
calendar.render();
});
</script>
{% endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endremoveemptylines %}
shared/includes/ui/map-vector.html
+101 -101
View File
@@ -1,117 +1,117 @@
{% 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>
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
<div>
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% capture script %}
<script>
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
{% capture script %}
{% removeemptylines %}
<script>
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
selector: '#map-{{ id }}',
map: '{{ data.map }}',
backgroundColor: 'transparent',
regionStyle: {
initial: {
{% unless data.filled %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-border-color)',
strokeWidth: 2,
{% else %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: '#fff',
strokeWidth: 1,
{% endunless %}
}
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
{% if data.values %}
series: {
regions: [{
attribute: "fill",
scale: {
{% for i in (1..10) %}
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
{% endfor %}
},
values: {{ data.values | json }},
}]
document.addEventListener("DOMContentLoaded", function() {
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
selector: '#map-{{ id }}',
map: '{{ data.map }}',
backgroundColor: 'transparent',
regionStyle: {
initial: {
{% unless data.filled %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-border-color)',
strokeWidth: 2,
{% else %}
fill: 'var(--tblr-bg-surface-secondary)',
stroke: '#fff',
strokeWidth: 1,
{% endunless %}
}
{% endif %}
{% if data.markers %}
markers: [
{% for marker in data.markers %}
{
coords: [{{ marker.coords }}],
name: "{{ marker.name }}",
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
{% if data.values %}
series: {
regions: [{
attribute: "fill",
scale: {
{% for i in (1..10) %}
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
{% endfor %}
},
{% endfor %}
],
markerStyle: {
initial: {
r: 4,
stroke: '#fff',
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
fill: 'var(--tblr-{{ color }})'
},
hover: {
fill: 'var(--tblr-{{ color }})',
stroke: 'var(--tblr-{{ color }})'
}
values: {{ data.values | json }},
}]
}
{% endif %}
{% if data.markers %}
markers: [
{% for marker in data.markers %}
{
coords: [{{ marker.coords }}],
name: "{{ marker.name }}",
},
markerLabelStyle: {
initial: {
fontSize: 10
{% endfor %}
],
markerStyle: {
initial: {
r: 4,
stroke: '#fff',
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
fill: 'var(--tblr-{{ color }})'
},
hover: {
fill: 'var(--tblr-{{ color }})',
stroke: 'var(--tblr-{{ color }})'
}
},
markerLabelStyle: {
initial: {
fontSize: 10
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
},
{% endif %}
{% if data.lines %}
lines: [
{% for line in data.lines %}
{
from: "{{ line.from }}",
to: "{{ line.to }}"
},
{% endif %}
{% if data.lines %}
lines: [
{% for line in data.lines %}
{
from: "{{ line.from }}",
to: "{{ line.to }}"
},
{% endfor %}
],
lineStyle: {
strokeDasharray:"4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
{% endif %}
});
window.addEventListener("resize", () => {
map.updateSize();
});
{% endfor %}
],
lineStyle: {
strokeDasharray:"4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
{% endif %}
});
</script>
{%- endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
window.addEventListener("resize", () => {
map.updateSize();
});
});
{% endremoveemptylines %}
</script>
{%- endcapture %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}
{% endremoveemptylines %}
shared/layouts/docs/default.html
+36 -3
View File
@@ -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>
shared/layouts/marketing.html
+4 -4
View File
@@ -11,9 +11,9 @@ plugins: marketing
<footer class="footer">
<div class="container">
<div class="py-3">
<div class="row g-4">
<div class="row g-lg-4">
<div class="col-lg-7">
<div class="row g-4">
<div class="row g-lg-4">
<div class="col-md">
<div class="subheader mb-3">Our products</div>
<ul class="list-unstyled list-separated gap-2">
@@ -72,7 +72,7 @@ plugins: marketing
</div>
</div>
<div class="row g-4 justify-content-between mt-0 mt-md-2">
<div class="row g-lg-4 justify-content-between mt-0 mt-md-2">
<div class="col-sm-7 col-md-6 col-lg-4">
<h5 class="subheader">Payment &amp; Security</h5>
<ul class="list-inline mb-0 mt-3">
@@ -126,7 +126,7 @@ plugins: marketing
<footer class="footer">
<div class="container">
<div class="py-3 border-top-light text-center text-lg-start">
<div class="row g-4">
<div class="row g-lg-4">
<div class="col-lg-auto text-lg-end order-lg-last">
<div class="row justify-center">
<div class="col-auto">