69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
+++
|
|
title = "Button Group"
|
|
description = "Layout buttons to fit buttons snugly together."
|
|
categories = ["interaction"]
|
|
tags = ["controls"]
|
|
html_attributes = ["class"]
|
|
custom_attributes = ["formactions"]
|
|
snippets_used = ["button group", "button", "form"]
|
|
notes = [
|
|
"update 'snippets' if this content is updated"
|
|
]
|
|
[[copyright]]
|
|
owner = "Josh Habdas"
|
|
date = "2019"
|
|
license = "agpl-3.0-or-later"
|
|
+++
|
|
|
|
With three [Buttons](../button), one ghosted and one of type info:
|
|
|
|
```html
|
|
{{</* hackcss-buttongroup >}}
|
|
{{< hackcss-button text="Left" />}}
|
|
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
|
|
{{< hackcss-button text="Right" isghost="true" />}}
|
|
{{< /hackcss-buttongroup */>}}
|
|
```
|
|
|
|
{{< hackcss-buttongroup >}}
|
|
{{< hackcss-button text="Left" />}}
|
|
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
|
|
{{< hackcss-button text="Right" isghost="true" />}}
|
|
{{< /hackcss-buttongroup >}}
|
|
|
|
With three [Buttons](../button) styled using `class` attribute:
|
|
|
|
```html
|
|
<style>.btn-text button::after { content: attr(class) }</style>
|
|
{{</* hackcss-buttongroup class="btn-text" >}}
|
|
{{< hackcss-button />}}
|
|
{{< hackcss-button type="info" />}}
|
|
{{< /hackcss-buttongroup */>}}
|
|
```
|
|
|
|
<style>.btn-text button::after { content: attr(class) }</style>
|
|
{{< hackcss-buttongroup class="btn-text" >}}
|
|
{{< hackcss-button />}}
|
|
{{< hackcss-button type="info" />}}
|
|
{{< /hackcss-buttongroup >}}
|
|
|
|
With two [Buttons](../button) inside a [Form](../form) using `formactions` attribute:
|
|
|
|
```html
|
|
{{</* hackcss-form action="/search" >}}
|
|
{{< hackcss-textinput type="hidden" name="s" value="button" >}}
|
|
{{< hackcss-buttongroup formactions="true" >}}
|
|
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
|
|
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
|
|
{{< /hackcss-buttongroup >}}
|
|
{{< /hackcss-form */>}}
|
|
```
|
|
|
|
{{< hackcss-form action="/search" >}}
|
|
{{< hackcss-textinput type="hidden" name="s" value="group" >}}
|
|
{{< hackcss-buttongroup formactions="true" >}}
|
|
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
|
|
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
|
|
{{< /hackcss-buttongroup >}}
|
|
{{< /hackcss-form >}}
|