Layout

Brief Introduction

The Layout component is used to quickly build page layout structures. mengyue-components provides flexible layout solutions, supporting grid systems and multiple alignment methods. You can use <MYRow></MYRow> and <MYCol></MYCol> to implement layouts.

Basic Usage

Basic Grid Layout

Use the <MYRow></MYRow> and <MYCol></MYCol> tags to build a basic grid layout system.

Code Demo

span=6

span=12

span=6

<template>
  <MYRow>
    <MYCol :span='6'>
      <div style='background: red'>span=6</div>
    </MYCol>
    <MYCol :span='12'>
      <div style='background: #2c2'>span=12</div>
    </MYCol>
    <MYCol :span='6'>
      <div style='background: #2828'>span=6</div>
    </MYCol>
  </MYRow>
</template>

展开代码

Spacing Control

Use the gutter property to set the spacing between grids.

Code Demo

Left

Center

Right

<template>
  <MYRow :gutter='16'>
    <MYCol :span='8'>
      <div class='demo-box'>Left</div>
    </MYCol>
    <MYCol :span='8'>
      <div class='demo-box'>Center</div>
    </MYCol>
    <MYCol :span='8'>
      <div class='demo-box'>Right</div>
    </MYCol>
  </MYRow>
</template>

展开代码

Horizontal Alignment

Use the justify property to set the horizontal alignment.

Code Demo

Left

Right

<template>
  <MYRow justify='space-between'>
    <MYCol :span='6'>
      <div style='background: red'>Left</div>
    </MYCol>
    <MYCol :span='6'>
      <div style='background: #2c2'>Right</div>
    </MYCol>
  </MYRow>
</template>

展开代码

Vertical Centering

Use the align property to set vertical centering, and alignCenter to set both horizontal and vertical centering.

Code Demo

Top

Middle

Bottom

<template>
  <MYRow align>
    <MYCol :span='24'>
      <div class='demo-box'>Top</div>
    </MYCol>
    <MYCol :span='24'>
      <div class='demo-box'>Middle</div>
    </MYCol>
    <MYCol :span='24'>
      <div class='demo-box'>Bottom</div>
    </MYCol>
  </MYRow>
</template>

展开代码

Direction Reversal

Use the direction property to set the layout direction.

Code Demo

1 (Visually on the right)

2

3 (Visually on the left)

<template>
  <MYRow direction='row-reverse'>
    <MYCol :span='8'>
      <div class='demo-box'>1 (Visually on the right)</div>
    </MYCol>
    <MYCol :span='8'>
      <div class='demo-box'>2</div>
    </MYCol>
    <MYCol :span='8'>
      <div class='demo-box'>3 (Visually on the left)</div>
    </MYCol>
  </MYRow>
</template>

展开代码

API Reference

MYRow Props

Parameter	Description	Type	Options	Default
gutter	Grid spacing	number/string	0-24	0
justify	Horizontal alignment	string	start / end / center / space-around / space-between	—
align	Vertical alignment	boolean	—	false
alignCenter	Vertical & horizontal center	boolean	—	false
direction	Layout direction	string	row / column / row-reverse / column-reverse	row
tag	Render tag	string	Supports all HTML tags	div

MYCol Props

Parameter	Description	Type	Options	Default
span	Grid width	number	1-24	24
offsetLeft	Left offset	number/string	0-24	0
offsetRight	Right offset	number/string	0-24	0
pull	Move left	number/string	0-24	0
push	Move right	number/string	0-24	0
tag	Render tag	string	Supports all HTML tags	div

Type Definitions

interface RowProps {
  gutter?: number | string;
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
  align?: boolean;
  alignCenter?: boolean;
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  tag?: string;
}

interface ColProps {
  span?: number;
  offsetLeft?: number | string;
  offsetRight?: number | string;
  pull?: number | string;
  push?: number | string;
  tag?: string;
}