List Group

Description

Display any content in a list manner.

FREE

This component is available for free. It implements the Bootstrap List Group component. See the installation instructions below for more details.

Arguments

Name	Default	Type	Description
`flush`		`Boolean`	Remove borders and corners to render list group items edge-to-edge in a parent container.
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::ListGroupComponent.new do |list_group| %>
  <% list_group.with_item.with_content("List Group Item 1") %>
  <% list_group.with_item.with_content("List Group Item 2") %>
  <% list_group.with_item.with_content("List Group Item 3") %>
<% end %>

<ul class="list-group">
  <li class="list-group-item">List Group Item 1</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
</ul>

With active item

<%= render Railsboot::ListGroupComponent.new do |list_group| %>
  <% list_group.with_item(active: true).with_content("Active List Group Item 1") %>
  <% list_group.with_item.with_content("List Group Item 2") %>
  <% list_group.with_item.with_content("List Group Item 3") %>
<% end %>

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Active List Group Item 1</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
</ul>

With disabled item

<%= render Railsboot::ListGroupComponent.new do |list_group| %>
  <% list_group.with_item(disabled: true).with_content("Disabled List Group Item 1") %>
  <% list_group.with_item.with_content("List Group Item 2") %>
  <% list_group.with_item.with_content("List Group Item 3") %>
<% end %>

<ul class="list-group">
  <li class="list-group-item disabled">Disabled List Group Item 1</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
</ul>

With links

<%= render Railsboot::ListGroupComponent.new do |list_group| %>
  <% list_group.with_item { link_to("Link 1", "#") } %>
  <% list_group.with_item { link_to("Link 2", "#") } %>
  <% list_group.with_item { link_to("Link 3", "#") } %>
<% end %>

<ul class="list-group">
  <li class="list-group-item"><a href="#">Link 1</a></li>
  <li class="list-group-item"><a href="#">Link 2</a></li>
  <li class="list-group-item"><a href="#">Link 3</a></li>
</ul>

With flush

<%= render Railsboot::ListGroupComponent.new(flush: true) do |list_group| %>
  <% list_group.with_item.with_content("List Group Item 1") %>
  <% list_group.with_item.with_content("List Group Item 2") %>
  <% list_group.with_item.with_content("List Group Item 3") %>
<% end %>

<ul class="list-group list-group-flush">
  <li class="list-group-item">List Group Item 1</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
</ul>

With colors

<%= render Railsboot::ListGroupComponent.new do |list_group| %>
  <% list_group.with_item(color: "primary").with_content("List Group Item Primary") %>
  <% list_group.with_item(color: "secondary").with_content("List Group Item Secondary") %>
  <% list_group.with_item(color: "success").with_content("List Group Item Success") %>
  <% list_group.with_item(color: "danger").with_content("List Group Item Danger") %>
  <% list_group.with_item(color: "warning").with_content("List Group Item Warning") %>
  <% list_group.with_item(color: "info").with_content("List Group Item Info") %>
  <% list_group.with_item(color: "light").with_content("List Group Item Light") %>
  <% list_group.with_item(color: "dark").with_content("List Group Item Dark") %>
<% end %>

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">List Group Item Primary</li>
  <li class="list-group-item list-group-item-secondary">List Group Item Secondary</li>
  <li class="list-group-item list-group-item-success">List Group Item Success</li>
  <li class="list-group-item list-group-item-danger">List Group Item Danger</li>
  <li class="list-group-item list-group-item-warning">List Group Item Warning</li>
  <li class="list-group-item list-group-item-info">List Group Item Info</li>
  <li class="list-group-item list-group-item-light">List Group Item Light</li>
  <li class="list-group-item list-group-item-dark">List Group Item Dark</li>
</ul>

Slots

item Railsboot::ListGroup::ItemComponent Allows many

The item defines each entry within the list.

Name	Default	Type	Description
`active`		`Boolean`	Defines active state of the item
`disabled`		`Boolean`	Defines disabled state of the item
`color`		`String`	Defines the background color of the item
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/list_group_component.rb).
A view template (app/components/railsboot/list_group_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/list_group_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Heading with Anchor Modal