mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add documentation App (#2219)
This commit is contained in:
Paweł Kuna
GitHub
43
docs/.build/rollup.config.mjs
Normal file
43
docs/.build/rollup.config.mjs
Normal file
@@ -0,0 +1,43 @@
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { babel } from '@rollup/plugin-babel'
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve'
|
||||
import replace from '@rollup/plugin-replace'
|
||||
import dotenv from "rollup-plugin-dotenv"
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const external = []
|
||||
const plugins = [
|
||||
dotenv({
|
||||
cwd: path.resolve(__dirname, '../..'),
|
||||
}),
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
babelHelpers: 'bundled'
|
||||
})
|
||||
]
|
||||
|
||||
plugins.push(
|
||||
replace({
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
preventAssignment: true
|
||||
}),
|
||||
nodeResolve()
|
||||
)
|
||||
|
||||
const rollupConfig = {
|
||||
input: [
|
||||
path.resolve(__dirname, `../js/docs.js`)
|
||||
],
|
||||
output: {
|
||||
name: 'docs',
|
||||
dir: path.resolve(__dirname, `../dist/js`),
|
||||
format: 'esm',
|
||||
generatedCode: 'es2015'
|
||||
},
|
||||
external,
|
||||
plugins
|
||||
}
|
||||
|
||||
export default rollupConfig
|
||||
1
docs/.gitignore
vendored
Normal file
1
docs/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.vercel
|
||||
6
docs/content/content.11tydata.mjs
Normal file
6
docs/content/content.11tydata.mjs
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
layout: 'docs/default',
|
||||
permalink: function ({page}) {
|
||||
return `${page.filePathStem.replace(/^\/content\//, '/').replace(/\/index$/, '') }/index.html`;
|
||||
},
|
||||
};
|
||||
8
docs/content/emails/index.md
Normal file
8
docs/content/emails/index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Tabler Emails
|
||||
seoTitle: Tabler Emails - premium email templates
|
||||
order: 4
|
||||
description: Customizable email templates for over 90 clients and devices.
|
||||
summary: Tabler Emails is a set of 80 eye-catching, 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.
|
||||
---
|
||||
29
docs/content/emails/introduction/compiled-html.md
Normal file
29
docs/content/emails/introduction/compiled-html.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: Compiled templates
|
||||
order: 2
|
||||
seoTitle: Tabler Emails - How to use the compiled HTML email templates
|
||||
description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
|
||||
summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||
---
|
||||
|
||||
## Compiled version of the template
|
||||
|
||||
If you only want to change content (text or images) of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
|
||||
|
||||
## How to modify the compiled HTML files
|
||||
|
||||
1. Open the `compiled.html` file in your favorite code editor.
|
||||
2. Find the content you want to change inside the `<body>` element.
|
||||
3. Modify the content as needed:
|
||||
* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
|
||||
* Change the images by replacing the `src` attribute of the `<img>` tag.
|
||||
* Change the links by replacing the `href` attribute of the `<a>` tag.
|
||||
* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
|
||||
4. If you changed the images, make sure to replace them in the `assets/` folder.
|
||||
5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
|
||||
|
||||
## How to use the compiled HTML files
|
||||
|
||||
After changing the templates as needed, you can use them in your email campaigns.
|
||||
The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
|
||||
63
docs/content/emails/introduction/contents.md
Normal file
63
docs/content/emails/introduction/contents.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Contents
|
||||
order: 1
|
||||
seoTitle: Tabler Emails - Content of the package
|
||||
description: Content of the Tabler Emails package.
|
||||
summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
|
||||
seoDescription: todo
|
||||
---
|
||||
|
||||
## Folder structure
|
||||
|
||||
Once you unzip the downloaded file, you will see the following structure:
|
||||
|
||||
```
|
||||
tabler-emails/
|
||||
├── emails/
|
||||
| ├── absence/
|
||||
| | ├── assets/
|
||||
| | ├── compiled.html
|
||||
| | ├── compiled-dark.html
|
||||
| | ├── source.html
|
||||
| | ├── source-dark.html
|
||||
| | ├── screenshot.jpg
|
||||
| | ├── screenshot-dark.jpg
|
||||
| | ├── screenshot-mobile.jpg
|
||||
| | └── screenshot-mobile-dark.jpg
|
||||
| ├── access-token/
|
||||
| ├── account-deleted/
|
||||
| ├── .../
|
||||
| ├── welcome/
|
||||
| └── whishlist/
|
||||
├── images/
|
||||
| ├── chart-donuts/
|
||||
| ├── icons/
|
||||
| ├── illustrations/
|
||||
| └── overlays/
|
||||
├── license.txt
|
||||
└── readme.html
|
||||
```
|
||||
|
||||
## Understanding the file structure in Tabler Emails
|
||||
|
||||
The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
|
||||
|
||||
### 1. Email Templates: `emails/`
|
||||
This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files:
|
||||
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/docs/emails/compiled-html) section.
|
||||
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
|
||||
* Screenshot images for desktop and mobile views.
|
||||
* Assets folder with images used in the email template and the CSS file with styles.
|
||||
|
||||
### 2. Images: `images/`
|
||||
It contains 4 subfolders with images used across the different email templates:
|
||||
* `chart-donuts/`: Images of donut charts with different fills.
|
||||
* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
|
||||
* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
|
||||
* `overlays/`: Overlay images used in the email templates.
|
||||
|
||||
### 3. License: `license.txt`
|
||||
This file contains the license information for the Tabler Emails package.
|
||||
|
||||
### 4. Readme: `readme.html`
|
||||
This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
|
||||
9
docs/content/emails/introduction/index.md
Normal file
9
docs/content/emails/introduction/index.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction
|
||||
seoTitle: Introduction to Tabler Emails
|
||||
description: Base information about Tabler Emails package.
|
||||
summary: Tabler Emails is a set of 80 eye-catching, 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.
|
||||
---
|
||||
|
||||
|
||||
26
docs/content/emails/introduction/source-html.md
Normal file
26
docs/content/emails/introduction/source-html.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Source templates
|
||||
order: 3
|
||||
seoTitle: Tabler Emails - How to use the source HTML email templates
|
||||
description: Learn how to use the source HTML email templates from the Tabler Emails package.
|
||||
summary: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
|
||||
seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
|
||||
---
|
||||
|
||||
## Source version of the template
|
||||
|
||||
If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
|
||||
|
||||
## How to modify the source HTML files
|
||||
|
||||
1. Open the `source.html` file in your favorite code editor.
|
||||
2. Open the `theme.css` file from the `assets/`* directory in the same editor.
|
||||
3. Change all the content and styles as needed.
|
||||
4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, such as:
|
||||
* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
|
||||
* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
|
||||
5. Save the output HTML file.
|
||||
|
||||
## How to use the source HTML files
|
||||
|
||||
To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
|
||||
13
docs/content/icons/index.md
Normal file
13
docs/content/icons/index.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Tabler Icons
|
||||
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
||||
order: 2
|
||||
description: Over 5000 pixel-perfect icons for web design and development
|
||||
---
|
||||
|
||||
## Browse icons
|
||||
|
||||
Tabler Icons is a comprehensive icon library that features {{ iconsCount }} high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
||||
|
||||
To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
|
||||
|
||||
5
docs/content/icons/libraries/index.md
Normal file
5
docs/content/icons/libraries/index.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Libraries
|
||||
description: Explore Tabler Icons libraries.
|
||||
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
|
||||
---
|
||||
42
docs/content/icons/libraries/preact.md
Normal file
42
docs/content/icons/libraries/preact.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Preact
|
||||
description: Tabler Icons library for Preact framework.
|
||||
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-preact" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowDown } from '@tabler/icons-preact';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowDown />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowDown color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
|
||||
42
docs/content/icons/libraries/react.md
Normal file
42
docs/content/icons/libraries/react.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: React
|
||||
description: Tabler Icons library for React framework.
|
||||
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-react" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from '@tabler/icons-react';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowLeft />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowLeft color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
|
||||
42
docs/content/icons/libraries/solidjs.md
Normal file
42
docs/content/icons/libraries/solidjs.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: SolidJS
|
||||
description: Tabler Icons library for SolidJS framework.
|
||||
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-solidjs" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowRight } from '@tabler/icons-solidjs';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowRight />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowRight color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
43
docs/content/icons/libraries/svelte.md
Normal file
43
docs/content/icons/libraries/svelte.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Svelte
|
||||
description: Tabler Icons library for Svelte framework.
|
||||
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-svelte" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { IconHeart } from '@tabler/icons-svelte';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<IconHeart />
|
||||
</main>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHeart size={48} stroke={1} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
| `class` | _String_ | |
|
||||
50
docs/content/icons/libraries/vue.md
Normal file
50
docs/content/icons/libraries/vue.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Vue
|
||||
description: Tabler Icons library for Vue framework.
|
||||
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-vue" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconHome />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
import { IconHome } from '@tabler/icons-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconHome
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHome color="red" :size="48" stroke-width="1" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
|
||||
60
docs/content/icons/libraries/webfont.md
Normal file
60
docs/content/icons/libraries/webfont.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Webfont
|
||||
description: Tabler Icons as a webfont.
|
||||
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-webfont
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
npm install @tabler/icons-webfont
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
pnpm install @tabler/icons-webfont
|
||||
```
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
### CDN
|
||||
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
|
||||
## Usage
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<i class="ti ti-brand-tabler"></i>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
content: 'ec8f';
|
||||
```
|
||||
|
||||
|
||||
### SCSS
|
||||
|
||||
```scss
|
||||
content: $ti-icon-brand-tabler;
|
||||
```
|
||||
15
docs/content/icons/plugins/figma.md
Normal file
15
docs/content/icons/plugins/figma.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Figma plugin
|
||||
description: Use Tabler Icons directly in Figma.
|
||||
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
|
||||
---
|
||||
|
||||
|
||||
|
||||
The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
|
||||
|
||||
## Usage
|
||||
|
||||
Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making it a versatile addition to your design toolkit.
|
||||
|
||||
{% include "docs/download-button.html" href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons" title="Download Plugin" %}
|
||||
4
docs/content/icons/plugins/index.md
Normal file
4
docs/content/icons/plugins/index.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: Plugins
|
||||
description: Icon plugins for seamless integration.
|
||||
---
|
||||
15
docs/content/icons/static-files/eps.md
Normal file
15
docs/content/icons/static-files/eps.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: EPS version
|
||||
description: Download Tabler Icons in EPS format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-eps" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All EPS files are stored in `icons` subdirectory.
|
||||
5
docs/content/icons/static-files/index.md
Normal file
5
docs/content/icons/static-files/index.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Static files
|
||||
description: Download static file formats of icons.
|
||||
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
|
||||
---
|
||||
15
docs/content/icons/static-files/pdf.md
Normal file
15
docs/content/icons/static-files/pdf.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: PDF version
|
||||
description: Download Tabler Icons in PDF format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-pdf" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All PDF files are stored in `icons` subdirectory.
|
||||
31
docs/content/icons/static-files/png.md
Normal file
31
docs/content/icons/static-files/png.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: PNG version
|
||||
description: Download Tabler Icons in PNG format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons-png" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All PNG files are stored in `icons` subdirectory.
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
|
||||
```
|
||||
|
||||
#### Filled version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
72
docs/content/icons/static-files/svg.md
Normal file
72
docs/content/icons/static-files/svg.md
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: SVG version
|
||||
description: Download Tabler Icons in SVG format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/icons" %}
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## Usage
|
||||
|
||||
All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
|
||||
|
||||
### HTML image
|
||||
|
||||
If you load an icon as an image, you can modify its size using CSS.
|
||||
|
||||
```html
|
||||
<img src="path/to/icon.svg" alt="icon title" />
|
||||
```
|
||||
|
||||
### Inline HTML
|
||||
|
||||
You can paste the content of the icon file into your HTML code to display it on the page.
|
||||
|
||||
```html
|
||||
<a href="">
|
||||
{% include "ui/icon.html" icon="disabled" %}
|
||||
Click me
|
||||
</a>
|
||||
```
|
||||
|
||||
Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
|
||||
|
||||
```css
|
||||
.icon-tabler {
|
||||
color: red;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke-width: 1.25;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG sprite
|
||||
|
||||
Add an icon to be displayed on your page with the following markup (`activity` in the above example can be replaced with any valid icon name):
|
||||
|
||||
```html
|
||||
<svg width="24" height="24">
|
||||
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
|
||||
```
|
||||
|
||||
#### Filled version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
8
docs/content/illustrations/index.md
Normal file
8
docs/content/illustrations/index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Tabler Illustrations
|
||||
order: 3
|
||||
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.
|
||||
---
|
||||
|
||||
|
||||
77
docs/content/illustrations/introduction/contents.md
Normal file
77
docs/content/illustrations/introduction/contents.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Contents
|
||||
description: Explore Tabler Illustrations folder structure
|
||||
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
|
||||
---
|
||||
|
||||
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
Once downloaded, unzip the compressed folder and you’ll see something like this:
|
||||
|
||||
```
|
||||
tabler-illustrations/
|
||||
├── eps/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── figma/
|
||||
├── pdf/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── png/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── png-background/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── svg/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── svg-css-autodark/
|
||||
└── svg-css-variables/
|
||||
├── dark/
|
||||
└── light/
|
||||
```
|
||||
|
||||
## Understanding the File Structure in Tabler Illustrations
|
||||
|
||||
The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
|
||||
|
||||
### 1. Vector Files: `eps/`
|
||||
This folder contains EPS files for scalable vector illustrations.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 2. Design File: `figma/`
|
||||
This folder contains a Figma file, perfect for designers who work directly in Figma.
|
||||
|
||||
### 3. Document Files: `pdf/`
|
||||
This folder contains PDF files, ideal for print or presentation use.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 4. Transparent Images: `png/`
|
||||
This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 5. Background Images: `png-background/`
|
||||
This folder contains PNG files with a dark background for enhanced contrast.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 6. Scalable Vector Graphics: `svg/`
|
||||
This folder includes SVG files for scalable and customizable vector graphics.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 7. Adaptive Graphics: `svg-css-autodark/`
|
||||
This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
|
||||
|
||||
### 8. Themed Graphics: `svg-css-variables/`
|
||||
This folder contains SVG files using CSS variables for flexible theming.
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
|
||||
1203
docs/content/illustrations/introduction/customization.md
Normal file
1203
docs/content/illustrations/introduction/customization.md
Normal file
File diff suppressed because it is too large
Load Diff
5
docs/content/illustrations/introduction/index.md
Normal file
5
docs/content/illustrations/introduction/index.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Introduction to Tabler Illustrations and their key features.
|
||||
summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
|
||||
---
|
||||
90
docs/content/illustrations/introduction/license.md
Normal file
90
docs/content/illustrations/introduction/license.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
title: Tabler Illustrations License
|
||||
---
|
||||
|
||||
### Personal License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
|
||||
|
||||
You **can**:
|
||||
|
||||
* Use the Tabler Illustrations to create unlimited End Products.
|
||||
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
|
||||
You **cannot**:
|
||||
|
||||
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code nor as design assets.
|
||||
* Share your access to the Tabler Illustrations with any other individuals. You need a Team License for that to be allowed.
|
||||
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
|
||||
|
||||
#### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:* Creating a personal website by yourself.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
|
||||
Examples of usage **not allowed** by the license:
|
||||
|
||||
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
* Creating a Figma or Sketch file based on the Tabler Illustrations.
|
||||
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
* Creating a theme, template, or project starter kit using the illustrations and making it available either for sale or for free.
|
||||
* Creating a web application where the primary purpose is clearly not to simply re-distribute the illustrations (like a conference organization app that uses the illustrations for its UI for example) that is free and open source, where the source code is publicly available.
|
||||
|
||||
In simple terms, use Tabler Illustrations for anything you like as long as it doesn't compete with Tabler Illustrations.
|
||||
|
||||
### Team License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
The license grants permission for up to 10 Employees and Contractors of the Licensee to access and use the Tabler Illustrations.
|
||||
|
||||
You **can**:
|
||||
|
||||
* Use the Tabler Illustrations to create unlimited End Products.
|
||||
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
|
||||
You **cannot**:
|
||||
|
||||
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product.
|
||||
* Use the Tabler Illustrations to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
|
||||
* Grant access to the Tabler Illustrations to individuals who are not an Employee or Contractor of the Licensee.
|
||||
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
|
||||
#### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:
|
||||
|
||||
* Creating a website for your company.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
|
||||
Examples of use **not allowed** by the license:
|
||||
|
||||
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
* Creating a theme or template using the illustrations and making it available either for sale or for free.
|
||||
* Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tabler Illustrations license to build their own websites or side projects.
|
||||
* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
|
||||
* Selling access to your team account to people who don't work for you company.
|
||||
|
||||
---
|
||||
|
||||
In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
|
||||
1
docs/content/img/browsers/brave.svg
Normal file
1
docs/content/img/browsers/brave.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.292 7.22l.434-1.061-1.228-1.27c-.664-.665-2.08-.275-2.08-.275l-1.602-1.82H9.162l-1.61 1.827s-1.415-.383-2.079.267L4.246 6.152l.433 1.061-.542 1.574 1.805 6.88c.376 1.474.628 2.044 1.69 2.795l3.3 2.238c.317.195.707.535 1.06.535.355 0 .744-.34 1.062-.535l3.3-2.238c1.061-.75 1.314-1.321 1.69-2.794l1.804-6.881-.556-1.567z" fill="url(#paint0_linear_29_515)"/><path d="M15.971 5.783s2.072 2.506 2.072 3.033c0 .541-.26.679-.52.96l-1.552 1.66c-.144.145-.455.39-.274.817.18.433.433.967.144 1.516-.289.556-.794.924-1.119.866a5.922 5.922 0 0 1-1.372-.65c-.274-.18-1.155-.91-1.155-1.19 0-.282.91-.795 1.083-.896.166-.116.939-.563.953-.737.014-.173.014-.216-.216-.65-.232-.433-.636-1.01-.578-1.386.072-.375.722-.577 1.206-.758l1.494-.563c.116-.058.087-.108-.26-.144-.346-.03-1.321-.16-1.761-.036-.44.122-1.177.31-1.25.411-.057.101-.115.101-.05.448l.419 2.274c.029.289.086.484-.217.556-.318.072-.845.195-1.025.195-.18 0-.715-.123-1.026-.195-.31-.072-.252-.267-.216-.556.029-.289.347-1.935.412-2.274.072-.347.007-.347-.051-.448-.072-.101-.816-.289-1.256-.411-.434-.123-1.416.007-1.762.043-.347.029-.376.072-.26.144l1.495.556c.476.18 1.14.383 1.205.758.072.383-.339.953-.577 1.387-.239.433-.231.476-.217.65.015.173.794.62.953.736.174.108 1.083.614 1.083.895 0 .282-.859 1.011-1.148 1.191a5.922 5.922 0 0 1-1.372.65c-.325.058-.83-.31-1.126-.866-.289-.549-.029-1.083.144-1.516.18-.434-.122-.665-.274-.816l-1.552-1.66c-.253-.268-.513-.412-.513-.947 0-.534 2.072-3.032 2.072-3.032l1.971.317c.231 0 .744-.194 1.213-.36.47-.145.795-.16.795-.16s.317 0 .794.16c.476.158.982.36 1.213.36.238 0 1.985-.339 1.985-.339l-.007.007zm-1.552 9.589c.13.072.05.23-.072.318l-1.834 1.43c-.145.143-.376.36-.527.36-.152 0-.376-.216-.527-.36a95.12 95.12 0 0 0-1.842-1.43c-.115-.087-.195-.239-.072-.318l1.083-.578c.43-.228.886-.404 1.358-.527.108 0 .794.246 1.35.527l1.083.578z" fill="#fff"/><path d="M16.433 4.621l-1.617-1.827H9.163l-1.61 1.827s-1.416-.383-2.08.267c0 0 1.877-.166 2.527.888l1.993.34c.231 0 .744-.195 1.213-.361.47-.145.794-.16.794-.16s.318 0 .794.16c.477.158.982.36 1.213.36.239 0 1.986-.339 1.986-.339.65-1.054 2.527-.888 2.527-.888-.664-.664-2.08-.274-2.08-.274" fill="url(#paint1_linear_29_515)"/><defs><linearGradient id="paint0_linear_29_515" x1="4.137" y1="12.199" x2="19.848" y2="12.199" gradientUnits="userSpaceOnUse"><stop offset=".4" stop-color="#F50"/><stop offset=".6" stop-color="#FF2000"/></linearGradient><linearGradient id="paint1_linear_29_515" x1="5.734" y1="4.488" x2="18.52" y2="4.488" gradientUnits="userSpaceOnUse"><stop stop-color="#FF452A"/><stop offset="1" stop-color="#FF2000"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
docs/content/img/browsers/chrome.svg
Normal file
1
docs/content/img/browsers/chrome.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.998a5 5 0 1 0 0-10 5 5 0 0 0 0 10z" fill="#fff"/><path d="M12 7h8.659a9.997 9.997 0 0 0-17.319.001L7.67 14.5l.004-.001A4.994 4.994 0 0 1 12 7z" fill="url(#paint0_linear_29_517)"/><path d="M12 15.958a3.958 3.958 0 1 0 0-7.916 3.958 3.958 0 0 0 0 7.916z" fill="#1A73E8"/><path d="M16.33 14.501L12 22a9.998 9.998 0 0 0 8.658-14.999H12l-.002.004a4.993 4.993 0 0 1 4.332 7.496z" fill="url(#paint1_linear_29_517)"/><path d="M7.67 14.501L3.34 7.003A9.997 9.997 0 0 0 12 22l4.33-7.499-.002-.003a4.995 4.995 0 0 1-8.658.003z" fill="url(#paint2_linear_29_517)"/><defs><linearGradient id="paint0_linear_29_517" x1="3.34" y1="8.25" x2="20.659" y2="8.25" gradientUnits="userSpaceOnUse"><stop stop-color="#D93025"/><stop offset="1" stop-color="#EA4335"/></linearGradient><linearGradient id="paint1_linear_29_517" x1="10.634" y1="21.866" x2="19.293" y2="6.868" gradientUnits="userSpaceOnUse"><stop stop-color="#FCC934"/><stop offset="1" stop-color="#FBBC04"/></linearGradient><linearGradient id="paint2_linear_29_517" x1="13.082" y1="21.376" x2="4.423" y2="6.378" gradientUnits="userSpaceOnUse"><stop stop-color="#1E8E3E"/><stop offset="1" stop-color="#34A853"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
docs/content/img/browsers/edge.svg
Normal file
1
docs/content/img/browsers/edge.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.047 16.883c-.266.14-.54.265-.82.367a7.99 7.99 0 0 1-2.805.508c-3.695 0-6.914-2.54-6.914-5.805.008-.89.5-1.71 1.281-2.133-3.344.14-4.203 3.625-4.203 5.664 0 5.774 5.32 6.36 6.469 6.36.617 0 1.547-.18 2.11-.36l.1-.03a9.997 9.997 0 0 0 5.204-4.126.313.313 0 0 0-.094-.43.33.33 0 0 0-.328-.015z" fill="url(#paint0_linear_29_519)"/><path opacity=".35" d="M20.047 16.883c-.266.14-.54.265-.82.367a7.99 7.99 0 0 1-2.805.508c-3.695 0-6.914-2.54-6.914-5.805.008-.89.5-1.71 1.281-2.133-3.344.14-4.203 3.625-4.203 5.664 0 5.774 5.32 6.36 6.469 6.36.617 0 1.547-.18 2.11-.36l.1-.03a9.997 9.997 0 0 0 5.204-4.126.313.313 0 0 0-.094-.43.33.33 0 0 0-.328-.015z" fill="url(#paint1_radial_29_519)"/><path d="M10.258 20.86c-.695-.43-1.297-1-1.774-1.665A6.307 6.307 0 0 1 10.79 9.82c.242-.117.656-.32 1.211-.312a2.522 2.522 0 0 1 2.508 2.476c0-.015 1.914-6.218-6.25-6.218-3.43 0-6.25 3.257-6.25 6.109a10.19 10.19 0 0 0 .945 4.375 10.006 10.006 0 0 0 12.219 5.242 5.92 5.92 0 0 1-4.914-.633z" fill="url(#paint2_linear_29_519)"/><path opacity=".41" d="M10.258 20.86c-.695-.43-1.297-1-1.774-1.665A6.307 6.307 0 0 1 10.79 9.82c.242-.117.656-.32 1.211-.312a2.522 2.522 0 0 1 2.508 2.476c0-.015 1.914-6.218-6.25-6.218-3.43 0-6.25 3.257-6.25 6.109a10.19 10.19 0 0 0 .945 4.375 10.006 10.006 0 0 0 12.219 5.242 5.92 5.92 0 0 1-4.914-.633z" fill="url(#paint3_radial_29_519)"/><path d="M13.898 13.633c-.062.078-.257.195-.257.445 0 .203.132.399.367.563 1.125.78 3.242.68 3.25.68.836 0 1.648-.227 2.367-.65A4.789 4.789 0 0 0 22 10.54c.023-1.75-.625-2.914-.883-3.43C19.461 3.867 15.883 2 12 2a10 10 0 0 0-10 9.86c.04-2.852 2.875-5.157 6.25-5.157.273 0 1.836.024 3.281.79 1.274.671 1.946 1.476 2.406 2.28.485.836.57 1.883.57 2.305 0 .414-.21 1.04-.609 1.555z" fill="url(#paint4_radial_29_519)"/><path d="M13.898 13.633c-.062.078-.257.195-.257.445 0 .203.132.399.367.563 1.125.78 3.242.68 3.25.68.836 0 1.648-.227 2.367-.65A4.789 4.789 0 0 0 22 10.54c.023-1.75-.625-2.914-.883-3.43C19.461 3.867 15.883 2 12 2a10 10 0 0 0-10 9.86c.04-2.852 2.875-5.157 6.25-5.157.273 0 1.836.024 3.281.79 1.274.671 1.946 1.476 2.406 2.28.485.836.57 1.883.57 2.305 0 .414-.21 1.04-.609 1.555z" fill="url(#paint5_radial_29_519)"/><defs><linearGradient id="paint0_linear_29_519" x1="6.586" y1="15.83" x2="20.515" y2="15.83" gradientUnits="userSpaceOnUse"><stop stop-color="#0C59A4"/><stop offset="1" stop-color="#114A8B"/></linearGradient><radialGradient id="paint1_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(7.45082 0 0 7.07749 14.28 15.94)"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><linearGradient id="paint2_linear_29_519" x1="13.935" y1="9.793" x2="5.234" y2="19.27" gradientUnits="userSpaceOnUse"><stop stop-color="#1B9DE2"/><stop offset=".16" stop-color="#1595DF"/><stop offset=".67" stop-color="#0680D7"/><stop offset="1" stop-color="#0078D4"/></linearGradient><radialGradient id="paint3_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.6786 -11.07643 8.95045 1.3564 7.516 17.548)"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="paint4_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.63255 15.81165 -33.68076 -1.3474 4.02 5.703)"><stop stop-color="#35C1F1"/><stop offset=".11" stop-color="#34C1ED"/><stop offset=".23" stop-color="#2FC2DF"/><stop offset=".31" stop-color="#2BC3D2"/><stop offset=".67" stop-color="#36C752"/></radialGradient><radialGradient id="paint5_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.12926 7.299 -5.93668 1.73185 20.754 8.047)"><stop stop-color="#66EB6E"/><stop offset="1" stop-color="#66EB6E" stop-opacity="0"/></radialGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
1
docs/content/img/browsers/electron.svg
Normal file
1
docs/content/img/browsers/electron.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.49 6.745c-2.422-.447-4.335.025-5.105 1.342-.572.981-.41 2.298.397 3.69a.234.234 0 0 0 .336.086.234.234 0 0 0 .087-.335c-.72-1.255-.857-2.385-.398-3.193.634-1.093 2.348-1.515 4.584-1.105a.242.242 0 0 0 .286-.199c.025-.137-.05-.26-.187-.286zm-3.44 6.733a15.278 15.278 0 0 0 3.701 2.92c3.516 2.024 7.255 2.57 9.106 1.316.112-.074.137-.236.062-.348-.075-.111-.236-.136-.348-.062-1.652 1.13-5.205.609-8.571-1.329a14.906 14.906 0 0 1-3.59-2.832.249.249 0 0 0-.348-.013.248.248 0 0 0-.013.348z" fill="#47848F"/><path d="M18.261 13.18c1.59-1.876 2.137-3.764 1.379-5.08-.56-.97-1.752-1.479-3.317-1.504a.25.25 0 0 0-.248.249.25.25 0 0 0 .248.248c1.416.013 2.435.46 2.895 1.255.633 1.093.136 2.782-1.33 4.51a.248.248 0 0 0 .025.347.248.248 0 0 0 .348-.025zm-4.074-6.36a15.689 15.689 0 0 0-4.423 1.75c-3.64 2.1-6 5.193-5.677 7.429a.26.26 0 0 0 .286.211.261.261 0 0 0 .211-.286c-.298-1.987 1.95-4.906 5.429-6.919a15.253 15.253 0 0 1 4.285-1.702.248.248 0 0 0 .187-.298.264.264 0 0 0-.298-.186z" fill="#47848F"/><path d="M8.31 17.553c.833 2.31 2.187 3.739 3.715 3.739 1.118 0 2.137-.758 2.944-2.1a.234.234 0 0 0-.087-.335.234.234 0 0 0-.335.087c-.72 1.205-1.603 1.851-2.522 1.851-1.267 0-2.472-1.267-3.242-3.416a.248.248 0 0 0-.323-.15.25.25 0 0 0-.15.324zm7.578-.447c.452-1.494.674-3.048.659-4.61 0-4.11-1.441-7.664-3.49-8.57-.125-.05-.274 0-.324.124-.05.124 0 .273.124.323 1.826.807 3.193 4.174 3.193 8.124.01 1.51-.203 3.012-.634 4.46a.249.249 0 0 0 .162.31c.124.037.26-.037.31-.161zm4.671-.249a1.192 1.192 0 1 0-2.384 0 1.192 1.192 0 0 0 2.384 0zm-.497 0a.696.696 0 1 1-1.392 0 .696.696 0 0 1 1.392 0zM4.646 18.05a1.192 1.192 0 1 0 0-2.385 1.192 1.192 0 0 0 0 2.385zm0-.497a.696.696 0 1 1 0-1.392.696.696 0 0 1 0 1.392z" fill="#47848F"/><path d="M12.025 5.13a1.192 1.192 0 1 0 0-2.385 1.192 1.192 0 0 0 0 2.385zm0-.496a.696.696 0 1 1 0-1.392.696.696 0 0 1 0 1.392zm.174 8.708a.87.87 0 0 1-1.019-.659.87.87 0 0 1 .659-1.018.87.87 0 0 1 1.018.658.857.857 0 0 1-.658 1.019z" fill="#47848F"/></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
1
docs/content/img/browsers/firefox.svg
Normal file
1
docs/content/img/browsers/firefox.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
docs/content/img/browsers/internet-explorer.svg
Normal file
1
docs/content/img/browsers/internet-explorer.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.088 12.158c0-1.753-.454-3.404-1.238-4.848C25.253-.322 18.24.813 17.827.813c-1.443.288-2.887.752-4.125 1.34-4.744-.056-8.87 2.476-10.21 7.736 2.475-2.785 4.228-3.92 5.26-4.332-.217.196-.434.402-.65.608-1.65 1.65-2.992 3.3-4.126 5.054-.877 1.547-1.857 2.888-2.372 4.642-2.785 10.107 5.982 5.878 7.22 5.156a9.815 9.815 0 0 0 4.434 1.022c4.332 0 8.045-2.785 9.386-6.601h-5.26c-2.475 3.919-8.354 2.166-8.56-2.063h14.233c.053-.423.082-.846.082-1.238l-.051.02zM21.23 2.36c.856.577 1.547 1.444.361 4.538-1.134-1.857-2.785-3.3-4.847-4.023.918-.443 3.197-1.34 4.538-.515h-.052zM2.975 21.028c-.7-.712-.825-2.476.722-5.673a9.762 9.762 0 0 0 4.332 5.26c-1 .547-3.61 1.754-5.053.34v.073zm5.776-10.314c.08-2.27 2.063-4.126 4.538-4.126 2.476 0 4.435 1.857 4.539 4.126H8.75z" fill="#1EBBEE"/></svg>
|
||||
|
After Width: | Height: | Size: 866 B |
1
docs/content/img/browsers/opera.svg
Normal file
1
docs/content/img/browsers/opera.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.78a9.22 9.22 0 1 0 6.145 16.093 6.65 6.65 0 0 1-3.695 1.129c-2.197 0-4.162-1.09-5.487-2.807-1.02-1.204-1.678-2.982-1.724-4.979v-.436c.046-1.997.704-3.776 1.724-4.978 1.322-1.718 3.29-2.808 5.487-2.808a6.65 6.65 0 0 1 3.695 1.13 9.189 9.189 0 0 0-6.11-2.346h-.037L12 2.78z" fill="url(#paint0_linear_29_513)"/><path d="M8.965 6.804c.844-.998 1.94-1.602 3.132-1.602 2.685 0 4.863 3.046 4.863 6.796 0 3.754-2.176 6.796-4.863 6.796-1.192 0-2.286-.601-3.132-1.6 1.321 1.718 3.288 2.808 5.486 2.808a6.66 6.66 0 0 0 3.696-1.129A9.192 9.192 0 0 0 21.22 12a9.194 9.194 0 0 0-3.075-6.873 6.65 6.65 0 0 0-3.695-1.129c-2.197 0-4.162 1.09-5.487 2.808" fill="url(#paint1_linear_29_513)"/><defs><linearGradient id="paint0_linear_29_513" x1="10.459" y1="3.083" x2="10.459" y2="20.954" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#FF1B2D"/><stop offset="1" stop-color="#A70014"/></linearGradient><linearGradient id="paint1_linear_29_513" x1="15.101" y1="4.128" x2="15.101" y2="19.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9C0000"/><stop offset=".7" stop-color="#FF4B4B"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
docs/content/img/browsers/safari.svg
Normal file
1
docs/content/img/browsers/safari.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.5 KiB |
1
docs/content/img/browsers/vivaldi.svg
Normal file
1
docs/content/img/browsers/vivaldi.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.937 21.263c4.063 0 6.316 0 7.79-1.474C21.2 18.316 21.2 16.063 21.2 12s0-6.316-1.473-7.79C18.253 2.737 16 2.737 11.937 2.737c-4.063 0-6.316 0-7.79 1.473C2.675 5.684 2.675 7.938 2.675 12c0 4.063 0 6.316 1.474 7.79 1.473 1.473 3.726 1.473 7.789 1.473z" fill="#EF3939"/><path d="M17.958 8.568A6.947 6.947 0 0 0 5.21 10.211a6.902 6.902 0 0 0 .715 5.305.22.22 0 0 0 .042.063l3.264 5.663 2.684.021c1.8 0 3.252 0 4.442-.126 1.474-.158 2.537-.526 3.358-1.348 1.19-1.189 1.42-2.905 1.463-5.663l-3.221-5.558z" fill="url(#paint0_linear_29_518)"/><path d="M16.81 7.095a6.924 6.924 0 0 0-9.81 0 6.957 6.957 0 0 0 2.25 11.328 6.925 6.925 0 0 0 7.56-1.507 6.957 6.957 0 0 0 0-9.821zm-.41 3.2l-3.431 5.968c-.211.369-.516.59-.948.621-.474.032-.842-.168-1.084-.579l-3.474-6.031c-.442-.769.053-1.706.937-1.748.463-.02.821.19 1.063.6.327.548.642 1.106.958 1.664l.695 1.2c.347.578.842.894 1.516.936a1.856 1.856 0 0 0 1.947-1.642c.01-.074.01-.147.021-.19 0-.326-.063-.6-.2-.862-.358-.716.021-1.506.79-1.685.631-.136 1.273.327 1.357.958a1.2 1.2 0 0 1-.147.79z" fill="#fff"/><defs><linearGradient id="paint0_linear_29_518" x1="8.446" y1="5.994" x2="17.298" y2="21.324" gradientUnits="userSpaceOnUse"><stop stop-opacity=".2"/><stop offset=".79" stop-opacity=".05"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
docs/content/img/cover-illustrations-dark.png
Normal file
BIN
docs/content/img/cover-illustrations-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
docs/content/img/cover-illustrations.png
Normal file
BIN
docs/content/img/cover-illustrations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
docs/content/img/cover-tabler-dark.png
Normal file
BIN
docs/content/img/cover-tabler-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
docs/content/img/cover-tabler.png
Normal file
BIN
docs/content/img/cover-tabler.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
docs/content/img/icons/figma-plugin.png
Normal file
BIN
docs/content/img/icons/figma-plugin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
docs/content/img/icons/package-angular-dark.png
Normal file
BIN
docs/content/img/icons/package-angular-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs/content/img/icons/package-angular.png
Normal file
BIN
docs/content/img/icons/package-angular.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-eps-dark.png
Normal file
BIN
docs/content/img/icons/package-eps-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-eps.png
Normal file
BIN
docs/content/img/icons/package-eps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-js-dark.png
Normal file
BIN
docs/content/img/icons/package-js-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-js.png
Normal file
BIN
docs/content/img/icons/package-js.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-pdf-dark.png
Normal file
BIN
docs/content/img/icons/package-pdf-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-pdf.png
Normal file
BIN
docs/content/img/icons/package-pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-png-dark.png
Normal file
BIN
docs/content/img/icons/package-png-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-png.png
Normal file
BIN
docs/content/img/icons/package-png.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-preact-dark.png
Normal file
BIN
docs/content/img/icons/package-preact-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
docs/content/img/icons/package-preact.png
Normal file
BIN
docs/content/img/icons/package-preact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
docs/content/img/icons/package-react-dark.png
Normal file
BIN
docs/content/img/icons/package-react-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
docs/content/img/icons/package-react-native-dark.png
Normal file
BIN
docs/content/img/icons/package-react-native-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
docs/content/img/icons/package-react-native.png
Normal file
BIN
docs/content/img/icons/package-react-native.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
docs/content/img/icons/package-react.png
Normal file
BIN
docs/content/img/icons/package-react.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
docs/content/img/icons/package-solidjs-dark.png
Normal file
BIN
docs/content/img/icons/package-solidjs-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
docs/content/img/icons/package-solidjs.png
Normal file
BIN
docs/content/img/icons/package-solidjs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
docs/content/img/icons/package-sprite-dark.png
Normal file
BIN
docs/content/img/icons/package-sprite-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs/content/img/icons/package-sprite.png
Normal file
BIN
docs/content/img/icons/package-sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-svelte-dark.png
Normal file
BIN
docs/content/img/icons/package-svelte-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs/content/img/icons/package-svelte.png
Normal file
BIN
docs/content/img/icons/package-svelte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-svg-dark.png
Normal file
BIN
docs/content/img/icons/package-svg-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-svg.png
Normal file
BIN
docs/content/img/icons/package-svg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/content/img/icons/package-vue-dark.png
Normal file
BIN
docs/content/img/icons/package-vue-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-vue.png
Normal file
BIN
docs/content/img/icons/package-vue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-webfont-dark.png
Normal file
BIN
docs/content/img/icons/package-webfont-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
docs/content/img/icons/package-webfont.png
Normal file
BIN
docs/content/img/icons/package-webfont.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
18
docs/content/index.md
Normal file
18
docs/content/index.md
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Welcome to Tabler Documentation
|
||||
summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
|
||||
---
|
||||
|
||||
<ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" class="mb-4" />
|
||||
|
||||
Find all the guides and resources you need to develop with Tabler and our other tools. Explore our UI components, icons, illustrations, and email templates to enhance your web development experience. Our tools are designed to be easy to use, customizable, and fully responsive, ensuring that your projects look great on any device.
|
||||
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="row row-deck row-cards">
|
||||
{% include "docs/docs-card.html" title="UI Components" href="/ui" icon="paint" description="Free and open source web application UI kit based on Bootstrap" %}
|
||||
{% include "docs/docs-card.html" title="Plugins" href="/plugins" icon="plug" description="Free and open source plugins for Tabler UI components" %}
|
||||
{% include "docs/docs-card.html" title="Icons" href="/icons" icon="ghost" description="Pixel-perfect icons for web design and development" %}
|
||||
{% include "docs/docs-card.html" title="Illustrations" href="/illustrations" icon="brand-figma" description="Customizable SVG illustrations for your web project" %}
|
||||
{% include "docs/docs-card.html" title="Email Templates" href="/emails" icon="mail" description="Responsive email templates ready to use in your marketing campaigns" %}
|
||||
</div>
|
||||
</div>
|
||||
30
docs/content/ui/base/colors.md
Normal file
30
docs/content/ui/base/colors.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Colors
|
||||
summary: The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrapLink: utilities/colors/
|
||||
description: Impact of colors on user interface design.
|
||||
---
|
||||
|
||||
## Base colors
|
||||
|
||||
Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
|
||||
|
||||
{% include "docs/colors.html" colors=site.colors %}
|
||||
|
||||
## Light colors
|
||||
|
||||
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
|
||||
|
||||
{% include "docs/colors.html" colors=site.lightColors %}
|
||||
|
||||
## Gray palette
|
||||
|
||||
The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.
|
||||
|
||||
{% include "docs/colors.html" colors=site.grayColors %}
|
||||
|
||||
## Social colors
|
||||
|
||||
Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
|
||||
|
||||
{% include "docs/colors.html" colors=site.socialColors %}
|
||||
6
docs/content/ui/base/index.md
Normal file
6
docs/content/ui/base/index.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Base
|
||||
order: 2
|
||||
description: Foundational elements for UI design.
|
||||
summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
|
||||
---
|
||||
321
docs/content/ui/base/typography.md
Normal file
321
docs/content/ui/base/typography.md
Normal file
@@ -0,0 +1,321 @@
|
||||
---
|
||||
title: Typography
|
||||
summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
|
||||
The `h1` tag is the highest level and the `h6` tag is the lowest level.
|
||||
|
||||
```html
|
||||
<h1>H1 Heading</h1>
|
||||
<h2>H2 Heading</h2>
|
||||
<h3>H3 Heading</h3>
|
||||
<h4>H4 Heading</h4>
|
||||
<h5>H5 Heading</h5>
|
||||
<h6>H6 Heading</h6>
|
||||
```
|
||||
|
||||
Below are examples of headings with different levels:
|
||||
|
||||
{% capture html -%}
|
||||
<h1>H1 Heading</h1>
|
||||
<h2>H2 Heading</h2>
|
||||
<h3>H3 Heading</h3>
|
||||
<h4>H4 Heading</h4>
|
||||
<h5>H5 Heading</h5>
|
||||
<h6>H6 Heading</h6>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
## Paragraphs
|
||||
|
||||
Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
|
||||
|
||||
```html
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
```
|
||||
|
||||
If you use a second paragraph, it will be separated from the first one by a blank line.
|
||||
|
||||
{% capture html -%}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
|
||||
ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
|
||||
## Semantic text elements
|
||||
|
||||
Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
|
||||
|
||||
```html
|
||||
<abbr title="Internationalization">I18N</abbr>
|
||||
<strong>Bold</strong>
|
||||
<cite>Citation</cite>
|
||||
<code>Hello World!</code>
|
||||
<del>Deleted</del>
|
||||
<em>Emphasis</em>
|
||||
<i>Italic</i>
|
||||
<ins>Inserted</ins>
|
||||
<kbd>Ctrl + S</kbd>
|
||||
<mark>Highlighted</mark>
|
||||
<s>Strikethrough</s>
|
||||
<samp>Sample</samp>
|
||||
Text <sub>Subscripted</sub> Text <sup>Superscripted</sup>
|
||||
<time>20:00</time>
|
||||
<u>Underline</u>
|
||||
<var>x</var> = <var>y</var> + 2
|
||||
```
|
||||
|
||||
Here are examples of semantic text elements:
|
||||
|
||||
{% capture html -%}
|
||||
<div>
|
||||
<abbr title="Internationalization">I18N</abbr>
|
||||
</div>
|
||||
<div><strong>Bold</strong></div>
|
||||
<div>
|
||||
<cite>Citation</cite>
|
||||
</div>
|
||||
<div>
|
||||
<code>Hello World!</code>
|
||||
</div>
|
||||
<div>
|
||||
<del>Deleted</del>
|
||||
</div>
|
||||
<div>
|
||||
<em>Emphasis</em>
|
||||
</div>
|
||||
<div>
|
||||
<i>Italic</i>
|
||||
</div>
|
||||
<div>
|
||||
<ins>Inserted</ins>
|
||||
</div>
|
||||
<div>
|
||||
<kbd>Ctrl + S</kbd>
|
||||
</div>
|
||||
<div>
|
||||
<mark>Highlighted</mark>
|
||||
</div>
|
||||
<div>
|
||||
<s>Strikethrough</s>
|
||||
</div>
|
||||
<div>
|
||||
<samp>Sample</samp>
|
||||
</div>
|
||||
<div>Text <sub>Subscripted</sub></div>
|
||||
<div>Text <sup>Superscripted</sup></div>
|
||||
<div>
|
||||
<time>20:00</time>
|
||||
</div>
|
||||
<div>
|
||||
<u>Underline</u>
|
||||
</div>
|
||||
<div><var>x</var> = <var>y</var> + 2</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
|
||||
|
||||
## Horizontal rules
|
||||
|
||||
Use the `hr` tag to represent a thematic break between paragraphs within one section.
|
||||
|
||||
{% capture html -%}
|
||||
<div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
|
||||
reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
|
||||
quibusdam veniam?
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
|
||||
reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
|
||||
quibusdam veniam?
|
||||
</p>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
```html
|
||||
<hr />
|
||||
```
|
||||
|
||||
## Horizontal rules with label
|
||||
|
||||
You can also add a label to a horizontal rule and align it as you see fit.
|
||||
|
||||
{% capture html -%}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
<div class="hr-text">
|
||||
<span>Rule text</span>
|
||||
</div>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||
takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<div class="hr-text hr-text-center">
|
||||
<span>Rule text</span>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
<div class="hr-text hr-text-end">
|
||||
<span>Rule text</span>
|
||||
</div>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||
takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Optimized for different alphabets
|
||||
|
||||
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
|
||||
|
||||
{% capture html -%}
|
||||
<p>汉字</p>
|
||||
<p>日本語の表記体系</p>
|
||||
<p>Кириллица</p>
|
||||
<p>Eλληνική</p>
|
||||
<p>ქართული დამწერლობა</p>
|
||||
<p>Հայերենի այբուբեն</p>
|
||||
<p>الحروف العربية</p>
|
||||
<p>אלפבית עברי</p>
|
||||
<p>อักษรไทย</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Text transform
|
||||
|
||||
Transform the content of components with text capitalization classes.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="text-lowercase">Lowercased text.</div>
|
||||
<div class="text-uppercase">Uppercased text.</div>
|
||||
<div class="text-capitalize">Capitalized text.</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
```html
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
<p class="text-uppercase">Uppercased text.</p>
|
||||
<p class="text-capitalize">Capitalized text.</p>
|
||||
```
|
||||
|
||||
## Letter spacing
|
||||
|
||||
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
|
||||
<div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
|
||||
<div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
```html
|
||||
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
|
||||
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
|
||||
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
|
||||
```
|
||||
|
||||
## Line height
|
||||
|
||||
Control the leading (line height) of an element.
|
||||
|
||||
{% capture html -%}
|
||||
<p class="lh-1">
|
||||
This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-sm">
|
||||
This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-base">
|
||||
This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-lg">
|
||||
This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
To control the line height of an element, use the following classes:
|
||||
|
||||
```html
|
||||
<p class="lh-1">...</p>
|
||||
<p class="lh-sm">...</p>
|
||||
<p class="lh-base">...</p>
|
||||
<p class="lh-lg">...</p>
|
||||
```
|
||||
|
||||
## Antialiasing
|
||||
|
||||
Control the font smoothing of an element.
|
||||
|
||||
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="antialiased">Text with antialiasing</div>
|
||||
<div class="subpixel-antialiased">Text without antialiasing</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Keyboard input
|
||||
|
||||
Use the `<kbd>` to indicate input that is typically entered via keyboard.
|
||||
|
||||
{% capture html -%}
|
||||
<div>To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
```html
|
||||
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
|
||||
```
|
||||
|
||||
## Markdown elements
|
||||
|
||||
If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="markdown">
|
||||
<h1>Hello World</h1>
|
||||
<p>
|
||||
Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
|
||||
ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
|
||||
vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub
|
||||
>script</sub
|
||||
>
|
||||
works as well!
|
||||
</p>
|
||||
<h2>Second level</h2>
|
||||
<p>
|
||||
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum
|
||||
maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
|
||||
Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui.
|
||||
Ut et neque nisl.
|
||||
</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
418
docs/content/ui/components/alerts.md
Normal file
418
docs/content/ui/components/alerts.md
Normal file
@@ -0,0 +1,418 @@
|
||||
---
|
||||
title: Alerts
|
||||
summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: Alert messages for user notifications.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
|
||||
|
||||
Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need.
|
||||
|
||||
Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-title">Wow! Everything worked!</h4>
|
||||
<div class="text-secondary">Your account has been saved!</div>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<h4 class="alert-title">Did you know?</h4>
|
||||
<div class="text-secondary">Here is something that you might like to know.</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<h4 class="alert-title">Uh oh, something went wrong</h4>
|
||||
<div class="text-secondary">Sorry! There was a problem with your request.</div>
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<h4 class="alert-title">I'm so sorry…</h4>
|
||||
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Alert links
|
||||
|
||||
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-danger m-0">
|
||||
This is a danger alert — <a href="#" class="alert-link">check it out</a>!
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dismissible alerts
|
||||
|
||||
Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
|
||||
|
||||
```html
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<div>
|
||||
<h4 class="alert-title">Wow! Everything worked!</h4>
|
||||
<div class="text-secondary">Your account has been saved!</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible" role="alert">
|
||||
<div>
|
||||
<h4 class="alert-title">Did you know?</h4>
|
||||
<div class="text-secondary">Here is something that you might like to know.</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<div>
|
||||
<h4 class="alert-title">Uh oh, something went wrong</h4>
|
||||
<div class="text-secondary">Sorry! There was a problem with your request.</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<div>
|
||||
<h4 class="alert-title">I'm so sorry…</h4>
|
||||
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Alerts with icons
|
||||
|
||||
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
|
||||
|
||||
Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-title">Wow! Everything worked!</h4>
|
||||
<div class="text-secondary">Your account has been saved!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||||
<polyline points="11 12 12 12 12 16 13 16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-title">Did you know?</h4>
|
||||
<div class="text-secondary">Here is something that you might like to know.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M12 9v2m0 4v.01" />
|
||||
<path
|
||||
d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-title">Uh oh, something went wrong</h4>
|
||||
<div class="text-secondary">Sorry! There was a problem with your request.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-title">I'm so sorry…</h4>
|
||||
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Alert with avatar
|
||||
|
||||
Add an avatar to your alert modal to make it more personalized.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<span
|
||||
class="avatar me-3"
|
||||
style="background-image: url(/static/avatars/039m.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<span class="avatar me-3">JL</span>
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<span
|
||||
class="avatar me-3"
|
||||
style="background-image: url(/static/avatars/035f.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<span
|
||||
class="avatar me-3"
|
||||
style="background-image: url(/static/avatars/056f.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Alert with buttons
|
||||
|
||||
Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
|
||||
|
||||
Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<h3 class="mb-1">Some Title</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
|
||||
</p>
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-success">Okay</a>
|
||||
<a href="#" class="btn">Cancel</a>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible" role="alert">
|
||||
<h3 class="mb-1">Some Title</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
|
||||
</p>
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-info">Okay</a>
|
||||
<a href="#" class="btn">Cancel</a>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<h3 class="mb-1">Some Title</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
|
||||
</p>
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-warning">Okay</a>
|
||||
<a href="#" class="btn">Cancel</a>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<h3 class="mb-1">Some Title</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
|
||||
</p>
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-danger">Okay</a>
|
||||
<a href="#" class="btn">Cancel</a>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Important alerts
|
||||
|
||||
If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert.
|
||||
|
||||
```html
|
||||
<div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
|
||||
```
|
||||
|
||||
You can also use other elements, like icons and dismissible buttons, with this type of alert.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-important alert-success alert-dismissible" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 12l5 5l10 -10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>Wow! Everything worked!</div>
|
||||
</div>
|
||||
<a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
<div class="alert alert-important alert-danger alert-dismissible" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>Your account has been deleted and can't be restored.</div>
|
||||
</div>
|
||||
<a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Custom alert color
|
||||
|
||||
You're not limited to the 4 default alert colors. You can use any [base or social color](../base/colors) you want.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="alert alert-lime" role="alert">
|
||||
<h4 class="alert-title">Wow! Everything worked!</h4>
|
||||
<div class="text-secondary">Your account has been saved!</div>
|
||||
</div>
|
||||
<div class="alert alert-cyan" role="alert">
|
||||
<h4 class="alert-title">Did you know?</h4>
|
||||
<div class="text-secondary">Here is something that you might like to know.</div>
|
||||
</div>
|
||||
<div class="alert alert-facebook" role="alert">
|
||||
<h4 class="alert-title">You have a new friend on Facebook</h4>
|
||||
<div class="text-secondary">Say hello to your new friend!</div>
|
||||
</div>
|
||||
<div class="alert alert-instagram alert-dismissible alert-important" role="alert">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<span
|
||||
class="avatar me-3"
|
||||
style="background-image: url(/static/avatars/035f.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-title">Sophia just added a new post on Instagram</h4>
|
||||
<div>Be the first to see it!</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## SASS variables
|
||||
|
||||
{% scss-docs "alert-variables" "ui/_alerts.scss" %}
|
||||
26
docs/content/ui/components/autosize.md
Normal file
26
docs/content/ui/components/autosize.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Autosize
|
||||
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
docs-libs: autosize
|
||||
description: Auto-adjusting textarea for better usability.
|
||||
---
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
|
||||
## Default markup
|
||||
|
||||
Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
|
||||
|
||||
To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
|
||||
|
||||
```html
|
||||
<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
||||
```
|
||||
|
||||
Look at the example below to see how the autosize element works:
|
||||
|
||||
{% capture html -%}
|
||||
<label class="form-label">Autosize example</label>
|
||||
<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column vertical %}
|
||||
190
docs/content/ui/components/avatars.md
Normal file
190
docs/content/ui/components/avatars.md
Normal file
@@ -0,0 +1,190 @@
|
||||
---
|
||||
title: Avatars
|
||||
summary: Avatars help customize various elements of a user interface and make the product experience more personalized. They are often used in communication apps, collaboration tools and social media.
|
||||
description: Personalize UI with user avatars.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `avatar` class to add an avatar to your interface design for greater customization.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span>
|
||||
<span class="avatar">JL</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatar image
|
||||
|
||||
Set an image as the background to make users easy to indentify and create a personalized experience.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Initials
|
||||
|
||||
You can also use initials instead of pictures.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar">AB</span>
|
||||
<span class="avatar">CD</span>
|
||||
<span class="avatar">EF</span>
|
||||
<span class="avatar">GH</span>
|
||||
<span class="avatar">IJ</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatar icons
|
||||
|
||||
Besides pictures and initials, you can also use icons to make the avatars more universal.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar">
|
||||
{% include "ui/icon.html" icon="user" %}
|
||||
</span>
|
||||
<span class="avatar">
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
</span>
|
||||
<span class="avatar">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
```html
|
||||
<span class="avatar">
|
||||
{% include "ui/icon.html" icon="user" %}
|
||||
</span>
|
||||
```
|
||||
|
||||
## Avatar initials color
|
||||
|
||||
Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar bg-green-lt">AB</span>
|
||||
<span class="avatar bg-red-lt">CD</span>
|
||||
<span class="avatar bg-yellow-lt">EF</span>
|
||||
<span class="avatar bg-primary-lt">GH</span>
|
||||
<span class="avatar bg-purple-lt">IJ</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
<span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatar status
|
||||
|
||||
Add a status indicator to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/015m.jpg)">
|
||||
<span class="badge bg-danger"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
|
||||
<span class="badge bg-success"></span>
|
||||
</span>
|
||||
<span class="avatar"> <span class="badge bg-warning"></span>SA </span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
|
||||
<span class="badge bg-info"></span>
|
||||
</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/048m.jpg)">
|
||||
<span class="badge bg-gray">5</span>
|
||||
</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatar shape
|
||||
|
||||
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span>
|
||||
<span class="avatar rounded-circle">AA</span>
|
||||
<span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span>
|
||||
<span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Avatars list
|
||||
|
||||
Create a list of avatars within one parent container.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="avatar-list">
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span>
|
||||
<span class="avatar rounded">JL</span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span>
|
||||
<span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Stacked list
|
||||
|
||||
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="avatar-list avatar-list-stacked">
|
||||
<span class="avatar">EB</span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span>
|
||||
<span class="avatar">+8</span>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="avatar-list avatar-list-stacked">
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/035m.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/027f.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/036f.jpg)"
|
||||
></span>
|
||||
<span class="avatar avatar-sm rounded-circle">SA</span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/034f.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/043f.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/039f.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
style="background-image: url(/static/avatars/020m.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
118
docs/content/ui/components/badges.md
Normal file
118
docs/content/ui/components/badges.md
Normal file
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Badges
|
||||
summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
|
||||
description: Add extra information with badges.
|
||||
bootstrapLink: components/badge/
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge bg-blue-lt">Blue</span>
|
||||
<span class="badge bg-azure-lt">Azure</span>
|
||||
<span class="badge bg-indigo-lt">Indigo</span>
|
||||
<span class="badge bg-purple-lt">Purple</span>
|
||||
<span class="badge bg-pink-lt">Pink</span>
|
||||
<span class="badge bg-red-lt">Red</span>
|
||||
<span class="badge bg-orange-lt">Orange</span>
|
||||
<span class="badge bg-yellow-lt">Yellow</span>
|
||||
<span class="badge bg-lime-lt">Lime</span>
|
||||
<span class="badge bg-green-lt">Green</span>
|
||||
<span class="badge bg-teal-lt">Teal</span>
|
||||
<span class="badge bg-cyan-lt">Cyan</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Headings
|
||||
|
||||
{% capture html -%}
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Outline badges
|
||||
|
||||
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-outline text-blue">blue</span>
|
||||
<span class="badge badge-outline text-azure">azure</span>
|
||||
<span class="badge badge-outline text-indigo">indigo</span>
|
||||
<span class="badge badge-outline text-purple">purple</span>
|
||||
<span class="badge badge-outline text-pink">pink</span>
|
||||
<span class="badge badge-outline text-red">red</span>
|
||||
<span class="badge badge-outline text-orange">orange</span>
|
||||
<span class="badge badge-outline text-yellow">yellow</span>
|
||||
<span class="badge badge-outline text-lime">lime</span>
|
||||
<span class="badge badge-outline text-green">green</span>
|
||||
<span class="badge badge-outline text-teal">teal</span>
|
||||
<span class="badge badge-outline text-cyan">cyan</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Pill badges
|
||||
|
||||
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="badge badge-pill bg-blue-lt">1</span>
|
||||
<span class="badge badge-pill bg-azure-lt">2</span>
|
||||
<span class="badge badge-pill bg-indigo-lt">3</span>
|
||||
<span class="badge badge-pill bg-purple-lt">4</span>
|
||||
<span class="badge badge-pill bg-pink-lt">5</span>
|
||||
<span class="badge badge-pill bg-red-lt">6</span>
|
||||
<span class="badge badge-pill bg-orange-lt">7</span>
|
||||
<span class="badge badge-pill bg-yellow-lt">8</span>
|
||||
<span class="badge badge-pill bg-lime-lt">9</span>
|
||||
<span class="badge badge-pill bg-green-lt">10</span>
|
||||
<span class="badge badge-pill bg-teal-lt">11</span>
|
||||
<span class="badge badge-pill bg-cyan-lt">12</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Links
|
||||
|
||||
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="badge bg-blue-lt">Blue</a>
|
||||
<a href="#" class="badge bg-azure-lt">Azure</a>
|
||||
<a href="#" class="badge bg-indigo-lt">Indigo</a>
|
||||
<a href="#" class="badge bg-purple-lt">Purple</a>
|
||||
<a href="#" class="badge bg-pink-lt">Pink</a>
|
||||
<a href="#" class="badge bg-red-lt">Red</a>
|
||||
<a href="#" class="badge bg-orange-lt">Orange</a>
|
||||
<a href="#" class="badge bg-yellow-lt">Yellow</a>
|
||||
<a href="#" class="badge bg-lime-lt">Lime</a>
|
||||
<a href="#" class="badge bg-green-lt">Green</a>
|
||||
<a href="#" class="badge bg-teal-lt">Teal</a>
|
||||
<a href="#" class="badge bg-cyan-lt">Cyan</a>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button with badge
|
||||
|
||||
Badges can be used as part of links or buttons to provide a counter.
|
||||
|
||||
```
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-red-lt ms-2">4</span>
|
||||
</button>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span></button>
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-green-lt ms-2">4</span>
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
172
docs/content/ui/components/breadcrumb.md
Normal file
172
docs/content/ui/components/breadcrumb.md
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: Navigation aid for better structure.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
|
||||
|
||||
```html
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">...</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">...</a>
|
||||
</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
Look at the example below to see how breadcrumbs work in practice.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Different separators
|
||||
|
||||
You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
|
||||
|
||||
```html
|
||||
<ol class="breadcrumb breadcrumb-dots">
|
||||
...
|
||||
</ol>
|
||||
```
|
||||
|
||||
This example shows how to use different breadcrumb styles.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb breadcrumb-dots">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-arrows">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb breadcrumb-bullets">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical separated %}
|
||||
|
||||
## With icon
|
||||
|
||||
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
|
||||
|
||||
{% capture html -%}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Muted breadcrumbs
|
||||
|
||||
You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
|
||||
|
||||
{% capture html -%}
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-muted">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Breadcrumb in headers
|
||||
|
||||
You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center mw-100">
|
||||
<div class="col">
|
||||
<div class="mb-1">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">
|
||||
<a href="#">Articles</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
<span class="text-truncate"
|
||||
>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
|
||||
woods.</span
|
||||
>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn d-none d-md-inline-flex">
|
||||
{% include "ui/icon.html" icon="edit" %}
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary">Publish</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
510
docs/content/ui/components/buttons.md
Normal file
510
docs/content/ui/components/buttons.md
Normal file
@@ -0,0 +1,510 @@
|
||||
---
|
||||
title: Buttons
|
||||
summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: Customizable buttons for user actions.
|
||||
---
|
||||
|
||||
## Button tag
|
||||
|
||||
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
<button class="btn">Button</button>
|
||||
<input type="button" class="btn" value="Input" />
|
||||
<input type="submit" class="btn" value="Submit" />
|
||||
<input type="reset" class="btn" value="Reset" />
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Default button
|
||||
|
||||
The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Button variations
|
||||
|
||||
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary">Primary</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-success">Success</a>
|
||||
<a href="#" class="btn btn-warning">Warning</a>
|
||||
<a href="#" class="btn btn-danger">Danger</a>
|
||||
<a href="#" class="btn btn-info">Info</a>
|
||||
<a href="#" class="btn btn-dark">Dark</a>
|
||||
<a href="#" class="btn btn-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
|
||||
## Disabled buttons
|
||||
|
||||
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary disabled">Primary</a>
|
||||
<a href="#" class="btn btn-secondary disabled">Secondary</a>
|
||||
<a href="#" class="btn btn-success disabled">Success</a>
|
||||
<a href="#" class="btn btn-warning disabled">Warning</a>
|
||||
<a href="#" class="btn btn-danger disabled">Danger</a>
|
||||
<a href="#" class="btn btn-info disabled">Info</a>
|
||||
<a href="#" class="btn btn-dark disabled">Dark</a>
|
||||
<a href="#" class="btn btn-light disabled">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
|
||||
## Color variations
|
||||
|
||||
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-blue">Blue</a>
|
||||
<a href="#" class="btn btn-azure">Azure</a>
|
||||
<a href="#" class="btn btn-indigo">Indigo</a>
|
||||
<a href="#" class="btn btn-purple">Purple</a>
|
||||
<a href="#" class="btn btn-pink">Pink</a>
|
||||
<a href="#" class="btn btn-red">Red</a>
|
||||
<a href="#" class="btn btn-orange">Orange</a>
|
||||
<a href="#" class="btn btn-yellow">Yellow</a>
|
||||
<a href="#" class="btn btn-lime">Lime</a>
|
||||
<a href="#" class="btn btn-green">Green</a>
|
||||
<a href="#" class="btn btn-teal">Teal</a>
|
||||
<a href="#" class="btn btn-cyan">Cyan</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered -%}
|
||||
|
||||
## Ghost buttons
|
||||
|
||||
Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-ghost-primary">Primary</a>
|
||||
<a href="#" class="btn btn-ghost-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-ghost-success">Success</a>
|
||||
<a href="#" class="btn btn-ghost-warning">Warning</a>
|
||||
<a href="#" class="btn btn-ghost-danger">Danger</a>
|
||||
<a href="#" class="btn btn-ghost-info">Info</a>
|
||||
<a href="#" class="btn btn-ghost-dark">Dark</a>
|
||||
<div class="p-2 bg-dark">
|
||||
<a href="#" class="btn btn-ghost-light">Light</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical -%}
|
||||
|
||||
## Square buttons
|
||||
|
||||
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-square">Square button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Pill buttons
|
||||
|
||||
Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-pill">Pill button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Outline buttons
|
||||
|
||||
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-outline-primary">Primary</a>
|
||||
<a href="#" class="btn btn-outline-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-outline-success">Success</a>
|
||||
<a href="#" class="btn btn-outline-warning">Warning</a>
|
||||
<a href="#" class="btn btn-outline-danger">Danger</a>
|
||||
<a href="#" class="btn btn-outline-info">Info</a>
|
||||
<a href="#" class="btn btn-outline-dark">Dark</a>
|
||||
<a href="#" class="btn btn-outline-light">Light</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Button size
|
||||
|
||||
Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-lg">Large button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-sm">Small button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
|
||||
|
||||
Icons can be found [**here**](/docs/components/icons)
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn">
|
||||
{% include "ui/icon.html" icon="upload" -%}
|
||||
Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">
|
||||
{% include "ui/icon.html" icon="heart" -%}
|
||||
I like
|
||||
</button>
|
||||
<button type="button" class="btn btn-success">
|
||||
{% include "ui/icon.html" icon="check" -%}
|
||||
I agree
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
{% include "ui/icon.html" icon="plus" -%}
|
||||
More
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger">
|
||||
{% include "ui/icon.html" icon="link" -%}
|
||||
Link
|
||||
</button>
|
||||
<button type="button" class="btn btn-info">
|
||||
{% include "ui/icon.html" icon="message" -%}
|
||||
Comment
|
||||
</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## Social buttons
|
||||
|
||||
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-facebook">
|
||||
{%- include "ui/icon.html" icon="brand-facebook" -%}
|
||||
Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-twitter">
|
||||
{%- include "ui/icon.html" icon="brand-twitter" -%}
|
||||
Twitter
|
||||
</a>
|
||||
<a href="#" class="btn btn-google">
|
||||
{%- include "ui/icon.html" icon="brand-google" -%}
|
||||
Google
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube">
|
||||
{%- include "ui/icon.html" icon="brand-youtube" -%}
|
||||
Youtube
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo">
|
||||
{%- include "ui/icon.html" icon="brand-vimeo" -%}
|
||||
Vimeo
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble">
|
||||
{%- include "ui/icon.html" icon="brand-dribbble" -%}
|
||||
Dribbble
|
||||
</a>
|
||||
<a href="#" class="btn btn-github">
|
||||
{%- include "ui/icon.html" icon="brand-github" -%}
|
||||
Github
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram">
|
||||
{%- include "ui/icon.html" icon="brand-instagram" -%}
|
||||
Instagram
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest">
|
||||
{%- include "ui/icon.html" icon="brand-pinterest" -%}
|
||||
Pinterest
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk">
|
||||
{%- include "ui/icon.html" icon="brand-vk" -%}
|
||||
VK
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss">
|
||||
{%- include "ui/icon.html" icon="brand-rss" -%}
|
||||
RSS
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr">
|
||||
{%- include "ui/icon.html" icon="brand-flickr" -%}
|
||||
Flickr
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket">
|
||||
{%- include "ui/icon.html" icon="brand-bitbucket" -%}
|
||||
Bitbucket
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler">
|
||||
{%- include "ui/icon.html" icon="brand-tabler" -%}
|
||||
Tabler
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook">
|
||||
<svg>...</svg>
|
||||
Facebook
|
||||
</a>
|
||||
```
|
||||
|
||||
You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-facebook" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-x btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-x" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-google btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-google" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-youtube" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-vimeo" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-dribbble" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-github" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-instagram" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-pinterest" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-vk" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="rss" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-flickr" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-bitbucket" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-tabler" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated vertical hide-code -%}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Icon buttons
|
||||
|
||||
Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="activity" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="brand-github" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-success btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="bell" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="star" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="trash" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="chart-bar" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-icon" aria-label="Button">
|
||||
{%- include "ui/icon.html" icon="git-merge" -%}
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered hide-code -%}
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Dropdown buttons
|
||||
|
||||
Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
{%- include "ui/icon.html" icon="calendar" -%}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
{%- include "ui/icon.html" icon="calendar" -%}
|
||||
Show calendar
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered hide-code -%}
|
||||
|
||||
```html
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<svg>...</svg>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Loading buttons
|
||||
|
||||
Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary btn-loading">
|
||||
Button
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary btn-loading">
|
||||
Loading button with loooong content
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary">
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Button
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
## List of buttons
|
||||
|
||||
Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-success">Save changes</a>
|
||||
<a href="#" class="btn">Save and continue</a>
|
||||
<a href="#" class="btn btn-danger">Cancel</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn">One</a>
|
||||
<a href="#" class="btn">Two</a>
|
||||
<a href="#" class="btn">Three</a>
|
||||
<a href="#" class="btn">Four</a>
|
||||
<a href="#" class="btn">Five</a>
|
||||
<a href="#" class="btn">Six</a>
|
||||
<a href="#" class="btn">Seven</a>
|
||||
<a href="#" class="btn">Eight</a>
|
||||
<a href="#" class="btn">Nine</a>
|
||||
<a href="#" class="btn">Ten</a>
|
||||
<a href="#" class="btn">Eleven</a>
|
||||
<a href="#" class="btn">Twelve</a>
|
||||
<a href="#" class="btn">Thirteen</a>
|
||||
<a href="#" class="btn">Fourteen</a>
|
||||
<a href="#" class="btn">Fifteen</a>
|
||||
<a href="#" class="btn">Sixteen</a>
|
||||
<a href="#" class="btn">Seventeen</a>
|
||||
<a href="#" class="btn">Eighteen</a>
|
||||
<a href="#" class="btn">Nineteen</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
|
||||
Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list justify-content-center">
|
||||
<a href="#" class="btn">Save and continue</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list justify-content-end">
|
||||
<a href="#" class="btn">Save and continue</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-outline-danger me-auto">Delete</a>
|
||||
<a href="#" class="btn">Save and continue</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html -%}
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn">
|
||||
<span
|
||||
class="avatar"
|
||||
style="background-image: url(/static/avatars/002f.jpg);"
|
||||
></span>
|
||||
Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span
|
||||
class="avatar"
|
||||
style="
|
||||
background-image: url(/static/avatars/002m.jpg);
|
||||
"
|
||||
></span>
|
||||
Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span
|
||||
class="avatar"
|
||||
style="
|
||||
background-image: url(/static/avatars/004f.jpg);
|
||||
"
|
||||
></span>
|
||||
Avatar
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered -%}
|
||||
397
docs/content/ui/components/cards.md
Normal file
397
docs/content/ui/components/cards.md
Normal file
@@ -0,0 +1,397 @@
|
||||
---
|
||||
title: Cards
|
||||
summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with flexible cards.
|
||||
---
|
||||
|
||||
## Default card
|
||||
|
||||
Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p>This is some text within a card body.</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
## Card padding
|
||||
|
||||
You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.
|
||||
|
||||
Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">This is some text within a card body.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">This is some text within a card body.</div>
|
||||
</div>
|
||||
<div class="card card-md">
|
||||
<div class="card-body">This is some text within a card body.</div>
|
||||
</div>
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">This is some text within a card body.</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
```html
|
||||
<div class="card card-sm">...</div>
|
||||
<div class="card">...</div>
|
||||
<div class="card card-md">...</div>
|
||||
<div class="card card-lg">...</div>
|
||||
```
|
||||
|
||||
## Card with title
|
||||
|
||||
Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<p class="text-secondary">This is some text within a card body.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-secondary">This is some text within a card body.</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column vertical %}
|
||||
|
||||
## Card with title and image
|
||||
|
||||
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<!-- Photo -->
|
||||
<div
|
||||
class="img-responsive img-responsive-21x9 card-img-top"
|
||||
style="background-image: url(/static/photos/cup-of-coffee-and-an-open-book.jpg)"
|
||||
></div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with title and image</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
## Blog post card
|
||||
|
||||
Add an image to your blog post card to make it eye-catching. You can do it by adding the image, with a `.card-img-top` class, inside the `.card` element. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card d-flex flex-column">
|
||||
<a href="#">
|
||||
<img class="card-img-top" src="/static/photos/book-on-the-grass.jpg" alt="" />
|
||||
</a>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title">
|
||||
<a href="#">How do you know she is a witch?</a>
|
||||
</h3>
|
||||
<div class="text-secondary">
|
||||
Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart.
|
||||
You ...
|
||||
</div>
|
||||
<div class="d-flex align-items-center pt-4 mt-auto">
|
||||
<span class="avatar" style="background-image: url(/static/avatars/023m.jpg)"></span>
|
||||
<div class="ms-3">
|
||||
<a href="#" class="text-body">Maryjo Lebarree</a>
|
||||
<div class="text-secondary">3 days ago</div>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Row deck
|
||||
|
||||
Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">Short content</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">Short content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
## Post card with aside image
|
||||
|
||||
You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card d-flex flex-column">
|
||||
<div class="row row-0 flex-fill">
|
||||
<div class="col-md-3">
|
||||
<a href="#">
|
||||
<img
|
||||
src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg"
|
||||
class="w-100 h-100 object-cover"
|
||||
alt="Card side image"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="#">Shut up!</a>
|
||||
</h3>
|
||||
<div class="text-secondary">
|
||||
Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and
|
||||
boil yo...
|
||||
</div>
|
||||
<div class="d-flex align-items-center pt-4 mt-auto">
|
||||
<span class="avatar" style="background-image: url(/static/avatars/029m.jpg)"></span>
|
||||
<div class="ms-3">
|
||||
<a href="#" class="text-body">Egan Poetz</a>
|
||||
<div class="text-secondary">3 days ago</div>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="icon d-none d-md-inline-block ms-3 text-red">
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
## Color variations
|
||||
|
||||
Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-status-top bg-danger"></div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top status</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-status-start bg-green"></div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with side status</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-status-top bg-danger"></div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top status</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-status-start bg-green"></div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with side status</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Stacked card
|
||||
|
||||
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-stacked">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Stacked card</h3>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
|
||||
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Tabbed card
|
||||
|
||||
Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card-tabs">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="tab-top-1" class="card tab-pane active show">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #1</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-top-2" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #2</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-top-3" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #3</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-top-4" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #4</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
```html
|
||||
<!-- Cards with tabs component -->
|
||||
<div class="card-tabs">
|
||||
<!-- Cards navigation -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<!-- Content of card #1 -->
|
||||
<div id="tab-top-1" class="card tab-pane active show">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #1</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content of card #2 -->
|
||||
<div id="tab-top-2" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #2</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content of card #3 -->
|
||||
<div id="tab-top-3" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #3</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content of card #4 -->
|
||||
<div id="tab-top-4" class="card tab-pane">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #4</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
|
||||
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
465
docs/content/ui/components/carousel.md
Normal file
465
docs/content/ui/components/carousel.md
Normal file
@@ -0,0 +1,465 @@
|
||||
---
|
||||
title: Carousel
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with carousels.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
|
||||
|
||||
{% capture html -%}
|
||||
<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-sample"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
></button>
|
||||
<button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button>
|
||||
<button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button>
|
||||
<button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/city-lights-reflected-in-the-water-at-night.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/tropical-palm-leaves-floral-pattern-background.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/young-woman-working-in-a-cafe.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="carousel-control-prev"
|
||||
data-bs-target="#carousel-sample"
|
||||
role="button"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a
|
||||
class="carousel-control-next"
|
||||
data-bs-target="#carousel-sample"
|
||||
role="button"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dots indicators
|
||||
|
||||
You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
|
||||
|
||||
{% capture html -%}
|
||||
<div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators carousel-indicators-dot">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
></button>
|
||||
<button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button>
|
||||
<button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button>
|
||||
<button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/stylish-workspace-with-macbook-pro.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/coffee-on-a-table-with-other-items.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/book-on-the-grass.jpg" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/people-by-a-banquet-table-full-with-food.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Thumb indicators
|
||||
|
||||
The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
|
||||
|
||||
{% capture html -%}
|
||||
<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators carousel-indicators-thumb">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb"
|
||||
data-bs-slide-to="0"
|
||||
class="ratio ratio-4x3 active"
|
||||
style="background-image: url(/static/photos/group-of-people-sightseeing-in-the-city.jpg)"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb"
|
||||
data-bs-slide-to="1"
|
||||
class="ratio ratio-4x3"
|
||||
style="background-image: url(/static/photos/young-woman-working-in-a-cafe.jpg)"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb"
|
||||
data-bs-slide-to="2"
|
||||
class="ratio ratio-4x3"
|
||||
style="
|
||||
background-image: url(/static/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg);
|
||||
"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb"
|
||||
data-bs-slide-to="3"
|
||||
class="ratio ratio-4x3"
|
||||
style="background-image: url(/static/photos/stylish-workplace-with-computer-at-home.jpg)"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb"
|
||||
data-bs-slide-to="4"
|
||||
class="ratio ratio-4x3"
|
||||
style="background-image: url(/static/photos/stylish-workspace-with-macbook-pro.jpg)"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/group-of-people-sightseeing-in-the-city.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/young-woman-working-in-a-cafe.jpg" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/stylish-workplace-with-computer-at-home.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/stylish-workspace-with-macbook-pro.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Vertical indicators
|
||||
|
||||
To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
|
||||
|
||||
{% capture html -%}
|
||||
<div
|
||||
id="carousel-indicators-dot-vertical"
|
||||
class="carousel slide carousel-fade"
|
||||
data-bs-ride="carousel"
|
||||
>
|
||||
<div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot-vertical"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot-vertical"
|
||||
data-bs-slide-to="1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot-vertical"
|
||||
data-bs-slide-to="2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot-vertical"
|
||||
data-bs-slide-to="3"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-dot-vertical"
|
||||
data-bs-slide-to="4"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/man-looking-out-to-sea.jpg" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/making-magic-with-fairy-lights.jpg" />
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/cup-of-coffee-on-table-in-cafe-2.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
An example of adding thumbnails on the right side:
|
||||
|
||||
{% capture html -%}
|
||||
<div
|
||||
id="carousel-indicators-thumb-vertical"
|
||||
class="carousel slide carousel-fade"
|
||||
data-bs-ride="carousel"
|
||||
>
|
||||
<div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb-vertical"
|
||||
data-bs-slide-to="0"
|
||||
class="ratio ratio-4x3 active"
|
||||
style="
|
||||
background-image: url(/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg);
|
||||
"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb-vertical"
|
||||
data-bs-slide-to="1"
|
||||
class="ratio ratio-4x3"
|
||||
style="background-image: url(/static/photos/businesswoman-working-at-her-laptop.jpg)"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb-vertical"
|
||||
data-bs-slide-to="2"
|
||||
class="ratio ratio-4x3"
|
||||
style="background-image: url(/static/photos/color-palette-guide-sample-colors-catalog-.jpg)"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb-vertical"
|
||||
data-bs-slide-to="3"
|
||||
class="ratio ratio-4x3"
|
||||
style="
|
||||
background-image: url(/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg);
|
||||
"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carousel-indicators-thumb-vertical"
|
||||
data-bs-slide-to="4"
|
||||
class="ratio ratio-4x3"
|
||||
style="
|
||||
background-image: url(/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg);
|
||||
"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/businesswoman-working-at-her-laptop.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Carousel with captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
|
||||
|
||||
{% capture html -%}
|
||||
<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/workplace-with-laptop-on-table-at-home-4.jpg"
|
||||
/>
|
||||
<div class="carousel-caption-background d-none d-md-block"></div>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/people-watching-a-presentation-in-a-room.jpg"
|
||||
/>
|
||||
<div class="carousel-caption-background d-none d-md-block"></div>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/people-by-a-banquet-table-full-with-food.jpg"
|
||||
/>
|
||||
<div class="carousel-caption-background d-none d-md-block"></div>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
class="d-block w-100"
|
||||
alt=""
|
||||
src="/static/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg"
|
||||
/>
|
||||
<div class="carousel-caption-background d-none d-md-block"></div>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" alt="" src="/static/photos/cup-of-coffee-and-an-open-book.jpg" />
|
||||
<div class="carousel-caption-background d-none d-md-block"></div>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="carousel-control-prev"
|
||||
data-bs-target="#carousel-captions"
|
||||
role="button"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a
|
||||
class="carousel-control-next"
|
||||
data-bs-target="#carousel-captions"
|
||||
role="button"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
703
docs/content/ui/components/charts.md
Normal file
703
docs/content/ui/components/charts.md
Normal file
@@ -0,0 +1,703 @@
|
||||
---
|
||||
title: Charts
|
||||
docs-libs: [apexcharts]
|
||||
summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
||||
description: Interactive data visualizations with ApexCharts.
|
||||
---
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
|
||||
See also the [ApexCharts](https://apexcharts.com/) documentation.
|
||||
|
||||
## Line Chart
|
||||
|
||||
Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-demo-line" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-demo-line"), {
|
||||
chart: {
|
||||
type: "line",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
lineCap: "round",
|
||||
curve: "straight",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Session Duration",
|
||||
data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95],
|
||||
},
|
||||
{
|
||||
name: "Page Views",
|
||||
data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67],
|
||||
},
|
||||
{
|
||||
name: "Total Visits",
|
||||
data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4,
|
||||
},
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
type: "datetime",
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4,
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
"2020-06-21",
|
||||
"2020-06-22",
|
||||
"2020-06-23",
|
||||
"2020-06-24",
|
||||
"2020-06-25",
|
||||
"2020-06-26",
|
||||
"2020-06-27",
|
||||
"2020-06-28",
|
||||
"2020-06-29",
|
||||
"2020-06-30",
|
||||
"2020-07-01",
|
||||
"2020-07-02",
|
||||
],
|
||||
colors: ["var(--tblr-yellow)", "var(--tblr-green)", "var(--tblr-primary)"],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8,
|
||||
},
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Area Chart
|
||||
|
||||
Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-demo-area" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-demo-area"), {
|
||||
chart: {
|
||||
type: "area",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.16,
|
||||
type: "solid",
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
lineCap: "round",
|
||||
curve: "smooth",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "series1",
|
||||
data: [56, 40, 39, 47, 34, 48, 44],
|
||||
},
|
||||
{
|
||||
name: "series2",
|
||||
data: [45, 43, 30, 23, 38, 39, 54],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4,
|
||||
},
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
type: "datetime",
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4,
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
"2020-06-21",
|
||||
"2020-06-22",
|
||||
"2020-06-23",
|
||||
"2020-06-24",
|
||||
"2020-06-25",
|
||||
"2020-06-26",
|
||||
"2020-06-27",
|
||||
],
|
||||
colors: ["var(--tblr-primary)", "var(--tblr-purple)"],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8,
|
||||
},
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Bar Chart
|
||||
|
||||
Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-demo-bar" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-demo-bar"), {
|
||||
chart: {
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
stacked: true,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: "50%",
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Container for a Fanta",
|
||||
data: [44, 55, 41, 37, 22, 43, 21],
|
||||
},
|
||||
{
|
||||
name: "Strange sunglasses",
|
||||
data: [53, 32, 33, 52, 13, 43, 32],
|
||||
},
|
||||
{
|
||||
name: "Pen Pineapple Apple Pen",
|
||||
data: [12, 17, 11, 9, 15, 11, 20],
|
||||
},
|
||||
{
|
||||
name: "Binoculars",
|
||||
data: [9, 7, 5, 8, 6, 9, 4],
|
||||
},
|
||||
{
|
||||
name: "Magical notebook",
|
||||
data: [25, 12, 19, 32, 25, 24, 10],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4,
|
||||
},
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
formatter: function (val) {
|
||||
return val + "K";
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
categories: ["2008", "2009", "2010", "2011", "2012", "2013", "2014"],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
"var(--tblr-purple)",
|
||||
"var(--tblr-green)",
|
||||
"var(--tblr-yellow)",
|
||||
"var(--tblr-red)",
|
||||
"var(--tblr-primary)",
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8,
|
||||
},
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Pie Chart
|
||||
|
||||
Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-demo-pie" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-demo-pie"), {
|
||||
chart: {
|
||||
type: "donut",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
series: [44, 55, 12, 2],
|
||||
labels: ["Direct", "Affilliate", "E-mail", "Other"],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
grid: {
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
colors: [
|
||||
"var(--tblr-primary)",
|
||||
"color-mix(in oklab, var(--tblr-primary) 0.8, transparent)",
|
||||
"color-mix(in oklab, var(--tblr-primary) 0.6, transparent)",
|
||||
"var(--tblr-gray-300)",
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8,
|
||||
},
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Heatmap Chart
|
||||
|
||||
Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-demo-heatmap" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-demo-heatmap"), {
|
||||
chart: {
|
||||
type: "heatmap",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "New York",
|
||||
data: [
|
||||
{ x: "Monday", y: 22 },
|
||||
{ x: "Tuesday", y: 24 },
|
||||
{ x: "Wednesday", y: 19 },
|
||||
{ x: "Thursday", y: 23 },
|
||||
{ x: "Friday", y: 25 },
|
||||
{ x: "Saturday", y: 27 },
|
||||
{ x: "Sunday", y: 26 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Los Angeles",
|
||||
data: [
|
||||
{ x: "Monday", y: 28 },
|
||||
{ x: "Tuesday", y: 30 },
|
||||
{ x: "Wednesday", y: 27 },
|
||||
{ x: "Thursday", y: 29 },
|
||||
{ x: "Friday", y: 31 },
|
||||
{ x: "Saturday", y: 32 },
|
||||
{ x: "Sunday", y: 33 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Chicago",
|
||||
data: [
|
||||
{ x: "Monday", y: 18 },
|
||||
{ x: "Tuesday", y: 20 },
|
||||
{ x: "Wednesday", y: 17 },
|
||||
{ x: "Thursday", y: 19 },
|
||||
{ x: "Friday", y: 21 },
|
||||
{ x: "Saturday", y: 22 },
|
||||
{ x: "Sunday", y: 23 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Houston",
|
||||
data: [
|
||||
{ x: "Monday", y: 25 },
|
||||
{ x: "Tuesday", y: 27 },
|
||||
{ x: "Wednesday", y: 24 },
|
||||
{ x: "Thursday", y: 26 },
|
||||
{ x: "Friday", y: 28 },
|
||||
{ x: "Saturday", y: 29 },
|
||||
{ x: "Sunday", y: 30 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Phoenix",
|
||||
data: [
|
||||
{ x: "Monday", y: 33 },
|
||||
{ x: "Tuesday", y: 35 },
|
||||
{ x: "Wednesday", y: 32 },
|
||||
{ x: "Thursday", y: 34 },
|
||||
{ x: "Friday", y: 36 },
|
||||
{ x: "Saturday", y: 37 },
|
||||
{ x: "Sunday", y: 38 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Philadelphia",
|
||||
data: [
|
||||
{ x: "Monday", y: 20 },
|
||||
{ x: "Tuesday", y: 22 },
|
||||
{ x: "Wednesday", y: 19 },
|
||||
{ x: "Thursday", y: 21 },
|
||||
{ x: "Friday", y: 23 },
|
||||
{ x: "Saturday", y: 24 },
|
||||
{ x: "Sunday", y: 25 },
|
||||
],
|
||||
},
|
||||
],
|
||||
colors: ["var(--tblr-primary)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Average Temperature by Day and City",
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Advanced example
|
||||
|
||||
For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="chart-social-referrals" class="chart-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.ApexCharts &&
|
||||
new ApexCharts(document.getElementById("chart-social-referrals"), {
|
||||
chart: {
|
||||
type: "line",
|
||||
fontFamily: "inherit",
|
||||
height: 240,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
lineCap: "round",
|
||||
curve: "smooth",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Facebook",
|
||||
data: [
|
||||
13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836,
|
||||
12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508,
|
||||
13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142,
|
||||
8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
data: [
|
||||
3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893,
|
||||
3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954,
|
||||
3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954,
|
||||
5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Dribbble",
|
||||
data: [
|
||||
722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621,
|
||||
1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924,
|
||||
1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150,
|
||||
654, 1695, 1662, 1285, 1787,
|
||||
],
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4,
|
||||
},
|
||||
strokeDashArray: 4,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
type: "datetime",
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4,
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
"2020-06-21",
|
||||
"2020-06-22",
|
||||
"2020-06-23",
|
||||
"2020-06-24",
|
||||
"2020-06-25",
|
||||
"2020-06-26",
|
||||
"2020-06-27",
|
||||
"2020-06-28",
|
||||
"2020-06-29",
|
||||
"2020-06-30",
|
||||
"2020-07-01",
|
||||
"2020-07-02",
|
||||
"2020-07-03",
|
||||
"2020-07-04",
|
||||
"2020-07-05",
|
||||
"2020-07-06",
|
||||
"2020-07-07",
|
||||
"2020-07-08",
|
||||
"2020-07-09",
|
||||
"2020-07-10",
|
||||
"2020-07-11",
|
||||
"2020-07-12",
|
||||
"2020-07-13",
|
||||
"2020-07-14",
|
||||
"2020-07-15",
|
||||
"2020-07-16",
|
||||
"2020-07-17",
|
||||
"2020-07-18",
|
||||
"2020-07-19",
|
||||
"2020-07-20",
|
||||
"2020-07-21",
|
||||
"2020-07-22",
|
||||
"2020-07-23",
|
||||
"2020-07-24",
|
||||
"2020-07-25",
|
||||
"2020-07-26",
|
||||
"2020-07-27",
|
||||
"2020-07-28",
|
||||
"2020-07-29",
|
||||
"2020-07-30",
|
||||
"2020-07-31",
|
||||
"2020-08-01",
|
||||
"2020-08-02",
|
||||
"2020-08-03",
|
||||
"2020-08-04",
|
||||
"2020-08-05",
|
||||
"2020-08-06",
|
||||
"2020-08-07",
|
||||
"2020-08-08",
|
||||
"2020-08-09",
|
||||
"2020-08-10",
|
||||
],
|
||||
colors: [
|
||||
"var(--tblr-facebook)",
|
||||
"var(--tblr-twitter)",
|
||||
"var(--tblr-dribbble)",
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8,
|
||||
},
|
||||
},
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
175
docs/content/ui/components/countup.md
Normal file
175
docs/content/ui/components/countup.md
Normal file
@@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Countup
|
||||
summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
docs-libs: countup
|
||||
description: Display numbers dynamically with countups.
|
||||
---
|
||||
|
||||
The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
|
||||
|
||||
To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
|
||||
|
||||
For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
|
||||
|
||||
## Basic usage
|
||||
|
||||
To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
|
||||
|
||||
```html
|
||||
<h1 data-countup>30000</h1>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Duration
|
||||
|
||||
Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"duration":4}'>30000</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how the duration affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"duration":4}'>30000</h1>
|
||||
<h1 data-countup='{"duration":6}'>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Starting value
|
||||
|
||||
By default the countup will start from zero. If you want to set a different start value use `startVal`.
|
||||
You can also set the start value to be greater than the final value, so that it counts down instead of up.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"startVal":12345}'>30000</h1>
|
||||
```
|
||||
|
||||
To see how the starting value affects the animation, look at the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup='{"startVal":12345}'>30000</h1>
|
||||
<h1 data-countup='{"startVal":47655}'>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Decimal places
|
||||
|
||||
Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how the number of decimal places affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Easing
|
||||
|
||||
Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"useEasing": false}'>30000</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how easing affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"useEasing": false}'>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Use grouping
|
||||
|
||||
Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"useGrouping": false}'>30000</h1>
|
||||
```
|
||||
|
||||
Example below shows how grouping affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"useGrouping": false}'>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Separator
|
||||
|
||||
You can change the default separator using `separator` and specifying the one you wish to use.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"separator":" "}'>3000000</h1>
|
||||
```
|
||||
|
||||
This example shows how the separator affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup>3000000</h1>
|
||||
<h1 data-countup='{"separator":" "}'>3000000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Decimal separator
|
||||
|
||||
You can change the default decimal separator using `decimal` and specifying the one you wish to use.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"decimal":","}'>3.12</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how the decimal separator affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Prefix
|
||||
|
||||
Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"prefix":"$"}'>30000</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how the prefix affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup='{"prefix":"$"}'>30000</h1>
|
||||
<h1 data-countup='{"prefix":"€"}'>30000</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Suffix
|
||||
|
||||
Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
|
||||
|
||||
```html
|
||||
<h1 data-countup='{"suffix":"%"}'>300</h1>
|
||||
```
|
||||
|
||||
Look at the example below to see how the suffix affects the animation.
|
||||
|
||||
{% capture html -%}
|
||||
<h1 data-countup='{"suffix":"%"}'>300</h1>
|
||||
<h1 data-countup='{"suffix":"‰"}'>300</h1>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
121
docs/content/ui/components/datagrid.md
Normal file
121
docs/content/ui/components/datagrid.md
Normal file
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: Data grid
|
||||
summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
|
||||
description: Detailed product information in grids.
|
||||
---
|
||||
|
||||
{% capture html -%}
|
||||
<div class="datagrid">
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Registrar</div>
|
||||
<div class="datagrid-content">Third Party</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Nameservers</div>
|
||||
<div class="datagrid-content">Third Party</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Port number</div>
|
||||
<div class="datagrid-content">3306</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Expiration date</div>
|
||||
<div class="datagrid-content">–</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Creator</div>
|
||||
<div class="datagrid-content">
|
||||
<div class="d-flex align-items-center">
|
||||
<span
|
||||
class="avatar avatar-xs me-2 rounded"
|
||||
style="background-image: url(/static/avatars/027m.jpg)"
|
||||
></span>
|
||||
Paweł Kuna
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Age</div>
|
||||
<div class="datagrid-content">15 days</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Edge network</div>
|
||||
<div class="datagrid-content">
|
||||
<span class="status status-green"> Active </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Avatars list</div>
|
||||
<div class="datagrid-content">
|
||||
<div class="avatar-list avatar-list-stacked">
|
||||
<span
|
||||
class="avatar avatar-xs rounded"
|
||||
style="background-image: url(/static/avatars/029f.jpg)"
|
||||
></span>
|
||||
<span class="avatar avatar-xs rounded">JL</span>
|
||||
<span
|
||||
class="avatar avatar-xs rounded"
|
||||
style="background-image: url(/static/avatars/015f.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-xs rounded"
|
||||
style="background-image: url(/static/avatars/004m.jpg)"
|
||||
></span>
|
||||
<span
|
||||
class="avatar avatar-xs rounded"
|
||||
style="background-image: url(/static/avatars/037m.jpg)"
|
||||
></span>
|
||||
<span class="avatar avatar-xs rounded">+3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Checkbox</div>
|
||||
<div class="datagrid-content">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked />
|
||||
<span class="form-check-label">Click me</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Icon</div>
|
||||
<div class="datagrid-content">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon text-green"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg>
|
||||
Checked
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Form control</div>
|
||||
<div class="datagrid-content">
|
||||
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="datagrid-item">
|
||||
<div class="datagrid-title">Longer description</div>
|
||||
<div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
You can adjust the datagrid to your needs by setting the values of variables:
|
||||
|
||||
| Variable | Description | Default |
|
||||
|----------|-------------|---------|
|
||||
| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
|
||||
| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |
|
||||
70
docs/content/ui/components/divider.md
Normal file
70
docs/content/ui/components/divider.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Divider
|
||||
summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
description: Separate content with clear dividers.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
|
||||
|
||||
```html example
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
<div class="hr-text">See also</div>
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
|
||||
rerum, saepe sed, sit!
|
||||
</p>
|
||||
```
|
||||
|
||||
## Text position
|
||||
|
||||
You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
|
||||
|
||||
{% capture html -%}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
<div class="hr-text hr-text-start">Start divider</div>
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
|
||||
rerum, saepe sed, sit!
|
||||
</p>
|
||||
<div class="hr-text">Centered divider</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
<div class="hr-text hr-text-end">End divider</div>
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
|
||||
rerum, saepe sed, sit!
|
||||
</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Divider color
|
||||
|
||||
Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
|
||||
|
||||
{% capture html -%}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
<div class="hr-text text-green">Green divider</div>
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
|
||||
rerum, saepe sed, sit!
|
||||
</p>
|
||||
<div class="hr-text text-red">Red divider</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
<div class="hr-text text-primary">Primary divider</div>
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus
|
||||
rerum, saepe sed, sit!
|
||||
</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
313
docs/content/ui/components/dropdowns.md
Normal file
313
docs/content/ui/components/dropdowns.md
Normal file
@@ -0,0 +1,313 @@
|
||||
---
|
||||
title: Dropdowns
|
||||
summary: Use dropdowns to display lists of options or include more items in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with dropdown menus.
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
|
||||
With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Third action</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown divider
|
||||
|
||||
Use dropdown dividers to separate groups of dropdown items for greater clarity.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"> Action </a>
|
||||
<a class="dropdown-item" href="#"> Another action </a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Active state
|
||||
|
||||
Make a dropdown item look active, so that it highlights when a user hovers over a given option.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"> Action </a>
|
||||
<a class="dropdown-item" href="#"> Another action </a>
|
||||
<a class="dropdown-item active" href="#">Active action</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#"> Action </a>
|
||||
<a class="dropdown-item" href="#"> Another action </a>
|
||||
<a class="dropdown-item disabled" href="#">Disabled action</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown header
|
||||
|
||||
Add a dropdown header to group dropdown items into sections and name them accordingly.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Dropdown header</span>
|
||||
<a class="dropdown-item" href="#"> Action </a>
|
||||
<a class="dropdown-item" href="#"> Another action </a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown with icons
|
||||
|
||||
Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-header">Dropdown header</span>
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon dropdown-item-icon icon-tabler icon-tabler-settings"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
|
||||
></path>
|
||||
<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
||||
</svg>
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon dropdown-item-icon icon-tabler icon-tabler-pencil"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
|
||||
<path d="M13.5 6.5l4 4"></path>
|
||||
</svg>
|
||||
Another action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown with arrow
|
||||
|
||||
Add an arrow that points at the dropdown button.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow">
|
||||
<a class="dropdown-item" href="#"> Action </a>
|
||||
<a class="dropdown-item" href="#"> Another action </a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown with badge
|
||||
|
||||
Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">
|
||||
Action
|
||||
<span class="badge bg-primary ms-auto">12</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Another action
|
||||
<span class="badge bg-green ms-auto"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown with checkboxes
|
||||
|
||||
Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<label class="dropdown-item">
|
||||
<input class="form-check-input m-0 me-2" type="radio" /> Option 1
|
||||
</label>
|
||||
<label class="dropdown-item">
|
||||
<input class="form-check-input m-0 me-2" type="radio" /> Option 2
|
||||
</label>
|
||||
<label class="dropdown-item">
|
||||
<input class="form-check-input m-0 me-2" type="radio" /> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dark dropdown
|
||||
|
||||
Make your dropdown suit the dark mode of your website or software.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
|
||||
<span class="dropdown-header">Dropdown header</span>
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon dropdown-item-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
|
||||
/>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon dropdown-item-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
|
||||
<path d="M16 5l3 3" />
|
||||
</svg>
|
||||
Another action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Dropdown with card content
|
||||
|
||||
Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
|
||||
<div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem">
|
||||
<div class="card d-flex flex-column">
|
||||
<a href="#">
|
||||
<img
|
||||
class="card-img-top"
|
||||
src="/static/photos/friends-at-a-restaurant-drinking-wine.jpg"
|
||||
alt="How do you know she is a witch?"
|
||||
/>
|
||||
</a>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title">
|
||||
<a href="#">How do you know she is a witch?</a>
|
||||
</h3>
|
||||
<div class="text-secondary">
|
||||
Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a
|
||||
wart. You ...
|
||||
</div>
|
||||
<div class="d-flex align-items-center pt-4 mt-auto">
|
||||
<span class="avatar" style="background-image: url(/static/avatars/013m.jpg)"></span>
|
||||
<div class="ms-3">
|
||||
<a href="#" class="text-body">Maryjo Lebarree</a>
|
||||
<div class="text-secondary">3 days ago</div>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
91
docs/content/ui/components/dropzone.md
Normal file
91
docs/content/ui/components/dropzone.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Dropzone
|
||||
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
|
||||
description: Drag-and-drop file upload tool.
|
||||
---
|
||||
|
||||
## Basic usage
|
||||
|
||||
The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
|
||||
|
||||
```html
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" />
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Dropzone("#dropzone-default");
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
|
||||
|
||||
{% capture html -%}
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
|
||||
<div class="fallback">
|
||||
<input name="..." type="file" />
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Dropzone("#dropzone-default");
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Add multiple files
|
||||
|
||||
To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
|
||||
|
||||
```html
|
||||
<input name="..." type="file" multiple />
|
||||
```
|
||||
|
||||
By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
|
||||
|
||||
{% capture html -%}
|
||||
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple />
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Dropzone("#dropzone-mulitple");
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Custom Dropzone
|
||||
|
||||
You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
|
||||
|
||||
{% capture html -%}
|
||||
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" />
|
||||
</div>
|
||||
<div class="dz-message">
|
||||
<h3 class="dropzone-msg-title">Your text here</h3>
|
||||
<span class="dropzone-msg-desc">Your custom description here</span>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Dropzone("#dropzone-custom");
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
By customizing the drop area, you can align the file upload process with your application’s branding or specific requirements.
|
||||
151
docs/content/ui/components/empty.md
Normal file
151
docs/content/ui/components/empty.md
Normal file
@@ -0,0 +1,151 @@
|
||||
---
|
||||
title: Empty states
|
||||
summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
|
||||
description: Engage users in empty or error screens.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="9" y1="10" x2="9.01" y2="10" />
|
||||
<line x1="15" y1="10" x2="15.01" y2="10" />
|
||||
<path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="empty-title">No results found</p>
|
||||
<p class="empty-subtitle text-secondary">
|
||||
Try adjusting your search or filter to find what you're looking for.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="10" cy="10" r="7" />
|
||||
<line x1="21" y1="21" x2="15" y2="15" />
|
||||
</svg>
|
||||
Search again
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Empty state with illustration
|
||||
|
||||
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="empty">
|
||||
<div class="empty-img">
|
||||
<img src="..." height="128" alt="" />
|
||||
</div>
|
||||
<p class="empty-title">Invoices are managed from here</p>
|
||||
<p class="empty-subtitle text-secondary">
|
||||
Try adjusting your search or filter to find what you're looking for.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
New invoice
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Empty state with header
|
||||
|
||||
Instead of adding an icon or illustration you can simply give the text:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="empty">
|
||||
<div class="empty-header">404</div>
|
||||
<p class="empty-title">Oops… You just found an error page</p>
|
||||
<p class="empty-subtitle text-secondary">
|
||||
Try adjusting your search or filter to find what you're looking for.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<line x1="5" y1="12" x2="11" y2="18" />
|
||||
<line x1="5" y1="12" x2="11" y2="6" />
|
||||
</svg>
|
||||
Take me home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
```html
|
||||
<div class="empty">
|
||||
<div class="empty-header">404</div>
|
||||
<p class="empty-title">Oops… You just found an error page</p>
|
||||
<p class="empty-subtitle text-secondary">
|
||||
Try adjusting your search or filter to find what you're looking for.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="#" class="btn btn-primary">
|
||||
{% include "ui/icon.html" icon="arrow-left" %}
|
||||
Take me home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
137
docs/content/ui/components/icons.md
Normal file
137
docs/content/ui/components/icons.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Icons
|
||||
summary: Use any of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
|
||||
|
||||
## Base icon
|
||||
|
||||
To add an icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
|
||||
|
||||
```html
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
```
|
||||
|
||||
Results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
{% include "ui/icon.html" icon="ghost-2" %}
|
||||
{% include "ui/icon.html" icon="lego" %}
|
||||
{% include "ui/icon.html" icon="building-carousel" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Filled icons
|
||||
|
||||
To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file.
|
||||
|
||||
```html
|
||||
{% include "ui/icon.html" icon="heart-filled" %}
|
||||
```
|
||||
|
||||
Look at the example below to see the filled icons.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/icon.html" icon="heart-filled" %}
|
||||
{% include "ui/icon.html" icon="bell-ringing-filled" %}
|
||||
{% include "ui/icon.html" icon="cherry-filled" %}
|
||||
{% include "ui/icon.html" icon="circle-key-filled" %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Icon colors
|
||||
|
||||
To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
|
||||
|
||||
```html
|
||||
<span class="text-red">
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
</span>
|
||||
```
|
||||
|
||||
Look at the example below to see how the color of the icon changes.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="text-red">
|
||||
{% include "ui/icon.html" icon="heart-filled" %}
|
||||
</span>
|
||||
<span class="text-yellow">
|
||||
{% include "ui/icon.html" icon="star-filled" %}
|
||||
</span>
|
||||
<span class="text-blue">
|
||||
{% include "ui/icon.html" icon="circle" %}
|
||||
</span>
|
||||
<span class="text-green">
|
||||
{% include "ui/icon.html" icon="square-rounded" %}
|
||||
</span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Icon animations
|
||||
|
||||
To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.
|
||||
|
||||
```html
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
{% include "ui/icon.html" icon="rotate-clockwise" %}
|
||||
```
|
||||
|
||||
Look at the example below to see the animated icons.
|
||||
|
||||
{% capture html -%}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-pulse"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tada"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
|
||||
/>
|
||||
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-rotate"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
|
||||
</svg>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
6
docs/content/ui/components/index.md
Normal file
6
docs/content/ui/components/index.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Components
|
||||
order: 4
|
||||
description: Various components to enhance UI.
|
||||
summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
|
||||
---
|
||||
60
docs/content/ui/components/inline-player.md
Normal file
60
docs/content/ui/components/inline-player.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Inline player
|
||||
docs-libs: plyr
|
||||
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
description: Lightweight media player for websites.
|
||||
---
|
||||
|
||||
|
||||
## Overview
|
||||
|
||||
The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
|
||||
|
||||
## Installation
|
||||
|
||||
To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
|
||||
|
||||
```html
|
||||
<script src="{{ cdnUrl }}/dist/libs/plyr/dist/plyr.min.js"></script>
|
||||
```
|
||||
|
||||
## Sample demo
|
||||
|
||||
Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
|
||||
|
||||
```html
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.Plyr && new Plyr("#player-youtube");
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
Look at the example below to see how the Inline Player works with a YouTube video.
|
||||
|
||||
{% capture html -%}
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
|
||||
<script src="{{ cdnUrl }}/dist/libs/plyr/dist/plyr.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.Plyr && new Plyr("#player-youtube");
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Vimeo file
|
||||
|
||||
Here’s how to embed a Vimeo video using the Inline Player:
|
||||
|
||||
{% capture html -%}
|
||||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
|
||||
<script src="{{ cdnUrl }}/dist/libs/plyr/dist/plyr.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.Plyr && new Plyr("#player-vimeo");
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
271
docs/content/ui/components/modals.md
Normal file
271
docs/content/ui/components/modals.md
Normal file
@@ -0,0 +1,271 @@
|
||||
---
|
||||
title: Modals
|
||||
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
description: Dialogs for notifications and content.
|
||||
---
|
||||
|
||||
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
|
||||
|
||||
```html
|
||||
<div class="modal" tabindex="-1">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">...</div>
|
||||
<div class="modal-body">...</div>
|
||||
<div class="modal-footer">...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the modal looks.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<div class="modal" id="exampleModal" tabindex="-1">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus
|
||||
deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis
|
||||
reprehenderit sit tempora totam unde.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered bg="surface-secondary" %}
|
||||
|
||||
## Prompt and alert
|
||||
|
||||
You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="modal" id="exampleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<div class="modal-status bg-danger"></div>
|
||||
<div class="modal-body text-center py-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon mb-2 text-danger icon-lg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M12 9v2m0 4v.01" />
|
||||
<path
|
||||
d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
|
||||
/>
|
||||
</svg>
|
||||
<h3>Are you sure?</h3>
|
||||
<div class="text-secondary">
|
||||
Do you really want to remove 84 files? What you've done cannot be undone.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="#" class="btn w-100" data-bs-dismiss="modal"> Cancel </a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal"> Delete 84 items </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw bg="surface-secondary" %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="modal" id="exampleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<div class="modal-status bg-success"></div>
|
||||
<div class="modal-body text-center py-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon mb-2 text-green icon-lg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M9 12l2 2l4 -4" />
|
||||
</svg>
|
||||
<h3>Payment succeeded</h3>
|
||||
<div class="text-secondary">
|
||||
Your payment of $290 has been successfully submitted. Your invoice has been sent to
|
||||
support@tabler.io.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="#" class="btn w-100" data-bs-dismiss="modal"> Go to dashboard </a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a href="#" class="btn btn-success w-100" data-bs-dismiss="modal"> View invoice </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw bg="surface-secondary" %}
|
||||
|
||||
## Modal with form
|
||||
|
||||
You can use the modal to create a form. Look at the example below to see how the form looks.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="modal" id="exampleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">New report</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="example-text-input"
|
||||
placeholder="Your report name"
|
||||
/>
|
||||
</div>
|
||||
<label class="form-label">Report type</label>
|
||||
<div class="form-selectgroup-boxes row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input
|
||||
type="radio"
|
||||
name="report-type"
|
||||
value="1"
|
||||
class="form-selectgroup-input"
|
||||
checked
|
||||
/>
|
||||
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<span class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</span>
|
||||
<span class="form-selectgroup-label-content">
|
||||
<span class="form-selectgroup-title strong mb-1">Simple</span>
|
||||
<span class="d-block text-secondary"
|
||||
>Provide only basic data needed for the report</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
|
||||
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<span class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</span>
|
||||
<span class="form-selectgroup-label-content">
|
||||
<span class="form-selectgroup-title strong mb-1">Advanced</span>
|
||||
<span class="d-block text-secondary"
|
||||
>Insert charts and additional advanced analyses to be inserted in the
|
||||
report</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Report url</label>
|
||||
<div class="input-group input-group-flat">
|
||||
<span class="input-group-text"> https://tabler.io/reports/ </span>
|
||||
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Visibility</label>
|
||||
<select class="form-select">
|
||||
<option value="1" selected>Private</option>
|
||||
<option value="2">Public</option>
|
||||
<option value="3">Hidden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Client name</label>
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Reporting period</label>
|
||||
<input type="date" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label class="form-label">Additional information</label>
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> Cancel </a>
|
||||
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
Create new report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw bg="surface-secondary" class="px-5" %}
|
||||
72
docs/content/ui/components/offcanvas.md
Normal file
72
docs/content/ui/components/offcanvas.md
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Offcanvas
|
||||
---
|
||||
|
||||
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
|
||||
|
||||
## Basic usage
|
||||
|
||||
To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
|
||||
|
||||
```html
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
|
||||
<div class="offcanvas-body">
|
||||
Content for the offcanvas goes here. You can place just about any Tabler component or custom
|
||||
elements here.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the offcanvas works.
|
||||
|
||||
{% capture html -%}
|
||||
<div
|
||||
class="offcanvas offcanvas-start show"
|
||||
tabindex="-1"
|
||||
id="offcanvas"
|
||||
aria-labelledby="offcanvasLabel"
|
||||
>
|
||||
<div class="offcanvas-body">
|
||||
Content for the offcanvas goes here. You can place just about any Tabler component or custom
|
||||
elements here.
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Cookies banner
|
||||
|
||||
The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
|
||||
|
||||
{% capture html -%}
|
||||
<div
|
||||
class="offcanvas offcanvas-bottom h-auto show"
|
||||
tabindex="-1"
|
||||
id="offcanvasBottom"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div class="offcanvas-body">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best
|
||||
experience on our website.
|
||||
<a href="./terms-of-service.html" target="_blank">Learn more</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Essential Cookies Only
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
|
||||
Allow All Cookies
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
283
docs/content/ui/components/placeholder.md
Normal file
283
docs/content/ui/components/placeholder.md
Normal file
@@ -0,0 +1,283 @@
|
||||
---
|
||||
title: Placeholder
|
||||
summary: Placeholder is used to reserve space for content that will soon appear in a layout.
|
||||
description: Reserve space for upcoming content.
|
||||
---
|
||||
|
||||
## Placeholder line
|
||||
|
||||
Placeholder lines can contain lines of text. Their length is different and depends on the `col-` class.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="placeholder col-9"></div>
|
||||
<div class="placeholder col-11"></div>
|
||||
<div class="placeholder col-10"></div>
|
||||
<div class="placeholder col-8"></div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
However, it may be useful to specify the full width in order to fit the content more effectively.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="placeholder col-12"></div>
|
||||
<div class="placeholder col-12"></div>
|
||||
<div class="placeholder col-12"></div>
|
||||
<div class="placeholder col-12"></div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
You can also move the lines to the right or center them:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="text-end">
|
||||
<div class="placeholder col-11"></div>
|
||||
<div class="placeholder col-10"></div>
|
||||
<div class="placeholder col-8"></div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<div class="placeholder col-11"></div>
|
||||
<div class="placeholder col-10"></div>
|
||||
<div class="placeholder col-8"></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
## Placeholder heading
|
||||
|
||||
A placeholder can also contain an element that looks like a header:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
## Placeholder avatar
|
||||
|
||||
You can use a placeholder that will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
|
||||
|
||||
```html
|
||||
<div class="avatar placeholder"></div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the avatar placeholder looks.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="avatar placeholder"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="placeholder col-9"></div>
|
||||
<div class="placeholder col-11"></div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="avatar avatar-xl placeholder"></div>
|
||||
<div class="avatar avatar-lg placeholder"></div>
|
||||
<div class="avatar placeholder"></div>
|
||||
<div class="avatar avatar-sm placeholder"></div>
|
||||
<div class="avatar avatar-xs placeholder"></div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Placeholder image
|
||||
|
||||
You can use a placeholder that will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="ratio ratio-1x1 placeholder">
|
||||
<div class="placeholder-image"></div>
|
||||
</div>
|
||||
<div class="ratio ratio-4x3 placeholder">
|
||||
<div class="placeholder-image"></div>
|
||||
</div>
|
||||
<div class="ratio ratio-16x9 placeholder">
|
||||
<div class="placeholder-image"></div>
|
||||
</div>
|
||||
<div class="ratio ratio-21x9 placeholder">
|
||||
<div class="placeholder-image"></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column centered vertical %}
|
||||
|
||||
## Placeholder color
|
||||
|
||||
By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
|
||||
|
||||
```html
|
||||
<span class="placeholder col-12 bg-dark"></span>
|
||||
```
|
||||
|
||||
Look at the example below to see how the color affects the placeholder.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="placeholder col-12"></span>
|
||||
<span class="placeholder col-12 bg-primary"></span>
|
||||
<span class="placeholder col-12 bg-secondary"></span>
|
||||
<span class="placeholder col-12 bg-success"></span>
|
||||
<span class="placeholder col-12 bg-danger"></span>
|
||||
<span class="placeholder col-12 bg-warning"></span>
|
||||
<span class="placeholder col-12 bg-info"></span>
|
||||
<span class="placeholder col-12 bg-light"></span>
|
||||
<span class="placeholder col-12 bg-dark"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
## Placeholder sizing
|
||||
|
||||
The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
|
||||
|
||||
{% capture html -%}
|
||||
<span class="placeholder col-12 placeholder-lg"></span>
|
||||
<span class="placeholder col-12"></span>
|
||||
<span class="placeholder col-12 placeholder-sm"></span>
|
||||
<span class="placeholder col-12 placeholder-xs"></span>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
## Animation
|
||||
|
||||
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
|
||||
|
||||
{% capture html -%}
|
||||
<p class="placeholder-glow">
|
||||
<span class="placeholder col-12"></span>
|
||||
</p>
|
||||
<p class="placeholder-wave">
|
||||
<span class="placeholder col-12"></span>
|
||||
</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
## Live examples
|
||||
|
||||
See in the following examples how else you can use the placeholder component
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card placeholder-glow">
|
||||
<div class="ratio ratio-21x9 card-img-top placeholder"></div>
|
||||
<div class="card-body">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
<div class="mt-3">
|
||||
<a
|
||||
href="#"
|
||||
tabindex="-1"
|
||||
class="btn btn-primary disabled placeholder col-4"
|
||||
aria-hidden="true"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="row g-0 align-items-center placeholder-glow">
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1 card-img-start placeholder"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
<div class="placeholder placeholder-xs col-11"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body py-5 text-center">
|
||||
<div>
|
||||
<div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
|
||||
</div>
|
||||
<div class="mt w-75 mx-auto">
|
||||
<div class="placeholder col-9 mb-3"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush placeholder-glow">
|
||||
<li class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
<div class="col-2 ms-auto text-end">
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
<div class="col-2 ms-auto text-end">
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
<div class="col-2 ms-auto text-end">
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-rounded placeholder"></div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="placeholder placeholder-xs col-9"></div>
|
||||
<div class="placeholder placeholder-xs col-7"></div>
|
||||
</div>
|
||||
<div class="col-2 ms-auto text-end">
|
||||
<div class="placeholder placeholder-xs col-8"></div>
|
||||
<div class="placeholder placeholder-xs col-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column centered vertical %}
|
||||
89
docs/content/ui/components/popover.md
Normal file
89
docs/content/ui/components/popover.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Popovers
|
||||
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with popovers.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a default popover use:
|
||||
|
||||
{% capture html -%}
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
data-bs-toggle="popover"
|
||||
title="Popover title"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
||||
>
|
||||
Click to toggle popover
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered bg="surface-secondary" %}
|
||||
|
||||
## Four directions
|
||||
|
||||
Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
|
||||
|
||||
{% capture html -%}
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
data-bs-container="body"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="top"
|
||||
data-bs-content="Top popover"
|
||||
>
|
||||
Popover on top
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
data-bs-container="body"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="right"
|
||||
data-bs-content="Right popover"
|
||||
>
|
||||
Popover on right
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
data-bs-container="body"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-content="Bottom popover"
|
||||
>
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
data-bs-container="body"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="left"
|
||||
data-bs-content="Left popover"
|
||||
>
|
||||
Popover on left
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered bg="surface-secondary" %}
|
||||
|
||||
## Popover on hover
|
||||
|
||||
Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)
|
||||
|
||||
{% capture html -%}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-toggle="popover"
|
||||
title="Popover title"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
||||
>
|
||||
Hover to toggle popover
|
||||
</button>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered bg="surface-secondary" %}
|
||||
249
docs/content/ui/components/progress.md
Normal file
249
docs/content/ui/components/progress.md
Normal file
@@ -0,0 +1,249 @@
|
||||
---
|
||||
title: Progress bars
|
||||
summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress visually.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 38%"></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
```html
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
style="width: 38%"
|
||||
role="progressbar"
|
||||
aria-valuenow="38"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="38% Complete"
|
||||
>
|
||||
<span class="visually-hidden">38% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Progress size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
```html
|
||||
<div class="progress progress-sm">...</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how it works:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress progress-sm">
|
||||
<div
|
||||
class="progress-bar"
|
||||
style="width: 57%"
|
||||
role="progressbar"
|
||||
aria-valuenow="57"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="57% Complete"
|
||||
>
|
||||
<span class="visually-hidden">57% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Indeterminate progress
|
||||
|
||||
You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar progress-bar-indeterminate"></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Native progress element
|
||||
|
||||
You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
|
||||
|
||||
```html
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
```
|
||||
|
||||
This is how it looks:
|
||||
|
||||
{% capture html -%}
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Progress color
|
||||
|
||||
You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
|
||||
|
||||
Full list of available colors can be found [here](/docs/ui/base/colors).
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-red"
|
||||
style="width: 24%"
|
||||
role="progressbar"
|
||||
aria-valuenow="24"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="24% Complete"
|
||||
>
|
||||
<span class="visually-hidden">24% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-green"
|
||||
style="width: 45%"
|
||||
role="progressbar"
|
||||
aria-valuenow="45"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="45% Complete"
|
||||
>
|
||||
<span class="visually-hidden">45% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-purple"
|
||||
style="width: 64%"
|
||||
role="progressbar"
|
||||
aria-valuenow="64"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="64% Complete"
|
||||
>
|
||||
<span class="visually-hidden">64% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-blue"
|
||||
style="width: 38%"
|
||||
role="progressbar"
|
||||
aria-valuenow="38"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="38% Complete"
|
||||
>
|
||||
<span class="visually-hidden">38% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Multiple progress bars
|
||||
|
||||
You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
|
||||
|
||||
```html
|
||||
<div class="progress-stacked">
|
||||
<div class="progress">...</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how it looks:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress-stacked">
|
||||
<div class="progress" style="width: 15%">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress" style="width: 30%">
|
||||
<div class="progress-bar bg-success"></div>
|
||||
</div>
|
||||
<div class="progress" style="width: 20%">
|
||||
<div class="progress-bar bg-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical column %}
|
||||
|
||||
## Striped progress
|
||||
|
||||
You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
|
||||
|
||||
```html
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how it looks:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Progress background
|
||||
|
||||
By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
|
||||
|
||||
```html
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Poland</div>
|
||||
<div class="progressbg-value">65%</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Thanks to this you can create a nice looking statistics section:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Poland</div>
|
||||
<div class="progressbg-value">65%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 35%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Germany</div>
|
||||
<div class="progressbg-value">35%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 28%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">United Stated</div>
|
||||
<div class="progressbg-value">28%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">United Kingdom</div>
|
||||
<div class="progressbg-value">20%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 15%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">France</div>
|
||||
<div class="progressbg-value">15%</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical card %}
|
||||
33
docs/content/ui/components/range-slider.md
Normal file
33
docs/content/ui/components/range-slider.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Range slider
|
||||
docs-libs: nouislider
|
||||
description: Adjust values with range sliders.
|
||||
summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
|
||||
---
|
||||
|
||||
To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
|
||||
|
||||
All options and features can be found [**here**](https://refreshless.com/nouislider/).
|
||||
|
||||
## Basic range slider
|
||||
|
||||
{% capture html -%}
|
||||
<div id="range-simple"></div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
window.noUiSlider &&
|
||||
noUiSlider.create(document.getElementById("range-simple"), {
|
||||
start: 20,
|
||||
connect: [true, false],
|
||||
step: 10,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
|
||||
127
docs/content/ui/components/ribbons.md
Normal file
127
docs/content/ui/components/ribbons.md
Normal file
@@ -0,0 +1,127 @@
|
||||
---
|
||||
title: Ribbons
|
||||
summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
description: Highlight elements with graphical ribbons.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `ribbon` class to add the default ribbon to any section of your interface.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem"></div>
|
||||
<div class="ribbon">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html card column %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-body"></div>
|
||||
<div class="ribbon">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Ribbon position
|
||||
|
||||
You can change the position of a ribbon by adding one of the following classes to the element:
|
||||
|
||||
- `ribbon-top` - moves it to the top
|
||||
- `ribbon-end` - moves it to the right
|
||||
- `ribbon-bottom` - moves it to the bottom
|
||||
- `ribbon-start` - moves it to the left
|
||||
|
||||
Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem"></div>
|
||||
<div class="ribbon ribbon-top ribbon-start">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-body"></div>
|
||||
<div class="ribbon ribbon-top ribbon-start">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Ribbon color
|
||||
|
||||
Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem"></div>
|
||||
<div class="ribbon bg-red">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-body"></div>
|
||||
<div class="ribbon bg-red">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Ribbon text
|
||||
|
||||
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 5rem"></div>
|
||||
<div class="ribbon bg-green">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-body"></div>
|
||||
<div class="ribbon bg-green">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Ribbon style
|
||||
|
||||
Change the style of a ribbon to make it go well with your interface design.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card w-100">
|
||||
<div class="card-body" style="height: 5rem"></div>
|
||||
<div class="ribbon ribbon-bookmark bg-orange">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html column %}
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-body"></div>
|
||||
<div class="ribbon ribbon-bookmark bg-orange">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
255
docs/content/ui/components/segmented-control.md
Normal file
255
docs/content/ui/components/segmented-control.md
Normal file
@@ -0,0 +1,255 @@
|
||||
---
|
||||
title: Segmented Control
|
||||
summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
|
||||
---
|
||||
|
||||
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
First
|
||||
</button>
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
See the example below to see how the segmented control looks.
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
First
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Second
|
||||
</button>
|
||||
<button
|
||||
class="nav-link"
|
||||
disabled
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="false"
|
||||
tabindex="-1"
|
||||
>
|
||||
Disabled
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Full width
|
||||
|
||||
To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented w-100" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
Daily
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Weekly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Monthly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Quarterly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Yearly
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## With emojis
|
||||
|
||||
You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented nav-1" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
👦
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏿
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏾
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏽
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏼
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏻
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## With icons
|
||||
|
||||
You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
|
||||
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
{% include "ui/icon.html" icon="list" %}
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="layout" %}
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="calendar" %}
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="files" %}
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Vertical direction
|
||||
|
||||
To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
{% include "ui/icon.html" icon="list" %}
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="layout" %}
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="calendar" %}
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
{% include "ui/icon.html" icon="files" %}
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
## Sizes
|
||||
|
||||
You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the examples below.
|
||||
|
||||
{% capture html -%}
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Kanban
|
||||
</button>
|
||||
<button
|
||||
class="nav-link disabled"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
<nav class="nav nav-segmented nav-lg" role="tablist">
|
||||
<button
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="true"
|
||||
aria-current="page"
|
||||
>
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Kanban
|
||||
</button>
|
||||
<button
|
||||
class="nav-link disabled"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered vertical %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user