Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

progress bar, docs fixes

Browse Source
This commit is contained in:
codecalm
2019-07-10 17:12:52 +02:00
parent f7497406eb
commit 1e7f28b530
15 changed files with 162 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/flags.yml
-4
View File
@@ -458,8 +458,6 @@
flag: "tt"
- name: "Tuvalu"
flag: "tv"
- name: "Taiwan"
flag: "tw"
- name: "Tanzania"
flag: "tz"
- name: "Ukraine"
@@ -496,8 +494,6 @@
flag: "ws"
- name: "Yemen"
flag: "ye"
- name: "Mayotte"
flag: "yt"
- name: "South Africa"
flag: "za"
- name: "Zambia"
pages/_docs/badges.md
+5 -5
View File
@@ -6,7 +6,7 @@ done: true
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
## Default markup
### Default markup
{% example %}
{% for color in site.colors %}
@@ -14,7 +14,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endfor %}
{% endexample %}
## Pill badges
### Pill badges
{% example %}
{% for color in site.colors %}
@@ -23,7 +23,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
## Soft badges
### Soft badges
{% example %}
{% for color in site.colors %}
@@ -32,7 +32,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
## Links
### Links
{% example %}
{% for color in site.colors %}
@@ -41,7 +41,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
## Empty badges
### Empty badges
{% example %}
{% for color in site.colors %}
pages/_docs/buttons.md
+3 -1
View File
@@ -79,7 +79,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% endfor %}
{% endexample %}
## Button with star
### Button with star
{% example html %}
{% for button in site.button_variants %}
@@ -123,6 +123,8 @@ Basic buttons are traditional buttons with borders and background with an extra
### Social buttons
A button can be formatted to link to a social website
{% example html wrapper=btn-list %}
{% for button in site.socials %}
{% include ui/button.html color=button.name icon=button.name text=button.title provider="brand" %}
pages/_docs/flags.md
+19 -6
View File
@@ -2,9 +2,10 @@
title: Flags
menu: docs.flags
plugin: flags
done: true
---
## Flag
### Flag
{% example html %}
{% include ui/flag.html name="tg" class="mr-1" %}
@@ -12,11 +13,23 @@ plugin: flags
{% include ui/flag.html name="pt" %}
{% endexample %}
## Flag sizes
### Flag sizes
{% example html %}
{% include ui/flag.html name="tg" class="flag-size-xl mr-1" %}
{% include ui/flag.html name="br" class="flag-size-lg mr-1" %}
{% include ui/flag.html name="pt" class="flag-size-md" %}
{% include ui/flag.html name="gb" class="mr-1" %}
{% include ui/flag.html name="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html name="pl" class="flag-size-lg mr-1" %}
{% include ui/flag.html name="pl" class="flag-size-md" %}
{% include ui/flag.html name="pl" class="mr-1" %}
{% endexample %}
### Types
<table>
{% for flag in site.data.flags %}
<tr>
<td>{% include ui/flag.html name=flag.flag %}</td>
<td><code>{{ flag.flag }}</code></td>
<td>{{ flag.name }}</td>
</tr>
{% endfor %}
</table>
pages/_docs/form-elements.md
+18 -18
View File
@@ -2,7 +2,7 @@
title: Form Elements
---
## Classic Input
### Classic Input
{% example %}
<div class="form-group">
@@ -27,7 +27,7 @@ title: Form Elements
</div>
{% endexample %}
## Password and validation
### Password and validation
{% example %}
<div class="form-group">
<label class="form-label">Password</label>
@@ -52,7 +52,7 @@ title: Form Elements
</div>
{% endexample %}
## Select
### Select
{% example %}
<div class="form-group">
<label class="form-label">Country</label>
@@ -64,7 +64,7 @@ title: Form Elements
</div>
{% endexample %}
## Textarea
### Textarea
{% example %}
<div class="form-group">
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
@@ -72,17 +72,17 @@ title: Form Elements
</div>
{% endexample %}
## Image check
### Image check
{% example %}
{% include parts/input-image.html %}
{% endexample %}
## Input color
### Input color
{% example %}
{% include parts/input-color.html %}
{% endexample %}
## Custom Checkbox examples
### Custom Checkbox examples
{% example %}
<div class="form-group">
<label class="form-label">Icons input</label>
@@ -110,7 +110,7 @@ title: Form Elements
</div>
{% endexample %}
## Toggle switches
### Toggle switches
{% example %}
{% include parts/input-toggle.html %}
@@ -123,7 +123,7 @@ title: Form Elements
</div>
{% endexample %}
## Radios
### Radios
{% example %}
<div class="form-group">
<div class="form-label">Radios</div>
@@ -171,7 +171,7 @@ title: Form Elements
</div>
{% endexample %}
## Checkboxes
### Checkboxes
{% example %}
<div class="form-group">
<div class="form-label">Checkboxes</div>
@@ -220,7 +220,7 @@ title: Form Elements
</div>
{% endexample%}
## Ratios
### Ratios
{% example %}
<div class="form-group">
<label class="form-label">Ratios</label>
@@ -228,7 +228,7 @@ title: Form Elements
</div>
{% endexample %}
## Sample form
### Sample form
{% example %}
<fieldset class="form-fieldset">
<div class="form-group">
@@ -250,7 +250,7 @@ title: Form Elements
</fieldset>
{% endexample %}
## Input group
### Input group
{% example %}
<div class="form-group">
<label class="form-label">Input group</label>
@@ -286,12 +286,12 @@ title: Form Elements
</div>
{% endexample %}
## Input with icon
### Input with icon
{% example %}
{% include parts/input-icon.html %}
{% endexample %}
## Separated inputs
### Separated inputs
{% example %}
<div class="form-group">
<label class="form-label">Separated inputs</label>
@@ -305,7 +305,7 @@ title: Form Elements
</div>
</div>{% endexample %}
## Custom Input examples
### Custom Input examples
{% example %}
<div class="form-group">
<label class="form-label">Username</label>
@@ -328,7 +328,7 @@ title: Form Elements
</div>
{% endexample %}
## Date component
### Date component
{% example %}
<div class="form-group">
<label class="form-label">Date of birth</label>
@@ -368,7 +368,7 @@ title: Form Elements
</div>
{% endexample %}
## Input with button
### Input with button
{% example %}
<div class="form-group">
<label class="form-label">Button input</label>
pages/_docs/form-helpers.md
+1 -1
View File
@@ -2,7 +2,7 @@
title: Form helpers
---
## Input help
### Input help
{% example %}
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
pages/_docs/index.md
+3 -3
View File
@@ -9,7 +9,7 @@ We’ve created this admin panel for everyone who wants to create any templates
## Setup environment
### Setup environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
@@ -21,13 +21,13 @@ To use our build system and run our documentation locally, you'll need a copy of
When completed, you'll be able to run the various commands provided from the command line.
## Build Tabler locally
### Build Tabler locally
1. From the root `/tabler` directory, run `npm run serve` in the command line.
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
3. Any change in `/src` directory will build application and refresh the page.
## Bugs and feature requests
### Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
pages/_docs/progress.md
+26
View File
@@ -10,3 +10,29 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
{% example html %}
{% include ui/progress.html %}
{% endexample %}
### Small progress
{% example html %}
{% include ui/progress.html percentage=57 size="sm" %}
{% endexample %}
### Progress with value
{% example html %}
{% include ui/progress.html percentage=75 show-value=true %}
{% endexample %}
### Indeterminate progress
{% example html %}
{% include ui/progress.html indeterminate=true size="sm" %}
{% endexample %}
### Native progress element
You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100" />
{% endexample %}
pages/_docs/ribbons.md
+5 -5
View File
@@ -4,31 +4,31 @@ menu: docs.ribbons
new: true
---
## Default markup
### Default markup
{% example html columns=1 %}
{% include cards/ribbon.html %}
{% endexample %}
## Ribbon position
### Ribbon position
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
## Ribbon color
### Ribbon color
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
## Ribbon text
### Ribbon text
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
## Ribbon style
### Ribbon style
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
pages/_docs/spinners.md
+6 -5
View File
@@ -1,16 +1,17 @@
---
title: Spinners
menu: docs.spinners
done: true
---
## Default markup
### Default markup
{% example %}
{% include ui/spinner.html %}
{% endexample %}
## Colors
### Colors
{% example %}
{% for color in site.colors %}
@@ -19,14 +20,14 @@ menu: docs.spinners
{% endfor %}
{% endexample %}
## Size
### Size
{% example %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
{% endexample %}
## Growing spinner
### Growing spinner
{% example %}
{% include ui/spinner.html type="grow" %}
@@ -39,7 +40,7 @@ menu: docs.spinners
{% endfor %}
{% endexample %}
## Buttons
### Buttons
{% example html wrapper=btn-list %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
pages/_docs/steps.md
+5 -5
View File
@@ -6,32 +6,32 @@ new: true
Steps are progress indicators of a sequence of task steps.
## Default markup
### Default markup
{% example %}
{% include ui/steps.html show-title=true %}
{% endexample %}
## Tooltips
### Tooltips
{% example %}
{% include ui/steps.html show-title=true show-tooltip=true %}
{% endexample %}
## Color
### Color
{% example %}
{% include ui/steps.html color="green" show-title=true %}
{% include ui/steps.html color="red" show-title=true %}
{% endexample %}
## Steps without title
### Steps without title
{% example %}
{% include ui/steps.html show-tooltip=true %}
{% endexample %}
## Steps with numbers
### Steps with numbers
{% example %}
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
pages/_docs/tables.md
+2 -2
View File
@@ -3,7 +3,7 @@ title: Tables
menu: docs.tables
---
## Basic Table
### Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
@@ -13,7 +13,7 @@ The `.table` class adds basic styling to a table:
{% include ui/table.html %}
{% endexample %}
## No wrap
### No wrap
Prevents table cell content from wrapping to another line.
pages/_docs/tabs.md
+6 -6
View File
@@ -3,37 +3,37 @@ title: Tabs
menu: docs.tabs
---
## Default markup
### Default markup
{% example html columns=1 %}
{% include cards/tabs.html id="ex1" %}
{% endexample %}
## Tabs with icons
### Tabs with icons
{% example html columns=1 %}
{% include cards/tabs.html icons=true settings=true id="ex2" %}
{% endexample %}
## Tabs only with icons
### Tabs only with icons
{% example html columns=1 %}
{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
{% endexample %}
## Tabs with dropdown
### Tabs with dropdown
{% example html columns=1 %}
{% include cards/tabs.html dropdown=true id="ex4" %}
{% endexample %}
## Full-width tabs
### Full-width tabs
{% example html columns=1 %}
{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
{% endexample %}
## Alternate style
### Alternate style
{% example html columns=1 %}
{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
pages/_includes/ui/progress.html
+9 -1
View File
@@ -1,6 +1,14 @@
{% assign percentage = include.percentage | default: 38 %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %}{{ include.class }}{% endif %}">
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate"></div>
{% else %}
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
{% if include.show-value %}
{{ percentage }}%
{% else %}
<span class="sr-only">{{ percentage }}% Complete</span>
{% endif %}
</div>
{% endif %}
</div>
scss/ui/_progress.scss
+52 -6
View File
@@ -1,12 +1,58 @@
.progress {
background: $min-black;
border-radius: 2px;
@keyframes progress-indeterminate {
0% {
left: -35%;
right: 100%
}
100%, 60% {
left: 100%;
right: -90%
}
}
.progress-xs {
height: .25rem;
.progress {
appearance: none;
background: $min-black;
height: .75rem;
line-height: .75rem;
position: relative;
width: 100%;
&::-webkit-progress-bar {
background: $min-black;
}
&::-webkit-progress-value {
background-color: $primary
}
&::-moz-progress-bar {
background-color: $primary
}
&::-ms-fill {
background-color: $primary;
border: none
}
}
.progress-sm {
height: .5rem;
height: .25rem;
}
.progress-bar-indeterminate {
&:after,
&:before {
content: '';
position: absolute;
background-color: inherit;
left: 0;
will-change: left, right;
top: 0;
bottom: 0;
}
&:before {
animation: progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
}
}