Tussell Components

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
57
58
59
60
61
62
63
64
65
<div style="max-width: 480px; padding: 1rem;">
  <div class="c-tabbed-card" data-controller="tussell-components--tabs">
    <div class="c-tabbed-card__tabs" role="tablist">
      <button
        type="button"
        class="c-tabbed-card__tab c-tabbed-card__tab--active"
        role="tab"
        aria-selected="true"
        data-tabs-target="tab"
        data-action="click->tussell-components--tabs#select"
        data-index="0"
        >
        Opportunities
        <span class="c-tabbed-card__count">1</span>
      </button>
      <button
        type="button"
        class="c-tabbed-card__tab "
        role="tab"
        aria-selected="false"
        data-tabs-target="tab"
        data-action="click->tussell-components--tabs#select"
        data-index="1"
        >
        Awarded contracts
        <span class="c-tabbed-card__count">1</span>
      </button>
      <button
        type="button"
        class="c-tabbed-card__tab "
        role="tab"
        aria-selected="false"
        data-tabs-target="tab"
        data-action="click->tussell-components--tabs#select"
        data-index="2"
        >
        Frameworks
        <span class="c-tabbed-card__count">0</span>
      </button>
    </div>
    <div class="c-tabbed-card__panels">
      <div
        class="c-tabbed-card__panel c-tabbed-card__panel--active"
        role="tabpanel"
        data-tabs-target="panel"
      >
        <p>Sunderland City Council Skate Park Refurbishment Programme</p>
      </div>
      <div
        class="c-tabbed-card__panel "
        role="tabpanel"
        data-tabs-target="panel"
      >
        <p>No awarded contracts yet.</p>
      </div>
      <div
        class="c-tabbed-card__panel "
        role="tabpanel"
        data-tabs-target="panel"
      >
        <p>No frameworks saved.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="max-width: 480px; padding: 1rem;">
  <%= render TussellComponents::TabbedCardComponent.new do |c| %>
    <% c.with_tab(label: "Opportunities", count: 1, selected: true) do %>
      <p>Sunderland City Council Skate Park Refurbishment Programme</p>
    <% end %>
    <% c.with_tab(label: "Awarded contracts", count: 1) do %>
      <p>No awarded contracts yet.</p>
    <% end %>
    <% c.with_tab(label: "Frameworks", count: 0) do %>
      <p>No frameworks saved.</p>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.