Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="flex flex-col items-start gap-6 p-8">
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Ruby</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Rails</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">JavaScript</span>
    </span>
    <span class="midwest-badge size-default theme-primary midwest-group-overflow">
      <span class="value">+3 more</span>
    </span>
  </div>
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-badge size-default theme-green">
      <span class="value">Alice</span>
    </span>
    <span class="midwest-badge size-default theme-cyan">
      <span class="value">Bob</span>
    </span>
    <span class="midwest-badge size-default theme-primary midwest-group-overflow">
      <span class="value">and 4 others</span>
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="flex flex-col items-start gap-6 p-8">
  <%# Show first 3 of 6 items %>
  <%= render Midwest::GroupComponent.new(max: 3) do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Ruby") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Rails") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("JavaScript") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("TypeScript") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("CSS") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("HTML") } %>
  <% end %>
  <%# Show first 2 with custom overflow label %>
  <%= render Midwest::GroupComponent.new(max: 2, overflow_label: "and 4 others") do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Alice", state: :success) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Bob", state: :info) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Carol") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Dave") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Eve") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Frank") } %>
  <% end %>
</div>

Overflow

When max: is set, items beyond the limit are hidden and a +N more overflow indicator is shown.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Group/overflow

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."