hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-18 15:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add button group shortcode

Browse Source
This commit is contained in:
mark
2022-12-27 16:30:32 +01:00
parent 3cc530b3f6
commit 9ba31ad1c3
3 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
content/en/blog/bootstrap.md
View File

@@ -109,11 +109,13 @@ Inbox
## Button Group
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
The button group is available as [custom shortcode]({{< ref "custom-shortcodes#button-group" >}} "custom shortcode"). The following example displays a group of three buttons.
{{< button-group aria-label="Basic example" >}}
{{< button color="primary" href="#" >}}Left{{< /button >}}
{{< button color="primary" href="#" >}}Middle{{< /button >}}
{{< button color="primary" href="#" >}}Right{{< /button >}}
{{< /button-group >}}
## Card

29
content/en/blog/custom-shortcodes.md
View File

@@ -65,6 +65,34 @@ The result looks like this:
Inbox
{{< /button >}}
## Button Group
Use the `button-group` shortcode to display a group of buttons. Add inner `<button>` elements for each [button](#button). The shortcode supports the following arguments:
| Argument | Required | Description |
|-------------|----------|-------------|
| aria-label | No | Optional assistive label for the button group. |
{.table}
As an example, the following shortcode displays a group of three buttons.
```html
{{</* button-group aria-label="Basic example" */>}}
{{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
{{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
{{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
{{</* /button-group */>}}
```
The result looks like this:
{{< button-group aria-label="Basic example" >}}
{{< button color="primary" href="#" >}}Left{{< /button >}}
{{< button color="primary" href="#" >}}Middle{{< /button >}}
{{< button color="primary" href="#" >}}Right{{< /button >}}
{{< /button-group >}}
## Carousel
Use the `carousel` shortcode to display a carousel of several images, with behavior similar as the [Image Shortcode](#image-shortcode). The shortcode supports the following arguments:
@@ -94,6 +122,7 @@ As an example, the following shortcode displays a centered carousel with three s
```
The result looks like this:
{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
{{< img src="img/coffee.jpg" caption="slide 1" >}}
{{< img src="img/phone.jpg" caption="slide 2" >}}

8
layouts/shortcodes/button-group.html Normal file
View File

@@ -0,0 +1,8 @@
<!--
Displays a group of buttons. Add inner <button> elements for each button. The shortcode supports the following arguments:
"aria-label" Optional assistive label for the button group.
-->
<div class="btn-group" role="group" {{ with .Get "aria-label" }}aria-label="{{ . }}"{{ end }}>
{{ .Inner }}
</div>