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

Merge branches 'dev' and 'dev-cursors-badges-colors' of https://github.com/tabler/tabler into dev-cursors-badges-colors

Browse Source 
 Conflicts:
	pages/colors.html
This commit is contained in:
codecalm
2019-12-09 18:19:10 +01:00
parent 5995fe2a94 447a2f6703
commit 432a80a130
27 changed files with 308 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/avatars.md
+51 -32
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 [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 %}
@@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endexample %}
pages/_docs/buttons.md
+3 -3
View File
@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
<input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %}
### Button variations
pages/_docs/divider.md
+21 -7
View File
@@ -6,20 +6,34 @@ done: true
### Default markup
{% example html max-width=300 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
</p>
<div class="hr-text">Left divider</div>
{% example html columns=1 %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-center">Centered divider</div>
{% include ui/hr.html text="Left divider" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-right">Right divider</div>
{% include ui/hr.html text="Centered divider" position="center" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Right divider" position="right" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
### Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Green divider" color="green" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
pages/_docs/flags.md
+4
View File
@@ -15,6 +15,8 @@ done: true
### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% 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 +26,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/progress.md
+1 -1
View File
@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100" />
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
pages/_docs/ribbons.md
+15
View File
@@ -12,24 +12,39 @@ new: true
### Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
`ribbon-top` - moves it to the top
`ribbon-right` - moves it to the right
`ribbon-bottom` - moves it to the bottom
`ribbon-left` - moves it to the lefg
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` 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.
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
pages/_docs/typography.md
+17 -17
View File
@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
### Semantic text elements
{% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %}
### Horizontal rules