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

Adsd collapse shortcode

Browse Source
This commit is contained in:
mark
2023-01-02 07:56:26 +01:00
parent ccabca0e44
commit ced65e93f2
5 changed files with 93 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,19 +113,15 @@ The result looks like this.
## Collapse
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
The collapse panel is available as [custom shortcode]({{< ref "custom-shortcodes#collapse" >}} "custom shortcode"). The following example displays a button that reveils a hidden panel:
{{< button collapse="collapse-1" >}}
Trigger panel
{{< /button >}}
{{< collapse id="collapse-1" class="p-3 border rounded" >}}
Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but revealed when the user activates the relevant trigger.
{{< /collapse >}}
## Dropdowns
@@ -503,3 +499,7 @@ The tooltip is available as [custom shortcode]({{< ref "custom-shortcodes#toolti
{{< tooltip color="warning" title="Tooltip" href="#" >}}
Tooltip demonstration
{{< /tooltip >}}
<!-- MARKDOWN PUBLIC LINKS -->
[bs_badge_heading]: https://getbootstrap.com/docs/5.2/components/badge/#headings
[bs_close_button]: https://getbootstrap.com/docs/5.2/components/close-button/

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

@@ -102,14 +102,15 @@ Use the `button` shortcode to display a button with a hyperlink. The inner conte
| Argument | Required | Description |
|-------------|----------|-------------|
| href | Yes | Address for the button hyperlink. |
| href | No | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
| state | No | Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive". |
| size | No | Optional size of the button, either "sm", "md" (default), or "lg". |
| color | No | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
| badge | No | Optional positioned badge to display on top of the button. |
| outline | No | Optional flag indicating the button should be outlined, either "false" (default) or "true". |
| aria-label | No | Optional label for the badge. |
| tooltip | No | Optional title to display in a tooltip. Ignored for active/inactive buttons. |
| tooltip | No | Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. |
| collapse | No | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
| placement | No | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
{.table}
@@ -215,6 +216,39 @@ The result looks like this:
{{< img src="img/dunes.jpg" caption="slide 3" >}}
{{< /carousel >}}
## Collapse
Use the `collapse` shortcode to reveil or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning it's ID to the `collapse` attribute. The shortcode supports the following arguments:
| Argument | Required | Description |
|-------------|----------|-------------|
| id | Yes | Required unique id of the collapse element, e.g. "collapse-1". |
| class | No | Optional class attribute of the inner panel element, e.g. “p-3”. |
{.table}
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
```html
{{</* button collapse="collapse-1" */>}}
Trigger panel
{{</* /button */>}}
{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
revealed when the user activates the relevant trigger.
{{</* /collapse */>}}
```
The result looks like this:
{{< button collapse="collapse-1" >}}
Trigger panel
{{< /button >}}
{{< collapse id="collapse-1" class="p-3 border rounded" >}}
Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but revealed when the user activates the relevant trigger.
{{< /collapse >}}
## Command Prompt
The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:

16
layouts/partials/button.html
View File

@@ -10,7 +10,9 @@
"outline" Optional flag indicating the button should be outlined, either "false" (default) or "true".
"badge" Optional positioned badge to display on top of the button.
"aria-label" Optional assistive label for the badge.
"tooltip" Optional text to display in a tooltip. Ignored for active/inactive buttons.
"tooltip" Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
inactive buttons.
"collapse" Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
"type" Optional type of the element, either "link" or "button" (default).
"placement" Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
-->
@@ -59,6 +61,17 @@
{{ $href := .href -}}
{{ $collapse := "" -}}
{{ if not (strings.HasSuffix $state "active") -}}
{{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
{{ end -}}
{{ if $tooltip -}}
{{ if $collapse -}}
{{ errorf "Cannot use tooltip and collapse at the same time" -}}
{{ end -}}
{{ end -}}
{{ $type := "button" -}}
{{ with .type }}{{ $type = . }}{{ end -}}
{{ $supportedTypes := slice "button" "link" -}}
@@ -78,6 +91,7 @@
{{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
{{ else }}class="link-{{ $color }} position-relative"{{ end }}
{{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
{{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
{{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
{{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
>

9
layouts/shortcodes/button.html
View File

@@ -1,6 +1,6 @@
<!--
Displays a button. The shortcode supports the following arguments:
"href" Optional address for the button or hyperlink.
"href" Optional address for the button or hyperlink. Automatically assigned when using collapse.
"id" Optional id of the button, to be used in the DOM.
"state" Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
"size" Optional size of the button, either "sm", "md" (default), or "lg".
@@ -9,7 +9,9 @@
"outline" Optional flag indicating the button should be outlined, either "false" (default) or "true".
"badge" Optional positioned badge to display on top of the button.
"aria-label" Optional label for the badge.
"tooltip" Optional title to display in a tooltip.
"tooltip" Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
inactive buttons.
"collapse" Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
"placement" Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
-->
@@ -58,6 +60,7 @@
{{ $badge := .Get "badge" -}}
{{ $label := .Get "aria-label" -}}
{{ $tooltip := .Get "tooltip" -}}
{{ $collapse := .Get "collapse" -}}
{{ $href := .Get "href" -}}
{{ $id := .Get "id" -}}
@@ -70,5 +73,5 @@
{{ end -}}
{{ if not $error }}
{{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "href" $href "id" $id "state" $state "placement" $placement) -}}
{{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "collapse" $collapse "href" $href "id" $id "state" $state "placement" $placement) -}}
{{ end }}

23
layouts/shortcodes/collapse.html Normal file
View File

@@ -0,0 +1,23 @@
<!--
Displays a hidden panel that can be reveiled by a trigger. The shortcode supports the following arguments:
"id" Required unique id of the collapse element, e.g. "collapse-1".
"class" Optional class attribute of the inner panel element, e.g. “p-3”.
-->
{{ $id := .Get "id" -}}
{{ if not $id -}}
{{ errorf "Missing value for param 'id': %s" .Position -}}
{{ end -}}
{{ $class := .Get "class" }}
{{- $body := trim .Inner " \n" -}}
{{ if not $body -}}
{{ errorf "Missing inner element text: %s" .Position -}}
{{ end -}}
<p>
<div class="collapse" id="{{ $id }}">
<div class="{{ $class }}">{{ $body | safeHTML }}</div>
</div>
</p>