Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

form elements, buttons

Browse Source
This commit is contained in:
codecalm
2019-12-15 22:03:20 +01:00
parent 935bf4f3ae
commit 03ada7326c
13 changed files with 63 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -19,5 +19,5 @@ tmp/
/resources/
/svg-tmp/
/components/
/dist
/dist/*
/demo
pages/_docs/buttons.md
+14 -17
View File
@@ -115,7 +115,7 @@ 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.
Icons can be found [**here** {% include_cached ui/icon.html icon="search" class="icon-sm" %}](/docs/icons.html#icons)
Icons can be found [**here**](/docs/icons.html#icons)
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-dark">
@@ -204,30 +204,21 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
{% include_cached 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
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
{% include_cached ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
{% include_cached ui/dropdown-menu.html %}
</div>
{% endexample %}
@@ -297,9 +288,15 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
### Button with avatar
{% example html%}
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar
</a>
{% endexample %}
pages/_includes/cards/invoices.html
+1 -1
View File
@@ -42,7 +42,7 @@
<td class="text-right">
<span class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html %}
{% include_cached ui/dropdown-menu.html %}
</span>
</td>
</tr>
pages/_includes/cards/project-kanban.html
+1 -1
View File
@@ -10,7 +10,7 @@
<button class="btn-options" type="button" data-toggle="dropdown">
{% include_cached ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
{% include_cached ui/dropdown-menu.html right=true %}
</div>
<div class="card-title">
<h6 class="h4 mb-3"><a href="#">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
pages/_includes/cards/subscribe.html
+1 -1
View File
@@ -27,7 +27,7 @@
<button class="btn-options" type="button" data-toggle="dropdown">
{% include_cached ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
{% include_cached ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
pages/_includes/cards/tabs.html
+1 -7
View File
@@ -32,13 +32,7 @@
{% if include.dropdown %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
{% include_cached ui/dropdown-menu.html %}
</li>
{% endif %}
{% if include.settings %}
pages/_includes/forms/form-elements-1.html
+2 -14
View File
@@ -42,20 +42,8 @@
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Action</button>
<button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
News
</a>
<a class="dropdown-item" href="#">
Messages
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Edit Profile
</a>
</div>
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
{% include_cached ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
pages/_includes/forms/form-elements-2.html
+2 -9
View File
@@ -22,17 +22,10 @@
<label class="form-label">Button input</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
{% include_cached ui/dropdown-menu.html %}
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
pages/_includes/parts/input-icon.html
+2 -12
View File
@@ -1,15 +1,5 @@
<div class="mb-3">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for&hellip;">
<span class="input-icon-addon">
{% include_cached ui/icon.html icon="search" %}
</span>
</div>
<div class="input-icon">
<span class="input-icon-addon">
{% include_cached ui/icon.html icon="user" %}
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
{% include ui/input-icon.html class="mb-3" %}
{% include ui/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
</div>
pages/_includes/ui/input-icon.html
+18
View File
@@ -0,0 +1,18 @@
{% assign icon = include.icon | default: 'search' %}
{% capture addon %}
<span class="input-icon-addon">
{% include_cached ui/icon.html icon=icon %}
</span>
{% endcapture %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
{% if include.prepend %}
{{ addon }}
{% endif %}
<input type="text" class="form-control" placeholder="{{ include.placeholder | default: 'Search for&hellip;' }}">
{% unless include.prepend %}
{{ addon }}
{% endunless %}
</div>
pages/dropdowns.html
+15 -15
View File
@@ -3,18 +3,18 @@ title: Dropdowns
page-title: Dropdowns
---
{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
scss/_variables.scss
+1 -1
View File
@@ -197,7 +197,7 @@ $badge-empty-size: .5rem !default;
//buttons
$input-btn-line-height: (22/15) !default;
$input-btn-font-size: 15px !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-font-size-sm: 12px !default;
$input-btn-padding-x-sm: 6px !default;
scss/ui/_buttons.scss
+4 -2
View File
@@ -52,8 +52,10 @@
}
.btn-icon {
min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2);
.icon {
margin: 0 -.5em;
margin: 0 -1em;
}
}
@@ -64,7 +66,7 @@
.btn-secondary {
@include button-variant(#fff, $border-color, $body-color);
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
background-image: linear-gradient(-180deg, transparent, $gray-100 90%);
}
.btn-square {