# PageGroup 分组

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <el-form
      :model="form"
      label-position="top"
      style="width: 480px; margin-top: 24px;"
      content-width="480px"
    >
      <h-page-group title="Group Title">
        <el-form-item
          v-for="i in 2"
          :key="`form_${i}`"
          label="Title"
          required-right
        >
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
      <h-page-group title="Group Title">
        <el-form-item label="Title" required-right>
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
    </el-form>
  </h-page-content>
</h-page-container>

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

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <el-form
      :model="form"
      label-position="top"
      style="width: 480px; margin-top: 24px;"
      content-width="480px"
    >
      <h-page-group title="Group Title">
        <template slot="headerAction">
          <i class="h-icon-setting" />
        </template>
        <el-form-item
          v-for="i in 2"
          :key="`form_${i}`"
          label="Title"
          required-right
        >
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
      <h-page-group title="Group Title">
        <template slot="headerAction">
          <i class="h-icon-alarm" />
        </template>
        <el-form-item label="Title" required-right>
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
    </el-form>
  </h-page-content>
</h-page-container>

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

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content flex align-center>
    <el-form
      :model="form"
      label-position="top"
      style="width: 480px; margin-top: 24px;"
      content-width="480px"
    >
      <h-page-group title="Group Title" collapsable>
        <el-form-item
          v-for="i in 2"
          :key="`form_${i}`"
          label="Title"
          required-right
        >
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
      <h-page-group title="Group Title" collapsable :expanded="false">
        <el-form-item label="Title" required-right>
          <el-input v-model="form.title" placeholder="Information" />
        </el-form-item>
      </h-page-group>
    </el-form>
  </h-page-content>
</h-page-container>

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