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

Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev

Browse Source
This commit is contained in:
codecalm
2020-03-09 19:58:40 +01:00
parent 4d7f77e099 b2d3344b8b
commit 745aa11330
10 changed files with 130 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
pages/_docs/alerts.md
View File

@@ -1,13 +1,15 @@
---
title: Alerts
menu: docs.alerts
description: Bootstrap provides an easy way to create predefined alert messages.
description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
bootstrap-link: components/alerts/
---
## Default markup
Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
@@ -19,9 +21,9 @@ bootstrap-link: components/alerts/
{% include example.html code=code %}
## Alert Links
## Alert links
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
{% capture code %}
{% for variant in site.variants %}
@@ -34,7 +36,9 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% include example.html code=code %}
## Dismissible Alerts
## Dismissible alerts
Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
{% capture code %}
{% for variant in site.variants %}
@@ -49,6 +53,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alerts with icons
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
@@ -62,6 +68,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alert with avatar
Add an avatar to your alert modal to make it more personalised.
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
@@ -75,6 +83,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching
## Alert with buttons
Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
{% capture code %}
{% capture variant-text %}
<h3>Some Title</h3>

4
pages/_docs/autosize.md
View File

@@ -1,13 +1,15 @@
---
title: Autosize
menu: docs.autosize
description: A small, stand-alone script to automatically adjust textarea height.
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
done: true
---
## Default markup
Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
{% capture code %}
<label class="form-label">Autosize example</label>
{% include ui/form/textarea-autosize.html %}

2
pages/_docs/buttons.md
View File

@@ -49,7 +49,7 @@ Make buttons look inactive to show that an action is possible once the user meet
{% include example.html code=code wrapper="btn-list" centered=true %}
## Color variations
## Colour variations
Choose the right colour for your button to make it go well with your design and draw users' attention. Button colours can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.

4
pages/_docs/carousel.md
View File

@@ -1,13 +1,15 @@
---
title: Carousel
menu: docs.carousel
description: The Carousel is a slideshow for cycling through elements.
description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
bootstrap-link: components/carousel/
---
## Default markup
Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
{% capture code %}
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
{% endcapture %}

6
pages/_docs/empty.md
View File

@@ -1,11 +1,13 @@
---
title: Empty states
description: Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.
description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
---
## Default markup
Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
{% capture code %}
{% include ui/empty.html %}
{% endcapture %}
@@ -14,6 +16,8 @@ description: Empty states/blanks are commonly used as placeholders for first tim
## Empty state with illustration
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalised design, you will improve your brand image and make your website or app more user friendly.
{% capture code %}
{% include ui/empty.html illustration=true %}
{% endcapture %}

63
pages/_docs/form-elements.md
View File

@@ -1,10 +1,13 @@
---
title: Form Elements
title: Form elements
Description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
bootstrap-link: components/forms/
---
## Classic Inputs
## Classic inputs
Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.
{% capture code %}
{% include parts/form/input.html type="text" hint="Here's some more info." %}
@@ -15,6 +18,8 @@ bootstrap-link: components/forms/
## Form control rounded
Use the ``form-control-rounded`` class if you prefer form controls with rounded corners.
{% capture code %}
<div class="mb-3">
<label class="form-label">Form control rounded</label>
@@ -27,6 +32,8 @@ bootstrap-link: components/forms/
## Form control flush
You can remove borders from your form control by adding the ``form-control-flush`` class.
{% capture code %}
<div class="mb-3">
<label class="form-label">Form control flush</label>
@@ -38,6 +45,8 @@ bootstrap-link: components/forms/
## Input with icon
Add icons to your input controls to sugegst users what they should enter or inform them of the current state of a form element.
{% capture code %}
{% include parts/form/input-icon.html %}
{% endcapture %}
@@ -46,6 +55,8 @@ bootstrap-link: components/forms/
## Separated inputs
Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.
{% capture code %}
{% include parts/form/input-icon-separated.html %}
{% endcapture %}
@@ -53,6 +64,10 @@ bootstrap-link: components/forms/
## Textarea and select
Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.
Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
{% capture code %}
{% include parts/form/input.html type="textarea" %}
@@ -64,6 +79,8 @@ bootstrap-link: components/forms/
## Validation states
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
{% capture code %}
{% include parts/form/validation-states.html %}
{% endcapture %}
@@ -72,6 +89,8 @@ bootstrap-link: components/forms/
### Subtle validation states
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from coloured control frames and the validation feedback.
{% capture code %}
{% include parts/form/validation-states.html lite=true %}
{% endcapture %}
@@ -80,6 +99,8 @@ bootstrap-link: components/forms/
## Input size
Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.
{% capture code %}
{% include parts/form/input-sizes.html %}
{% endcapture %}
@@ -88,13 +109,17 @@ bootstrap-link: components/forms/
## Image check
Add an image check to your form and give users visually appealing options to choose from.
{% capture code %}
{% include parts/form/input-image.html %}
{% endcapture %}
{% include example.html code=code max-width="25rem" %}
## Input color
## Input colour
Your input controls can come in a variety of colours, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colours.
{% capture code %}
{% include parts/form/input-color.html %}
@@ -102,7 +127,9 @@ bootstrap-link: components/forms/
{% include example.html code=code %}
## Input color picker
## Input colour picker
Add an colour picker to your form to let users customise it according to their preferences.
{% capture code %}
{% include parts/form/input-colorpicker.html %}
@@ -112,6 +139,8 @@ bootstrap-link: components/forms/
## Datalists
Use the ``datalist`` element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.
{% capture code %}
{% include parts/form/input-datalist.html %}
{% endcapture %}
@@ -120,6 +149,8 @@ bootstrap-link: components/forms/
## Custom selectboxes
Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.
{% capture code %}
{% include parts/form/input-selectgroups.html %}
{% endcapture %}
@@ -128,6 +159,8 @@ bootstrap-link: components/forms/
## Advanced selectboxes
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.
{% capture code %}
{% include parts/form/selectgroup-payments.html %}
{% include parts/form/selectgroup-project-manager.html %}
@@ -137,6 +170,8 @@ bootstrap-link: components/forms/
## Toggle switches
Use toggle switches for the elements of your form which require choosing between two opposing states.
{% capture code %}
{% include parts/form/input-toggle.html %}
{% include parts/form/input-toggle-single.html %}
@@ -146,6 +181,8 @@ bootstrap-link: components/forms/
## Radios
Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.
{% capture code %}
{% include parts/form/input-radios.html %}
{% include parts/form/input-radios-inline.html %}
@@ -155,6 +192,8 @@ bootstrap-link: components/forms/
## Checkboxes
Use checkoxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.
{% capture code %}
{% include parts/form/input-checkboxes.html %}
{% include parts/form/input-checkboxes-inline.html %}
@@ -164,6 +203,8 @@ bootstrap-link: components/forms/
## Range input
Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.
{% capture code %}
{% include parts/form/input-range.html %}
{% endcapture %}
@@ -172,6 +213,8 @@ bootstrap-link: components/forms/
## Fieldset
Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element.
{% capture code %}
{% include parts/form/fieldset.html %}
{% endcapture %}
@@ -180,6 +223,8 @@ bootstrap-link: components/forms/
## Input group
Create a group of input controls and place add-ons on either side of an input.
{% capture code %}
<div class="mb-3">
<label class="form-label">Input group</label>
@@ -191,7 +236,9 @@ bootstrap-link: components/forms/
{% include example.html code=code %}
## Input with checkbox or radios
## Input with checkboxes or radios
Add checkboxes or radio buttons on either side of your input control.
{% capture code %}
<div class="mb-3">
@@ -204,6 +251,8 @@ bootstrap-link: components/forms/
## Input with prepended or appended text
Add text to your input control, either before or after the text which is to be entered by a user.
{% capture code %}
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
@@ -215,6 +264,8 @@ bootstrap-link: components/forms/
## Input with appended link
Include a link in your input control to add a clickable element within the control.
{% capture code %}
<div class="mb-3">
<label class="form-label">Input with appended link</label>
@@ -226,6 +277,8 @@ bootstrap-link: components/forms/
## Input with appended icon links
Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.
{% capture code %}
<div class="mb-3">
<label class="form-label">Input with appended icon links</label>

14
pages/_docs/spinners.md
View File

@@ -1,13 +1,17 @@
---
title: Spinners
menu: docs.spinners
description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
bootstrap-link: components/spinners/
done: true
---
loading state of a component
## Default markup
Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
{% capture code %}
{% include ui/spinner.html %}
{% endcapture %}
@@ -16,6 +20,8 @@ done: true
## Colors
Choose one of the available colors to customize the spinner and make it suit your design.
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
@@ -27,6 +33,8 @@ done: true
## Size
Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
{% capture code %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
@@ -36,11 +44,15 @@ done: true
## Growing spinner
Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
{% capture code %}
{% include ui/spinner.html type="grow" %}
{% endcapture %}
{% include example.html code=code %}
Growing spinners also come in a variety of colors to choose from.
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
@@ -52,6 +64,8 @@ done: true
## Buttons
Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
{% capture code %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}

19
pages/_docs/steps.md
View File

@@ -1,16 +1,17 @@
---
title: Steps
menu: docs.steps
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
new: true
---
Steps are progress indicators of a sequence of task steps.
## Default markup
Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
Use the `steps` class to create the default progress tracker and name the steps accordingly.
{% capture code %}
{% include ui/steps.html show-title=true %}
{% endcapture %}
@@ -19,13 +20,17 @@ Steps are progress indicators of a sequence of task steps.
## Tooltips
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips will display when a user hovers over a given step and help clarify what might not be clear from the interface.
{% capture code %}
{% include ui/steps.html show-title=true show-tooltip=true %}
{% endcapture %}
{% include example.html code=code %}
## Color
## Colour
You can customise the default progress indicator by changing the colour to one that better suits your design. Click [here]({% docs_url colors %}) to see the range of available colours.
{% capture code %}
{% include ui/steps.html color="green" show-title=true %}
@@ -36,6 +41,8 @@ Steps are progress indicators of a sequence of task steps.
## Steps without title
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
{% capture code %}
{% include ui/steps.html show-tooltip=true %}
{% endcapture %}
@@ -44,6 +51,8 @@ Steps are progress indicators of a sequence of task steps.
## Steps with numbers
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the colour to customise it.
{% capture code %}
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
{% endcapture %}

13
pages/_docs/tabs.md
View File

@@ -1,12 +1,15 @@
---
title: Tabs
menu: docs.tabs
description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organisation and make it easy for users to navigate.
bootstrap-link: components/navs/
---
## Default markup
Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
{% capture code %}
{% include cards/tabs.html id="ex1" %}
{% endcapture %}
@@ -15,6 +18,8 @@ bootstrap-link: components/navs/
## Tabs with icons
Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.
{% capture code %}
{% include cards/tabs.html icons=true settings=true id="ex2" %}
{% endcapture %}
@@ -23,6 +28,8 @@ bootstrap-link: components/navs/
## Tabs only with icons
Use tabs without label names to save space and make the tab content easy to recognize for international users.
{% capture code %}
{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
{% endcapture %}
@@ -31,6 +38,8 @@ bootstrap-link: components/navs/
## Tabs with dropdown
Make one or more of your tabs into a dropdown to add more options within one element.
{% capture code %}
{% include cards/tabs.html dropdown=true id="ex4" %}
{% endcapture %}
@@ -39,6 +48,8 @@ bootstrap-link: components/navs/
## Full-width tabs
Add the `nav-fill` class to make the tabs take up the full space of the parent element.
{% capture code %}
{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
{% endcapture %}
@@ -47,6 +58,8 @@ bootstrap-link: components/navs/
## Alternate style
Use the `nav-tabs-alt` class to make the labels display in capital letters.
{% capture code %}
{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
{% endcapture %}

8
pages/_docs/toasts.md
View File

@@ -1,13 +1,15 @@
---
title: Toasts
menu: docs.toasts
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
bootstrap-link: components/toasts/
---
## Default markup
Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
{% capture code %}
{% include ui/toast.html %}
{% endcapture %}
@@ -16,7 +18,7 @@ bootstrap-link: components/toasts/
## Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.
{% capture code %}
{% include ui/toast.html %}
@@ -26,7 +28,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
## Stacking toasts
If you want to stack toasts just put them in the same container.
Stack multiple toasts together by putting them within one container.
{% capture code %}
{% include ui/toast.html person-id=3 %}