Skip to content

Commit

Permalink
Updates to Tabs documentation (#506)
Browse files Browse the repository at this point in the history
When implementing this I initially didn't spot that the the tab slots
would accept a block. Feel like this is probably the default use case
(as tabs normally contain a fair amount of content) so worth
highlighting this a bit more.

Also added some documentation on the `title` argument, and renamed the
local variable from `c` to `tabs`.
  • Loading branch information
peteryates authored Feb 16, 2024
2 parents 1136580 + 02f23aa commit 8b5cd0a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 9 deletions.
10 changes: 6 additions & 4 deletions guide/content/components/tabs.slim
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ p
displaying one section at a time.

== render('/partials/example.*',
caption: "Tabs with text and block content",
caption: "How to use the component",
code: tabs_normal,
render_in_boxes: true) do

markdown:
The tabs component can contain one or more `tab` slots. Each tab requires a
`label` which will form the link at the top, and the content can be set
either using the `text` argument or via a block of HTML.
The tabs component must be given a `title`, which is displayed above a list of jump links on narrow screens or if javascript is unavailable. This is usually set to ‘Contents’.

Each tab requires a `label` which will form the link at the top.

The content can be set by using either a block of HTML, or the `text` argument.

== render('/partials/related-navigation.*', links: tabs_info)
11 changes: 6 additions & 5 deletions guide/lib/examples/tabs_helpers.rb
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ module Examples
module TabsHelpers
def tabs_normal
<<~TABS
= govuk_tabs(title: "Monday’s child nursery rhyme") do |c|
- c.with_tab(label: "Monday", text: "Monday’s child is fair of face")
- c.with_tab(label: "Tuesday", text: "Tuesday’s child is full of grace")
- c.with_tab(label: "Wednesday")
| Wednesday’s child is full of woe
= govuk_tabs(title: "Contents") do |tabs|
- tabs.with_tab(label: "Text", text: "This was set using a text argument")
- tabs.with_tab(label: "Inline block") { "This was set using an inline block of content" }
- tabs.with_tab(label: "Regular block") do
p This was set using a block of HTML.
p Use this style if you need complex markup within your tab.
TABS
end
end
Expand Down

0 comments on commit 8b5cd0a

Please sign in to comment.