mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Add a Tabler Payments docs section with @tabler/payments-* pages (#2906)
Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
39 files changed
+751
-58
No files matched your search
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/docs": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Added Introduction pages with quick starts and cover images to the Icons, Illustrations, Emails and Payments docs sections.
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@tabler/docs": minor
|
||||||
|
"@tabler/preview": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Added a Tabler Payments docs section with `@tabler/payments-*` package pages for React, Vue, Preact and Astro.
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Added the same border and radius to `figure` images as plain images in `.prose` and `.markdown` content.
|
||||||
@@ -64,7 +64,8 @@ Prose (formerly markdown)
|
|||||||
}
|
}
|
||||||
|
|
||||||
> img,
|
> img,
|
||||||
> p > img {
|
> p > img,
|
||||||
|
> figure > img {
|
||||||
@include border-radius(var(--border-radius));
|
@include border-radius(var(--border-radius));
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -25,7 +25,7 @@ interface Props {
|
|||||||
const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props
|
const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props
|
||||||
|
|
||||||
// shared/data/illustrations.json has 125 entries.
|
// shared/data/illustrations.json has 125 entries.
|
||||||
const illustrationsCount = 125
|
const illustrationsCount = 130
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- BEGIN DOCS TOC -->{
|
<!-- BEGIN DOCS TOC -->{
|
||||||
|
|||||||
@@ -15,26 +15,26 @@ Once you unzip the downloaded file, you will see the following structure:
|
|||||||
```text
|
```text
|
||||||
tabler-emails/
|
tabler-emails/
|
||||||
├── emails/
|
├── emails/
|
||||||
| ├── absence/
|
| ├── absence/
|
||||||
| | ├── assets/
|
| | ├── assets/
|
||||||
| | ├── compiled.html
|
| | ├── compiled.html
|
||||||
| | ├── compiled-dark.html
|
| | ├── compiled-dark.html
|
||||||
| | ├── source.html
|
| | ├── source.html
|
||||||
| | ├── source-dark.html
|
| | ├── source-dark.html
|
||||||
| | ├── screenshot.jpg
|
| | ├── screenshot.jpg
|
||||||
| | ├── screenshot-dark.jpg
|
| | ├── screenshot-dark.jpg
|
||||||
| | ├── screenshot-mobile.jpg
|
| | ├── screenshot-mobile.jpg
|
||||||
| | └── screenshot-mobile-dark.jpg
|
| | └── screenshot-mobile-dark.jpg
|
||||||
| ├── access-token/
|
| ├── access-token/
|
||||||
| ├── account-deleted/
|
| ├── account-deleted/
|
||||||
| ├── .../
|
| ├── .../
|
||||||
| ├── welcome/
|
| ├── welcome/
|
||||||
| └── whishlist/
|
| └── whishlist/
|
||||||
├── images/
|
├── images/
|
||||||
| ├── chart-donuts/
|
| ├── chart-donuts/
|
||||||
| ├── icons/
|
| ├── icons/
|
||||||
| ├── illustrations/
|
| ├── illustrations/
|
||||||
| └── overlays/
|
| └── overlays/
|
||||||
├── license.txt
|
├── license.txt
|
||||||
└── readme.html
|
└── readme.html
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -7,4 +7,38 @@ summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates.
|
|||||||
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
---
|
---
|
||||||
|
|
||||||
Tabler Emails is a package of ready-to-use HTML email templates. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere. Read about the [package contents](/emails/contents), use the [compiled templates](/emails/compiled-html) as they are, or customize the [source files](/emails/source-html) to match your brand.
|
import { Image } from 'astro:assets'
|
||||||
|
import coverLight from '../../images/cover-emails.jpg'
|
||||||
|
import coverDark from '../../images/cover-emails-dark.jpg'
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<Image src={coverLight} alt="Tabler Emails" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
<Image src={coverDark} alt="Tabler Emails" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Tabler Emails is a package of 80 ready-to-use HTML email templates — transactional messages like welcome, password reset or invoice, and marketing layouts. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere.
|
||||||
|
|
||||||
|
## What's inside
|
||||||
|
|
||||||
|
Every template lives in its own folder and comes in four variants, plus screenshots for a quick preview:
|
||||||
|
|
||||||
|
```text
|
||||||
|
tabler-emails/emails/welcome/
|
||||||
|
├── compiled.html ← ready to send, styles inlined
|
||||||
|
├── compiled-dark.html ← the same, in the dark color scheme
|
||||||
|
├── source.html ← editable source, for customization
|
||||||
|
├── source-dark.html
|
||||||
|
├── assets/ ← images used by this template
|
||||||
|
└── screenshot.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
The `compiled` files have all styles inlined and work as-is in email clients. The `source` files are easier to read and edit — use them when you want to change the layout, then inline the styles before sending.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
1. Pick a template folder — for example `emails/welcome/`.
|
||||||
|
2. Open `compiled.html` and replace the texts, links and logo with your own.
|
||||||
|
3. Upload the images from `assets/` to your server or CDN and update their URLs.
|
||||||
|
4. Paste the result into your email provider or send it through your backend.
|
||||||
|
|
||||||
|
No build step is required for the compiled templates. Read about the [package contents](/emails/contents), use the [compiled templates](/emails/compiled-html) as they are, or customize the [source files](/emails/source-html) to match your brand.
|
||||||
@@ -7,10 +7,52 @@ order: 2
|
|||||||
description: Over 5000 pixel-perfect icons for web design and development
|
description: Over 5000 pixel-perfect icons for web design and development
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import TabsPackage from '@components/TabsPackage.astro'
|
||||||
|
import { Code } from 'astro:components'
|
||||||
|
import { Image } from 'astro:assets'
|
||||||
import { site } from '@shared/lib/site'
|
import { site } from '@shared/lib/site'
|
||||||
|
import coverLight from '../../images/cover-icons.jpg'
|
||||||
|
import coverDark from '../../images/cover-icons-dark.jpg'
|
||||||
|
|
||||||
Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
<figure>
|
||||||
|
<Image src={coverLight} alt="Tabler Icons" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
<Image src={coverDark} alt="Tabler Icons" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
To use Tabler Icons, visit [tabler.io/icons](https://tabler.io/icons). From there, you can browse the full collection of icons by category or search for a specific icon using the search bar.
|
Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. All icons are drawn on a 24×24 pixel grid with a consistent stroke, so they line up and scale cleanly at any size.
|
||||||
|
|
||||||
Once you have found an icon you like, you can download it in various file formats, including [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png), and [Icon Font](/icons/libraries/webfont).
|
To browse the collection, visit [tabler.io/icons](https://tabler.io/icons). You can search by name or browse by category, then copy the SVG code or download the icon straight from the site.
|
||||||
|
|
||||||
|
## What's inside
|
||||||
|
|
||||||
|
The same icon set is distributed in several forms, so you can pick the one that fits your stack:
|
||||||
|
|
||||||
|
- **Framework libraries** — official packages for [React](/icons/libraries/react), [Vue](/icons/libraries/vue), [Svelte](/icons/libraries/svelte), [SolidJS](/icons/libraries/solidjs), [Preact](/icons/libraries/preact) and [Astro](/icons/libraries/astro). Icons are tree-shakable components — only the ones you import end up in your bundle.
|
||||||
|
- **[Webfont](/icons/libraries/webfont)** — add icons with plain CSS classes, no build step needed.
|
||||||
|
- **[Static files](/icons/static-files)** — every icon as a standalone [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png) or [PDF](/icons/static-files/pdf) file, for design tools and non-web use.
|
||||||
|
- **[Figma plugin](/icons/plugins/figma)** — insert icons directly into your Figma designs.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
In a framework project, install the package for your stack — for example React:
|
||||||
|
|
||||||
|
<TabsPackage name="@tabler/icons-react" />
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { IconArrowLeft } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
<IconArrowLeft />
|
||||||
|
```
|
||||||
|
|
||||||
|
Without a build step, link the webfont stylesheet from a CDN and add icons with an `<i>` element:
|
||||||
|
|
||||||
|
<Code lang="html" code={`<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@${site.iconsVersion}/dist/tabler-icons.min.css"
|
||||||
|
/>`} />
|
||||||
|
|
||||||
|
```html
|
||||||
|
<i class="ti ti-brand-tabler"></i>
|
||||||
|
```
|
||||||
|
|
||||||
|
Each library page covers installation, usage and styling options for its framework in detail.
|
||||||
@@ -15,25 +15,25 @@ Once downloaded, unzip the compressed folder and you’ll see something like thi
|
|||||||
```text
|
```text
|
||||||
tabler-illustrations/
|
tabler-illustrations/
|
||||||
├── eps/
|
├── eps/
|
||||||
| ├── dark/
|
|
||||||
| └── light/
|
|
||||||
├── figma/
|
|
||||||
├── pdf/
|
|
||||||
| ├── dark/
|
| ├── dark/
|
||||||
| └── light/
|
| └── light/
|
||||||
├── png/
|
├── figma/
|
||||||
|
├── pdf/
|
||||||
| ├── dark/
|
| ├── dark/
|
||||||
| └── light/
|
| └── light/
|
||||||
├── png-background/
|
├── png/
|
||||||
| ├── dark/
|
|
||||||
| └── light/
|
|
||||||
├── svg/
|
|
||||||
| ├── dark/
|
| ├── dark/
|
||||||
| └── light/
|
| └── light/
|
||||||
├── svg-css-autodark/
|
├── png-background/
|
||||||
|
| ├── dark/
|
||||||
|
| └── light/
|
||||||
|
├── svg/
|
||||||
|
| ├── dark/
|
||||||
|
| └── light/
|
||||||
|
├── svg-css-autodark/
|
||||||
└── svg-css-variables/
|
└── svg-css-variables/
|
||||||
├── dark/
|
├── dark/
|
||||||
└── light/
|
└── light/
|
||||||
```
|
```
|
||||||
|
|
||||||
## Understanding the file structure in Tabler Illustrations
|
## Understanding the file structure in Tabler Illustrations
|
||||||
|
|||||||
@@ -5,7 +5,43 @@ description: Customizable illustrations for modern web and mobile designs.
|
|||||||
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
||||||
---
|
---
|
||||||
|
|
||||||
<img src="/img/cover-illustrations.png" alt="Tabler Illustrations" class="hide-theme-dark" width="1600" height="750" />
|
import { Image } from 'astro:assets'
|
||||||
<img src="/img/cover-illustrations-dark.png" alt="Tabler Illustrations" class="hide-theme-light" width="1600" height="750" />
|
import coverLight from '../../images/cover-illustrations.jpg'
|
||||||
|
import coverDark from '../../images/cover-illustrations-dark.jpg'
|
||||||
|
|
||||||
This section covers everything you need to start with Tabler Illustrations. [Preview the collection](/illustrations/preview), check [what is inside the package](/illustrations/contents), learn how to [customize the illustrations](/illustrations/customization), and read the [license terms](/illustrations/license).
|
<figure>
|
||||||
|
<Image src={coverLight} alt="Tabler Illustrations" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
<Image src={coverDark} alt="Tabler Illustrations" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Tabler Illustrations is a set of 130 illustrations for empty states, error pages, onboarding screens and marketing sections. Every illustration comes in a light and a dark variant, so it fits both color modes of your interface.
|
||||||
|
|
||||||
|
## What's inside
|
||||||
|
|
||||||
|
Each illustration ships in several formats, all included in one package:
|
||||||
|
|
||||||
|
- **SVG** — the primary format for the web, in `light/` and `dark/` variants.
|
||||||
|
- **SVG with CSS variables** — colors exposed as `--tblr-illustrations-*` custom properties, so you can re-color the artwork from CSS.
|
||||||
|
- **SVG with auto dark mode** — one file that switches between light and dark styling on its own, based on the page theme.
|
||||||
|
- **PNG** — raster exports, with and without a background.
|
||||||
|
- **EPS and PDF** — vector files for print and design tools.
|
||||||
|
- **Figma** — a source file for editing the artwork directly.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
Embed an illustration like any other image:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="illustrations/svg/light/boy-girl.svg" alt="" width="400" height="300" />
|
||||||
|
```
|
||||||
|
|
||||||
|
To match the artwork to your brand, use the CSS-variables version and override its custom properties — for example the primary color and the skin tone:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--tblr-illustrations-primary: #066fd1;
|
||||||
|
--tblr-illustrations-skin: #ffcb9d;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
[Preview the collection](/illustrations/preview), check [what is inside the package](/illustrations/contents), learn how to [customize the illustrations](/illustrations/customization), and read the [license terms](/illustrations/license).
|
||||||
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
title: Payments
|
title: CSS plugin
|
||||||
|
seoTitle: Payments CSS plugin
|
||||||
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.
|
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.
|
||||||
description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments plugin to make checkout pages clearer.
|
description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments CSS plugin to make checkout pages clearer.
|
||||||
|
order: 1
|
||||||
css-plugins: [payments]
|
css-plugins: [payments]
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
title: Tabler Payments
|
||||||
|
summary: Tabler Payments is a set of over 160 payment provider logos — Visa, Mastercard, PayPal and many more — that you can use to make checkout pages and payment forms clearer and more trustworthy.
|
||||||
|
order: 5
|
||||||
|
description: Over 160 payment provider logos for checkout pages and payment forms.
|
||||||
|
css-plugins: [payments]
|
||||||
|
---
|
||||||
|
|
||||||
|
import Example from '@components/Example.astro'
|
||||||
|
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
||||||
|
import { Image } from 'astro:assets'
|
||||||
|
import payments from '@data/payments.json'
|
||||||
|
import coverLight from '../../images/cover-payments.jpg'
|
||||||
|
import coverDark from '../../images/cover-payments-dark.jpg'
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<Image src={coverLight} alt="Tabler Payments" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
<Image src={coverDark} alt="Tabler Payments" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Tabler Payments is a collection of { payments.length } payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions — light and dark — so it looks right on any background.
|
||||||
|
|
||||||
|
<Example centered>
|
||||||
|
<span class="payment payment-lg payment-provider-visa"></span>
|
||||||
|
<span class="payment payment-lg payment-provider-mastercard"></span>
|
||||||
|
<span class="payment payment-lg payment-provider-paypal"></span>
|
||||||
|
<span class="payment payment-lg payment-provider-shopify"></span>
|
||||||
|
<span class="payment payment-lg payment-provider-amazon"></span>
|
||||||
|
</Example>
|
||||||
|
|
||||||
|
You can use the logos in two ways:
|
||||||
|
|
||||||
|
- **[CSS plugin](/payments/css)** — add the `payment` and `payment-provider-*` classes to a `<span>`. Works with plain HTML and any framework, and needs only one extra stylesheet.
|
||||||
|
- **[Libraries](/payments/libraries)** — render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.
|
||||||
|
|
||||||
|
Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
For the CSS plugin, include the stylesheet from a CDN and add a `<span>` with the provider's class:
|
||||||
|
|
||||||
|
<CdnImportPlugin plugins={['payments']} />
|
||||||
|
|
||||||
|
<Example centered html={`<span class="payment payment-provider-visa"></span>`} />
|
||||||
|
|
||||||
|
For a framework project, install the package for your stack and import the providers you need — only the logos you import end up in your bundle:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { PaymentVisa } from '@tabler/payments-react';
|
||||||
|
|
||||||
|
<PaymentVisa size={32} />
|
||||||
|
```
|
||||||
|
|
||||||
|
The [CSS plugin](/payments/css) page documents all classes, sizes and the full provider list; each [library page](/payments/libraries) covers installation and props for its framework.
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
title: Astro
|
||||||
|
description: Add Tabler payment provider logos to Astro projects with the official tree-shakable package. Render 100+ payment provider logos as native components.
|
||||||
|
summary: Tabler Payments for Astro provides payment provider logos as native Astro components, rendered server-side with no client-side hydration.
|
||||||
|
---
|
||||||
|
|
||||||
|
import TabsPackage from '@components/TabsPackage.astro'
|
||||||
|
|
||||||
|
This is an alternative to the [CSS payments plugin](/payments/css) for Astro projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Astro component. This gives you type-checked props and no separate CSS file to load. It renders server-side only, with no client-side JavaScript shipped — the same as any other `.astro` component.
|
||||||
|
|
||||||
|
This package is pre-1.0: the API may still change before a 1.0 release.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
<TabsPackage name="@tabler/payments-astro" />
|
||||||
|
|
||||||
|
`astro` is a peer dependency — the package reuses the Astro version already in your project instead of bundling its own. This package specifically needs Astro `>=7.2.4 <8.0.0`.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need in your frontmatter and render it in your template:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import { PaymentVisa } from '@tabler/payments-astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<PaymentVisa variant="dark" size={32} />
|
||||||
|
```
|
||||||
|
|
||||||
|
This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
|
||||||
|
|
||||||
|
### Rendering a provider by name at runtime
|
||||||
|
|
||||||
|
Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
|
||||||
|
|
||||||
|
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import { Payment } from '@tabler/payments-astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Payment provider="visa" variant="dark" size={32} />
|
||||||
|
```
|
||||||
|
|
||||||
|
The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
|
||||||
|
|
||||||
|
If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference:
|
||||||
|
|
||||||
|
| name | type | default | required |
|
||||||
|
| ---------- | ------------------- | ------- | -------------- |
|
||||||
|
| `variant` | `'light' \| 'dark'` | `light` | no |
|
||||||
|
| `size` | `string \| number` | `24` | no |
|
||||||
|
| `title` | `string` | — | no |
|
||||||
|
| `provider` | `string` | — | `Payment` only |
|
||||||
|
|
||||||
|
### `variant`
|
||||||
|
|
||||||
|
Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
<PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
|
||||||
|
<PaymentVisa variant="dark" /> <!-- for dark backgrounds -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### `size`
|
||||||
|
|
||||||
|
Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
<PaymentVisa size={24} /> <!-- 24px tall, 40px wide (the default) -->
|
||||||
|
<PaymentVisa size={48} /> <!-- 48px tall, 80px wide -->
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
<PaymentVisa size={24} width={64} /> <!-- 24px tall, but exactly 64px wide -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### `title`
|
||||||
|
|
||||||
|
Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
<PaymentVisa title="Visa" />
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead.
|
||||||
|
|
||||||
|
### Everything else
|
||||||
|
|
||||||
|
Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
<PaymentVisa class="rounded shadow-sm" data-testid="visa-logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### `provider` (dynamic `Payment` component only)
|
||||||
|
|
||||||
|
Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
|
||||||
|
|
||||||
|
## Available providers
|
||||||
|
|
||||||
|
There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list of provider names and slugs, and a note on why the `astro` version is pinned exactly.
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Libraries
|
||||||
|
description: Official Tabler Payments packages for React, Vue, Preact and Astro. Use over 100 payment provider logos as native, tree-shakable components.
|
||||||
|
summary: The libraries section offers official Tabler Payments packages for popular frameworks, so you can render payment provider logos as native components instead of CSS classes.
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
Tabler Payments ships official packages for the most popular frameworks. Pick the package for your stack and render payment provider logos as native components, with type-checked props and tree-shaking. The [CSS plugin](/payments/css) is also available if you prefer plain CSS classes.
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
title: Preact
|
||||||
|
description: Add Tabler payment provider logos to Preact apps with the official tree-shakable package. Render 100+ payment provider logos as components.
|
||||||
|
summary: Tabler Payments for Preact offers payment provider logos as tree-shakable components, so you can use them the same way as any other Preact component.
|
||||||
|
---
|
||||||
|
|
||||||
|
import TabsPackage from '@components/TabsPackage.astro'
|
||||||
|
|
||||||
|
This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
|
||||||
|
|
||||||
|
This package is pre-1.0: the API may still change before a 1.0 release.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
<TabsPackage name="@tabler/payments-preact" />
|
||||||
|
|
||||||
|
`preact` is a peer dependency — the package reuses the Preact version already in your project instead of bundling its own.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { PaymentVisa } from '@tabler/payments-preact';
|
||||||
|
|
||||||
|
function AcceptedCards() {
|
||||||
|
return <PaymentVisa variant="dark" size={32} />;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
|
||||||
|
|
||||||
|
### Rendering a provider by name at runtime
|
||||||
|
|
||||||
|
Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
|
||||||
|
|
||||||
|
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Payment } from '@tabler/payments-preact';
|
||||||
|
|
||||||
|
<Payment provider="visa" variant="dark" size={32} />
|
||||||
|
```
|
||||||
|
|
||||||
|
The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
|
||||||
|
|
||||||
|
If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference:
|
||||||
|
|
||||||
|
| name | type | default | required |
|
||||||
|
| ---------- | ------------------- | ------- | -------------- |
|
||||||
|
| `variant` | `'light' \| 'dark'` | `light` | no |
|
||||||
|
| `size` | `string \| number` | `24` | no |
|
||||||
|
| `title` | `string` | — | no |
|
||||||
|
| `provider` | `string` | — | `Payment` only |
|
||||||
|
|
||||||
|
### `variant`
|
||||||
|
|
||||||
|
Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa variant="light" /> {/* default, for light backgrounds */}
|
||||||
|
<PaymentVisa variant="dark" /> {/* for dark backgrounds */}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `size`
|
||||||
|
|
||||||
|
Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa size={24} /> {/* 24px tall, 40px wide (the default) */}
|
||||||
|
<PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `title`
|
||||||
|
|
||||||
|
Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa title="Visa" />
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead.
|
||||||
|
|
||||||
|
### Everything else
|
||||||
|
|
||||||
|
Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa class="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### `provider` (dynamic `Payment` component only)
|
||||||
|
|
||||||
|
Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
|
||||||
|
|
||||||
|
## Available providers
|
||||||
|
|
||||||
|
There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list of provider names and slugs.
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
title: React
|
||||||
|
description: Add Tabler payment provider logos to React apps with the official tree-shakable package. Render 100+ payment provider logos as components.
|
||||||
|
summary: Tabler Payments for React offers payment provider logos as tree-shakable components, so you can use them the same way as any other React component.
|
||||||
|
---
|
||||||
|
|
||||||
|
import TabsPackage from '@components/TabsPackage.astro'
|
||||||
|
|
||||||
|
This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
|
||||||
|
|
||||||
|
This package is pre-1.0: the API may still change before a 1.0 release.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
<TabsPackage name="@tabler/payments-react" />
|
||||||
|
|
||||||
|
`react` is a peer dependency — the package reuses the React version already in your project instead of bundling its own.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { PaymentVisa } from '@tabler/payments-react';
|
||||||
|
|
||||||
|
function AcceptedCards() {
|
||||||
|
return <PaymentVisa variant="dark" size={32} />;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
|
||||||
|
|
||||||
|
### Rendering a provider by name at runtime
|
||||||
|
|
||||||
|
Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
|
||||||
|
|
||||||
|
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Payment } from '@tabler/payments-react';
|
||||||
|
|
||||||
|
<Payment provider="visa" variant="dark" size={32} />
|
||||||
|
```
|
||||||
|
|
||||||
|
The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
|
||||||
|
|
||||||
|
If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference:
|
||||||
|
|
||||||
|
| name | type | default | required |
|
||||||
|
| ---------- | ------------------- | ------- | -------------- |
|
||||||
|
| `variant` | `'light' \| 'dark'` | `light` | no |
|
||||||
|
| `size` | `string \| number` | `24` | no |
|
||||||
|
| `title` | `string` | — | no |
|
||||||
|
| `provider` | `string` | — | `Payment` only |
|
||||||
|
|
||||||
|
### `variant`
|
||||||
|
|
||||||
|
Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa variant="light" /> {/* default, for light backgrounds */}
|
||||||
|
<PaymentVisa variant="dark" /> {/* for dark backgrounds */}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `size`
|
||||||
|
|
||||||
|
Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa size={24} /> {/* 24px tall, 40px wide (the default) */}
|
||||||
|
<PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `title`
|
||||||
|
|
||||||
|
Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa title="Visa" />
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead.
|
||||||
|
|
||||||
|
### Everything else
|
||||||
|
|
||||||
|
Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<PaymentVisa className="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### `provider` (dynamic `Payment` component only)
|
||||||
|
|
||||||
|
Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
|
||||||
|
|
||||||
|
## Available providers
|
||||||
|
|
||||||
|
There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list of provider names and slugs.
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
title: Vue
|
||||||
|
description: Add Tabler payment provider logos to Vue apps with the official tree-shakable package. Render 100+ payment provider logos as components.
|
||||||
|
summary: Tabler Payments for Vue offers payment provider logos as tree-shakable Vue 3 components, so you can use them the same way as any other Vue component.
|
||||||
|
---
|
||||||
|
|
||||||
|
import TabsPackage from '@components/TabsPackage.astro'
|
||||||
|
|
||||||
|
This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
|
||||||
|
|
||||||
|
This package is pre-1.0: the API may still change before a 1.0 release.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
<TabsPackage name="@tabler/payments-vue" />
|
||||||
|
|
||||||
|
`vue` is a peer dependency — the package reuses the Vue 3 version already in your project instead of bundling its own.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { PaymentVisa } from '@tabler/payments-vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PaymentVisa variant="dark" :size="32" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
This works well when you know exactly which providers you want to show, and you write their names directly in your template — for example a fixed row of cards you accept.
|
||||||
|
|
||||||
|
### Rendering a provider by name at runtime
|
||||||
|
|
||||||
|
Sometimes the provider isn't known ahead of time in your template — for example, it's a string coming from an API response or a CMS field.
|
||||||
|
|
||||||
|
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Payment } from '@tabler/payments-vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Payment provider="visa" variant="dark" :size="32" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
|
||||||
|
|
||||||
|
If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference:
|
||||||
|
|
||||||
|
| name | type | default | required |
|
||||||
|
| ---------- | ------------------- | ------- | -------------- |
|
||||||
|
| `variant` | `'light' \| 'dark'` | `light` | no |
|
||||||
|
| `size` | `string \| number` | `24` | no |
|
||||||
|
| `title` | `string` | — | no |
|
||||||
|
| `provider` | `string` | — | `Payment` only |
|
||||||
|
|
||||||
|
### `variant`
|
||||||
|
|
||||||
|
Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
|
||||||
|
<PaymentVisa variant="dark" /> <!-- for dark backgrounds -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### `size`
|
||||||
|
|
||||||
|
Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<PaymentVisa :size="24" /> <!-- 24px tall, 40px wide (the default) -->
|
||||||
|
<PaymentVisa :size="48" /> <!-- 48px tall, 80px wide -->
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<PaymentVisa :size="24" :width="64" /> <!-- 24px tall, but exactly 64px wide -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### `title`
|
||||||
|
|
||||||
|
Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<PaymentVisa title="Visa" />
|
||||||
|
```
|
||||||
|
|
||||||
|
See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead.
|
||||||
|
|
||||||
|
### Everything else
|
||||||
|
|
||||||
|
Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<PaymentVisa class="rounded shadow-sm" @click="selectMethod('visa')" data-testid="visa-logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### `provider` (dynamic `Payment` component only)
|
||||||
|
|
||||||
|
Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
|
||||||
|
|
||||||
|
## Available providers
|
||||||
|
|
||||||
|
There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list of provider names and slugs.
|
||||||
@@ -5,5 +5,11 @@ description: Free and open source web application UI kit based on Bootstrap
|
|||||||
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
|
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
|
||||||
---
|
---
|
||||||
|
|
||||||
<img src="/img/cover-tabler.png" alt="Tabler UI" class="hide-theme-dark" width="1600" height="750" />
|
import { Image } from 'astro:assets'
|
||||||
<img src="/img/cover-tabler-dark.png" alt="Tabler UI" class="hide-theme-light" width="1600" height="750" />
|
import coverLight from '../../images/cover-tabler.jpg'
|
||||||
|
import coverDark from '../../images/cover-tabler-dark.jpg'
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<Image src={coverLight} alt="Tabler UI" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
<Image src={coverDark} alt="Tabler UI" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
|
||||||
|
</figure>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
@@ -6,6 +6,9 @@ type Redirect = { status: 301; destination: string }
|
|||||||
|
|
||||||
export const redirects: Record<string, Redirect> = {
|
export const redirects: Record<string, Redirect> = {
|
||||||
'/ui/base/markdown': { status: 301, destination: '/ui/base/prose' },
|
'/ui/base/markdown': { status: 301, destination: '/ui/base/prose' },
|
||||||
|
// Payments became its own product section, like icons/illustrations/emails;
|
||||||
|
// the old plugin page's content lives on /payments/css, keeping anchors valid.
|
||||||
|
'/ui/plugins/payments': { status: 301, destination: '/payments/css' },
|
||||||
// @tabler/icons-eps is no longer maintained; PDF is the vector format to use.
|
// @tabler/icons-eps is no longer maintained; PDF is the vector format to use.
|
||||||
'/icons/static-files/eps': { status: 301, destination: '/icons/static-files/pdf' },
|
'/icons/static-files/eps': { status: 301, destination: '/icons/static-files/pdf' },
|
||||||
// pre-Astro plural slugs, still present in the Google index and backlinks
|
// pre-Astro plural slugs, still present in the Google index and backlinks
|
||||||
|
|||||||
+7
-4
@@ -3,9 +3,11 @@
|
|||||||
// `Accept: text/markdown`. Runs only on Vercel deployments.
|
// `Accept: text/markdown`. Runs only on Vercel deployments.
|
||||||
import type { MiddlewareHandler } from 'astro'
|
import type { MiddlewareHandler } from 'astro'
|
||||||
import { next, rewrite } from '@vercel/functions'
|
import { next, rewrite } from '@vercel/functions'
|
||||||
import { preferredFormat } from './lib/accept'
|
// .js extensions: Vercel compiles this file separately with node16 module
|
||||||
import { markdownUrlFromDocsUrl } from './lib/markdown-url'
|
// resolution, which requires them; TS and vite both resolve .js -> .ts.
|
||||||
import { redirects } from './lib/redirects'
|
import { preferredFormat } from './lib/accept.js'
|
||||||
|
import { markdownUrlFromDocsUrl } from './lib/markdown-url.js'
|
||||||
|
import { redirects } from './lib/redirects.js'
|
||||||
|
|
||||||
// Astro picks this file up as its own middleware (`srcDir` is the project
|
// Astro picks this file up as its own middleware (`srcDir` is the project
|
||||||
// root) and requires an `onRequest` export; the real logic is Vercel-only.
|
// root) and requires an `onRequest` export; the real logic is Vercel-only.
|
||||||
@@ -22,7 +24,8 @@ export default function middleware(request: Request) {
|
|||||||
const url = new URL(request.url)
|
const url = new URL(request.url)
|
||||||
|
|
||||||
// renamed pages fall through to their 301; negotiation reruns on the target
|
// renamed pages fall through to their 301; negotiation reruns on the target
|
||||||
if (Object.hasOwn(redirects, url.pathname)) return next()
|
// not Object.hasOwn — Vercel's middleware type-check runs with a pre-es2022 lib
|
||||||
|
if (Object.prototype.hasOwnProperty.call(redirects, url.pathname)) return next()
|
||||||
|
|
||||||
const format = preferredFormat(request.headers.get('accept'))
|
const format = preferredFormat(request.headers.get('accept'))
|
||||||
|
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
"@tabler/preview": "workspace:*",
|
"@tabler/preview": "workspace:*",
|
||||||
"@types/node": "^26.1.1",
|
"@types/node": "^26.1.1",
|
||||||
"js-beautify": "^2.0.3",
|
"js-beautify": "^2.0.3",
|
||||||
|
"sharp": "^0.35.3",
|
||||||
"shx": "^0.4.0",
|
"shx": "^0.4.0",
|
||||||
"typescript": "^5.7.3"
|
"typescript": "^5.7.3"
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-2
@@ -332,8 +332,7 @@ header > .navbar {
|
|||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
}
|
}
|
||||||
|
|
||||||
> :is(h2, h3, h4, h5, h6),
|
> :is(h2, h3, h4, h5, h6) {
|
||||||
> .docs-page-lead {
|
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+4
-3
@@ -251,6 +251,9 @@ importers:
|
|||||||
js-beautify:
|
js-beautify:
|
||||||
specifier: ^2.0.3
|
specifier: ^2.0.3
|
||||||
version: 2.0.3
|
version: 2.0.3
|
||||||
|
sharp:
|
||||||
|
specifier: ^0.35.3
|
||||||
|
version: 0.35.3(@types/node@26.1.1)
|
||||||
shx:
|
shx:
|
||||||
specifier: ^0.4.0
|
specifier: ^0.4.0
|
||||||
version: 0.4.0
|
version: 0.4.0
|
||||||
@@ -6075,8 +6078,7 @@ snapshots:
|
|||||||
'@fullcalendar/core': 6.1.21
|
'@fullcalendar/core': 6.1.21
|
||||||
'@fullcalendar/daygrid': 6.1.21(@fullcalendar/core@6.1.21)
|
'@fullcalendar/daygrid': 6.1.21(@fullcalendar/core@6.1.21)
|
||||||
|
|
||||||
'@img/colour@1.1.0':
|
'@img/colour@1.1.0': {}
|
||||||
optional: true
|
|
||||||
|
|
||||||
'@img/sharp-darwin-arm64@0.34.5':
|
'@img/sharp-darwin-arm64@0.34.5':
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
@@ -10060,7 +10062,6 @@ snapshots:
|
|||||||
'@img/sharp-win32-ia32': 0.35.3
|
'@img/sharp-win32-ia32': 0.35.3
|
||||||
'@img/sharp-win32-x64': 0.35.3
|
'@img/sharp-win32-x64': 0.35.3
|
||||||
'@types/node': 26.1.1
|
'@types/node': 26.1.1
|
||||||
optional: true
|
|
||||||
|
|
||||||
shebang-command@1.2.0:
|
shebang-command@1.2.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const providers = payments as { name: string; logo: string }[]
|
|||||||
---
|
---
|
||||||
|
|
||||||
<DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers">
|
<DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers">
|
||||||
<DocsLink slot="page-header-actions" path="/ui/plugins/payments" />
|
<DocsLink slot="page-header-actions" path="/payments/css" />
|
||||||
|
|
||||||
<div class="row row-cards">
|
<div class="row row-cards">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|||||||
+51
-4
@@ -20,6 +20,10 @@
|
|||||||
{
|
{
|
||||||
"title": "Tabler UI",
|
"title": "Tabler UI",
|
||||||
"children": [
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Introduction",
|
||||||
|
"url": "/ui"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "Getting started",
|
"title": "Getting started",
|
||||||
"url": "/ui/getting-started",
|
"url": "/ui/getting-started",
|
||||||
@@ -442,10 +446,6 @@
|
|||||||
"title": "Lightbox",
|
"title": "Lightbox",
|
||||||
"url": "/ui/plugins/lightbox"
|
"url": "/ui/plugins/lightbox"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"title": "Payments",
|
|
||||||
"url": "/ui/plugins/payments"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"title": "Range slider",
|
"title": "Range slider",
|
||||||
"url": "/ui/plugins/range-slider"
|
"url": "/ui/plugins/range-slider"
|
||||||
@@ -498,6 +498,10 @@
|
|||||||
{
|
{
|
||||||
"title": "Tabler Icons",
|
"title": "Tabler Icons",
|
||||||
"children": [
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Introduction",
|
||||||
|
"url": "/icons"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "Libraries",
|
"title": "Libraries",
|
||||||
"url": "/icons/libraries",
|
"url": "/icons/libraries",
|
||||||
@@ -565,6 +569,10 @@
|
|||||||
{
|
{
|
||||||
"title": "Tabler Illustrations",
|
"title": "Tabler Illustrations",
|
||||||
"children": [
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Introduction",
|
||||||
|
"url": "/illustrations"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "Preview",
|
"title": "Preview",
|
||||||
"url": "/illustrations/preview"
|
"url": "/illustrations/preview"
|
||||||
@@ -586,6 +594,10 @@
|
|||||||
{
|
{
|
||||||
"title": "Tabler Emails",
|
"title": "Tabler Emails",
|
||||||
"children": [
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Introduction",
|
||||||
|
"url": "/emails"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "Contents",
|
"title": "Contents",
|
||||||
"url": "/emails/contents"
|
"url": "/emails/contents"
|
||||||
@@ -599,6 +611,41 @@
|
|||||||
"url": "/emails/source-html"
|
"url": "/emails/source-html"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tabler Payments",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Introduction",
|
||||||
|
"url": "/payments"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "CSS plugin",
|
||||||
|
"url": "/payments/css"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Libraries",
|
||||||
|
"url": "/payments/libraries",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Astro",
|
||||||
|
"url": "/payments/libraries/astro"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Preact",
|
||||||
|
"url": "/payments/libraries/preact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "React",
|
||||||
|
"url": "/payments/libraries/react"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Vue",
|
||||||
|
"url": "/payments/libraries/vue"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user