mirror of
https://github.com/tabler/tabler.git
synced 2026-07-23 19:50:59 +04:00
Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
codecalm
@@ -1,16 +1,31 @@
|
||||
|
||||
# Tabler
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
|
||||
A premium and open source dashboard template with a responsive and high-quality UI.
|
||||
</p>
|
||||
|
||||
<a href="https://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/dev.zip">Download ZIP</a>
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
|
||||
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
|
||||
<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
|
||||
<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
|
||||
<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
|
||||
<br>
|
||||
<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
|
||||
</p>
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/codecalm">
|
||||
<img src='https://cdn.jsdelivr.net/gh/tabler/static/sponsors.svg'>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
## Status
|
||||
## Preview
|
||||
|
||||
<a href="#backers" alt="Backers Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/@tabler/core.svg" alt="Latest Release"></a>
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me demo</a>
|
||||
|
||||
<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
|
||||
|
||||
|
||||
## Features
|
||||
@@ -24,7 +39,6 @@ We've created this admin panel for everyone who wants to create templates based
|
||||
* **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
|
||||
* **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
|
||||
|
||||
|
||||
## Sponsor Tabler
|
||||
|
||||
<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
|
||||
|
||||
+7
-2
@@ -11,7 +11,7 @@ import './dropdown';
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
let options = {
|
||||
delay: {show: 50, hide: 50},
|
||||
html: true,
|
||||
html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
|
||||
placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
|
||||
};
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, options);
|
||||
@@ -23,7 +23,7 @@ import './dropdown';
|
||||
popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
let options = {
|
||||
delay: {show: 50, hide: 50},
|
||||
html: popoverTriggerEl.getAttribute('data-bs-html') ?? false,
|
||||
html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
|
||||
placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
|
||||
};
|
||||
return new bootstrap.Popover(popoverTriggerEl, options);
|
||||
@@ -44,4 +44,9 @@ import './dropdown';
|
||||
});
|
||||
});
|
||||
|
||||
let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
|
||||
toastsTriggerList.map(function (toastTriggerEl) {
|
||||
return new bootstrap.Toast(toastTriggerEl);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
@@ -10,6 +10,6 @@ menu: docs.components.form-helpers
|
||||
Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
|
||||
|
||||
{% capture code %}
|
||||
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
||||
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic
|
||||
If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
|
||||
|
||||
{% capture code %}
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -60,8 +60,8 @@
|
||||
</div>
|
||||
<div class="col-auto align-self-center">
|
||||
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
|
||||
data-html="true">?</span>
|
||||
data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
|
||||
data-bs-html="true">?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign person-id = include.person-id | default: 2 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
|
||||
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
|
||||
{% unless include.hide-header %}
|
||||
<div class="toast-header">
|
||||
{% include ui/avatar.html person=person class="me-2" size="xs" %}
|
||||
|
||||
Reference in New Issue
Block a user