@tabler/core 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/css/tabler-flags.css +2 -2
- package/dist/css/tabler-flags.css.map +1 -1
- package/dist/css/tabler-flags.min.css +2 -2
- package/dist/css/tabler-flags.min.css.map +1 -1
- package/dist/css/tabler-flags.rtl.css +2 -2
- package/dist/css/tabler-flags.rtl.css.map +1 -1
- package/dist/css/tabler-flags.rtl.min.css +2 -2
- package/dist/css/tabler-flags.rtl.min.css.map +1 -1
- package/dist/css/tabler-marketing.css +6 -6
- package/dist/css/tabler-marketing.css.map +1 -1
- package/dist/css/tabler-marketing.min.css +2 -2
- package/dist/css/tabler-marketing.min.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.css +6 -6
- package/dist/css/tabler-marketing.rtl.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.min.css +2 -2
- package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
- package/dist/css/tabler-payments.css +1 -1
- package/dist/css/tabler-payments.min.css +1 -1
- package/dist/css/tabler-payments.rtl.css +1 -1
- package/dist/css/tabler-payments.rtl.min.css +1 -1
- package/dist/css/tabler-props.css +448 -0
- package/dist/css/tabler-props.css.map +1 -0
- package/dist/css/tabler-props.min.css +8 -0
- package/dist/css/tabler-props.min.css.map +1 -0
- package/dist/css/tabler-props.rtl.css +447 -0
- package/dist/css/tabler-props.rtl.css.map +1 -0
- package/dist/css/tabler-props.rtl.min.css +8 -0
- package/dist/css/tabler-props.rtl.min.css.map +1 -0
- package/dist/css/tabler-socials.css +1 -1
- package/dist/css/tabler-socials.min.css +1 -1
- package/dist/css/tabler-socials.rtl.css +1 -1
- package/dist/css/tabler-socials.rtl.min.css +1 -1
- package/dist/css/tabler-themes.css +213 -0
- package/dist/css/tabler-themes.css.map +1 -0
- package/dist/css/tabler-themes.min.css +8 -0
- package/dist/css/tabler-themes.min.css.map +1 -0
- package/dist/css/tabler-themes.rtl.css +212 -0
- package/dist/css/tabler-themes.rtl.css.map +1 -0
- package/dist/css/tabler-themes.rtl.min.css +8 -0
- package/dist/css/tabler-themes.rtl.min.css.map +1 -0
- package/dist/css/tabler-vendors.css +31 -16
- package/dist/css/tabler-vendors.css.map +1 -1
- package/dist/css/tabler-vendors.min.css +2 -2
- package/dist/css/tabler-vendors.min.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.css +31 -16
- package/dist/css/tabler-vendors.rtl.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.min.css +2 -2
- package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
- package/dist/css/tabler.css +7662 -8392
- package/dist/css/tabler.css.map +1 -1
- package/dist/css/tabler.min.css +2 -2
- package/dist/css/tabler.min.css.map +1 -1
- package/dist/css/tabler.rtl.css +7751 -8481
- package/dist/css/tabler.rtl.css.map +1 -1
- package/dist/css/tabler.rtl.min.css +2 -2
- package/dist/css/tabler.rtl.min.css.map +1 -1
- package/dist/img/flags/kr.svg +1 -1
- package/dist/js/tabler-theme.esm.js +38 -0
- package/dist/js/tabler-theme.esm.js.map +1 -0
- package/dist/js/tabler-theme.esm.min.js +8 -0
- package/dist/js/tabler-theme.esm.min.js.map +1 -0
- package/dist/js/tabler-theme.js +45 -0
- package/dist/js/tabler-theme.js.map +1 -0
- package/dist/js/tabler-theme.min.js +8 -0
- package/dist/js/tabler-theme.min.js.map +1 -0
- package/dist/js/tabler.esm.js +28 -21
- package/dist/js/tabler.esm.js.map +1 -1
- package/dist/js/tabler.esm.min.js +5 -5
- package/dist/js/tabler.esm.min.js.map +1 -1
- package/dist/js/tabler.js +36 -24
- package/dist/js/tabler.js.map +1 -1
- package/dist/js/tabler.min.js +5 -5
- package/dist/js/tabler.min.js.map +1 -1
- package/js/src/autosize.js +1 -4
- package/js/src/input-mask.js +1 -3
- package/js/tabler-theme.js +35 -0
- package/js/{tabler.esm.js → tabler.js} +16 -0
- package/package.json +10 -8
- package/scss/_bootstrap-components.scss +0 -5
- package/scss/_core.scss +4 -0
- package/scss/_props.scss +91 -0
- package/scss/_utilities.scss +30 -1
- package/scss/_variables-dark.scss +1 -1
- package/scss/_variables.scss +79 -60
- package/scss/helpers/_index.scss +143 -0
- package/scss/layout/_core.scss +1 -0
- package/scss/layout/_dark.scss +33 -38
- package/scss/layout/_navbar.scss +2 -1
- package/scss/layout/_page.scss +1 -0
- package/scss/layout/_root.scss +26 -34
- package/scss/marketing/_core.scss +1 -1
- package/scss/marketing/_pricing.scss +1 -1
- package/scss/mixins/_mixins.scss +6 -6
- package/scss/tabler-props.scss +1 -0
- package/scss/tabler-themes.scss +121 -0
- package/scss/tabler-vendors.scss +3 -1
- package/scss/tabler.scss +0 -1
- package/scss/ui/_accordion.scss +31 -26
- package/scss/ui/_alerts.scss +19 -8
- package/scss/ui/_avatars.scss +35 -9
- package/scss/ui/_badges.scss +1 -1
- package/scss/ui/_buttons.scss +15 -17
- package/scss/ui/_close.scss +55 -2
- package/scss/ui/_dropdowns.scss +1 -0
- package/scss/ui/_forms.scss +12 -2
- package/scss/ui/_markdown.scss +10 -1
- package/scss/ui/_nav.scss +11 -1
- package/scss/ui/_offcanvas.scss +1 -1
- package/scss/ui/_pagination.scss +2 -0
- package/scss/ui/_signature.scss +4 -2
- package/scss/ui/_steps.scss +4 -0
- package/scss/ui/_tables.scss +16 -0
- package/scss/ui/_tags.scss +1 -1
- package/scss/ui/_type.scss +69 -7
- package/scss/ui/forms/_form-colorinput.scss +1 -1
- package/scss/ui/forms/_form-imagecheck.scss +6 -5
- package/scss/ui/forms/_form-selectgroup.scss +1 -1
- package/scss/utils/_colors.scss +58 -11
- package/scss/utils/_scroll.scss +0 -2
- package/scss/vendor/_coloris.scss +6 -1
- package/scss/vendor/_fslightbox.scss +1 -1
- package/scss/vendor/_jsvectormap.scss +2 -3
- package/scss/vendor/_litepicker.scss +1 -0
- package/scss/vendor/_nouislider.scss +0 -2
- package/scss/vendor/_tinymce.scss +3 -3
- package/scss/vendor/_tom-select.scss +7 -4
- package/scss/vendor/_turbo.scss +3 -0
- package/scss/vendor/_wysiwyg.scss +34 -0
- package/docs/emails/index.mdx +0 -14
- package/docs/emails/introduction/compiled-html.mdx +0 -29
- package/docs/emails/introduction/contents.mdx +0 -63
- package/docs/emails/introduction/index.mdx +0 -9
- package/docs/emails/introduction/source-html.mdx +0 -26
- package/docs/icons/index.mdx +0 -13
- package/docs/icons/libraries/index.mdx +0 -5
- package/docs/icons/libraries/preact.mdx +0 -42
- package/docs/icons/libraries/react.mdx +0 -42
- package/docs/icons/libraries/solidjs.mdx +0 -42
- package/docs/icons/libraries/svelte.mdx +0 -43
- package/docs/icons/libraries/vue.mdx +0 -50
- package/docs/icons/libraries/webfont.mdx +0 -60
- package/docs/icons/plugins/figma.mdx +0 -15
- package/docs/icons/plugins/index.mdx +0 -4
- package/docs/icons/static-files/eps.mdx +0 -15
- package/docs/icons/static-files/index.mdx +0 -5
- package/docs/icons/static-files/pdf.mdx +0 -15
- package/docs/icons/static-files/png.mdx +0 -31
- package/docs/icons/static-files/svg.mdx +0 -85
- package/docs/illustrations/index.mdx +0 -8
- package/docs/illustrations/introduction/contents.mdx +0 -77
- package/docs/illustrations/introduction/customization.mdx +0 -1198
- package/docs/illustrations/introduction/index.mdx +0 -5
- package/docs/illustrations/introduction/license.mdx +0 -90
- package/docs/img/browsers/brave.svg +0 -1
- package/docs/img/browsers/chrome.svg +0 -1
- package/docs/img/browsers/edge.svg +0 -1
- package/docs/img/browsers/electron.svg +0 -1
- package/docs/img/browsers/firefox.svg +0 -1
- package/docs/img/browsers/internet-explorer.svg +0 -1
- package/docs/img/browsers/opera.svg +0 -1
- package/docs/img/browsers/safari.svg +0 -1
- package/docs/img/browsers/vivaldi.svg +0 -1
- package/docs/img/cover-illustrations-dark.png +0 -0
- package/docs/img/cover-illustrations.png +0 -0
- package/docs/img/cover-tabler-dark.png +0 -0
- package/docs/img/cover-tabler.png +0 -0
- package/docs/img/icons/figma-plugin.png +0 -0
- package/docs/img/icons/package-angular-dark.png +0 -0
- package/docs/img/icons/package-angular.png +0 -0
- package/docs/img/icons/package-eps-dark.png +0 -0
- package/docs/img/icons/package-eps.png +0 -0
- package/docs/img/icons/package-js-dark.png +0 -0
- package/docs/img/icons/package-js.png +0 -0
- package/docs/img/icons/package-pdf-dark.png +0 -0
- package/docs/img/icons/package-pdf.png +0 -0
- package/docs/img/icons/package-png-dark.png +0 -0
- package/docs/img/icons/package-png.png +0 -0
- package/docs/img/icons/package-preact-dark.png +0 -0
- package/docs/img/icons/package-preact.png +0 -0
- package/docs/img/icons/package-react-dark.png +0 -0
- package/docs/img/icons/package-react-native-dark.png +0 -0
- package/docs/img/icons/package-react-native.png +0 -0
- package/docs/img/icons/package-react.png +0 -0
- package/docs/img/icons/package-solidjs-dark.png +0 -0
- package/docs/img/icons/package-solidjs.png +0 -0
- package/docs/img/icons/package-sprite-dark.png +0 -0
- package/docs/img/icons/package-sprite.png +0 -0
- package/docs/img/icons/package-svelte-dark.png +0 -0
- package/docs/img/icons/package-svelte.png +0 -0
- package/docs/img/icons/package-svg-dark.png +0 -0
- package/docs/img/icons/package-svg.png +0 -0
- package/docs/img/icons/package-vue-dark.png +0 -0
- package/docs/img/icons/package-vue.png +0 -0
- package/docs/img/icons/package-webfont-dark.png +0 -0
- package/docs/img/icons/package-webfont.png +0 -0
- package/docs/index.mdx +0 -16
- package/docs/ui/base/colors.mdx +0 -83
- package/docs/ui/base/index.mdx +0 -6
- package/docs/ui/base/typography.mdx +0 -311
- package/docs/ui/components/alerts.mdx +0 -406
- package/docs/ui/components/autosize.mdx +0 -25
- package/docs/ui/components/avatars.mdx +0 -227
- package/docs/ui/components/badges.mdx +0 -112
- package/docs/ui/components/breadcrumb.mdx +0 -199
- package/docs/ui/components/buttons.mdx +0 -1213
- package/docs/ui/components/cards.mdx +0 -417
- package/docs/ui/components/carousel.mdx +0 -459
- package/docs/ui/components/charts.mdx +0 -697
- package/docs/ui/components/countup.mdx +0 -165
- package/docs/ui/components/datagrid.mdx +0 -120
- package/docs/ui/components/divider.mdx +0 -68
- package/docs/ui/components/dropdowns.mdx +0 -302
- package/docs/ui/components/dropzone.mdx +0 -88
- package/docs/ui/components/empty.mdx +0 -149
- package/docs/ui/components/icons.mdx +0 -392
- package/docs/ui/components/index.mdx +0 -6
- package/docs/ui/components/inline-player.mdx +0 -58
- package/docs/ui/components/modals.mdx +0 -297
- package/docs/ui/components/offcanvas.mdx +0 -70
- package/docs/ui/components/placeholder.mdx +0 -273
- package/docs/ui/components/popover.mdx +0 -142
- package/docs/ui/components/progress.mdx +0 -241
- package/docs/ui/components/range-slider.mdx +0 -32
- package/docs/ui/components/ribbons.mdx +0 -207
- package/docs/ui/components/segmented-control.mdx +0 -401
- package/docs/ui/components/spinners.mdx +0 -135
- package/docs/ui/components/statuses.mdx +0 -322
- package/docs/ui/components/steps.mdx +0 -174
- package/docs/ui/components/switch-icon.mdx +0 -386
- package/docs/ui/components/tables.mdx +0 -397
- package/docs/ui/components/tabs.mdx +0 -396
- package/docs/ui/components/timelines.mdx +0 -697
- package/docs/ui/components/tinymce.mdx +0 -46
- package/docs/ui/components/toasts.mdx +0 -126
- package/docs/ui/components/tooltips.mdx +0 -65
- package/docs/ui/components/tracking.mdx +0 -548
- package/docs/ui/components/vector-maps.mdx +0 -166
- package/docs/ui/forms/form-color-check.mdx +0 -220
- package/docs/ui/forms/form-elements.mdx +0 -632
- package/docs/ui/forms/form-fieldset.mdx +0 -45
- package/docs/ui/forms/form-helpers.mdx +0 -91
- package/docs/ui/forms/form-image-check.mdx +0 -213
- package/docs/ui/forms/form-input-mask.mdx +0 -61
- package/docs/ui/forms/form-selectboxes.mdx +0 -398
- package/docs/ui/forms/form-validation.mdx +0 -62
- package/docs/ui/forms/index.mdx +0 -6
- package/docs/ui/getting-started/browser-support.mdx +0 -28
- package/docs/ui/getting-started/customize.mdx +0 -28
- package/docs/ui/getting-started/download.mdx +0 -44
- package/docs/ui/getting-started/faq.mdx +0 -30
- package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
- package/docs/ui/getting-started/index.mdx +0 -16
- package/docs/ui/getting-started/installation.mdx +0 -67
- package/docs/ui/getting-started/license.mdx +0 -30
- package/docs/ui/index.mdx +0 -8
- package/docs/ui/layout/index.mdx +0 -6
- package/docs/ui/layout/navbars.mdx +0 -164
- package/docs/ui/layout/navs-tabls.mdx +0 -201
- package/docs/ui/layout/page-headers.mdx +0 -365
- package/docs/ui/layout/page-layouts.mdx +0 -213
- package/docs/ui/plugins/flags.mdx +0 -316
- package/docs/ui/plugins/index.mdx +0 -6
- package/docs/ui/plugins/payments.mdx +0 -152
- package/docs/ui/plugins/social-icons.mdx +0 -135
- package/docs/ui/utilities/borders.mdx +0 -260
- package/docs/ui/utilities/cursors.mdx +0 -63
- package/docs/ui/utilities/index.mdx +0 -5
- package/docs/ui/utilities/interactions.mdx +0 -26
- package/docs/ui/utilities/margins.mdx +0 -234
- package/docs/ui/utilities/vertical-align.mdx +0 -66
- package/docs/ui/utilities/visually-hidden.mdx +0 -12
- package/js/tabler.umd.js +0 -15
|
@@ -1,316 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Flags
|
|
3
|
-
summary: 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.
|
|
4
|
-
plugin: flags
|
|
5
|
-
libs: tabler-flags
|
|
6
|
-
description: Visual representation of countries/languages.
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file in your page.
|
|
12
|
-
|
|
13
|
-
You can also include the plugin via CDN:
|
|
14
|
-
|
|
15
|
-
```html
|
|
16
|
-
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css" />
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Flag
|
|
20
|
-
|
|
21
|
-
To create a flag, add the `flag` class to a component and choose the country whose flag you want to use.
|
|
22
|
-
|
|
23
|
-
```html example centered separated plugins="flags"
|
|
24
|
-
<span class="flag flag-country-us"></span>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## Country flags
|
|
29
|
-
|
|
30
|
-
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found below.
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<span class="flag flag-country-ad"></span>
|
|
34
|
-
<span class="flag flag-country-ae"></span>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
```html example centered separated plugins="flags"
|
|
38
|
-
<span class="flag flag-country-tg"></span>
|
|
39
|
-
<span class="flag flag-country-br"></span>
|
|
40
|
-
<span class="flag flag-country-pt"></span>
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Flag sizes
|
|
44
|
-
|
|
45
|
-
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.
|
|
46
|
-
|
|
47
|
-
```html example centered separated plugins="flags"
|
|
48
|
-
<span class="flag flag-xl flag-country-us"></span>
|
|
49
|
-
<span class="flag flag-lg flag-country-us"></span>
|
|
50
|
-
<span class="flag flag-md flag-country-us"></span>
|
|
51
|
-
<span class="flag flag-sm flag-country-us"></span>
|
|
52
|
-
<span class="flag flag-xs flag-country-us"></span>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
```html
|
|
56
|
-
<span class="flag flag-xl ..."></span>
|
|
57
|
-
<span class="flag flag-lg ..."></span>
|
|
58
|
-
<span class="flag flag-md ..."></span>
|
|
59
|
-
<span class="flag flag-sm ..."></span>
|
|
60
|
-
<span class="flag flag-xs ..."></span>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Flags list
|
|
64
|
-
|
|
65
|
-
The full list of countries can be found below.
|
|
66
|
-
|
|
67
|
-
<FlagsTable countries={[
|
|
68
|
-
{ "name": "Andorra", "code": "ad" },
|
|
69
|
-
{ "name": "United Arab Emirates", "code": "ae" },
|
|
70
|
-
{ "name": "Afghanistan", "code": "af" },
|
|
71
|
-
{ "name": "Antigua", "code": "ag" },
|
|
72
|
-
{ "name": "Anguilla", "code": "ai" },
|
|
73
|
-
{ "name": "Armenia", "code": "am" },
|
|
74
|
-
{ "name": "Angolan", "code": "ao" },
|
|
75
|
-
{ "name": "Antarctica", "code": "aq" },
|
|
76
|
-
{ "name": "Argentina", "code": "ar" },
|
|
77
|
-
{ "name": "American Samoa", "code": "as" },
|
|
78
|
-
{ "name": "Austria", "code": "at" },
|
|
79
|
-
{ "name": "Australia", "code": "au" },
|
|
80
|
-
{ "name": "Aruba", "code": "aw" },
|
|
81
|
-
{ "name": "Aslan Islands", "code": "ax" },
|
|
82
|
-
{ "name": "Azerbaijan", "code": "az" },
|
|
83
|
-
{ "name": "Bosnian", "code": "ba" },
|
|
84
|
-
{ "name": "Barbados", "code": "bb" },
|
|
85
|
-
{ "name": "Belgium", "code": "be" },
|
|
86
|
-
{ "name": "Burkina Faso", "code": "bf" },
|
|
87
|
-
{ "name": "Bulgaria", "code": "bg" },
|
|
88
|
-
{ "name": "Bahrain", "code": "bh" },
|
|
89
|
-
{ "name": "Burundi", "code": "bi" },
|
|
90
|
-
{ "name": "Benin", "code": "bj" },
|
|
91
|
-
{ "name": "Saint-Barthélemy", "code": "bl" },
|
|
92
|
-
{ "name": "Bermuda", "code": "bm" },
|
|
93
|
-
{ "name": "Bruneian", "code": "bn" },
|
|
94
|
-
{ "name": "Bolivia", "code": "bo" },
|
|
95
|
-
{ "name": "Bonaire", "code": "bq-bo" },
|
|
96
|
-
{ "name": "Brazil", "code": "br" },
|
|
97
|
-
{ "name": "Bahamas", "code": "bs" },
|
|
98
|
-
{ "name": "Bhutan", "code": "bt" },
|
|
99
|
-
{ "name": "Bouvet Island", "code": "bv" },
|
|
100
|
-
{ "name": "Batswana", "code": "bw" },
|
|
101
|
-
{ "name": "Belarus", "code": "by" },
|
|
102
|
-
{ "name": "Belize", "code": "bz" },
|
|
103
|
-
{ "name": "Canada", "code": "ca" },
|
|
104
|
-
{ "name": "Cocos Island", "code": "cc" },
|
|
105
|
-
{ "name": "Democratic Republic of Congo", "code": "cd" },
|
|
106
|
-
{ "name": "Central African Republic", "code": "cf" },
|
|
107
|
-
{ "name": "Republic of the Congo", "code": "cg" },
|
|
108
|
-
{ "name": "Switzerland", "code": "ch" },
|
|
109
|
-
{ "name": "Ivory Coast", "code": "ci" },
|
|
110
|
-
{ "name": "Cook Island", "code": "ck" },
|
|
111
|
-
{ "name": "Chile", "code": "cl" },
|
|
112
|
-
{ "name": "Cameroon", "code": "cm" },
|
|
113
|
-
{ "name": "China", "code": "cn" },
|
|
114
|
-
{ "name": "Colombia", "code": "co" },
|
|
115
|
-
{ "name": "Costa Rica", "code": "cr" },
|
|
116
|
-
{ "name": "Cuba", "code": "cu" },
|
|
117
|
-
{ "name": "Cape Verde", "code": "cv" },
|
|
118
|
-
{ "name": "Curacao", "code": "cw" },
|
|
119
|
-
{ "name": "Christmas Island", "code": "cx" },
|
|
120
|
-
{ "name": "Cyprus", "code": "cy" },
|
|
121
|
-
{ "name": "Czech Republic", "code": "cz" },
|
|
122
|
-
{ "name": "Germany", "code": "de" },
|
|
123
|
-
{ "name": "Djibouti", "code": "dj" },
|
|
124
|
-
{ "name": "Denmark", "code": "dk" },
|
|
125
|
-
{ "name": "Dominica", "code": "dm" },
|
|
126
|
-
{ "name": "Dominican Republic", "code": "do" },
|
|
127
|
-
{ "name": "Algeria", "code": "dz" },
|
|
128
|
-
{ "name": "Ecuador", "code": "ec" },
|
|
129
|
-
{ "name": "Estonia", "code": "ee" },
|
|
130
|
-
{ "name": "Egypt", "code": "eg" },
|
|
131
|
-
{ "name": "Sahrawi", "code": "eh" },
|
|
132
|
-
{ "name": "Eritrea", "code": "er" },
|
|
133
|
-
{ "name": "Spain", "code": "es" },
|
|
134
|
-
{ "name": "Ethiopia", "code": "et" },
|
|
135
|
-
{ "name": "European Union", "code": "eu" },
|
|
136
|
-
{ "name": "Finland", "code": "fi" },
|
|
137
|
-
{ "name": "Fiji", "code": "fj" },
|
|
138
|
-
{ "name": "Falkland Islands", "code": "fk" },
|
|
139
|
-
{ "name": "Federate States of Micronesia", "code": "fm" },
|
|
140
|
-
{ "name": "Faroe Islands", "code": "fo" },
|
|
141
|
-
{ "name": "France", "code": "fr" },
|
|
142
|
-
{ "name": "Gabon", "code": "ga" },
|
|
143
|
-
{ "name": "Great Britain", "code": "gb" },
|
|
144
|
-
{ "name": "England", "code": "gb-eng" },
|
|
145
|
-
{ "name": "Northern Ireland", "code": "gb-nir" },
|
|
146
|
-
{ "name": "Scotland", "code": "gb-sct" },
|
|
147
|
-
{ "name": "Wales", "code": "gb-wls" },
|
|
148
|
-
{ "name": "Grenada", "code": "gd" },
|
|
149
|
-
{ "name": "Georgia", "code": "ge" },
|
|
150
|
-
{ "name": "Guyana", "code": "gf" },
|
|
151
|
-
{ "name": "Guernsey", "code": "gg" },
|
|
152
|
-
{ "name": "Ghana", "code": "gh" },
|
|
153
|
-
{ "name": "Gibraltar", "code": "gi" },
|
|
154
|
-
{ "name": "Greenland", "code": "gl" },
|
|
155
|
-
{ "name": "Gambia", "code": "gm" },
|
|
156
|
-
{ "name": "Guinea", "code": "gn" },
|
|
157
|
-
{ "name": "Guadeloupe", "code": "gp" },
|
|
158
|
-
{ "name": "Equatorial Guinea", "code": "gq" },
|
|
159
|
-
{ "name": "Greece", "code": "gr" },
|
|
160
|
-
{ "name": "South Georgia", "code": "gs" },
|
|
161
|
-
{ "name": "Guatemala", "code": "gt" },
|
|
162
|
-
{ "name": "Guam", "code": "gu" },
|
|
163
|
-
{ "name": "Guinea-Bissau", "code": "gw" },
|
|
164
|
-
{ "name": "Guyana", "code": "gy" },
|
|
165
|
-
{ "name": "Hong Kong", "code": "hk" },
|
|
166
|
-
{ "name": "Heard and McDonald Islands", "code": "hm" },
|
|
167
|
-
{ "name": "Honduras", "code": "hn" },
|
|
168
|
-
{ "name": "Croatia", "code": "hr" },
|
|
169
|
-
{ "name": "Haiti", "code": "ht" },
|
|
170
|
-
{ "name": "Hungary", "code": "hu" },
|
|
171
|
-
{ "name": "Indonesia", "code": "id" },
|
|
172
|
-
{ "name": "Ireland", "code": "ie" },
|
|
173
|
-
{ "name": "Israel", "code": "il" },
|
|
174
|
-
{ "name": "Isle of Man", "code": "im" },
|
|
175
|
-
{ "name": "India", "code": "in" },
|
|
176
|
-
{ "name": "British Indian Ocean Territory", "code": "io" },
|
|
177
|
-
{ "name": "Iraq", "code": "iq" },
|
|
178
|
-
{ "name": "Iran", "code": "ir" },
|
|
179
|
-
{ "name": "Iceland", "code": "is" },
|
|
180
|
-
{ "name": "Italy", "code": "it" },
|
|
181
|
-
{ "name": "Jersey", "code": "je" },
|
|
182
|
-
{ "name": "Jamaica", "code": "jm" },
|
|
183
|
-
{ "name": "Jordan", "code": "jo" },
|
|
184
|
-
{ "name": "Japan", "code": "jp" },
|
|
185
|
-
{ "name": "Kenya", "code": "ke" },
|
|
186
|
-
{ "name": "Kyrgyzstan", "code": "kg" },
|
|
187
|
-
{ "name": "Cambodia", "code": "kh" },
|
|
188
|
-
{ "name": "Kiribati", "code": "ki" },
|
|
189
|
-
{ "name": "Comoros", "code": "km" },
|
|
190
|
-
{ "name": "Saint Kitts and Nevis", "code": "kn" },
|
|
191
|
-
{ "name": "North Korea", "code": "kp" },
|
|
192
|
-
{ "name": "South Korea", "code": "kr" },
|
|
193
|
-
{ "name": "Kuwait", "code": "kw" },
|
|
194
|
-
{ "name": "Cayman Islands", "code": "ky" },
|
|
195
|
-
{ "name": "Kazakhstan", "code": "kz" },
|
|
196
|
-
{ "name": "Laos", "code": "la" },
|
|
197
|
-
{ "name": "Lebanese", "code": "lb" },
|
|
198
|
-
{ "name": "Saint Lucia", "code": "lc" },
|
|
199
|
-
{ "name": "Liechtenstein", "code": "li" },
|
|
200
|
-
{ "name": "Sri Lanka", "code": "lk" },
|
|
201
|
-
{ "name": "Liberia", "code": "lr" },
|
|
202
|
-
{ "name": "Lesotho", "code": "ls" },
|
|
203
|
-
{ "name": "Lithuania", "code": "lt" },
|
|
204
|
-
{ "name": "Luxembourg", "code": "lu" },
|
|
205
|
-
{ "name": "Latvia", "code": "lv" },
|
|
206
|
-
{ "name": "Libya", "code": "ly" },
|
|
207
|
-
{ "name": "Morocco", "code": "ma" },
|
|
208
|
-
{ "name": "Monaco", "code": "mc" },
|
|
209
|
-
{ "name": "Moldova", "code": "md" },
|
|
210
|
-
{ "name": "Montenegro", "code": "me" },
|
|
211
|
-
{ "name": "Saint Martin", "code": "mf" },
|
|
212
|
-
{ "name": "Madagascar", "code": "mg" },
|
|
213
|
-
{ "name": "Marshall Islands", "code": "mh" },
|
|
214
|
-
{ "name": "Macedonia", "code": "mk" },
|
|
215
|
-
{ "name": "Mali", "code": "ml" },
|
|
216
|
-
{ "name": "Myanmar", "code": "mm" },
|
|
217
|
-
{ "name": "Mongolia", "code": "mn" },
|
|
218
|
-
{ "name": "Macao", "code": "mo" },
|
|
219
|
-
{ "name": "Northern Mariana Islands", "code": "mp" },
|
|
220
|
-
{ "name": "Martinique", "code": "mq" },
|
|
221
|
-
{ "name": "Mauritania", "code": "mr" },
|
|
222
|
-
{ "name": "Montserrat", "code": "ms" },
|
|
223
|
-
{ "name": "Malta", "code": "mt" },
|
|
224
|
-
{ "name": "Mauritius", "code": "mu" },
|
|
225
|
-
{ "name": "Maldives", "code": "mv" },
|
|
226
|
-
{ "name": "Malawi", "code": "mw" },
|
|
227
|
-
{ "name": "Mexico", "code": "mx" },
|
|
228
|
-
{ "name": "Malaysia", "code": "my" },
|
|
229
|
-
{ "name": "Mozambique", "code": "mz" },
|
|
230
|
-
{ "name": "Namibia", "code": "na" },
|
|
231
|
-
{ "name": "New Caledonia", "code": "nc" },
|
|
232
|
-
{ "name": "Niger", "code": "ne" },
|
|
233
|
-
{ "name": "Norfolk Island", "code": "nf" },
|
|
234
|
-
{ "name": "Nigeria", "code": "ng" },
|
|
235
|
-
{ "name": "Nicaragua", "code": "ni" },
|
|
236
|
-
{ "name": "Norway", "code": "no" },
|
|
237
|
-
{ "name": "Nepal", "code": "np" },
|
|
238
|
-
{ "name": "Nauruan", "code": "nr" },
|
|
239
|
-
{ "name": "New Zealand", "code": "nz" },
|
|
240
|
-
{ "name": "Oman", "code": "om" },
|
|
241
|
-
{ "name": "Panama", "code": "pa" },
|
|
242
|
-
{ "name": "Peru", "code": "pe" },
|
|
243
|
-
{ "name": "French Polynesia", "code": "pf" },
|
|
244
|
-
{ "name": "Papua New Guinea", "code": "pg" },
|
|
245
|
-
{ "name": "Philippines", "code": "ph" },
|
|
246
|
-
{ "name": "Pakistan", "code": "pk" },
|
|
247
|
-
{ "name": "Poland", "code": "pl" },
|
|
248
|
-
{ "name": "Saint Pierre", "code": "pm" },
|
|
249
|
-
{ "name": "Pitcairn Islands", "code": "pn" },
|
|
250
|
-
{ "name": "Puerto Rico", "code": "pr" },
|
|
251
|
-
{ "name": "Palestine", "code": "ps" },
|
|
252
|
-
{ "name": "Portugal", "code": "pt" },
|
|
253
|
-
{ "name": "Palau", "code": "pw" },
|
|
254
|
-
{ "name": "Paraguay", "code": "py" },
|
|
255
|
-
{ "name": "Qatar", "code": "qa" },
|
|
256
|
-
{ "name": "Reunion Island", "code": "re" },
|
|
257
|
-
{ "name": "Romania", "code": "ro" },
|
|
258
|
-
{ "name": "Serbia", "code": "rs" },
|
|
259
|
-
{ "name": "Russia", "code": "ru" },
|
|
260
|
-
{ "name": "Rwanda", "code": "rw" },
|
|
261
|
-
{ "name": "Saudi Arabia", "code": "sa" },
|
|
262
|
-
{ "name": "Solomon Islands", "code": "sb" },
|
|
263
|
-
{ "name": "Seychelles", "code": "sc" },
|
|
264
|
-
{ "name": "Sudan", "code": "sd" },
|
|
265
|
-
{ "name": "Sweden", "code": "se" },
|
|
266
|
-
{ "name": "Singapore", "code": "sg" },
|
|
267
|
-
{ "name": "Saint Helena", "code": "sh" },
|
|
268
|
-
{ "name": "Slovenia", "code": "si" },
|
|
269
|
-
{ "name": "Svalbard Island", "code": "sj" },
|
|
270
|
-
{ "name": "Slovakia", "code": "sk" },
|
|
271
|
-
{ "name": "Sierra Leone", "code": "sl" },
|
|
272
|
-
{ "name": "San Marino", "code": "sm" },
|
|
273
|
-
{ "name": "Senegal", "code": "sn" },
|
|
274
|
-
{ "name": "Somalia", "code": "so" },
|
|
275
|
-
{ "name": "Suriname", "code": "sr" },
|
|
276
|
-
{ "name": "South Sudan", "code": "ss" },
|
|
277
|
-
{ "name": "Sao Tome", "code": "st" },
|
|
278
|
-
{ "name": "El Salvador", "code": "sv" },
|
|
279
|
-
{ "name": "Sint Maarten", "code": "sx" },
|
|
280
|
-
{ "name": "Syria", "code": "sy" },
|
|
281
|
-
{ "name": "Swaziland", "code": "sz" },
|
|
282
|
-
{ "name": "Turks and Caicos", "code": "tc" },
|
|
283
|
-
{ "name": "Chad", "code": "td" },
|
|
284
|
-
{ "name": "French Southern and Antarctic Lands", "code": "tf" },
|
|
285
|
-
{ "name": "Togo", "code": "tg" },
|
|
286
|
-
{ "name": "Thailand", "code": "th" },
|
|
287
|
-
{ "name": "Tajikistan", "code": "tj" },
|
|
288
|
-
{ "name": "Tokelau", "code": "tk" },
|
|
289
|
-
{ "name": "Timor Leste", "code": "tl" },
|
|
290
|
-
{ "name": "Turkmenistan", "code": "tm" },
|
|
291
|
-
{ "name": "Tunisia", "code": "tn" },
|
|
292
|
-
{ "name": "Tonga", "code": "to" },
|
|
293
|
-
{ "name": "Turkey", "code": "tr" },
|
|
294
|
-
{ "name": "Trinidad and Tobago", "code": "tt" },
|
|
295
|
-
{ "name": "Tuvalu", "code": "tv" },
|
|
296
|
-
{ "name": "Tanzania", "code": "tz" },
|
|
297
|
-
{ "name": "Ukraine", "code": "ua" },
|
|
298
|
-
{ "name": "Uganda", "code": "ug" },
|
|
299
|
-
{ "name": "United States Minor Islands", "code": "um" },
|
|
300
|
-
{ "name": "United States of America", "code": "us" },
|
|
301
|
-
{ "name": "Uruguay", "code": "uy" },
|
|
302
|
-
{ "name": "Uzbekistan", "code": "uz" },
|
|
303
|
-
{ "name": "Vatican City", "code": "va" },
|
|
304
|
-
{ "name": "Saint Vincent", "code": "vc" },
|
|
305
|
-
{ "name": "Venezuela", "code": "ve" },
|
|
306
|
-
{ "name": "British Virgin Islands", "code": "vg" },
|
|
307
|
-
{ "name": "Virgin Islands", "code": "vi" },
|
|
308
|
-
{ "name": "Vietnam", "code": "vn" },
|
|
309
|
-
{ "name": "Vanuatu", "code": "vu" },
|
|
310
|
-
{ "name": "Wallis and Futuna", "code": "wf" },
|
|
311
|
-
{ "name": "Samoa", "code": "ws" },
|
|
312
|
-
{ "name": "Yemen", "code": "ye" },
|
|
313
|
-
{ "name": "South Africa", "code": "za" },
|
|
314
|
-
{ "name": "Zambia", "code": "zm" },
|
|
315
|
-
{ "name": "Zimbabwe", "code": "zw" }
|
|
316
|
-
]}/>
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Payments
|
|
3
|
-
summary: 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.
|
|
4
|
-
plugin: payments
|
|
5
|
-
description: User-friendly payment provider icons.
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file in your page.
|
|
11
|
-
|
|
12
|
-
You can also include the plugin via CDN:
|
|
13
|
-
|
|
14
|
-
```html
|
|
15
|
-
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css" />
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Payment
|
|
19
|
-
|
|
20
|
-
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.
|
|
21
|
-
|
|
22
|
-
```html example plugins="payments" separated centered
|
|
23
|
-
<span class="payment payment-provider-shopify"></span>
|
|
24
|
-
<span class="payment payment-provider-visa"></span>
|
|
25
|
-
<span class="payment payment-provider-paypal"></span>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Payment sizes
|
|
29
|
-
|
|
30
|
-
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.
|
|
31
|
-
|
|
32
|
-
```html example plugins="payments" separated centered
|
|
33
|
-
<span class="payment payment-xl payment-provider-shopify"></span>
|
|
34
|
-
<span class="payment payment-lg payment-provider-visa"></span>
|
|
35
|
-
<span class="payment payment-md payment-provider-paypal"></span>
|
|
36
|
-
<span class="payment payment-sm payment-provider-amazon"></span>
|
|
37
|
-
<span class="payment payment-xs payment-provider-blik"></span>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## List of available payment providers
|
|
41
|
-
|
|
42
|
-
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.
|
|
43
|
-
|
|
44
|
-
<PaymentsTable providers={[
|
|
45
|
-
{ "name": "2c2p", "code": "2c2p" },
|
|
46
|
-
{ "name": "2checkout", "code": "2checkout" },
|
|
47
|
-
{ "name": "Adyen", "code": "adyen" },
|
|
48
|
-
{ "name": "Affirm", "code": "affirm" },
|
|
49
|
-
{ "name": "Alipay Plus", "code": "alipay-plus" },
|
|
50
|
-
{ "name": "Alipay", "code": "alipay" },
|
|
51
|
-
{ "name": "Allegro Pay", "code": "allegro-pay" },
|
|
52
|
-
{ "name": "Amazon Pay", "code": "amazon-pay" },
|
|
53
|
-
{ "name": "Amazon", "code": "amazon" },
|
|
54
|
-
{ "name": "American Express", "code": "americanexpress" },
|
|
55
|
-
{ "name": "Apple Pay", "code": "applepay" },
|
|
56
|
-
{ "name": "Authorize", "code": "authorize" },
|
|
57
|
-
{ "name": "Autopay", "code": "autopay" },
|
|
58
|
-
{ "name": "Bancontact", "code": "bancontact" },
|
|
59
|
-
{ "name": "Binance USD", "code": "binance-usd" },
|
|
60
|
-
{ "name": "Bitcoin", "code": "bitcoin" },
|
|
61
|
-
{ "name": "BitPay", "code": "bitpay" },
|
|
62
|
-
{ "name": "Bkash", "code": "bkash" },
|
|
63
|
-
{ "name": "Blik", "code": "blik" },
|
|
64
|
-
{ "name": "Braintree", "code": "braintree" },
|
|
65
|
-
{ "name": "Cash App", "code": "cash-app" },
|
|
66
|
-
{ "name": "Chime", "code": "chime" },
|
|
67
|
-
{ "name": "Cirrus", "code": "cirrus" },
|
|
68
|
-
{ "name": "ClickandBuy", "code": "clickandbuy" },
|
|
69
|
-
{ "name": "Coinkite", "code": "coinkite" },
|
|
70
|
-
{ "name": "Diners Club", "code": "dinersclub" },
|
|
71
|
-
{ "name": "Direct Debit", "code": "directdebit" },
|
|
72
|
-
{ "name": "Discover", "code": "discover" },
|
|
73
|
-
{ "name": "Dotpay", "code": "dotpay" },
|
|
74
|
-
{ "name": "Dwolla", "code": "dwolla" },
|
|
75
|
-
{ "name": "EasyPaisa", "code": "easypaisa" },
|
|
76
|
-
{ "name": "eBay", "code": "ebay" },
|
|
77
|
-
{ "name": "Elo", "code": "elo" },
|
|
78
|
-
{ "name": "ePayco", "code": "epayco" },
|
|
79
|
-
{ "name": "eSewa", "code": "esewa" },
|
|
80
|
-
{ "name": "Ethereum", "code": "ethereum" },
|
|
81
|
-
{ "name": "eWay", "code": "eway" },
|
|
82
|
-
{ "name": "FonePay", "code": "fonepay" },
|
|
83
|
-
{ "name": "Giropay", "code": "giropay" },
|
|
84
|
-
{ "name": "Google Pay", "code": "google-pay" },
|
|
85
|
-
{ "name": "Google Wallet", "code": "googlewallet" },
|
|
86
|
-
{ "name": "HubSpot", "code": "hubspot" },
|
|
87
|
-
{ "name": "Ingenico", "code": "ingenico" },
|
|
88
|
-
{ "name": "iDeal", "code": "ideal" },
|
|
89
|
-
{ "name": "IMEPay", "code": "imepay" },
|
|
90
|
-
{ "name": "JCB", "code": "jcb" },
|
|
91
|
-
{ "name": "Khalti", "code": "khalti" },
|
|
92
|
-
{ "name": "Klarna", "code": "klarna" },
|
|
93
|
-
{ "name": "Laser", "code": "laser" },
|
|
94
|
-
{ "name": "Litecoin", "code": "litecoin" },
|
|
95
|
-
{ "name": "Maestro", "code": "maestro" },
|
|
96
|
-
{ "name": "Mastercard", "code": "mastercard" },
|
|
97
|
-
{ "name": "Mercado Pago", "code": "mercado-pago" },
|
|
98
|
-
{ "name": "MetaMask", "code": "metamask" },
|
|
99
|
-
{ "name": "MIR", "code": "mir" },
|
|
100
|
-
{ "name": "Monero", "code": "monero" },
|
|
101
|
-
{ "name": "MoneyGram", "code": "moneygram" },
|
|
102
|
-
{ "name": "Neteller", "code": "neteller" },
|
|
103
|
-
{ "name": "Ogone", "code": "ogone" },
|
|
104
|
-
{ "name": "OKPay", "code": "okpay" },
|
|
105
|
-
{ "name": "OpenSea", "code": "opensea" },
|
|
106
|
-
{ "name": "Paybox", "code": "paybox" },
|
|
107
|
-
{ "name": "Payconiq", "code": "payconiq" },
|
|
108
|
-
{ "name": "Payka", "code": "payka" },
|
|
109
|
-
{ "name": "Payline", "code": "payline" },
|
|
110
|
-
{ "name": "Paymill", "code": "paymill" },
|
|
111
|
-
{ "name": "Payone", "code": "payone" },
|
|
112
|
-
{ "name": "Payoneer", "code": "payoneer" },
|
|
113
|
-
{ "name": "PayPal", "code": "paypal" },
|
|
114
|
-
{ "name": "PayPo", "code": "paypo" },
|
|
115
|
-
{ "name": "Paysafe", "code": "paysafe" },
|
|
116
|
-
{ "name": "Paysafecard", "code": "paysafecard" },
|
|
117
|
-
{ "name": "PayU", "code": "payu" },
|
|
118
|
-
{ "name": "Payza", "code": "payza" },
|
|
119
|
-
{ "name": "Poli", "code": "poli" },
|
|
120
|
-
{ "name": "Przelewy24", "code": "przelewy24" },
|
|
121
|
-
{ "name": "Revolut Pay", "code": "revolut-pay" },
|
|
122
|
-
{ "name": "Ripple", "code": "ripple" },
|
|
123
|
-
{ "name": "Sage", "code": "sage" },
|
|
124
|
-
{ "name": "Samsung Pay", "code": "samsung-pay" },
|
|
125
|
-
{ "name": "SEPA", "code": "sepa" },
|
|
126
|
-
{ "name": "Shop Pay", "code": "shop-pay" },
|
|
127
|
-
{ "name": "Shopify", "code": "shopify" },
|
|
128
|
-
{ "name": "Skrill", "code": "skrill" },
|
|
129
|
-
{ "name": "Solana", "code": "solana" },
|
|
130
|
-
{ "name": "Solo", "code": "solo" },
|
|
131
|
-
{ "name": "Spingo", "code": "spingo" },
|
|
132
|
-
{ "name": "Square", "code": "square" },
|
|
133
|
-
{ "name": "Stax", "code": "stax" },
|
|
134
|
-
{ "name": "Stripe", "code": "stripe" },
|
|
135
|
-
{ "name": "Switch", "code": "switch" },
|
|
136
|
-
{ "name": "Tether", "code": "tether" },
|
|
137
|
-
{ "name": "Tpay", "code": "tpay" },
|
|
138
|
-
{ "name": "Troy", "code": "troy" },
|
|
139
|
-
{ "name": "True USD", "code": "true-usd" },
|
|
140
|
-
{ "name": "Ukash", "code": "ukash" },
|
|
141
|
-
{ "name": "UnionPay", "code": "unionpay" },
|
|
142
|
-
{ "name": "Venmo", "code": "venmo" },
|
|
143
|
-
{ "name": "Verifone", "code": "verifone" },
|
|
144
|
-
{ "name": "Verisign", "code": "verisign" },
|
|
145
|
-
{ "name": "Visa", "code": "visa" },
|
|
146
|
-
{ "name": "WeChat Pay", "code": "we-chat-pay" },
|
|
147
|
-
{ "name": "WebMoney", "code": "webmoney" },
|
|
148
|
-
{ "name": "Western Union", "code": "westernunion" },
|
|
149
|
-
{ "name": "Wise", "code": "wise" },
|
|
150
|
-
{ "name": "Worldpay", "code": "worldpay" },
|
|
151
|
-
{ "name": "Zelle", "code": "zelle" }
|
|
152
|
-
]}/>
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Social Icons
|
|
3
|
-
summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
|
|
4
|
-
plugin: socials
|
|
5
|
-
libs: tabler-socials
|
|
6
|
-
description: Connect users to your social profiles.
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file in your page.
|
|
12
|
-
|
|
13
|
-
You can also include the plugin via CDN:
|
|
14
|
-
|
|
15
|
-
```html
|
|
16
|
-
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-socials.min.css" />
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Social icons
|
|
20
|
-
|
|
21
|
-
To create a social icon, add the `social` class to a component and also add the class for the specific social app whose icon you want to use.
|
|
22
|
-
|
|
23
|
-
```html example centered separated plugins="socials"
|
|
24
|
-
<span class="social social-app-facebook"></span>
|
|
25
|
-
<span class="social social-app-x"></span>
|
|
26
|
-
<span class="social social-app-instagram"></span>
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## Social apps list
|
|
30
|
-
|
|
31
|
-
Here is a list of all available social apps:
|
|
32
|
-
|
|
33
|
-
<SocialsTable apps={[
|
|
34
|
-
{
|
|
35
|
-
"name": "Apple",
|
|
36
|
-
"file": "apple"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "Discord",
|
|
40
|
-
"file": "discord"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "Dribbble",
|
|
44
|
-
"file": "dribbble"
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
"name": "Facebook",
|
|
48
|
-
"file": "facebook"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "Figma",
|
|
52
|
-
"file": "figma"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "GitHub",
|
|
56
|
-
"file": "github"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"name": "Google",
|
|
60
|
-
"file": "google"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "Instagram",
|
|
64
|
-
"file": "instagram"
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"name": "LinkedIn",
|
|
68
|
-
"file": "linkedin"
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
"name": "Medium",
|
|
72
|
-
"file": "medium"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"name": "Meta",
|
|
76
|
-
"file": "meta"
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"name": "MetaMask",
|
|
80
|
-
"file": "metamask"
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
"name": "Pinterest",
|
|
84
|
-
"file": "pinterest"
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
"name": "Reddit",
|
|
88
|
-
"file": "reddit"
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"name": "Signal",
|
|
92
|
-
"file": "signal"
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
"name": "Skype",
|
|
96
|
-
"file": "skype"
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"name": "Snapchat",
|
|
100
|
-
"file": "snapchat"
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
"name": "Spotify",
|
|
104
|
-
"file": "spotify"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"name": "Telegram",
|
|
108
|
-
"file": "telegram"
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
"name": "TikTok",
|
|
112
|
-
"file": "tiktok"
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
"name": "Tumblr",
|
|
116
|
-
"file": "tumblr"
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
"name": "Twitch",
|
|
120
|
-
"file": "twitch"
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
"name": "VK",
|
|
124
|
-
"file": "vk"
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"name": "X (Twitter)",
|
|
128
|
-
"file": "x"
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"name": "YouTube",
|
|
132
|
-
"file": "youtube"
|
|
133
|
-
}
|
|
134
|
-
]} />
|
|
135
|
-
|