Descriptions

Component

Interactive examples and API documentation

Basic
Basic usage of descriptions.
User Info
UserName Zhou Maomao Telephone 1810000000 Live Hangzhou, Zhejiang
Remark Empty Address No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
Code 
<%= render HakumiComponents::Descriptions::Component.new(title: "User Info") do |d| %>
  <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
  <% d.with_item(label: "Telephone", content: "1810000000") %>
  <% d.with_item(label: "Live",      content: "Hangzhou, Zhejiang") %>
  <% d.with_item(label: "Remark",    content: "Empty") %>
  <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China") %>
<% end %>
Bordered
Descriptions with border and background color.
User Info
UserName Zhou Maomao Telephone 1810000000 Live Hangzhou, Zhejiang
Remark Empty Address No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
Code 
<%= render HakumiComponents::Descriptions::Component.new(
  title: "User Info",
  extra: render(HakumiComponents::Button::Component.new(type: :primary)) { "Edit" },
  bordered: true
) do |d| %>
  <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
  <% d.with_item(label: "Telephone", content: "1810000000") %>
  <% d.with_item(label: "Live",      content: "Hangzhou, Zhejiang") %>
  <% d.with_item(label: "Remark",    content: "Empty") %>
  <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China", span: 2) %>
<% end %>
Custom size
Custom sizes to fit in a variety of containers.
Default
UserName Zhou Maomao Telephone 1810000000 Address No. 18, Wantang Road, Xihu District
Middle
UserName Zhou Maomao Telephone 1810000000 Address No. 18, Wantang Road, Xihu District
Small
UserName Zhou Maomao Telephone 1810000000 Address No. 18, Wantang Road, Xihu District
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :default) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Descriptions::Component.new(
      title: "Default",
      bordered: true,
      size: :default
    ) do |d| %>
      <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
      <% d.with_item(label: "Telephone", content: "1810000000") %>
      <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District") %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Descriptions::Component.new(
      title: "Middle",
      bordered: true,
      size: :default
    ) do |d| %>
      <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
      <% d.with_item(label: "Telephone", content: "1810000000") %>
      <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District") %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Descriptions::Component.new(
      title: "Small",
      bordered: true,
      size: :small
    ) do |d| %>
      <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
      <% d.with_item(label: "Telephone", content: "1810000000") %>
      <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District") %>
    <% end %>
  <% end %>
<% end %>
Responsive
Responsive configuration enables better presentation on small screens.
Responsive
UserName Zhou Maomao Telephone 1810000000 Live Hangzhou, Zhejiang
Remark Empty Address No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
Code 
<%= render HakumiComponents::Descriptions::Component.new(
  title: "Responsive",
  bordered: true,
  column: { xs: 1, sm: 2, md: 3 }
) do |d| %>
  <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
  <% d.with_item(label: "Telephone", content: "1810000000") %>
  <% d.with_item(label: "Live",      content: "Hangzhou, Zhejiang") %>
  <% d.with_item(label: "Remark",    content: "Empty") %>
  <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China") %>
<% end %>
Vertical bordered
Descriptions with vertical layout and border.
User Info
UserName Telephone Live
Zhou Maomao 1810000000 Hangzhou, Zhejiang
Remark Address
Empty No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
Code 
<%= render HakumiComponents::Descriptions::Component.new(
  title: "User Info",
  bordered: true,
  layout: :vertical
) do |d| %>
  <% d.with_item(label: "UserName",  content: "Zhou Maomao") %>
  <% d.with_item(label: "Telephone", content: "1810000000") %>
  <% d.with_item(label: "Live",      content: "Hangzhou, Zhejiang") %>
  <% d.with_item(label: "Remark",    content: "Empty") %>
  <% d.with_item(label: "Address",   content: "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China") %>
<% end %>
Row span
Display items that take the entire line using span.
Configuration
Product Cloud Database Billing Mode Prepaid Automatic Renewal YES
Order Time 2018-04-24 18:00:00 Usage Time 2019-04-24 18:00:00 Status Running
Negotiated Amount $80.00 Discount $20.00 Official Receipts $60.00
Config Info Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1
Code 
<%= render HakumiComponents::Descriptions::Component.new(
  title: "Configuration",
  bordered: true,
  column: 3
) do |d| %>
  <% d.with_item(label: "Product",           content: "Cloud Database") %>
  <% d.with_item(label: "Billing Mode",      content: "Prepaid") %>
  <% d.with_item(label: "Automatic Renewal", content: "YES") %>
  <% d.with_item(label: "Order Time",        content: "2018-04-24 18:00:00") %>
  <% d.with_item(label: "Usage Time",        content: "2019-04-24 18:00:00") %>
  <% d.with_item(label: "Status",            content: "Running") %>
  <% d.with_item(label: "Negotiated Amount", content: "$80.00") %>
  <% d.with_item(label: "Discount",          content: "$20.00") %>
  <% d.with_item(label: "Official Receipts", content: "$60.00") %>
  <% d.with_item(
    label: "Config Info",
    content: "Data disk type: MongoDB\nDatabase version: 3.4\nPackage: dds.mongo.mid\nStorage space: 10 GB\nReplication factor: 3\nRegion: East China 1",
    span: 3
  ) %>
<% end %>

Props

Prop Type Default Description
title String - Shorthand title. Prefer with_title slot for rich content.
extra Renderable - Shorthand extra. Prefer with_extra slot for rich content.
bordered Boolean false Display as a bordered table.
size Symbol :default One of: :small, :default, :large.
layout Symbol :horizontal One of: :horizontal, :vertical.
column Integer or Hash 3 Column count, or responsive hash per breakpoint (e.g. { xs: 1, md: 2, xl: 3 }).
colon Boolean true Show colon after label (horizontal layout only).
**html_options Keyword args - Attributes merged into the root wrapper.