OpenProject Lookbook

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
<div data-view-component="true" class="Box position-relative">
  <div id="header-dc65826d-c648-459a-b951-b7576c1fcbf5" data-view-component="true" class="Box-header op-border-box-grid color-fg-muted">
    <span data-view-component="true" class="op-border-box-grid--heading op-border-box-grid--main-column text-semibold">3 columns wide</span><span data-view-component="true" class="op-border-box-grid--heading text-semibold">1 column wide</span><span data-view-component="true" class="op-border-box-grid--mobile-heading text-semibold">Mobile foo</span>
  </div>
  <ul aria-labelledby="header-dc65826d-c648-459a-b951-b7576c1fcbf5" data-view-component="true">
    <li data-view-component="true" class="Box-row">
      <div data-view-component="true" class="op-border-box-grid ">
        <div data-view-component="true" class="op-border-box-grid--row-item foo op-border-box-grid--main-column">
          foo
        </div>
    
        <div data-view-component="true" class="op-border-box-grid--row-item bar ellipsis">
          bar
        </div>
      </div>
    </li>
    <li data-view-component="true" class="Box-row">
      <div data-view-component="true" class="op-border-box-grid ">
        <div data-view-component="true" class="op-border-box-grid--row-item foo op-border-box-grid--main-column">
          foo
        </div>
    
        <div data-view-component="true" class="op-border-box-grid--row-item bar ellipsis">
          bar
        </div>
      </div>
    </li>
  </ul>
</div>

See the component documentation for more details.

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
<%=
  table = Class.new(OpPrimer::BorderBoxTableComponent) do
    columns :foo, :bar
    main_column :foo
    def self.name
      "MyTable"
    end
    def mobile_title
      "Mobile foo"
    end
    def row_class
      @row_class ||= Class.new(OpPrimer::BorderBoxRowComponent) do
        def self.name
          "MyRow"
        end
        def foo
          "foo"
        end
        def bar
          "bar"
        end
      end
    end
    def headers
      [
        [:foo, { caption: "3 columns wide" }],
        [:bar, { caption: "1 column wide" }]
      ]
    end
  end
  render(table.new(rows: [1, 2]))
%>

No params configured.