mirror of
https://github.com/tabler/tabler.git
synced 2026-07-30 06:54:39 +04:00
divider fixes, documentation
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user