提交 a58ba1ea 编写于 作者: M Martyna

flags, payments, timeline

上级 e784e10e
---
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 %}
......
---
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>
......
---
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 %}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册