Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

buttons docs

Browse Source
This commit is contained in:
codecalm
2018-02-21 21:17:45 +01:00
parent f82763fa40
commit 9db81a8046
8 changed files with 104 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@@ -47,7 +47,6 @@ markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
syntax_highlighter: rouge
syntax_highlighter_opts:
css_class: ''

57
_docs/buttons.md
View File

@@ -1,14 +1,17 @@
---
title: Buttons
description: 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.
toc: true
---
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.
{:toc}
### 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 %}
{% example html wrapper=btn-list %}
<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" />
@@ -18,7 +21,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
### Button variations
{% example html %}
{% example html wrapper=btn-list %}
{% for button in site.button-types %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
{% endfor %}
@@ -28,7 +31,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
### Color variations
{% example html %}
{% example html wrapper=btn-list %}
{% for button in site.colors %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[0] }}</a>
{% endfor %}
@@ -38,7 +41,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
Add `.btn-square` to button to remove border-radius.
{% example html %}
{% example html wrapper=btn-list %}
{% for button in site.button-types %}
<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1] }}</a>
{% endfor %}
@@ -48,7 +51,7 @@ Add `.btn-square` to button to remove border-radius.
Add `.btn-pill` class to any button to make them more rounded.
{% example html %}
{% example html wrapper=btn-list %}
{% for button in site.button-types %}
<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1] }}</a>
{% endfor %}
@@ -58,7 +61,7 @@ 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 %}
{% example html wrapper=btn-list %}
{% for button in site.button-types %}
<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1] }}</a>
{% endfor %}
@@ -68,12 +71,12 @@ In need of a button, but not the hefty background colors they bring? Replace the
Add `.btn-lg` or `.btn-sm` for additional sizes.
{% example html %}
{% example html wrapper=btn-list %}
<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 %}
{% example html wrapper=btn-list %}
<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 %}
@@ -118,4 +121,40 @@ Icon only button. Add `.btn-icon` class to remove unnecessary padding from butto
<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 %}
### Button dropdown
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
{% example html wrapper=btn-list %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="fe fe-calendar"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="fe fe-calendar mr-2"></i>Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</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="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
{% endexample %}

3
_docs/cards.md
View File

@@ -1,9 +1,8 @@
---
title: Cards
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
---
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
### Default card

36
_docs/index.md
View File

@@ -1,36 +1,6 @@
---
title: Getting started
hide: true
redirect_to: buttons.html
layout: redirect
---
We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone.
If you miss any component, feel free to drop us a line at: [email]—we'll do our best to add it.
### What’s included
Within template you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files. It's up to you how you're going to use them.
```
tabler.io/
├── assets/
├── docs/
└── README.md
```
### Browser Support
{{ site.title }} is build in Bootstrap, which supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.
### License
tabler.io is released under MIT license. tabler.io is a free Bootstrap 4 admin template developed from [codecalm.net](http://codecalm.net). Feel free to download it, use it, share it, get creative with it.

8
_layouts/docs.html
View File

@@ -12,7 +12,7 @@ title: Documentation
<div class="card">
<ul class="list-group card-list-group">
{% for doc in site.docs %}
<li class="list-group-item"><a href="{{ site.base }}{{ doc.url }}">{{ doc.title }}</a></li>
{% unless doc.hide %}<li class="list-group-item"><a href="{{ site.base }}{{ doc.url }}">{{ doc.title }}</a></li>{% endunless %}
{% endfor %}
</ul>
</div>
@@ -24,11 +24,15 @@ title: Documentation
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">{{ page.title }}</h2>
{% if page.description %}
<p>{{ page.description }}</p>
{% endif %}
{% if page.toc %}
{{ content | toc_only }}
{% endif %}
{{ content }}
{{ content | toc_generate }}
</div>
</div>
</div>

24
assets/css/dashboard.css
View File

@@ -9549,10 +9549,29 @@ img {
margin-top: 0;
}
.text-wrap > :last-child {
margin-bottom: 0;
}
.text-wrap > h1, .text-wrap > h2, .text-wrap > h3, .text-wrap > h4, .text-wrap > h5, .text-wrap > h6 {
margin-top: 1.5em;
}
.section-nav {
background-color: #f8f9fa;
margin: 1rem 0;
padding: .5rem 1rem;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
list-style: none;
}
.section-nav:before {
content: 'Table of contents:';
display: block;
font-weight: 600;
}
@media print {
.container {
max-width: none;
@@ -10381,6 +10400,8 @@ a.icon:hover {
.btn-pill {
border-radius: 10rem;
padding-left: 1.5em;
padding-right: 1.5em;
}
.btn-square {
@@ -11369,7 +11390,8 @@ a.icon:hover {
font-size: 0;
}
.btn-list .btn {
.btn-list > .btn,
.btn-list > .dropdown {
margin-right: .5rem;
margin-bottom: .5rem;
}

5
assets/scss/dashboard/_button.scss
View File

@@ -24,6 +24,8 @@
.btn-pill {
border-radius: 10rem;
padding-left: 1.5em;
padding-right: 1.5em;
}
.btn-square {
@@ -71,7 +73,8 @@
margin-bottom: -.5rem;
font-size: 0;
.btn {
>.btn,
>.dropdown {
margin-right: .5rem;
margin-bottom: .5rem;
}

19
assets/scss/dashboard/_type.scss
View File

@@ -76,9 +76,28 @@ img {
margin-top: 0;
}
>:last-child {
margin-bottom: 0;
}
> {
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
}
}
}
.section-nav {
background-color: $gray-100;
margin: 1rem 0;
padding: .5rem 1rem;
border: 1px solid $border-color;
border-radius: 3px;
list-style: none;
&:before {
content: 'Table of contents:';
display: block;
font-weight: 600;
}
}