Skip to content

T
Tabler

Dashboards / Tabler
11 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 ddc88dcf 编写于 作者: D Dawid Harat
浏览文件
操作

buttons docs fulfilled

上级 47f8ca10
隐藏空白更改
内联 并排
Showing with 73 addition and 28 deletion
pages/_docs/buttons.md
浏览文件 @ ddc88dcf
...@@ -23,18 +23,22 @@ Use any of the available button classes to quickly create a styled button . We p ...@@ -23,18 +23,22 @@ Use any of the available button classes to quickly create a styled button . We p
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.button-variants %} {% for button in site.button-variants %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a> {% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
### Disabled buttons ### 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. 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 %} {% example html wrapper=btn-list %}
{% for button in site.button-variants %} {% for button in site.button-variants %}
{% include_cached ui/button.html color=button.1.class text=button.title disabled=true %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -54,7 +58,9 @@ Add `.btn-square` to button to remove border-radius. ...@@ -54,7 +58,9 @@ Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.button-variants %} {% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class square=true %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -64,7 +70,9 @@ Add `.btn-pill` class to any button to make them more rounded. ...@@ -64,7 +70,9 @@ Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.button-variants %} {% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class pill=true %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -74,7 +82,9 @@ In need of a button, but not the hefty background colors they bring? Replace the ...@@ -74,7 +82,9 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.button-variants %} {% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class outline=true %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -103,13 +113,33 @@ Create block level buttons—those that span the full width of a parent—by add ...@@ -103,13 +113,33 @@ Create block level buttons—those that span the full width of a parent—by add
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons. Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
Icons can be found [**here** {% include_cached ui/icon.html icon="search" class="icon-sm2" %}](/docs/icons.html#icons)
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<button type="button" class="btn btn-dark"><i class="icon fe fe-upload mr-2"></i>Upload</button> <button type="button" class="btn btn-dark">
<button type="button" class="btn btn-warning"><i class="icon fe fe-heart mr-2"></i>I like</button> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
<button type="button" class="btn btn-success"><i class="icon fe fe-check mr-2"></i>I agree</button> Upload
<button type="button" class="btn btn-outline-primary"><i class="icon fe fe-plus mr-2"></i>More</button> </button>
<button type="button" class="btn btn-danger"><i class="icon fe fe-link mr-2"></i>Link</button> <button type="button" class="btn btn-warning">
<button type="button" class="btn btn-info"><i class="icon fe fe-message-circle mr-2"></i>Comment</button> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
I like
</button>
<button type="button" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="20 6 9 17 4 12"></polyline></svg>
I agree
</button>
<button type="button" class="btn btn-outline-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
More
</button>
<button type="button" class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
Link
</button>
<button type="button" class="btn btn-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
Comment
</button>
{% endexample %} {% endexample %}
### Social buttons ### Social buttons
...@@ -118,7 +148,10 @@ A button can be formatted to link to a social website ...@@ -118,7 +148,10 @@ A button can be formatted to link to a social website
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.socials %} {% for button in site.socials %}
{% include_cached ui/button.html color=button.name icon=button.icon text=button.title %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -126,7 +159,9 @@ You can use only icons. ...@@ -126,7 +159,9 @@ You can use only icons.
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.socials %} {% for button in site.socials %}
{% include_cached ui/button.html color=button.name icon=button.icon %} {% 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 %}
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -135,13 +170,27 @@ You can use only icons. ...@@ -135,13 +170,27 @@ You can use only icons.
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button. Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<button type="button" class="btn btn-icon btn-primary"><i class="icon fe fe-activity"></i></button> <button type="button" class="btn btn-icon btn-primary">
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="icon fe fe-github"></i></button> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
<button type="button" class="btn btn-icon btn-primary btn-success"><i class="icon fe fe-bell"></i></button> </button>
<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="icon fe fe-star"></i></button> <button type="button" class="btn btn-icon btn-primary btn-github">
<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="icon fe fe-trash"></i></button> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="icon fe fe-bar-chart"></i></button> </button>
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="icon fe fe-git-merge"></i></button> <button type="button" class="btn btn-icon btn-primary btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</button>
<button type="button" class="btn btn-icon btn-primary btn-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</button>
<button type="button" class="btn btn-icon btn-primary btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</button>
<button type="button" class="btn btn-icon btn-primary btn-purple">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
</button>
<button type="button" class="btn btn-icon btn-primary btn-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
</button>
{% endexample %} {% endexample %}
### Button dropdown ### Button dropdown
...@@ -151,7 +200,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within ...@@ -151,7 +200,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="icon fe fe-calendar"></i> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
...@@ -161,7 +210,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within ...@@ -161,7 +210,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="icon fe fe-calendar mr-2"></i>Show calendar <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Show calendar
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
...@@ -187,11 +236,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d ...@@ -187,11 +236,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. 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 %} {% example html wrapper=btn-list %}
{% include_cached ui/button.html spinner=true text="Button" color="primary" %} {% include_cached ui/button.html color="primary" text="Button" spinner=true %}
{% 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" %}
{% endexample %} {% endexample %}
### List of buttons ### List of buttons
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或