mirror of
https://github.com/tabler/tabler.git
synced 2026-08-13 23:02:23 +04:00
buttons docs
This commit is contained in:
codecalm
+50
-1
@@ -20,7 +20,7 @@ author:
|
||||
plugins:
|
||||
- jekyll-tidy
|
||||
- jekyll-contentblocks
|
||||
#- jekyll-toc
|
||||
- jekyll-toc
|
||||
|
||||
exclude:
|
||||
- regenerate-images.sh
|
||||
@@ -88,6 +88,55 @@ theme-colors:
|
||||
light: '#f8f9fa'
|
||||
dark: '#343a40'
|
||||
|
||||
button-types:
|
||||
primary: 'Primary'
|
||||
secondary: 'Secondary'
|
||||
success: 'Success'
|
||||
info: 'Info'
|
||||
warning: 'Warning'
|
||||
danger: 'Danger'
|
||||
|
||||
social-buttons:
|
||||
facebook:
|
||||
icon: fa fa-facebook
|
||||
title: Facebook
|
||||
twitter:
|
||||
icon: fa fa-twitter
|
||||
title: Twitter
|
||||
google:
|
||||
icon: fa fa-google
|
||||
title: Google
|
||||
youtube:
|
||||
icon: fa fa-youtube
|
||||
title: Youtube
|
||||
vimeo:
|
||||
icon: fa fa-vimeo
|
||||
title: Vimeo
|
||||
dribbble:
|
||||
icon: fa fa-dribbble
|
||||
title: Dribble
|
||||
github:
|
||||
icon: fa fa-github
|
||||
title: Github
|
||||
instagram:
|
||||
icon: fa fa-instagram
|
||||
title: Instagram
|
||||
pinterest:
|
||||
icon: fa fa-pinterest
|
||||
title: Pinterest
|
||||
vk:
|
||||
icon: fa fa-vk
|
||||
title: VKontakte
|
||||
rss:
|
||||
icon: fa fa-rss
|
||||
title: RSS
|
||||
flickr:
|
||||
icon: fa fa-flickr
|
||||
title: Flickr
|
||||
bitbucket:
|
||||
icon: fa fa-bitbucket
|
||||
title: Bitbucket
|
||||
|
||||
google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
|
||||
google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
|
||||
|
||||
|
||||
+9
-8
@@ -41,6 +41,11 @@ components:
|
||||
icon: fe fe-shopping-cart
|
||||
url: blog.html
|
||||
|
||||
forms:
|
||||
name: Forms
|
||||
icon: fe fe-check-square
|
||||
url: form-elements.html
|
||||
|
||||
profile:
|
||||
name: Profile
|
||||
icon: fe fe-user
|
||||
@@ -51,12 +56,8 @@ gallery:
|
||||
icon: fe fe-image
|
||||
url: gallery.html
|
||||
|
||||
forms:
|
||||
name: Forms
|
||||
icon: fe fe-check-square
|
||||
url: form-elements.html
|
||||
|
||||
#docs:
|
||||
# name: Docs
|
||||
# icon: fe fe-file
|
||||
# url: docs/index.html
|
||||
docs:
|
||||
name: Docs
|
||||
icon: fe fe-file-text
|
||||
url: docs/index.html
|
||||
+113
-8
@@ -2,15 +2,120 @@
|
||||
title: Buttons
|
||||
---
|
||||
|
||||
### Pill buttons
|
||||
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
|
||||
|
||||
Add `.btn-pill` to any button to make them more rounded.
|
||||
### Button tag
|
||||
|
||||
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-pill btn-primary">Primary</a>
|
||||
<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-pill btn-success">Success</a>
|
||||
<a href="#" class="btn btn-pill btn-info">Info</a>
|
||||
<a href="#" class="btn btn-pill btn-warning">Warning</a>
|
||||
<a href="#" class="btn btn-pill btn-danger">Danger</a>
|
||||
<a href="#" class="btn btn-primary" role="button">Link</a>
|
||||
<button class="btn btn-primary">Button</button>
|
||||
<input type="button" class="btn btn-primary" value="Input" />
|
||||
<input type="submit" class="btn btn-primary" value="Submit" />
|
||||
<input type="reset" class="btn btn-primary" value="Reset" />
|
||||
{% endexample %}
|
||||
|
||||
### Button variations
|
||||
|
||||
{% example html %}
|
||||
{% for button in site.button-types %}
|
||||
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
|
||||
{% endfor %}
|
||||
<a href="#" class="btn btn-link">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Color variations
|
||||
|
||||
{% example html %}
|
||||
{% for button in site.colors %}
|
||||
<a href="#" class="btn btn-{{ button[0] }}">{{ button[0] }}</a>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Square buttons
|
||||
|
||||
Add `.btn-square` to button to remove border-radius.
|
||||
|
||||
{% example html %}
|
||||
{% for button in site.button-types %}
|
||||
<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1] }}</a>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Pill buttons
|
||||
|
||||
Add `.btn-pill` class to any button to make them more rounded.
|
||||
|
||||
{% example html %}
|
||||
{% for button in site.button-types %}
|
||||
<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1] }}</a>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Outline buttons
|
||||
|
||||
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 %}
|
||||
{% for button in site.button-types %}
|
||||
<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1] }}</a>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Button size
|
||||
|
||||
Add `.btn-lg` or `.btn-sm` for additional sizes.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
{% endexample %}
|
||||
|
||||
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
|
||||
{% endexample %}
|
||||
|
||||
### Button with icon
|
||||
|
||||
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.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
|
||||
<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
|
||||
<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
|
||||
<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button>
|
||||
<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
|
||||
<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
|
||||
{% endexample %}
|
||||
|
||||
### Social buttons
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.social-buttons %}
|
||||
<button type="button" class="btn btn-{{ button[0] }}"><i class="{{ button[1].icon }} mr-2"></i>{{ button[1].title }}</button>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Icon buttons
|
||||
|
||||
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>
|
||||
{% endexample %}
|
||||
@@ -55,7 +55,7 @@ eos
|
||||
end
|
||||
|
||||
def example(output)
|
||||
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + "#{output}" + (@options[:columns] ? "</div>\n" : "") + "\n</div>"
|
||||
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
|
||||
end
|
||||
|
||||
def remove_example_classes(code)
|
||||
|
||||
+1125
-60
File diff suppressed because it is too large
Load Diff
@@ -1472,22 +1472,27 @@
|
||||
}
|
||||
|
||||
.wi-rotate-90 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.wi-rotate-180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.wi-rotate-270 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.wi-flip-horizontal {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.wi-flip-vertical {
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
|
||||
+5
@@ -1472,22 +1472,27 @@
|
||||
}
|
||||
|
||||
.wi-rotate-90 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.wi-rotate-180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.wi-rotate-270 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.wi-flip-horizontal {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.wi-flip-vertical {
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@ $white: #fff;
|
||||
$primary: $blue;
|
||||
$secondary: $gray-600;
|
||||
$success: $green;
|
||||
$info: $lime;
|
||||
$info: $azure;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-100;
|
||||
@@ -133,6 +133,8 @@ $kbd-bg: $gray-800;
|
||||
|
||||
$pre-color: $gray-900;
|
||||
|
||||
// Yiq
|
||||
$yiq-contrasted-threshold: 190;
|
||||
$yiq-text-dark: $body-color;
|
||||
$yiq-text-light: $white;
|
||||
|
||||
|
||||
@@ -4,6 +4,17 @@
|
||||
letter-spacing: .03em;
|
||||
font-size: px2rem(13px);
|
||||
min-width: px2rem(38px);
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@@ -15,12 +26,22 @@
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@each $vendor, $color in $social-colors {
|
||||
.btn-#{$vendor} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $vendor, $color in $colors {
|
||||
.btn-#{$vendor} {
|
||||
@include button-variant($color, $color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-option {
|
||||
background: transparent;
|
||||
color: $text-muted;
|
||||
@@ -45,3 +66,13 @@
|
||||
min-width: px2rem(44px);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
margin-bottom: -.5rem;
|
||||
font-size: 0;
|
||||
|
||||
.btn {
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user