@tabler/core 1.1.0 → 1.1.1

package/docs/ui/components/badges.mdx

@@ -0,0 +1,112 @@
+---
+title: Badges
+summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
+description: Add extra information with badges.
+bootstrapLink: components/badge/
+---
+
+## Default markup
+
+The default badges are square and come in the basic set of colors.
+
+```html example centered separated
+<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>
+```
+
+## Headings
+
+```html example columns={1} height="20rem" centered
+<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>
+```
+
+## Outline badges
+
+
+
+```html example centered separated
+<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>
+```
+
+## Pill badges
+
+Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
+
+```html example centered separated 
+<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>
+```
+
+## Links
+
+Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
+
+```html example centered separated 
+<a href="#" class="badge bg-blue-lt">Blue</a>
+<a href="#" class="badge bg-azure-lt">Azure</a>
+<a href="#" class="badge bg-indigo-lt">Indigo</a>
+<a href="#" class="badge bg-purple-lt">Purple</a>
+<a href="#" class="badge bg-pink-lt">Pink</a>
+<a href="#" class="badge bg-red-lt">Red</a>
+<a href="#" class="badge bg-orange-lt">Orange</a>
+<a href="#" class="badge bg-yellow-lt">Yellow</a>
+<a href="#" class="badge bg-lime-lt">Lime</a>
+<a href="#" class="badge bg-green-lt">Green</a>
+<a href="#" class="badge bg-teal-lt">Teal</a>
+<a href="#" class="badge bg-cyan-lt">Cyan</a>
+```
+
+## Button with badge
+
+Badges can be used as part of links or buttons to provide a counter.
+
+```
+<button type="button" class="btn">
+  Notifications <span class="badge bg-red-lt ms-2">4</span>
+</button>
+```
+
+The results can be seen in the example below.
+
+```html example centered separated
+<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span></button>
+<button type="button" class="btn">
+  Notifications <span class="badge bg-green-lt ms-2">4</span>
+</button>
+```

package/docs/ui/components/breadcrumb.mdx

@@ -0,0 +1,199 @@
+---
+title: Breadcrumb
+summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
+bootstrapLink: components/breadcrumb/
+description: Navigation aid for better structure.
+---
+
+## Default markup
+
+Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
+
+```html
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">...</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">...</a>
+  </li>
+</ol>
+```
+
+Look at the example below to see how breadcrumbs work in practice.
+
+```html example centered
+<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>
+```
+
+## Different separators
+
+You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
+
+```html
+<ol class="breadcrumb breadcrumb-dots">
+  ...
+</ol>
+```
+
+This example shows how to use different breadcrumb styles.
+
+```html example centered separated vertical
+<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>
+```
+
+## With icon
+
+You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
+
+```html example centered
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <polyline points="5 12 3 12 12 3 21 12 19 12" />
+        <path d="M5 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" />
+        <rect x="10" y="12" width="4" height="4" />
+      </svg>
+    </a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
+```
+
+## Muted breadcrumbs
+
+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.
+
+```html example centered
+<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>
+```
+
+## Breadcrumb in headers
+
+You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
+
+```html example vertical centered columns={3}
+<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>
+      <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
+        >
+      </h2>
+    </div>
+    <div class="col-auto">
+      <div class="btn-list">
+        <a href="#" class="btn d-none d-md-inline-flex">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+            <path d="M16 5l3 3" />
+          </svg>
+          Edit
+        </a>
+        <a href="#" class="btn btn-primary">Publish</a>
+      </div>
+    </div>
+  </div>
+</div>
+```
+