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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="p-8">
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 1</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 2</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 3</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 4</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 5</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Item 6</span>
    </span>
  </div>
</div>
<div class="p-8">
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
    <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Midwest Design">
      <div class="letter" title="Midwest Design">
        MD
      </div>
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="p-8">
  <% max_val = params[:max].present? ? params[:max].to_i : nil %>
  <% size_val = (params[:size] || 'default').to_sym %>
  <% gap_val = (params[:gap] || 'default').to_sym %>
  <% count = (params[:item_count] || 6).to_i %>
  <%= render Midwest::GroupComponent.new(max: max_val, size: size_val, gap: gap_val) do |group| %>
    <% count.times do |i| %>
      <% group.with_item { render Midwest::BadgeComponent.new("Item #{i + 1}", size: size_val) } %>
    <% end %>
  <% end %>
</div>
<div class="p-8">
  <%= render Midwest::GroupComponent.new(max: max_val, size: size_val, gap: gap_val) do |group| %>
    <% count.times do |i| %>
      <% group.with_item { render Midwest::AvatarComponent.new("Item #{i + 1}", size: size_val, shape: :circle) } %>
    <% end %>
  <% end %>
</div>

Playground

Explore the component with live parameters.

Param Description Input

Maximum visible items (leave blank for all)

Text/badge size

Gap between items (overlap values layer items)

Number of items to render
1
12

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

Accessibility

Figma embed for Group/playground

Annotate a preview to embed its Figma design here:

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