<template>
  <h-row :gutter="16" align="middle" style="height: 48px">
    <h-col :span="10" class="label colon">
      <slot name="label">
        {{ label }}
      </slot>
    </h-col>
    <h-col :span="14">
      <slot />
    </h-col>
  </h-row>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ListItem',
  props: {
    label: {
      type: String,
      default: () => undefined,
    },
  },
});
</script>

<style lang="less" scoped>
.label {
  text-align: right;
  &.colon {
    &::after {
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px;
      content: ':';
    }
  }
}
</style>
