mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Show diagonal pattern on the card background-pattern docs example (#3039)
Closes #3032
This commit is contained in:
Bartosz-Do authored and 
GitHub committed
1 parent
86ac4f11ab
commit
6f96282f3c
2 files changed
+57
-52
No files matched your search
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/docs": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fixed the "Card on a background pattern" docs example so the preview shows the `.bg-pattern-diagonal` background.
|
||||||
@@ -81,7 +81,7 @@ Use `.bg-pattern-transparent` when you need a checkerboard-style transparent bac
|
|||||||
<Illustration image="boy-with-key.svg" class="d-block mx-auto mw-100" height={200} />
|
<Illustration image="boy-with-key.svg" class="d-block mx-auto mw-100" height={200} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example codeOnly>
|
<Example codeOnly>
|
||||||
<div class="bg-pattern-transparent p-4"></div>
|
<div class="bg-pattern-transparent p-4"></div>
|
||||||
</Example>
|
</Example>
|
||||||
|
|
||||||
## Pattern sizes
|
## Pattern sizes
|
||||||
@@ -96,30 +96,30 @@ Use size utilities to control pattern density:
|
|||||||
Look at the following examples to see how the pattern sizes work:
|
Look at the following examples to see how the pattern sizes work:
|
||||||
|
|
||||||
<Example hideCode>
|
<Example hideCode>
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="bg-pattern-circles bg-pattern-sm border rounded mb-2" style="height: 6rem;"></div>
|
<div class="bg-pattern-circles bg-pattern-sm border rounded mb-2" style="height: 6rem;"></div>
|
||||||
<code>.bg-pattern-sm</code>
|
<code>.bg-pattern-sm</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-md border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-md</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-lg border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-lg</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-xl border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-xl</code>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-md border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-md</code>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-lg border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-lg</code>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-xl border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-xl</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example codeOnly>
|
<Example codeOnly>
|
||||||
<div class="bg-pattern-circles bg-pattern-sm"></div>
|
<div class="bg-pattern-circles bg-pattern-sm"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-md"></div>
|
<div class="bg-pattern-circles bg-pattern-md"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-lg"></div>
|
<div class="bg-pattern-circles bg-pattern-lg"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-xl"></div>
|
<div class="bg-pattern-circles bg-pattern-xl"></div>
|
||||||
</Example>
|
</Example>
|
||||||
|
|
||||||
## Pattern opacity
|
## Pattern opacity
|
||||||
@@ -132,49 +132,49 @@ Use opacity utilities to control how strong the texture is:
|
|||||||
- `.bg-pattern-opacity-darker`
|
- `.bg-pattern-opacity-darker`
|
||||||
|
|
||||||
<Example hideCode>
|
<Example hideCode>
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-lighter border rounded mb-2" style="height: 6rem;"></div>
|
<div class="bg-pattern-circles bg-pattern-opacity-lighter border rounded mb-2" style="height: 6rem;"></div>
|
||||||
<code>.bg-pattern-opacity-lighter</code>
|
<code>.bg-pattern-opacity-lighter</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-opacity-light border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-opacity-light</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-opacity-dark border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-opacity-dark</code>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="bg-pattern-circles bg-pattern-opacity-darker border rounded mb-2" style="height: 6rem;"></div>
|
||||||
|
<code>.bg-pattern-opacity-darker</code>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-light border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-opacity-light</code>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-dark border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-opacity-dark</code>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-darker border rounded mb-2" style="height: 6rem;"></div>
|
|
||||||
<code>.bg-pattern-opacity-darker</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Example>
|
</Example>
|
||||||
<Example codeOnly>
|
<Example codeOnly>
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-lighter"></div>
|
<div class="bg-pattern-circles bg-pattern-opacity-lighter"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-light"></div>
|
<div class="bg-pattern-circles bg-pattern-opacity-light"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-dark"></div>
|
<div class="bg-pattern-circles bg-pattern-opacity-dark"></div>
|
||||||
<div class="bg-pattern-circles bg-pattern-opacity-darker"></div>
|
<div class="bg-pattern-circles bg-pattern-opacity-darker"></div>
|
||||||
</Example>
|
</Example>
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
Look at the following examples to see how background patterns can be used in real layouts.
|
Look at the following examples to see how background patterns can be used in real layouts.
|
||||||
|
|
||||||
### Card with background pattern
|
### Card on a background pattern
|
||||||
|
|
||||||
Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.
|
Placing a card on a patterned background adds a decorative touch to the surrounding area while keeping the card itself clean. Wrap the card in an element with a `.bg-pattern-*` class so the pattern shows around the card without affecting the readability of its content.
|
||||||
|
|
||||||
<Example hideCode>
|
<Example hideCode class="bg-pattern-diagonal">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">Here is example of a card with a background pattern.</div>
|
<div class="card-body">Here is an example of a card placed on a background pattern.</div>
|
||||||
</div>
|
</div>
|
||||||
</Example>
|
</Example>
|
||||||
<Example codeOnly>
|
<Example codeOnly>
|
||||||
<div class="bg-pattern-diagonal">
|
<div class="bg-pattern-diagonal">
|
||||||
<div class="card">...</div>
|
<div class="card">...</div>
|
||||||
</div>
|
</div>
|
||||||
</Example>
|
</Example>
|
||||||
|
|
||||||
## Accessibility
|
## Accessibility
|
||||||
|
|||||||
Reference in new issue
Block a user