Paper Components

Previews

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
<% items = [
  {
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
] %>
<%= paper_card(sectioned: false) do %>
  <%= paper_resource_list do |resource_list| %>
    <% resource_list.with_filters do |filters| %>
      <% filters.with_query(name: :query, placeholder: "Filter customers") %>
      <% filters.with_item(label: "Tagged with", width: "175px") do %>
        <%= paper_text_field %>
      <% end %>
      <div style="padding-left: 8px;">
        <%= paper_button { "Save" } %>
      </div>
    <% end %>
    <% items.each do |item| %>
      <%= paper_resource_item(url: item[:url]) do |c| %>
        <% c.with_media do %>
          <%= paper_avatar(customer: true, name: item[:name]) %>
        <% end %>
        <h3>
          <%= paper_text_style(variation: :strong) { item[:name] } %>
        </h3>
        <div><%= item[:location] %></div>
      <% end %>
    <% end %>
  <% end %>
<% end %>