Container

Brief Introduction

The Container component is used to wrap other content and provide layout and style control. There are five tags available: <MYContainer></MYContainer> and <MYContainer />: Basic container
<MYHeader></MYHeader> and <MYHeader />: Page header
<MYAside></MYAside> and <MYAside />: Sidebar
<MYMain></MYMain> and <MYMain />: Main content
<MYFooter></MYFooter> and <MYFooter />: Footer

Container Usage

Basic Container

Use <MYContainer></MYContainer> to implement a container.

Code Demo

Basic Container

This is a basic container

<template>
  <div style='border: 1px solid #2c2; padding: 15px; border-radius: 4px'>
    <h3>Basic Container</h3>
    <MYContainer class='basic-container'>
      <p>This is a basic container</p>
    </MYContainer>
  </div>
</template>

展开代码

Custom Styled Container

Basic container with custom styles:

Code Demo

Container with Custom Styles

Container with custom height, width, and background color

<template>
  <div style='border: 1px solid #2c2; padding: 15px; border-radius: 4px'>
    <h3>Container with Custom Styles</h3>
    <MYContainer 
      height='300px' 
      width='80%' 
      background='#470303ff' 
      class='styled-container'
    >
      <p>Container with custom height, width, and background color</p>
    </MYContainer>
  </div>
</template>

展开代码

Complete Layout

Complete layout example (width, height, colors can be freely adjusted):

Code Demo

Complete Layout

Header

Left Sidebar

Main Content Area

Various content can be placed here

Right Sidebar

Footer Area

<template>
  <div class='test-case'>
    <h3>Complete Layout</h3>
    <MYContainer height='200px' class='full-layout'>
      <MYHeader class='header' height='30px'>Header</MYHeader>
      <MYAside class='left-aside'>Left Sidebar</MYAside>
      <MYMain class='main-content'>
        <p>Main Content Area</p>
        <p>Various content can be placed here</p>
      </MYMain>
      <MYAside position='right' class='right-aside'>Right Sidebar</MYAside>
      <MYFooter class='footer' height='30px'>Footer Area</MYFooter>
    </MYContainer>
  </div>
</template>

展开代码

API Reference

MYContainer Props

Prop	Description	Type	Options	Default
height	Height	string/number	px/em/rem/dynamic	—
width	Width	string/number	px/em/rem/dynamic/%	—
background	Background color	string	Hex or named color	—
tag	Container tag	string	Any HTML tag	div

MYHeader Props

Prop	Description	Type	Options	Default
height	Height	string/number	px/em/rem/dynamic	—
width	Width	string/number	px/em/rem/dynamic/%	—
background	Background color	string	Hex or named color	—
fixed	Fixed header navigation	boolean	—	false
tag	Container tag	string	Any HTML tag	header

MYAside Props

Prop	Description	Type	Options	Default
height	Height	string/number	px/em/rem/dynamic	—
width	Width	string/number	px/em/rem/dynamic/%	—
background	Background color	string	Hex or named color	—
position	Sidebar position	string	left/right	left
tag	Container tag	string	Any HTML tag	aside

MYMain Props

Prop	Description	Type	Options	Default
height	Height	string/number	px/em/rem/dynamic	—
width	Width	string/number	px/em/rem/dynamic/%	—
background	Background color	string	Hex or named color	—
tag	Container tag	string	Any HTML tag	main

MYFooter Props

Prop	Description	Type	Options	Default
height	Height	string/number	px/em/rem/dynamic	—
width	Width	string/number	px/em/rem/dynamic/%	—
background	Background color	string	Hex or named color	—
tag	Container tag	string	Any HTML tag	footer

Type Definitions

interface ContainerProps {
  height?: string | number;
  width?: string | number;
  background?: string;
  tag?: string;
}

interface HeaderProps {
  height?: string | number;
  width?: string | number;
  background?: string;
  fixed?: boolean;
  tag?: string;
}

interface AsideProps {
  height?: string | number;
  width?: string | number;
  background?: string;
  tag?: string;
  position?: "left" | "right";
}

interface MainProps {
  height?: string | number;
  width?: string | number;
  background?: string;
  tag?: string;
}

interface FooterProps {
  height?: string | number;
  width?: string | number;
  background?: string;
  tag?: string;
}