hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-14 05:23:15 +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: