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 Hakumi::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 Hakumi::Descriptions::Component.new(
  title: "User Info",
  extra: render(Hakumi::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 Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::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 Hakumi::Descriptions::Component.new(
      title: "Middle",
      bordered: true,
      size: :middle
    ) 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 Hakumi::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 Hakumi::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 Hakumi::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 Hakumi::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 %>

Descriptions API

Prop Type Default Description
title String or ViewComponent - The title of the descriptions group.
extra String or ViewComponent - Extra actions area, displayed on the right of the title.
bordered Boolean false Whether to display as a bordered table.
size :default | :middle or :small :default Set the size of the descriptions.
layout :horizontal or :vertical :horizontal Set the layout of the descriptions.
column Integer or Hash (Record<Breakpoint, Integer>) 3 Number of description columns, or responsive configuration per breakpoint.
colon Boolean true Whether to display a colon after the label (horizontal layout only).
with_item Slot(label:, content:, span:, label_style:, content_style:) - Adds a description item. Use inside a block: `render(... ) do |d| d.with_item(label:, content:, span:) end`.
**html_options Keyword args - Extra HTML attributes merged into the root wrapper (e.g., class:, data:, style:).