hare-ui

Appearance

Return to top
On this page

Row 行

基本使用

col
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
基本使用
从堆叠到水平排列。使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。
<template>
  <h-row :gutter="[20, 30]">
    <h-col>col</h-col>
  </h-row>
  <h-row :gutter="[20, 30]">
    <h-col :span="12">col-12</h-col>
    <h-col :span="12">col-12</h-col>
  </h-row>
  <h-row :gutter="[20, 30]">
    <h-col :span="8">col-8</h-col>
    <h-col :span="8">col-8</h-col>
    <h-col :span="8">col-8</h-col>
  </h-row>
  <h-row :gutter="[20, 30]">
    <h-col :span="6">col-6</h-col>
    <h-col :span="6">col-6</h-col>
    <h-col :span="6">col-6</h-col>
    <h-col :span="6">col-6</h-col>
  </h-row>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.h-row {
  width: 100%;
  height: 100px;
  padding: 12px;
  color: #fff;
  .h-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  & > :nth-child(odd) {
    background-color: #1677ffbf;
  }
  & > :nth-child(even) {
    background-color: #1677ff;
  }
}
</style>

组件 API

Attributes 属性

参数说明类型可选值默认值

Methods 方法

方法名说明参数返回值

Events 事件

事件名说明参数返回值

Slots 插槽

插槽名说明参数