mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
divider fixes, documentation
This commit is contained in:
codecalm
@@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Alerts
|
||||
menu: docs.alerts
|
||||
done: true
|
||||
---
|
||||
|
||||
Bootstrap provides an easy way to create predefined alert messages.
|
||||
|
||||
## Default markup
|
||||
### Default markup
|
||||
|
||||
{% example %}
|
||||
{% for variant in site.variants %}
|
||||
@@ -17,7 +18,7 @@ Bootstrap provides an easy way to create predefined alert messages.
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Alert Links
|
||||
### Alert Links
|
||||
|
||||
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
|
||||
|
||||
@@ -31,7 +32,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Dismissible Alerts
|
||||
### Dismissible Alerts
|
||||
|
||||
{% example %}
|
||||
{% for variant in site.variants %}
|
||||
@@ -42,7 +43,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
## Alerts with icons
|
||||
### Alerts with icons
|
||||
|
||||
{% example %}
|
||||
{% for variant in site.variants %}
|
||||
@@ -53,7 +54,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
## Alert with avatar
|
||||
### Alert with avatar
|
||||
{% assign person = site.data.people[1] %}
|
||||
{% example %}
|
||||
{% for variant in site.variants %}
|
||||
@@ -64,7 +65,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
## Alert with buttons
|
||||
### Alert with buttons
|
||||
{% example %}
|
||||
{% capture variant-text %}
|
||||
<h3>Some Title</h3>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Autosize
|
||||
done: true
|
||||
---
|
||||
|
||||
A small, stand-alone script to automatically adjust textarea height.
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Avatars
|
||||
menu: docs.avatars
|
||||
done: true
|
||||
---
|
||||
|
||||
Create and group avatars of various shapes and sizes with one component.
|
||||
|
||||
## Default markup
|
||||
### Default markup
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
@@ -13,7 +14,7 @@ Create and group avatars of various shapes and sizes with one component.
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
{% endexample %}
|
||||
|
||||
## Avatar size
|
||||
### Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
|
||||
|
||||
@@ -25,7 +26,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
|
||||
{% include ui/avatar.html person-id=6 size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
## Avatar status
|
||||
### Avatar status
|
||||
|
||||
Add an online or offline status indicator to show user's availability.
|
||||
|
||||
@@ -38,7 +39,7 @@ Add an online or offline status indicator to show user's availability.
|
||||
{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
|
||||
{% endexample %}
|
||||
|
||||
## Avatar shape
|
||||
### Avatar shape
|
||||
|
||||
Change the shape of an avatar with the default Bootstrap image classes.
|
||||
|
||||
@@ -50,7 +51,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
|
||||
{% endexample %}
|
||||
|
||||
## Initials
|
||||
### Initials
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" size="xl" %}
|
||||
@@ -61,7 +62,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Avatar initials color
|
||||
### Avatar initials color
|
||||
|
||||
[See more]({% docs_url colors %})
|
||||
|
||||
@@ -73,7 +74,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html placeholder="IJ" color="purple" %}
|
||||
{% endexample %}
|
||||
|
||||
## Avatar initials icons
|
||||
### Avatar initials icons
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html icon="user" %}
|
||||
@@ -81,7 +82,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html icon="user-plus" %}
|
||||
{% endexample %}
|
||||
|
||||
## Avatars list
|
||||
### Avatars list
|
||||
|
||||
{% example %}
|
||||
<div class="avatar-list">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Badges
|
||||
menu: docs.badges
|
||||
done: true
|
||||
---
|
||||
|
||||
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
---
|
||||
title: Divider
|
||||
description: A divider visually segments content into groups
|
||||
---
|
||||
|
||||
{% example html %}
|
||||
### Default markup
|
||||
|
||||
{% example html max-width=300 %}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? Aliquid atque deserunt dolore explicabo in, itaque laborum magnam minus odio placeat quibusdam reiciendis rem voluptatibus?
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
|
||||
</p>
|
||||
<h6 class="divider">OR</h6>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Aspernatur aut explicabo labore odit quisquam?
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Toasts
|
||||
menu: docs.toasts
|
||||
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
||||
---
|
||||
|
||||
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
||||
|
||||
## Default markup
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example %}
|
||||
{% include ui/toast.html %}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
---
|
||||
title: Tooltips
|
||||
menu: docs.tooltips
|
||||
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
|
||||
---
|
||||
|
||||
The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
|
||||
|
||||
|
||||
## Default markup
|
||||
### Default markup
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
@@ -23,7 +21,7 @@ The Tooltip component is small pop-up box that appears when the user moves the m
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
## Tooltip with HTML
|
||||
### Tooltip with HTML
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
|
||||
Reference in New Issue
Block a user