3.1
Getting Started
API
ListGroup
The Bootstrap
List group component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.bs_list_group(*args, &block)
bs_list_group(*args, &block)Returns a bootstrap listgroup containing series of content. Also the listgroup is customizable with the following options.
Optional options
:items- expects an array of hashes withtype,text,path,active,variant,badgeas possible keys:variant- Specify a variant for the button. Variant represent bootstraps contextual classes and can have one of the following values::primary, :secondary, :success, :info, :warning, :info, :light, :darkor your custom contextual class viaclass.
active- If set true list item will have an active classbadge- If given, renders an additional badgeicon- Name of desired icon which will prepend the (optionally) given texttype- Can benil,link,transition,action,labelortab- will automatically render the listgroup as a
div(rather thanul) when one of the items islink,transition,actionortab
horizontal- to change the layout of list group items from vertical to horizontal across all breakpoints.horizontal_size- choosesm,md,lg,xl,xxlto make a list group horizontal starting at that breakpoint’s min-widthvariant- If set to:flush, borders and rounded corners will be removed- Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding listgroup div.
Examples
Example 1: Basic example
1
bs_list_group items: [
2
{ text: "Cras justo odio", icon: "circle"},
3
{ text: "Dapibus ac facilisis in", variant: :danger },
4
{ text: "Dapibus ac facilisis in", badge: "42" },
5
{ text: "Vestibulum at eros", disabled: true }
6
]
Copied!
Example 2: Basic example with links
1
bs_list_group items: [
2
{ type: :link, path: "#list-item1", text: "Item 1" },
3
{ type: :link, path: "#list-item2", text: "Item 2", disabled: true }
4
]
Copied!
Example 3: Basic example with transitions
1
bs_list_group items: [
2
{ type: :transition, path: root_path, delay: 300, text: "Item 1" },
3
{ type: :transition, path: products_path, text: "Item 2", disabled: true }
4
]
Copied!
Example 4: Basic tab nav example
1
bs_row do
2
bs_col lg: 4 do
3
bs_list_group id: "list-tab", tab_nav: true,
4
items: [
5
{ type: :tab, id: :a, text: "Item 1", active: true},
6
{ type: :tab, id: :b, text: "Item 2" },
7
{ type: :tab, id: :c, text: "Item 3" }
8
]
9
end
10
bs_col lg: 8 do
11
bs_tab_nav id: "list" do
12
bs_tab_nav_content id: :a, active: true do
13
plain "A"
14
end
15
bs_tab_nav_content id: :b do
16
plain "B"
17
end
18
bs_tab_nav_content id: :c do
19
plain "C"
20
end
21
end
22
end
23
end
Copied!
Last modified 4mo ago