mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
avatars, coutup, ribbons
This commit is contained in:
Martyna
@@ -68,7 +68,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
|
||||
|
||||
## Alert with avatar
|
||||
|
||||
Add an avatar to your alert modal to make it more personalised.
|
||||
Add an avatar to your alert modal to make it more personalized.
|
||||
|
||||
{% capture code %}
|
||||
{% for variant in site.variants %}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
---
|
||||
title: Avatars
|
||||
menu: docs.avatars
|
||||
description: Create and group avatars of various shapes and sizes with one component.
|
||||
description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
|
||||
---
|
||||
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `avatar` class to add an avatar to your interface design for greater customisation.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
{% include ui/avatar.html person-id=2 %}
|
||||
@@ -17,7 +19,7 @@ description: Create and group avatars of various shapes and sizes with one compo
|
||||
|
||||
## Avatar image
|
||||
|
||||
Set an image as the background.
|
||||
Set an image as the background to make users easy to indentify and create a personalised experience.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
@@ -29,7 +31,7 @@ Set an image as the background.
|
||||
|
||||
## Initials
|
||||
|
||||
You can easily use initials instead of images.
|
||||
You can also use initials instead of pictures.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html placeholder="AB" %}
|
||||
@@ -43,7 +45,7 @@ You can easily use initials instead of images.
|
||||
|
||||
## Avatar icons
|
||||
|
||||
You can also use icons in avatars.
|
||||
Apart from pictures and initials, you can also use icons to make the avatars more universal.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html icon="user" %}
|
||||
@@ -69,7 +71,7 @@ Customize the color of the avatars' background. You can click [here]({% docs_url
|
||||
|
||||
## Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html person-id=10 size="xl" %}
|
||||
@@ -83,7 +85,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
|
||||
|
||||
## Avatar status
|
||||
|
||||
Add an online or offline status indicator to show user's availability.
|
||||
Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html person-id=11 %}
|
||||
@@ -98,7 +100,7 @@ Add an online or offline status indicator to show user's availability.
|
||||
|
||||
## Avatar shape
|
||||
|
||||
Change the shape of an avatar with the default Bootstrap image classes.
|
||||
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar.html person-id=17 %}
|
||||
@@ -112,7 +114,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
|
||||
## Avatars list
|
||||
|
||||
You can easily create a list of avatars.
|
||||
Create a list of avatars within one parent container.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/avatar-list.html %}
|
||||
@@ -122,7 +124,7 @@ You can easily create a list of avatars.
|
||||
|
||||
## Stacked list
|
||||
|
||||
Make the list stack when it reaches a certain length.
|
||||
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
|
||||
|
||||
{% capture code %}
|
||||
<div class="avatar-list avatar-list-stacked">
|
||||
|
||||
@@ -8,7 +8,7 @@ bootstrap-link: components/badge/
|
||||
|
||||
## Default markup
|
||||
|
||||
The default badges are square and come in the basic set of colours.
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
{% capture code %}
|
||||
{% for color in site.colors %}
|
||||
@@ -30,9 +30,9 @@ Use the `.bagde-pill` class if you want to create a badge with rounded corners.
|
||||
{% include example.html code=code centered=true %}
|
||||
|
||||
|
||||
## Soft colour badges
|
||||
## Soft color badges
|
||||
|
||||
You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here]({% docs_url colors %}) to see the list of available colours and choose ones that best suit your design.
|
||||
You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here]({% docs_url colors %}) to see the list of available colors and choose ones that best suit your design.
|
||||
|
||||
{% capture code %}
|
||||
{% for color in site.colors %}
|
||||
@@ -68,7 +68,7 @@ Leave the HTML element empty if you want to create badges without any text. Empt
|
||||
|
||||
### Badge add-ons
|
||||
|
||||
Add the `.badge-addon` class to create an add-on that will customise your badge and make it more noticeable. You can use any colour variants and combine them as you see fit.
|
||||
Add the `.badge-addon` class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/badge.html text="task" color="green" addon="finished" %}
|
||||
@@ -80,7 +80,7 @@ Add the `.badge-addon` class to create an add-on that will customise your badge
|
||||
|
||||
### Badge avatars
|
||||
|
||||
Create the `.badge-avatar` class to add an avatar that will make a badge more personalised.
|
||||
Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/badge.html person-id=1 color="blue" %}
|
||||
|
||||
@@ -38,7 +38,7 @@ If you wish to use different separators, modify the `$breadcrumb-variants` varia
|
||||
|
||||
## Alternate version
|
||||
|
||||
Use the `breadcrumb-alternate` class to make the breadcrumb colours more neutral, retaining its function of showing the current location within an interface.
|
||||
Use the `breadcrumb-alternate` class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Buttons
|
||||
icon: fe fe-plus-square
|
||||
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customise the button's properties to improve the user experience of your website or system, changing the size, shape, colour and many more.
|
||||
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrap-link: components/buttons/
|
||||
done: true
|
||||
---
|
||||
@@ -9,7 +9,7 @@ done: true
|
||||
|
||||
## Button tag
|
||||
|
||||
As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or system and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
|
||||
As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
|
||||
|
||||
{% capture code %}
|
||||
<a href="#" class="btn btn-primary" role="button">Link</a>
|
||||
@@ -23,7 +23,7 @@ As one of the most common elements of UI design, buttons have a very important f
|
||||
|
||||
## Button variations
|
||||
|
||||
Use the button classes that correspond to the function of your button. The big range of available colours will help you show your buttons' purpose and make them easy to spot.
|
||||
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
|
||||
|
||||
{% capture code %}
|
||||
{% for button in site.button-variants %}
|
||||
@@ -49,9 +49,9 @@ 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 %}
|
||||
|
||||
|
||||
## Colour variations
|
||||
## Color 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.
|
||||
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
|
||||
|
||||
{% capture code %}
|
||||
{% for button in site.colors %}
|
||||
@@ -75,7 +75,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
|
||||
|
||||
## Square buttons
|
||||
|
||||
Use the `.btn-square` class to remove border-radius, if you want the corners of your button to be square, not rounded.
|
||||
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
|
||||
|
||||
{% capture code %}
|
||||
{% for button in site.button-variants %}
|
||||
@@ -103,7 +103,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
|
||||
|
||||
## Outline buttons
|
||||
|
||||
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the colour and background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
|
||||
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
|
||||
|
||||
{% capture code %}
|
||||
{% for button in site.button-variants %}
|
||||
@@ -142,7 +142,7 @@ You can also add the `.btn-block` class to create block level buttons which span
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognised and improve the aesthetics of your button design, giving it a modern and atractive look.
|
||||
Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.
|
||||
|
||||
Icons can be found [**here**](/docs/icons.html#icons)
|
||||
|
||||
@@ -203,7 +203,7 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
|
||||
## Icon buttons
|
||||
|
||||
Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognise for international users.
|
||||
Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/button.html icon="activity" color="primary" icon-only=true %}
|
||||
@@ -335,7 +335,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalised. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
|
||||
{% capture code %}
|
||||
<a href="#" class="btn btn-secondary">
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
title: Countup
|
||||
description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)
|
||||
menu: docs.countup
|
||||
---
|
||||
|
||||
Countups with many options that can be found [here](https://inorganik.github.io/countUp.js/)
|
||||
|
||||
To make countup add `data-countup` to any html text tag.
|
||||
|
||||
|
||||
## Default countup
|
||||
|
||||
Set number to count up.
|
||||
To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>30000</h1>
|
||||
@@ -20,7 +17,7 @@ Set number to count up.
|
||||
|
||||
## Duration
|
||||
|
||||
Set the `duration` of the countup. (2s is set by default)
|
||||
Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>30000</h1>
|
||||
@@ -32,8 +29,8 @@ Set the `duration` of the countup. (2s is set by default)
|
||||
|
||||
## Starting value
|
||||
|
||||
Set the start value of countup using `startVal`.
|
||||
If you set it bigger than the `count`, countup will run reverse.
|
||||
By default the countup will start from zero. If you want to set a different start value use `startVal`.
|
||||
You can also set the start value to be greater than the final value, so that it counts down instead of up.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup='{"startVal":12345}'>30000</h1>
|
||||
@@ -44,7 +41,7 @@ If you set it bigger than the `count`, countup will run reverse.
|
||||
|
||||
## Decimal places
|
||||
|
||||
Set how many decimal places to show using `decimalPlaces`.
|
||||
Set how many decimal numbers should be displayed using `decimalPlaces`.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>3.123</h1>
|
||||
@@ -57,7 +54,7 @@ Set how many decimal places to show using `decimalPlaces`.
|
||||
|
||||
## Easing
|
||||
|
||||
Disable easing using `"useEasing": false`. (`true` by default)
|
||||
Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>30000</h1>
|
||||
@@ -68,7 +65,7 @@ Disable easing using `"useEasing": false`. (`true` by default)
|
||||
|
||||
## Use grouping
|
||||
|
||||
Disable grouping using `"useGrouping": false`. (`true` by default)
|
||||
Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>30000</h1>
|
||||
@@ -79,7 +76,7 @@ Disable grouping using `"useGrouping": false`. (`true` by default)
|
||||
|
||||
## Separator
|
||||
|
||||
Set seperator that seperates groups using `separator`. (`,` by default)
|
||||
You can change the default comma group separator using `separator` and specifying the one you wish to use.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup>3000000</h1>
|
||||
@@ -92,7 +89,7 @@ Set seperator that seperates groups using `separator`. (`,` by default)
|
||||
|
||||
## Decimal separator
|
||||
|
||||
Set decimal separator using `decimal`. (`.` by default)
|
||||
You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
|
||||
@@ -105,7 +102,7 @@ Set decimal separator using `decimal`. (`.` by default)
|
||||
|
||||
## Prefix
|
||||
|
||||
Set countup prefix using `prefix`.
|
||||
Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup='{"prefix":"$"}'>30000</h1>
|
||||
@@ -117,7 +114,7 @@ Set countup prefix using `prefix`.
|
||||
|
||||
## Suffix
|
||||
|
||||
Set countup suffix using `suffix`.
|
||||
Set the countup suffix using `suffix`.
|
||||
|
||||
{% capture code %}
|
||||
<h1 data-countup='{"suffix":"%"}'>30</h1>
|
||||
@@ -133,4 +130,4 @@ Of course you can mix all of these:
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
|
||||
For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers help organise content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
bootstrap-link: components/dropdowns/#dividers
|
||||
done: true
|
||||
---
|
||||
@@ -48,7 +48,7 @@ You can modify the position of the text which is to be included in a separator a
|
||||
|
||||
## Divider color
|
||||
|
||||
Customise the colour of dividers to make them go well with your design. Click [here]({% docs_url colors %}) to see the list of available colours.
|
||||
Customize the color of dividers to make them go well with your design. Click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% capture code %}
|
||||
<p>
|
||||
|
||||
@@ -16,7 +16,7 @@ Use the default empty state to engage users in the critical moments of their exp
|
||||
|
||||
## 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.
|
||||
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/empty.html illustration=true %}
|
||||
|
||||
@@ -45,7 +45,7 @@ You can remove borders from your form control by adding the ``form-control-flush
|
||||
|
||||
## 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.
|
||||
Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.
|
||||
|
||||
{% capture code %}
|
||||
{% include parts/form/input-icon.html %}
|
||||
@@ -89,7 +89,7 @@ To inform users whether the entered value is correct or not, use either of the v
|
||||
|
||||
### 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.
|
||||
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 colored control frames and the validation feedback.
|
||||
|
||||
{% capture code %}
|
||||
{% include parts/form/validation-states.html lite=true %}
|
||||
@@ -109,7 +109,7 @@ Choose the size of an input control that will go well with your form design. Apa
|
||||
|
||||
## Image check
|
||||
|
||||
Add an image check to your form and give users visually appealing options to choose from.
|
||||
Add an image check to your form and give users visually attractive options to choose from.
|
||||
|
||||
{% capture code %}
|
||||
{% include parts/form/input-image.html %}
|
||||
@@ -117,9 +117,9 @@ Add an image check to your form and give users visually appealing options to cho
|
||||
{% include example.html code=code max-width="25rem" %}
|
||||
|
||||
|
||||
## Input colour
|
||||
## Input color
|
||||
|
||||
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.
|
||||
Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% capture code %}
|
||||
{% include parts/form/input-color.html %}
|
||||
@@ -127,9 +127,9 @@ Your input controls can come in a variety of colours, depending on your preferen
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
## Input colour picker
|
||||
## Input color picker
|
||||
|
||||
Add an colour picker to your form to let users customise it according to their preferences.
|
||||
Add an color picker to your form to let users customise it according to their preferences.
|
||||
|
||||
{% capture code %}
|
||||
{% include parts/form/input-colorpicker.html %}
|
||||
|
||||
@@ -8,12 +8,12 @@ order: -1
|
||||
|
||||
## What is Tabler?
|
||||
|
||||
Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customisable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
|
||||
Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
|
||||
|
||||
|
||||
## What are the benefits?
|
||||
|
||||
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customise your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
|
||||
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
|
||||
|
||||
To start using Tabler, first you need to set up the environment.
|
||||
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
---
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `ribbon` class to add the default ribbon to any section of your interface.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/ribbon.html %}
|
||||
{% endcapture %}
|
||||
@@ -15,14 +18,14 @@ done: true
|
||||
|
||||
## Ribbon position
|
||||
|
||||
You can easily change the position of a ribbon by adding a class to the element.
|
||||
You can change the position of a ribbon by adding one of the following classes to the element:
|
||||
|
||||
- `ribbon-top` - moves it to the top
|
||||
- `ribbon-right` - moves it to the right
|
||||
- `ribbon-bottom` - moves it to the bottom
|
||||
- `ribbon-left` - moves it to the lefg
|
||||
|
||||
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
||||
Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/ribbon.html top=true left=true %}
|
||||
@@ -42,7 +45,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
|
||||
|
||||
## Ribbon text
|
||||
|
||||
Set your own text in a ribbon.
|
||||
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/ribbon.html color="green" text="-50%" %}
|
||||
@@ -52,7 +55,7 @@ Set your own text in a ribbon.
|
||||
|
||||
## Ribbon style
|
||||
|
||||
Change the style of a ribbon.
|
||||
Change the style of a ribbon to make it go well with your interface design.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
|
||||
|
||||
@@ -5,7 +5,6 @@ description: Spinners are used to show the loading state of a component or page.
|
||||
bootstrap-link: components/spinners/
|
||||
done: true
|
||||
---
|
||||
loading state of a component
|
||||
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -20,7 +20,7 @@ Use the `steps` class to create the default progress tracker and name the 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.
|
||||
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed 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 %}
|
||||
@@ -28,9 +28,9 @@ Add tooltips, if you want to provide users with additional information about the
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
## Colour
|
||||
## Color
|
||||
|
||||
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.
|
||||
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here]({% docs_url colors %}) to see the range of available colors.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/steps.html color="green" show-title=true %}
|
||||
@@ -51,7 +51,7 @@ For designs with limited space, use progress indicators without titles and add t
|
||||
|
||||
## 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.
|
||||
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
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.
|
||||
description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
bootstrap-link: components/navs/
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user