1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-28 05:54:53 +04:00

Merge branch 'dev' into dev-countup

This commit is contained in:
Dawid Harat
2020-01-03 20:57:07 +01:00
committed by GitHub
438 changed files with 681 additions and 1751 deletions
+1 -1
View File
@@ -113,4 +113,4 @@ Make the list stack when it reaches a certain length.
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endexample %}
+29 -29
View File
@@ -27,7 +27,7 @@ Use any of the available button classes to quickly create a styled button . We p
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title %}
{% include ui/button.html color=btn-color text=btn-title %}
{% endfor %}
{% endexample %}
@@ -39,7 +39,7 @@ Make buttons look inactive by adding the disabled boolean attribute to any `.btn
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title disabled=true %}
{% include ui/button.html color=btn-color text=btn-title disabled=true %}
{% endfor %}
{% endexample %}
@@ -62,7 +62,7 @@ Add `.btn-square` to button to remove border-radius.
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title square=true %}
{% include ui/button.html color=btn-color text=btn-title square=true %}
{% endfor %}
{% endexample %}
@@ -74,7 +74,7 @@ Add `.btn-pill` class to any button to make them more rounded.
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title pill=true %}
{% include ui/button.html color=btn-color text=btn-title pill=true %}
{% endfor %}
{% endexample %}
@@ -86,7 +86,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html text=btn-title color=btn-color outline=true %}
{% include ui/button.html text=btn-title color=btn-color outline=true %}
{% endfor %}
{% endexample %}
@@ -119,27 +119,27 @@ Icons can be found [**here**](/docs/icons.html#icons)
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-dark">
{% include_cached ui/icon.html icon="upload" class="icon-sm" %}
{% include ui/icon.html icon="upload" class="icon-sm" %}
Upload
</button>
<button type="button" class="btn btn-warning">
{% include_cached ui/icon.html icon="heart" class="icon-sm" %}
{% include ui/icon.html icon="heart" class="icon-sm" %}
I like
</button>
<button type="button" class="btn btn-success">
{% include_cached ui/icon.html icon="check" class="icon-sm" %}
{% include ui/icon.html icon="check" class="icon-sm" %}
I agree
</button>
<button type="button" class="btn btn-outline-primary">
{% include_cached ui/icon.html icon="plus" class="icon-sm" %}
{% include ui/icon.html icon="plus" class="icon-sm" %}
More
</button>
<button type="button" class="btn btn-danger">
{% include_cached ui/icon.html icon="link" class="icon-sm" %}
{% include ui/icon.html icon="link" class="icon-sm" %}
Link
</button>
<button type="button" class="btn btn-info">
{% include_cached ui/icon.html icon="message-circle" class="icon-sm" %}
{% include ui/icon.html icon="message-circle" class="icon-sm" %}
Comment
</button>
{% endexample %}
@@ -153,7 +153,7 @@ A button can be formatted to link to a social website
{% assign btn-icon = button[1].icon %}
{% assign btn-title = button[1].title %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% include ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% endfor %}
{% endexample %}
@@ -163,7 +163,7 @@ You can use only icons.
{% for button in site.socials %}
{% assign btn-icon = button[1].icon %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% include ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% endfor %}
{% endexample %}
@@ -173,25 +173,25 @@ Icon only button. Add `.btn-icon` class to remove unnecessary padding from butto
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-icon btn-primary">
{% include_cached ui/icon.html icon="activity" class="icon-sm" %}
{% include ui/icon.html icon="activity" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-github">
{% include_cached ui/icon.html icon="github" class="icon-sm" %}
{% include ui/icon.html icon="github" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-success">
{% include_cached ui/icon.html icon="bell" class="icon-sm" %}
{% include ui/icon.html icon="bell" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-warning">
{% include_cached ui/icon.html icon="star" class="icon-sm" %}
{% include ui/icon.html icon="star" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-danger">
{% include_cached ui/icon.html icon="trash-2" class="icon-sm" %}
{% include ui/icon.html icon="trash-2" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-purple">
{% include_cached ui/icon.html icon="bar-chart" class="icon-sm" %}
{% include ui/icon.html icon="bar-chart" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-secondary">
{% include_cached ui/icon.html icon="git-merge" class="icon-sm" %}
{% include ui/icon.html icon="git-merge" class="icon-sm" %}
</button>
{% endexample %}
@@ -202,23 +202,23 @@ Wrap the dropdowns toggle (your button or link) and the dropdown menu within
{% example html wrapper=btn-list %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}
{% include ui/icon.html icon="calendar" class="icon-sm" %}
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
{% include ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
{% endexample %}
@@ -229,7 +229,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
{% example html wrapper=btn-list %}
{% include_cached ui/button.html color="primary" text="Button" spinner=true %}
{% include ui/button.html color="primary" text="Button" spinner=true %}
{% endexample %}
### List of buttons
@@ -290,13 +290,13 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="4" %} Avatar
{% include ui/avatar.html person-id="4" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="5" %} Avatar
{% include ui/avatar.html person-id="5" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="6" %} Avatar
{% include ui/avatar.html person-id="6" %} Avatar
</a>
{% endexample %}
+5 -5
View File
@@ -7,7 +7,7 @@ done: true
### Default markup
{% example html columns=1 %}
{% include_cached cards/ribbon.html %}
{% include cards/ribbon.html %}
{% endexample %}
### Ribbon position
@@ -22,7 +22,7 @@ You can easily change the position of a ribbon by adding a class to the element.
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_cached cards/ribbon.html top=true left=true %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
@@ -30,7 +30,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo
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_cached cards/ribbon.html color="red" %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
@@ -38,7 +38,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
Set your own text in a ribbon.
{% example html columns=1 %}
{% include_cached cards/ribbon.html color="green" text="-50%" %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
@@ -46,5 +46,5 @@ Set your own text in a ribbon.
Change the style of a ribbon.
{% example html columns=1 %}
{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
+5 -5
View File
@@ -44,9 +44,9 @@ done: true
### Buttons
{% example html wrapper=btn-list %}
{% include_cached ui/button.html spinner=true text="Button" color="primary" %}
{% include_cached ui/button.html spinner=true text="Button" color="danger" %}
{% include_cached ui/button.html spinner=true text="Button" color="warning" %}
{% include_cached ui/button.html spinner=true color="success" %}
{% include_cached ui/button.html spinner=true color="secondary" %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}
{% include ui/button.html spinner=true text="Button" color="warning" %}
{% include ui/button.html spinner=true color="success" %}
{% include ui/button.html spinner=true color="secondary" %}
{% endexample %}