@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/badges.mdx

@@ -0,0 +1,127 @@
+---
+title: Badges
+description: 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.
+bootstrapLink: components/badge/
+---
+
+## Default markup
+
+The default badges are square and come in the basic set of colors.
+
+```html code example vertical centered separated scrollable height="15rem"
+<span class="badge bg-blue">Blue</span>
+<span class="badge bg-azure">Azure</span>
+<span class="badge bg-indigo">Indigo</span>
+<span class="badge bg-purple">Purple</span>
+<span class="badge bg-pink">Pink</span>
+<span class="badge bg-red">Red</span>
+<span class="badge bg-orange">Orange</span>
+<span class="badge bg-yellow">Yellow</span>
+<span class="badge bg-lime">Lime</span>
+<span class="badge bg-green">Green</span>
+<span class="badge bg-teal">Teal</span>
+<span class="badge bg-cyan">Cyan</span>
+```
+
+## Headings
+
+```html code example height="240px"
+<h1>Example heading <span class="badge bg-secondary">New</span></h1>
+<h2>Example heading <span class="badge bg-secondary">New</span></h2>
+<h3>Example heading <span class="badge bg-secondary">New</span></h3>
+<h4>Example heading <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading <span class="badge bg-secondary">New</span></h6>
+```
+
+## Outline badges
+
+```html code example vertical centered separated scrollable height="15rem"
+<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 code example centered separated height="7rem"
+<span class="badge badge-pill bg-blue">1</span>
+<span class="badge badge-pill bg-azure">2</span>
+<span class="badge badge-pill bg-indigo">3</span>
+<span class="badge badge-pill bg-purple">4</span>
+<span class="badge badge-pill bg-pink">5</span>
+<span class="badge badge-pill bg-red">6</span>
+<span class="badge badge-pill bg-orange">7</span>
+<span class="badge badge-pill bg-yellow">8</span>
+<span class="badge badge-pill bg-lime">9</span>
+<span class="badge badge-pill bg-green">10</span>
+<span class="badge badge-pill bg-teal">11</span>
+<span class="badge badge-pill bg-cyan">12</span>
+```
+
+## Soft color badges
+
+You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.
+
+```html code example vertical centered separated scrollable height="15rem"
+<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>
+```
+
+## Links
+
+Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
+
+```html code example vertical centered separated scrollable height="15rem"
+<a href="#" class="badge bg-blue">Blue</a>
+<a href="#" class="badge bg-azure">Azure</a>
+<a href="#" class="badge bg-indigo">Indigo</a>
+<a href="#" class="badge bg-purple">Purple</a>
+<a href="#" class="badge bg-pink">Pink</a>
+<a href="#" class="badge bg-red">Red</a>
+<a href="#" class="badge bg-orange">Orange</a>
+<a href="#" class="badge bg-yellow">Yellow</a>
+<a href="#" class="badge bg-lime">Lime</a>
+<a href="#" class="badge bg-green">Green</a>
+<a href="#" class="badge bg-teal">Teal</a>
+<a href="#" class="badge bg-cyan">Cyan</a>
+```
+
+## Button with badge
+
+Badges can be used as part of links or buttons to provide a counter.
+
+```html example centered separated height="7rem"
+<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
+<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
+```
+
+```html
+<button type="button" class="btn">
+  Notifications <span class="badge bg-red ms-2">4</span>
+</button>
+<button type="button" class="btn">
+  Notifications <span class="badge bg-green ms-2">4</span>
+</button>
+```

package/docs/components/breadcrumb.mdx

@@ -0,0 +1,107 @@
+---
+title: Breadcrumb
+description: 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/
+---
+
+## Default markup
+
+Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
+
+```html code example centered
+<ol class="breadcrumb" aria-label="breadcrumbs">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+</ol>
+```
+
+## Breadcrumb variations
+
+If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.
+
+```html code example centered
+<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+</ol>
+```
+
+```html code example centered
+<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+</ol>
+```
+
+```html code example centered
+<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+</ol>
+```
+
+## Breadcrumb in headers
+
+If you wish to use breadcrumbs in headers, place them above the 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" aria-label="breadcrumbs">
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
+          <li class="breadcrumb-item"><a href="#">Library</a></li>
+          <li class="breadcrumb-item active" aria-current="page"><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>
+```
+
+```html
+<div class="page-header">
+  <div class="row align-items-center mw-100">
+    <div class="col">
+      <div class="mb-1">
+        <ol class="breadcrumb" aria-label="breadcrumbs">
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
+          <li class="breadcrumb-item"><a href="#">Library</a></li>
+          <li class="breadcrumb-item active" aria-current="page"><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 icon from http://tabler-icons.io/i/edit -->
+          <svg>...</svg> Edit
+        </a>
+        <a href="#" class="btn btn-primary">Publish</a>
+      </div>
+    </div>
+  </div>
+</div>
+```