mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev
This commit is contained in:
codecalm
@@ -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,17 +1,15 @@
|
||||
---
|
||||
title: Cards
|
||||
menu: docs.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.
|
||||
description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrap-link: components/card/
|
||||
done: true
|
||||
---
|
||||
|
||||
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
|
||||
|
||||
|
||||
## Default card
|
||||
|
||||
To create a new card you have to use the `.card` and `.card-body` classes. You can put any content inside.
|
||||
Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card.html body="This is some text within a card body." %}
|
||||
@@ -21,9 +19,9 @@ To create a new card you have to use the `.card` and `.card-body` classes. You c
|
||||
|
||||
## Card padding
|
||||
|
||||
You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes.
|
||||
You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.
|
||||
|
||||
Cards with the `.card-sm` class are very well suited for small items such as snippets, etc., while `.card-lg` can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.
|
||||
Cards with the `.card-sm` class are well suited for small items such as snippets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
|
||||
@@ -36,9 +34,7 @@ Cards with the `.card-sm` class are very well suited for small items such as sni
|
||||
|
||||
## Card with title
|
||||
|
||||
To add a title to a card you should add a class `.card-title` inside `.card-body`.
|
||||
|
||||
You can also place the title inside the `.card-header` element - then the title will be separated from the content by a horizontal line.
|
||||
Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card.html title="Card title" body="This is some text within a card body." %}
|
||||
@@ -49,6 +45,8 @@ You can also place the title inside the `.card-header` element - then the title
|
||||
|
||||
## Card with title and image
|
||||
|
||||
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your inteface design and draw users' attention.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card.html img-top=true title="Card with title and image" %}
|
||||
{% endcapture %}
|
||||
@@ -57,7 +55,7 @@ You can also place the title inside the `.card-header` element - then the title
|
||||
|
||||
## Blog post card
|
||||
|
||||
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
|
||||
Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/blog-single.html type="image" %}
|
||||
@@ -67,7 +65,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
|
||||
|
||||
## Row deck
|
||||
|
||||
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
|
||||
Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
|
||||
|
||||
{% capture code %}
|
||||
<div class="row row-deck">
|
||||
@@ -93,7 +91,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
|
||||
|
||||
## Post card with aside image
|
||||
|
||||
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
|
||||
You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
|
||||
@@ -103,6 +101,8 @@ You can also add the image on the left side of the card. All you need do to is:
|
||||
|
||||
## Color variations
|
||||
|
||||
Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
|
||||
|
||||
{% capture code %}
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-6">
|
||||
@@ -118,6 +118,8 @@ You can also add the image on the left side of the card. All you need do to is:
|
||||
|
||||
## Stacked card
|
||||
|
||||
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card.html class="card-stacked" title="Stacked card" %}
|
||||
{% endcapture %}
|
||||
@@ -126,6 +128,8 @@ You can also add the image on the left side of the card. All you need do to is:
|
||||
|
||||
## Tabbed card
|
||||
|
||||
Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/card-tabs.html count=4 %}
|
||||
{% endcapture %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Colors
|
||||
menu: docs.colors
|
||||
description:
|
||||
description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrap-link: utilities/colors/
|
||||
done: true
|
||||
---
|
||||
@@ -9,9 +9,13 @@ done: true
|
||||
|
||||
## Base colors
|
||||
|
||||
Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
|
||||
|
||||
{% include example/colors-table.html %}
|
||||
|
||||
|
||||
## Light colors
|
||||
|
||||
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.
|
||||
|
||||
{% include example/colors-table.html light=true %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Flags
|
||||
menu: docs.flags
|
||||
description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
plugin: flags
|
||||
done: true
|
||||
---
|
||||
@@ -8,6 +9,8 @@ done: true
|
||||
|
||||
## Flag
|
||||
|
||||
To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/flag.html flag="tg" class="mr-1" %}
|
||||
{% include ui/flag.html flag="br" class="mr-1" %}
|
||||
@@ -18,7 +21,7 @@ done: true
|
||||
|
||||
## Flag sizes
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
|
||||
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
|
||||
@@ -31,7 +34,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
|
||||
|
||||
## Types
|
||||
|
||||
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
|
||||
To use the flag of a particular country, add the `flag-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-ad`.
|
||||
|
||||
<table>
|
||||
{% for flag in site.data.flags %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
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.
|
||||
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/
|
||||
---
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
---
|
||||
title: Form helpers
|
||||
description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
|
||||
---
|
||||
|
||||
|
||||
## Input help
|
||||
|
||||
Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
|
||||
|
||||
{% capture code %}
|
||||
<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>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -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,10 +1,13 @@
|
||||
---
|
||||
title: Input mask
|
||||
description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
---
|
||||
|
||||
|
||||
## Default markup
|
||||
|
||||
Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
|
||||
|
||||
{% capture code %}
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Payments
|
||||
menu: docs.payments
|
||||
description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
|
||||
plugin: payments
|
||||
done: true
|
||||
---
|
||||
@@ -8,6 +9,8 @@ done: true
|
||||
|
||||
## Payment
|
||||
|
||||
To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/payment.html class="mr-3" payment="shopify"%}
|
||||
{% include ui/payment.html class="mr-3" payment="visa" %}
|
||||
@@ -18,7 +21,7 @@ done: true
|
||||
|
||||
## Payment sizes
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
|
||||
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
|
||||
@@ -31,6 +34,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
|
||||
|
||||
## Types
|
||||
|
||||
Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
|
||||
|
||||
<table class="table-vcenter">
|
||||
{% for payment in site.data.payments %}
|
||||
<tr>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Progress
|
||||
description: A progress bar can be used to show a user how far along he is in a process.
|
||||
title: Progress bars
|
||||
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrap-link: components/progress
|
||||
done: true
|
||||
---
|
||||
@@ -8,7 +8,7 @@ done: true
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a default progress bar, add a `.progress` class to a `<div>` element:
|
||||
To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/progress.html %}
|
||||
@@ -18,7 +18,7 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
|
||||
|
||||
## Progress size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/progress.html value=57 size="sm" %}
|
||||
@@ -28,7 +28,7 @@ Using Bootstrap’s typical naming structure, you can create a standard progress
|
||||
|
||||
## Progress without value
|
||||
|
||||
Remove the showed value by adding a class called `.sr-only`.
|
||||
Remove the displayed value by adding the `.sr-only` class.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/progress.html value=75 show-value=false %}
|
||||
@@ -38,7 +38,7 @@ Remove the showed value by adding a class called `.sr-only`.
|
||||
|
||||
## Indeterminate progress
|
||||
|
||||
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/progress.html indeterminate=true size="sm" %}
|
||||
@@ -58,7 +58,7 @@ You can also use native HTML5 `<progress>` element.
|
||||
|
||||
## Progress color
|
||||
|
||||
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
Customize the color of the progress bar to suit your design. Click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}
|
||||
|
||||
@@ -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,13 +1,14 @@
|
||||
---
|
||||
title: Tables
|
||||
menu: docs.tables
|
||||
description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
bootstrap-link: content/tables/
|
||||
---
|
||||
|
||||
|
||||
## Basic Table
|
||||
|
||||
A basic Bootstrap table has a light padding and only horizontal dividers.
|
||||
The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
|
||||
|
||||
The `.table` class adds basic styling to a table:
|
||||
|
||||
@@ -17,10 +18,9 @@ The `.table` class adds basic styling to a table:
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
|
||||
## Responsive tables
|
||||
|
||||
Across each breakpoint, use `.table-responsive` class for horizontal scrolling tables. Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a specific breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
|
||||
|
||||
{% capture code %}
|
||||
<table class="table table-responsive">
|
||||
@@ -48,7 +48,7 @@ Across each breakpoint, use `.table-responsive` class for horizontal scrolling t
|
||||
|
||||
## No wrap
|
||||
|
||||
Prevents table cell content from wrapping to another line.
|
||||
If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/table.html nowrap=true responsive=true %}
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
|
||||
@@ -1,18 +1,23 @@
|
||||
---
|
||||
title: Timelines
|
||||
description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
menu: docs.timelines
|
||||
---
|
||||
|
||||
|
||||
## Timeline
|
||||
|
||||
The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/timeline.html %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
## Simple Timeline
|
||||
## Simple timeline
|
||||
|
||||
Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
|
||||
|
||||
{% capture code %}
|
||||
{% include cards/timeline.html simple=true %}
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
---
|
||||
title: Typography
|
||||
menu: docs.typography
|
||||
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
||||
description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrap-link: content/typography/
|
||||
---
|
||||
|
||||
|
||||
## Headings
|
||||
|
||||
Use HTML headings to organize content on your website and make the structure clear and user-friendly.
|
||||
|
||||
{% capture code %}
|
||||
{% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
|
||||
{% endfor %}
|
||||
@@ -17,6 +19,8 @@ bootstrap-link: content/typography/
|
||||
|
||||
## Paragraphs
|
||||
|
||||
Organize longer pieces of text into paragraphs using the `p` tag.
|
||||
|
||||
{% capture code %}
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
@@ -26,6 +30,8 @@ bootstrap-link: content/typography/
|
||||
|
||||
## Semantic text elements
|
||||
|
||||
Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
|
||||
|
||||
{% capture code %}
|
||||
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
|
||||
<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
|
||||
@@ -50,6 +56,8 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
|
||||
|
||||
## Horizontal rules
|
||||
|
||||
Use the `hr` tag to represent a thematic break between paragraphs within one section.
|
||||
|
||||
{% capture code %}
|
||||
<hr>
|
||||
{% endcapture %}
|
||||
@@ -58,6 +66,8 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
|
||||
|
||||
## Horizontal rules with label
|
||||
|
||||
You can also add a label to a horizontal rule and align it as you see fit.
|
||||
|
||||
{% capture code %}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
@@ -86,7 +96,7 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
|
||||
|
||||
## Optimized for different alphabets
|
||||
|
||||
Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages.
|
||||
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
|
||||
|
||||
{% capture code %}
|
||||
<h5>Chinese</h5>
|
||||
@@ -124,7 +134,7 @@ Tabler has been optimized to correctly display content in any language. The Tabl
|
||||
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
Transform the content of components with text capitalization classes.
|
||||
|
||||
{% capture code %}
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
@@ -136,7 +146,7 @@ Transform text in components with text capitalization classes.
|
||||
|
||||
## Letter spacing
|
||||
|
||||
Utilities for controlling the tracking (letter spacing) of an element.
|
||||
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
|
||||
|
||||
{% capture code %}
|
||||
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
|
||||
@@ -146,9 +156,9 @@ Utilities for controlling the tracking (letter spacing) of an element.
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
## Line Height
|
||||
## Line height
|
||||
|
||||
Utilities for controlling the leading (line height) of an element.
|
||||
Control the leading (line height) of an element.
|
||||
|
||||
{% capture code %}
|
||||
<p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
@@ -161,9 +171,9 @@ Utilities for controlling the leading (line height) of an element.
|
||||
|
||||
## Antialiasing
|
||||
|
||||
Utilities for controlling the font smoothing of an element.
|
||||
Control the font smoothing of an element.
|
||||
|
||||
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
|
||||
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
|
||||
|
||||
{% capture code %}
|
||||
<div class="antialiased">Text with antialiasing</div>
|
||||
@@ -174,7 +184,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
|
||||
|
||||
## Markdown elements
|
||||
|
||||
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
|
||||
If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag.
|
||||
|
||||
{% capture code %}
|
||||
<div class="markdown">
|
||||
|
||||
Reference in New Issue
Block a user