Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

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

提交 03ada732 编写于 作者: C codecalm
浏览文件
操作

form elements, buttons

上级 935bf4f3
隐藏空白更改
内联 并排
Showing with 63 addition and 81 deletion
.gitignore
浏览文件 @ 03ada732
......@@ -19,5 +19,5 @@ tmp/
/resources/
/svg-tmp/
/components/
/dist
/dist/*
/demo
pages/_docs/buttons.md
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
<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 0 → 100644
浏览文件 @ 03ada732
{% 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>
\ No newline at end of file
pages/dropdowns.html
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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
浏览文件 @ 03ada732
......@@ -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 {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或