mirror of
https://github.com/tabler/tabler.git
synced 2026-04-12 11:33:07 +04:00
Add markdown documentation rules for component pages (#2616)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/docs-singular-component-names.md
Normal file
5
.changeset/docs-singular-component-names.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Updated UI component documentation to use singular file names and frontmatter fields (`title`, `summary`, `description`), and added redirects from legacy plural routes.
|
||||
341
.cursor/rules/docs.mdc
Normal file
341
.cursor/rules/docs.mdc
Normal file
@@ -0,0 +1,341 @@
|
||||
---
|
||||
description: Markdown documentation writing standards for docs pages
|
||||
globs: docs/content/**/*.md
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Markdown Documentation Rules
|
||||
|
||||
## Scope
|
||||
|
||||
- Apply these rules when creating or editing Markdown documentation files.
|
||||
- Write technical documentation in English.
|
||||
- Use simple English: short sentences, common words, and direct instructions.
|
||||
|
||||
## Frontmatter
|
||||
|
||||
- Use static YAML frontmatter only (no Liquid in frontmatter).
|
||||
- Include `title`, `summary`, and `description` for docs pages in `docs/content/**`.
|
||||
- For component docs, use singular naming in frontmatter and filename:
|
||||
`title: Card`, `summary` and `description` written with a singular component form, and filename `card.md` (not `cards.md`).
|
||||
- Add optional frontmatter `related` entries (instead of a `Related` content section).
|
||||
- In `related`, always use absolute docs paths in `url` (without `./`), for example:
|
||||
`ui/components/breadcrumb`.
|
||||
- Use this structure:
|
||||
```yaml
|
||||
related:
|
||||
- name: Pagination
|
||||
url: ui/components/pagination
|
||||
- name: Dropdowns
|
||||
url: ui/components/dropdowns
|
||||
```
|
||||
- If documentation describes a component defined in SCSS, add `source-scss` with a relative path
|
||||
inside `core/scss/` (for example: `source-scss: ui/buttons.scss`).
|
||||
- If a component extends a Bootstrap component, add `bootstrap-url: components/<name>` in frontmatter
|
||||
(for example: `bootstrap-url: components/buttons`).
|
||||
- Add versioning notes for API and class lifecycle changes using fields like
|
||||
`added-in: 1.4.0` and `deprecated-in: 1.2.0`.
|
||||
- If documentation introduces a new component, add a changeset with a `minor` version bump.
|
||||
- Components should include an optional `classnames` section in frontmatter.
|
||||
- Add only groups that exist for a given component. Do not include empty or irrelevant groups.
|
||||
- `classnames` entries must match classes that exist in the relevant SCSS source files.
|
||||
- Do not document classes that are not defined in SCSS, deprecated, or internal-only.
|
||||
- You can add `status` to class entries: `stable`, `deprecated`, or `experimental`.
|
||||
- If `status` is not provided, treat the class as `stable` by default.
|
||||
- Allowed `classnames` groups and meanings:
|
||||
- `component`: Main component class.
|
||||
- `modifier`: Modifies behavior of component or part.
|
||||
- `part`: Part of a component.
|
||||
- `style`: Visual style of component or part.
|
||||
- `behavior`: Behavioural style of component or part.
|
||||
- `color`: Color of component or part.
|
||||
- `size`: Size of component or part.
|
||||
- `placement`: Placement of component or part.
|
||||
- `direction`: Direction of component or part.
|
||||
- `variable`: CSS variable.
|
||||
- `variant`: Use like `variant:utility` to apply a utility conditionally.
|
||||
- Use this structure:
|
||||
|
||||
```yaml
|
||||
classnames:
|
||||
component:
|
||||
- class: btn
|
||||
desc: Main button class
|
||||
part:
|
||||
- class: btn-group
|
||||
desc: Group container for buttons
|
||||
modifier:
|
||||
- class: btn-block
|
||||
desc: Full width button
|
||||
status: stable
|
||||
style:
|
||||
- class: btn-outline
|
||||
desc: Outline style button
|
||||
behavior:
|
||||
- class: btn-disabled
|
||||
desc: Disabled visual state
|
||||
status: deprecated
|
||||
color:
|
||||
- class: btn-primary
|
||||
desc: Primary color button
|
||||
size:
|
||||
- class: btn-sm
|
||||
desc: Small size button
|
||||
placement:
|
||||
- class: dropdown-menu-end
|
||||
desc: Align dropdown menu to end
|
||||
direction:
|
||||
- class: carousel-vertical
|
||||
desc: Vertical carousel direction
|
||||
variable:
|
||||
- class: --tblr-btn-padding-x
|
||||
desc: Horizontal button padding variable
|
||||
variant:
|
||||
- class: hover:bg-primary
|
||||
desc: Apply background color on hover
|
||||
status: experimental
|
||||
```
|
||||
|
||||
|
||||
## Structure and readability
|
||||
|
||||
- Start with a short purpose statement, then explain usage and variants.
|
||||
- Keep heading hierarchy consistent (`##` then `###`), without skipping levels.
|
||||
- Keep core documentation sections as `H2` headings in this order:
|
||||
`Overview`, `Installation` (optional), `Variants` (for components that support variants or `Usage` for components that don't support variants), `Accessibility`,
|
||||
`Examples` (optional), `SCSS variables` (optional), `Migration notes` (optional).
|
||||
- In `Overview`, add one visual component preview without code (`hide-code=true`).
|
||||
- Use descriptive section headings that are stable for linking.
|
||||
- Vary intro phrasing across pages; avoid repeating the same sentence pattern.
|
||||
|
||||
## Markdown style
|
||||
|
||||
- Follow `.markdownlint.json` conventions (ATX headings, `-` lists, fenced code blocks).
|
||||
- Keep line length within 120 characters where practical.
|
||||
- Keep examples aligned with current API/classes and practical usage.
|
||||
- Use active voice and direct verbs (`Use`, `Add`, `Set`).
|
||||
- Keep one main idea per sentence.
|
||||
- Do not add meta authoring notes in docs text (for example: "this snippet is copy-paste ready").
|
||||
|
||||
## Terminology and section naming
|
||||
|
||||
- Use consistent terminology across pages; one term per concept.
|
||||
- Use clear and consistent section names across component docs.
|
||||
- Prefer shared section labels such as `Overview`, `Accessibility`, `Examples` (optional), and `Migration notes`.
|
||||
- You can add an `SCSS variables` section for components with documented SCSS tokens/variables.
|
||||
|
||||
### Recommended section order
|
||||
|
||||
```md
|
||||
## Overview
|
||||
## Installation (optional)
|
||||
## Variants or Usage/API
|
||||
## Accessibility
|
||||
## Examples (optional)
|
||||
## SCSS variables (optional)
|
||||
## Migration notes (optional)
|
||||
```
|
||||
|
||||
## Project-specific docs patterns
|
||||
|
||||
- In docs examples, prefer `{% capture html %}...{% endcapture %}` and, when needed, add `{% capture code %}...{% endcapture %}` for code snippets.
|
||||
- Use `{% include "docs/example.html" ... %}` to render visual component previews in any relevant section
|
||||
(`Overview`, `Variants`, `Usage/API`, or `Examples`).
|
||||
- Before each `{% include "docs/example.html" ... %}`, add 1-2 short sentences that describe
|
||||
the component state or behavior shown in the preview.
|
||||
- For examples with explicit source snippets, use `{% include "docs/example.html" html=html code=code %}`.
|
||||
- For visual-only examples, use `{% include "docs/example.html" html=html hide-code=true %}`.
|
||||
- If an example shows multiple elements as a list, use `separated` to display items with clean spacing:
|
||||
`{% include "docs/example.html" html=html separated %}`.
|
||||
- Add `centered` when the example should be centered (for example, a list of buttons):
|
||||
`{% include "docs/example.html" html=html separated centered %}`.
|
||||
- If elements are wide, you can stack them vertically with `vertical` (for example):
|
||||
`{% include "docs/example.html" html=html centered vertical %}`.
|
||||
- Use `raw` when you need to render the example without extra preview wrappers
|
||||
(no padding, no centering), for example full page layout previews:
|
||||
`{% include "docs/example.html" html=html raw %}`.
|
||||
- Use `column` to render content in a narrow column (about 25rem), useful for components
|
||||
commonly presented in columns (for example stat cards):
|
||||
`{% include "docs/example.html" html=html column %}`.
|
||||
- For `SCSS variables` sections, use:
|
||||
`{% scss-docs "alert-variables" "ui/_alerts.scss" %}`.
|
||||
- This renders the fragment between `// scss-docs-start alert-variables` and `// scss-docs-end`
|
||||
from the given SCSS file (path relative to `core/scss/`).
|
||||
- If an SCSS file contains a `scss-docs-start` block, it should be included in documentation
|
||||
via a matching `{% scss-docs %}` entry.
|
||||
- Use `hide-code=true` only when source markup is not useful to the reader.
|
||||
- If an example needs a different background, set it with the include attribute `bg="surface-primary"`.
|
||||
- Treat `html` as the visual preview layer and `code` as the clean source layer shown to users.
|
||||
- Keep `code` concise and practical: include only the essential markup needed to explain usage.
|
||||
- Do not duplicate visual wrapper-only structure in `code` when it exists only to style the preview.
|
||||
- Do not promote deprecated patterns; when needed, mention the replacement.
|
||||
- Add accessibility attributes (for example `aria-label`) in interactive examples.
|
||||
|
||||
## Publishing checklist
|
||||
|
||||
- Verify that examples render correctly.
|
||||
- Verify that internal and external links work.
|
||||
- Verify heading hierarchy and section naming consistency.
|
||||
- Verify code snippets are accurate and minimal for the documented use case.
|
||||
- Validate documented classes against SCSS files before publishing.
|
||||
- Ensure every class in `classnames` maps to a real SCSS class or variable.
|
||||
- Ensure every class listed in `classnames` appears at least once in page content or examples.
|
||||
- For interactive components, add a short accessibility mini-check (`aria-label`, keyboard focus, semantic markup).
|
||||
|
||||
## Documentation structure examples
|
||||
|
||||
### Minimal component page structure
|
||||
|
||||
```md
|
||||
---
|
||||
title: Component name
|
||||
summary: Short one-sentence summary of what this component does.
|
||||
description: Practical description of when and why to use this component.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
One short paragraph explaining purpose and primary use case.
|
||||
|
||||
Show the component in its default state so users can recognize it immediately.
|
||||
Keep this first example focused on appearance and context.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn btn-primary">Primary button</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html hide-code=true %}
|
||||
|
||||
## Variants
|
||||
|
||||
### Outline
|
||||
|
||||
The outline variant presents a lighter visual emphasis than a filled primary action.
|
||||
Use it for secondary actions in dense interfaces.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn">Secondary</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Use clear labels for interactive controls.
|
||||
- Add `aria-label` for icon-only buttons.
|
||||
|
||||
## Examples (optional, visual usage)
|
||||
|
||||
### Default
|
||||
|
||||
The default variant represents the primary action style.
|
||||
Use it as a baseline before introducing additional variants.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn btn-primary">Save</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
```
|
||||
|
||||
### Visual preview patterns (usable in any section)
|
||||
|
||||
```md
|
||||
## Variants
|
||||
|
||||
### Default
|
||||
|
||||
The default variant represents the primary action style.
|
||||
Use it as a baseline before introducing additional variants.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn btn-primary">Primary button</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### With icon
|
||||
|
||||
This variant combines a leading icon with a text label.
|
||||
Use it for actions that benefit from an additional visual cue.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn btn-primary">
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
Add item
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### Custom background
|
||||
|
||||
This variant presents the component on a dark background surface.
|
||||
Use it to verify contrast and visual hierarchy.
|
||||
|
||||
{% capture html -%}
|
||||
<button class="btn btn-light">Light button on dark preview</button>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html bg="dark" %}
|
||||
```
|
||||
|
||||
```md
|
||||
## Usage
|
||||
|
||||
Use this pattern in any section when source markup should be shown together with the visual output.
|
||||
Use `code` for clean implementation markup without preview-only wrappers.
|
||||
|
||||
### Card with footer actions
|
||||
|
||||
This example presents a card layout with footer actions in a realistic container.
|
||||
Show `html` for rendered context and `code` for implementation markup.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="p-4 border rounded bg-light">
|
||||
<div class="card">
|
||||
<div class="card-body">Content</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture code -%}
|
||||
<div class="card">
|
||||
<div class="card-body">Content</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html code=code %}
|
||||
```
|
||||
|
||||
```md
|
||||
## Accessibility
|
||||
|
||||
Use this pattern in any section only for visual comparison cases where raw markup is not useful,
|
||||
for example screenshots, behavior notes, or before/after UI states.
|
||||
|
||||
This pattern highlights visual state communication without extra source details.
|
||||
Use it for quick comparisons such as status, before/after states, or behavior notes.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-green"></span>
|
||||
<span>Active status</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include "docs/example.html" html=html hide-code=true %}
|
||||
|
||||
### Do
|
||||
|
||||
- Explain what changed and why it matters.
|
||||
- Link to a related practical example if available.
|
||||
|
||||
### Don't
|
||||
|
||||
- Do not replace all practical examples with image-only examples.
|
||||
- Do not omit practical markup examples for core use cases.
|
||||
```
|
||||
|
||||
- Do not move core documentation content (for example API details, states, accessibility rules,
|
||||
migration notes) into `Examples`.
|
||||
- Keep core sections as normal documentation; `Examples` is an optional showcase section,
|
||||
while visual preview blocks can be used across multiple sections.
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Alert
|
||||
summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: Alert messages for user notifications.
|
||||
description: An alert message for user notification.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
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.
|
||||
title: Avatar
|
||||
summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
|
||||
description: Personalize UI with a user avatar.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
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.
|
||||
title: Badge
|
||||
summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
|
||||
description: Add extra information with a badge.
|
||||
bootstrapLink: components/badge/
|
||||
---
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: Navigation aid for better structure.
|
||||
description: A navigation aid for better structure.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Button
|
||||
summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: Customizable buttons for user actions.
|
||||
description: A customizable button for user actions.
|
||||
---
|
||||
|
||||
## Button tag
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Card
|
||||
summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with flexible cards.
|
||||
description: Organize content with a flexible card.
|
||||
---
|
||||
|
||||
## Default card
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with carousels.
|
||||
description: Display visual content with a carousel.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Charts
|
||||
title: Chart
|
||||
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.
|
||||
@@ -2,7 +2,7 @@
|
||||
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.
|
||||
description: Display numbers dynamically with a countup.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Dropdown
|
||||
summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with dropdown menus.
|
||||
description: Organize options with a dropdown menu.
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
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.
|
||||
title: Empty State
|
||||
summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
|
||||
description: Engage users in an empty or error screen.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Icon
|
||||
summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
description: Enhance a dashboard with a custom icon.
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). 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.
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Modals
|
||||
title: Modal
|
||||
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.
|
||||
---
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Popovers
|
||||
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
title: Popover
|
||||
summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with popovers.
|
||||
description: Provide extra information with a popover.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Progress Bar
|
||||
summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress visually.
|
||||
description: Track and display progress with a progress bar.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
description: Adjust values with a range slider.
|
||||
summary: A range slider allows 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`.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
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.
|
||||
title: Ribbon
|
||||
summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
|
||||
description: Highlight an element with a graphical ribbon.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Spinners
|
||||
summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
title: Spinner
|
||||
summary: A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
|
||||
bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with spinners.
|
||||
description: Indicate loading state with a spinner.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Statuses
|
||||
summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
|
||||
description: Highlight interface elements with status dots.
|
||||
title: Status
|
||||
summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
|
||||
description: Highlight an interface element with a status dot.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Steps
|
||||
summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
||||
title: Step
|
||||
summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
|
||||
new: true
|
||||
description: Simplify complex processes with steps.
|
||||
description: Simplify a complex process with a step.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Tabs
|
||||
summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
title: Tab
|
||||
summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
|
||||
bootstrapLink: components/navs/
|
||||
description: Organize content with interactive tabs.
|
||||
description: Organize content with an interactive tab.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Tables
|
||||
summary: Tables are useful interface elements that allow you to visualize data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
title: Table
|
||||
summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
|
||||
bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with tables.
|
||||
description: Visualize data clearly with a table.
|
||||
---
|
||||
|
||||
## Basic Table
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Timelines
|
||||
title: Timeline
|
||||
summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
description: Visualize events and processes clearly.
|
||||
---
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Toasts
|
||||
summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
|
||||
title: Toast
|
||||
summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
|
||||
bootstrapLink: components/toasts/
|
||||
description: Display lightweight alert notifications.
|
||||
description: Display a lightweight alert notification with a toast.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Tooltips
|
||||
summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
|
||||
title: Tooltip
|
||||
summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
|
||||
bootstrapLink: components/tooltips/
|
||||
description: Guide users with informative tooltips.
|
||||
description: Guide users with an informative tooltip.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Vector Maps
|
||||
title: Vector Map
|
||||
docs-libs: [jsvectormap]
|
||||
description: Interactive guide to creating vector maps with jsVectorMap.
|
||||
summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
|
||||
description: Interactive guide to creating a vector map with jsVectorMap.
|
||||
summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -135,7 +135,7 @@ If you want to use the image check as a radio button, you can change the input t
|
||||
|
||||
## Avatars
|
||||
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="mb-3">
|
||||
|
||||
@@ -21,5 +21,102 @@
|
||||
"source": "/(.*)",
|
||||
"destination": "/error-404.html"
|
||||
}
|
||||
],
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/ui/components/alerts",
|
||||
"destination": "/ui/components/alert",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/avatars",
|
||||
"destination": "/ui/components/avatar",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/badges",
|
||||
"destination": "/ui/components/badge",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/buttons",
|
||||
"destination": "/ui/components/button",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/cards",
|
||||
"destination": "/ui/components/card",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/charts",
|
||||
"destination": "/ui/components/chart",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/dropdowns",
|
||||
"destination": "/ui/components/dropdown",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/icons",
|
||||
"destination": "/ui/components/icon",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/modals",
|
||||
"destination": "/ui/components/modal",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/ribbons",
|
||||
"destination": "/ui/components/ribbon",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/spinners",
|
||||
"destination": "/ui/components/spinner",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/statuses",
|
||||
"destination": "/ui/components/status",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/steps",
|
||||
"destination": "/ui/components/step",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/tabs",
|
||||
"destination": "/ui/components/tab",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/tables",
|
||||
"destination": "/ui/components/table",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/timelines",
|
||||
"destination": "/ui/components/timeline",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/toasts",
|
||||
"destination": "/ui/components/toast",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/tooltips",
|
||||
"destination": "/ui/components/tooltip",
|
||||
"permanent": true
|
||||
},
|
||||
{
|
||||
"source": "/ui/components/vector-maps",
|
||||
"destination": "/ui/components/vector-map",
|
||||
"permanent": true
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user