elementUI 学习入门之 container 布局容器

Container 布局容器

用于布局的容器组件,方便快速搭建页面基本结构

<el-container> : 外层容器。当子元素包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则水平左右排列

<el-header> : 顶栏容器

<el-aside> : 侧边栏容器

<el-main> : 主要区域容器

<el-footer> : 底边栏容器

这些组件均采用 flex 布局。<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

上中下排列:

1 <el-container>
2   <el-header>Header</el-header>
3   <el-main>Main</el-main>
4   <el-footer>Footer</el-footer>
5 </el-container>

上下后下面分为左右:

  (tips : 开头红字:<el-container> 包含<el-header> 或  <el-footer> 时,子元素会垂直排列。故此,设置包含再包含的写法)

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

原文地址:https://www.cnblogs.com/xsmile/p/10407629.html

时间: 2024-11-02 10:49:17

elementUI 学习入门之 container 布局容器的相关文章

WPF入门——XAML和布局容器

WPF是微软推出的基于Windows Vista的用户界面框架:它提供了统一的编程模型.语言和框架,真正做到了分离界面设计人员与开发人员的工作.WPF和.NET中winForm是类似的. XAML 1.XAML是对WPF程序的所用用户界面进行详细的定制. 2.它提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面,而这种实现方式和ASP.NET中的"代码后置"模型非常类似. 3.但是XAML并不是一种用于程序设计的语言,它的功能也不是为了执行应用程序逻辑. 4.说的通俗一点,W

elementUI 学习入门之 checkbox 复选框

CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="selectCities" min='2' max="3"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}&

GTK入门学习:布局容器之表格布局

学习水平和垂直布局容器后,我们几乎能布出任何风格的布局,只需要嵌套使用水平布局容器和垂直布局容器即可.假如我们要完成下图的布局,我们该怎么做呢? 1)创建一个垂直布局容器( A ) 2)创建一个水平布局容器( B ),一个close按钮( C ) 3)将水平布局容器和close按钮添加到垂直布局容器里( 将 B 和 C 添加到 A ) 4)创建button 1按钮( D ) 和 button 2按钮( E ) 5)再将button 1按钮 和 button 2按钮添加到水平布局容器里( 将 D

布局容器之表格布局

学习水平和垂直布局容器后,我们几乎能布出任何风格的布局,只需要嵌套使用水平布局容器和垂直布局容器即可.假如我们要完成下图的布局,我们该怎么做呢? 1)创建一个垂直布局容器( A ) 2)创建一个水平布局容器( B ),一个close按钮( C ) 3)将水平布局容器和close按钮添加到垂直布局容器里( 将 B 和 C 添加到 A ) 4)创建button 1按钮( D ) 和 button 2按钮( E ) 5)再将button 1按钮 和 button 2按钮添加到水平布局容器里( 将 D

GTK入门学习:布局容器之水平布局

如果我们希望窗口里多放添加几个控件,直接添加是不成功的,因为窗口只能容纳一个控件的容器.这时候,我们需要借助布局容器,我们先把布局容器添加到窗口里,然后再把所需要添加的控件放在布局容器里. 布局容器的主要分类:水平布局( GtkHBox).垂直布局(GtkVBox ).表格布局(GtkTable).固定布局(GtkFixed ). 水平布局容器: 水平布局容器的创建: GtkWidget *gtk_hbox_new( gboolean homogeneous, gint spacing ); h

GTK入门学习:布局容器之固定布局

前面我们学习的水平.垂直和表格布局容器,控件会跟着容器大小的变化进行自动适应,而固定布局容器里的控件则不会跟着变化( 则固定不变 ). 固定布局的创建: GtkWidget *gtk_fixed_new(void); 返回值:固定布局容器指针 固定布局容器添加控件: void gtk_fixed_put( GtkFixed *fixed, GtkWidget *widget, gint x, gint y ); fixed:容纳控件的容器 widget:要添加的控件 x, y:控件摆放位置的起点

GTK入门学习:布局容器之垂直布局

垂直布局和水平布局的用法基本是一样,无非是新建垂直布局容器接口,还有控件摆放的方向不同. 垂直布局容器的创建: GtkWidget *gtk_vbox_new( gboolean homogeneous, gint spacing ); 完整代码如下: #include <gtk/gtk.h> int main(int argc, char *argv[]) { //1.gtk初始化 gtk_init(&argc, &argv); //2.创建一个窗口 GtkWidget *w

学习WPF1.1——WPF布局——初识布局容器

StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/

学习WPF1.2——WPF布局——了解布局容器

WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归的过程,界面中任何一个容器元素都会被遍历到 WPF布局容器的继承机制 DispatcherObject WPF应用程序使用单线程亲和模型(STA:Single-Thread Affinity),这意味着整个用户界面都为单个线程拥有,同时也意味着从另一个线程与用户界面元素交互是不安全的,但有很多情况下