From 828366de8978479dc2c9c4038d33f575edfcdce9 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 6 Jul 2020 08:52:43 +0100 Subject: [PATCH] Docs: separate button group out of checks/radios, expand button groups page (#31201) * Keep checks/radio toggle buttons on topic - give examples of the pure toggle checks and radios, without the button group class. show that these work fine without `.btn-group`, but still cross-reference it - move the explanation from "Checkbox toggle buttons" directly to "Toggle buttons", as the mention of using button classes applies equally to the subsequent "Radio toggle buttons" and "Outlined styles" subsections. * Expand button group description as it's not just single line, but vertical as well * Expand button group examples - add more colour ... `.btn-secondary` is just dull and uninspiring - new section to showcase "Checkbox and radio button groups" - add a mixed styles example - add an example of vertical radio button group --- .../docs/5.0/components/button-group.md | 152 ++++++++++++------ site/content/docs/5.0/forms/checks-radios.md | 32 ++-- 2 files changed, 115 insertions(+), 69 deletions(-) diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md index af0ce9aa1e..730faf2db2 100644 --- a/site/content/docs/5.0/components/button-group.md +++ b/site/content/docs/5.0/components/button-group.md @@ -1,7 +1,7 @@ --- layout: docs title: Button group -description: Group a series of buttons together on a single line with the button group. +description: Group a series of buttons together on a single line or stack them in a vertical column. group: components toc: true --- @@ -12,9 +12,9 @@ Wrap a series of buttons with `.btn` in `.btn-group`. {{< example >}}
- - - + + +
{{< /example >}} @@ -30,19 +30,59 @@ These classes can also be added to groups of links, as an alternative to the [`. {{< example >}}
- Active link - Link - Link + Active link + Link + Link +
+{{< /example >}} + +## Mixed styles + +{{< example >}} +
+ + +
{{< /example >}} ## Outlined styles {{< example >}} -
- - - +
+ + + +
+{{< /example >}} + +## Checkbox and radio button groups + +Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group. + +{{< example >}} +
+ + + + + + + + +
+{{< /example >}} + +{{< example >}} +
+ + + + + + + +
{{< /example >}} @@ -53,10 +93,10 @@ Combine sets of button groups into button toolbars for more complex components. {{< example >}} {{< /example >}} @@ -74,10 +114,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th {{< example >}}