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

button components, small typo fixes

Browse Source
This commit is contained in:
codecalm
2019-12-03 17:55:58 +01:00
parent 53f8f6f828
commit bc8ac97a90
11 changed files with 183 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/buttons.md
+11 -20
View File
@@ -22,18 +22,17 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
<a href="#" class="btn btn-{{ button.name }}">{{ button.title }}</a>
{% for button in site.button-variants %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
{% endfor %}
<a href="#" class="btn btn-link">Link</a>
{% endexample %}
### Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include_cached ui/button.html color=button.name text=button.title disabled="true" %}
{% for button in site.button-variants %}
{% include_cached ui/button.html color=button.1.class text=button.title disabled=true %}
{% endfor %}
{% endexample %}
@@ -45,7 +44,7 @@ The classic button, in different colors.
{% example html wrapper=btn-list %}
{% for button in site.colors %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
{% endfor %}
{% endexample %}
@@ -54,8 +53,8 @@ The classic button, in different colors.
Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include_cached ui/button.html text=button.title color=button.name square=true %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class square=true %}
{% endfor %}
{% endexample %}
@@ -64,8 +63,8 @@ Add `.btn-square` to button to remove border-radius.
Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include_cached ui/button.html text=button.title color=button.name pill=true %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class pill=true %}
{% endfor %}
{% endexample %}
@@ -74,16 +73,8 @@ Add `.btn-pill` class to any button to make them more rounded.
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include_cached ui/button.html text=button.title color=button.name outline=true %}
{% endfor %}
{% endexample %}
### Button with star
{% example html %}
{% for button in site.button_variants %}
{% include_cached ui/button.html text="Button" label="star" color=button.name class="mr-2" %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class outline=true %}
{% endfor %}
{% endexample %}
pages/_includes/parts/buttons-table.html
+34
View File
@@ -0,0 +1,34 @@
{% assign prefix = include.prefix | default: 'btn-' %}
{% assign show-link = include.show-link | default: false %}
{% assign show-states = include.show-states | default: false %}
{% assign hide-labels = include.hide-labels | default: false %}
{% assign variants = include.variants | default: site.button-variants %}
{% for state in site.button-states %}
{% if show-states or (state.class != 'active' and state.class != 'disabled') %}
<div class="row row-sm align-items-center mb-n3{% unless forloop.first %} mt-3{% endunless %}">
{% unless hide-labels %}<div class="col-12 col-xl-2 mb-3 font-weight-semibold">{{ state.title }}</div>{% endunless %}
{% for type in variants %}
{% if show-link or type[0] != 'link' %}
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %} mb-3">
{% if include.icon == true %}
{% assign icon = type[1].icon %}
{% endif %}
{% assign class = prefix | append: type[0] %}
{% if state.class %}
{% assign class = class | append: ' ' | append: state.class %}
{% endif %}
{% if include.class %}
{% assign class = class | append: ' ' | append: include.class %}
{% endif %}
{% assign text = type[1].title %}
{% include_cached ui/button.html block=true class=class icon=icon icon-only=icon-only text=text %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
pages/buttons.html
+46 -47
View File
@@ -4,76 +4,75 @@ done: true
---
<div class="row">
<div class="col-md-6">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Standard Buttons</h3>
</div>
<div class="card-body">
<h3 class="card-title">Buttons</h3>
<div class="btn-list">
{% for color in site.colors %}
{% assign c = color[0] %}
{% include_cached ui/button.html text="Button" color=c %}
{% endfor %}
</div>
{% include parts/buttons-table.html show-link=true show-states=true %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Outline Buttons</h3>
</div>
<div class="card-body">
<h3 class="card-title">Outlined buttons</h3>
<div class="btn-list">
{% for color in site.colors %}
{% assign c = color[0] %}
{% include_cached ui/button.html text="Button" outline=true color=c %}
{% endfor %}
</div>
<p>Use <code>.btn-outline-*</code> class for outline buttons.
</p>
{% include parts/buttons-table.html prefix="btn-outline-" show-states=true %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Ghost Buttons</h3>
</div>
<div class="card-body">
<h3 class="card-title">Buttons with icons</h3>
<div class="btn-list">
{% for color in site.colors %}
{% assign c = color[0] %}
{% include_cached ui/button.html text="Button" color=c icon="star" %}
{% endfor %}
</div>
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
</p>
{% include parts/buttons-table.html prefix="btn-ghost-" show-states=true %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Square Buttons</h3>
</div>
<div class="card-body">
<h3 class="card-title">Outlined buttons with icons</h3>
<div class="btn-list">
{% for color in site.colors %}
{% assign c = color[0] %}
{% include_cached ui/button.html text="Button" outline=true color=c icon-right="star" %}
{% endfor %}
</div>
<p>Use <code>.btn-square</code> class for square buttons.
</p>
{% include parts/buttons-table.html class="btn-square" %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Pill Buttons</h3>
</div>
<div class="card-body">
<h3 class="card-title">Social buttons</h3>
<p>Use <code>.btn-pill</code> class for pill buttons.
</p>
{% include parts/buttons-table.html class="btn-pill" %}
</div>
</div>
<div class="btn-list">
{% for social in site.socials %}
{% include_cached ui/button.html text=social.title color=social.name icon=social.icon %}
{% endfor %}
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Extra colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.colors hide-labels=true icon="star" auto-columns=true %}
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Social colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon=true auto-columns=true %}
</div>
</div>
</div>