michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-02-02 03:22:33 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add docs

Browse source
This commit is contained in:
Mircea-Pavel ANTON 2023-01-18 09:36:10 +00:00
parent 3904461926
commit 8a154a87aa
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
exampleSite/content/docs/shortcodes/index.md
View file

@ -91,15 +91,31 @@ Call to action
## Carousel
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using a ratio of `16:9`.
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
**Example:**
<!-- prettier-ignore-start -->
| Parameter | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
| `images` | **Required.** A regex string to match image names. |
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
<!-- prettier-ignore-end -->
**Example 1:** 16:9 aspect ratio and verbose list of images
```md
{{</* carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" */>}}
{{</* carousel images="{gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
```
{{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}}
{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
**Example 2:** 21:9 aspect ratio and regex-ed list of images
```md
{{</* carousel images="gallery/*" aspectRatio="21-9" */>}}
```
{{< carousel images="gallery/*" aspectRatio="21-9" >}}
## Chart