Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Fix ribbon component in the documentation (#2323)

Browse Source
This commit is contained in:
BG-Software
2025-05-04 12:59:19 +02:00
committed by GitHub
parent 8f701859ad
commit 7b7265347c
2 changed files with 9 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/new-rats-argue.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Fix ribbon component in the documentation

55
docs/content/ui/components/ribbons.md
View File

@@ -18,15 +18,6 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html card column %} {% 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 ## Ribbon position
You can change the position of a ribbon by adding one of the following classes to the element: You can change the position of a ribbon by adding one of the following classes to the element:
@@ -48,18 +39,9 @@ Using multiple classes at once will give you more position options. For example,
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html column %} {% 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 ## Ribbon color
Customize the ribbon's background color. You can click [here](/img/ui/base/colors) to see the list of available colors. Customize the ribbon's background color. You can click [here](/ui/base/colors) to see the list of available colors.
{% capture html -%} {% capture html -%}
<div class="card"> <div class="card">
@@ -71,15 +53,6 @@ Customize the ribbon's background color. You can click [here](/img/ui/base/color
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html column %} {% 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 ## Ribbon text
Add your own text to a ribbon to display any additional information and make it easy to spot for users. Add your own text to a ribbon to display any additional information and make it easy to spot for users.
@@ -87,25 +60,14 @@ Add your own text to a ribbon to display any additional information and make it
{% capture html -%} {% capture html -%}
<div class="card"> <div class="card">
<div class="card-body" style="height: 5rem"></div> <div class="card-body" style="height: 5rem"></div>
<div class="ribbon bg-green"> <div class="ribbon bg-green">NEW</div>
{% include "ui/icon.html" icon="star" %}
</div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html column %} {% include "docs/example.html" html=html column %}
```html ## Bookmark ribbon
<div class="card">
<div class="card-body"></div>
<div class="ribbon bg-green">
{% include "ui/icon.html" icon="star" %}
</div>
</div>
```
## Ribbon style Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.
Change the style of a ribbon to make it go well with your interface design.
{% capture html -%} {% capture html -%}
<div class="card w-100"> <div class="card w-100">
@@ -116,12 +78,3 @@ Change the style of a ribbon to make it go well with your interface design.
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html column %} {% 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>
```