Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

New docs (#1492)

Browse Source
This commit is contained in:
Paweł Kuna
2023-02-27 01:21:44 +01:00
committed by GitHub
parent adbf5d887c
commit d162b06c4c
110 changed files with 10504 additions and 3382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/plugins/flags.mdx Normal file
View File

@@ -0,0 +1,54 @@
---
title: Flags
description: Thanks to the Tabler flags plugin, 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
libs: tabler-flags
---
import config from '../config.json'
## Installation
This part of Tabler is distributed as plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file to your page.
You can also include plugin via CDN:
```html
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
```
## 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.
```html code example centered separated plugins="flags"
<span class="flag flag-country-tg"></span>
<span class="flag flag-country-br"></span>
<span class="flag flag-country-pt"></span>
```
## Flag sizes
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.
```html example centered separated plugins="flags"
<span class="flag flag-xl flag-country-us"></span>
<span class="flag flag-lg flag-country-us"></span>
<span class="flag flag-md flag-country-us"></span>
<span class="flag flag-sm flag-country-us"></span>
<span class="flag flag-xs flag-country-us"></span>
```
```html
<span class="flag flag-xl ..."></span>
<span class="flag flag-lg ..."></span>
<span class="flag flag-md ..."></span>
<span class="flag flag-sm ..."></span>
<span class="flag flag-xs ..."></span>
```
## Types
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`.
<FlagsTable flags={config.flags}/>

45
docs/plugins/payments.mdx Normal file
View File

@@ -0,0 +1,45 @@
---
title: 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
---
import config from '../config.json'
## Installation
This part of Tabler is distributed as plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file to your page.
You can also include plugin via CDN:
```html
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css">
```
## 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.
```html example code plugins="payments" separated centered
<span class="payment payment-provider-shopify"></span>
<span class="payment payment-provider-visa"></span>
<span class="payment payment-provider-paypal"></span>
```
## Payment sizes
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.
```html example code plugins="payments" separated centered
<span class="payment payment-xl payment-provider-shopify"></span>
<span class="payment payment-lg payment-provider-visa"></span>
<span class="payment payment-md payment-provider-paypal"></span>
<span class="payment payment-sm payment-provider-amazon"></span>
<span class="payment payment-xs payment-provider-blik"></span>
```
## List of available payment providers
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.
<PaymentsTable payments={config.payments} />