Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

fullfiled the avatars, ribbons and flags documentation

Browse Source
This commit is contained in:
itsMorte
2019-12-03 21:51:07 +01:00
parent bc8ac97a90
commit 3407502824
3 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/avatars.md
+50 -31
View File
@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %}
{% endexample %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatar initials color
Customize the color of the avatars' background. You can click You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### 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.
@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
{% include ui/avatar.html placeholder="CD" size="lg" %}
{% include ui/avatar.html placeholder="EF" size="md" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" size="sm" %}
{% endexample %}
### Avatar initials color
[See more]({% docs_url colors %})
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatars list
You can easily create a list of avatars.
{% example %}
{% include ui/avatar-list.html %}
{% endexample %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %}
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}
pages/_docs/flags.md
+9
View File
@@ -15,6 +15,13 @@ done: true
### Flag sizes
Change the flag size.
<ul>
<li><code>xl</code> - large</li>
<li><code>mr</code> - big</li>
<li><code>md</code> - medium</li>
</ul>
{% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +31,8 @@ done: true
### Types
To set the flag of the country you want add a class flag-(country name). For example to create a flag of Andorra your class should look like this: flag-ad.
<table>
{% for flag in site.data.flags %}
<tr>
pages/_docs/ribbons.md
+18
View File
@@ -12,24 +12,42 @@ new: true
### Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
<ul>
<li><code>ribbon-top</code> - moves it to the top</li>
<li><code>ribbon-right</code> - moves it to the right</li>
<li><code>ribbon-bottom</code> - moves it to the bottom</li>
<li><code>ribbon-left</code> - moves it to the lefg</li>
</ul>
You can also use multiple classes at once for example: <code><div class="ribbon ribbon-top ribbon-left"></div></code> moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
Change the style of a ribbon. Available styles:
<ul>
<li><code>ribbon-bookmark</code> - creates a indentation on the left</li>
</ul>
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}