# PageDetail 详情页

# 多列

Title

Details具体信息

Title

Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息

Title

Details具体信息

Description

描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

多列

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <h-page-group title="Group Title" style="margin-top: 24px;">
      <h-page-detail style="padding: 0;">
        <h-page-detail-item label="Title">Details具体信息</h-page-detail-item>
        <h-page-detail-item label="Title">
          Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息
        </h-page-detail-item>
        <h-page-detail-item label="Title">Details具体信息</h-page-detail-item>
        <h-page-detail-item label="Description" double-col>
          描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
        </h-page-detail-item>
      </h-page-detail>
    </h-page-group>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# 单列

Title

Details具体信息

Title

Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息

Title

Details具体信息

Description

描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息

单列

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <h-page-group title="Group Title" style="margin-top: 24px;">
      <h-page-detail single>
        <h-page-detail-item label="Title">Details具体信息</h-page-detail-item>
        <h-page-detail-item label="Title">
          Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息Details具体信息
        </h-page-detail-item>
        <h-page-detail-item label="Title">Details具体信息</h-page-detail-item>
        <h-page-detail-item label="Description" double-col>
          描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
        </h-page-detail-item>
      </h-page-detail>
    </h-page-group>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# 自定义标签

定制图标

Details具体信息

定制整个标签

Details具体信息

自定义标签

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <h-page-group title="Group Title" style="margin-top: 24px;">
      <h-page-detail single style="padding: 0;">
        <h-page-detail-item label="定制图标">
          <template slot="labelAction">
            <i class="h-icon-info" />
          </template>
          Details具体信息
        </h-page-detail-item>
        <h-page-detail-item>
          <template slot="label">
            <span>定制整个标签</span>
            <i
              class="h-icon-info"
              style="padding-left: 12px; font-size: 24px; vertical-align: bottom; color: #4d4d4d;"
            ></i>
          </template>
          Details具体信息
        </h-page-detail-item>
      </h-page-detail>
    </h-page-group>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# API

# PageDetail Attributes

参数	说明	类型	可选值	默认值
single	详情项是否单列显示	Boolean	-	false

# PageDetailItem Attributes

参数	说明	类型	可选值	默认值
label	详情项标签	String	-	-
doubleCol	是否占据两个单元格	Boolean	-	false

# PageDetailItem Slot

name	说明
label	标签项插槽
labelAction	标签项工具栏插槽

← PageButtonGroup 按钮组