Rapid DesignRapid Design
首页
文档
组件
高级组件
网站
Gitea
首页
文档
组件
高级组件
网站
Gitea
  • 基础

    • Button 按钮
    • FloatButton 悬浮按钮
    • Icon 图标
    • Typography 排版
  • 布局

    • Divider 分割线
    • Grid 栅格
    • Layout 布局
    • Space 间距
  • 导航

    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • Menu 菜单
    • Pagination 分页
    • Steps 步骤
  • 输入

    • AutoComplete 自动完成
    • Cascader 级联菜单
    • Checkbox 多选框
    • ColorPicker 颜色选择器
    • DatePicker 日期选择器
    • Form 表单
    • Input 输入框
    • Radio 单选框
    • Rate 评分
    • Select 选择器
    • Slider 滑动条
    • Switch 开关
    • TreeSelect 树选择器
    • Upload 上传
  • 展示

    • Avatar 头像
    • Badge 徽标数
    • Card 卡片
    • Carousel 走马灯
    • Decorator 饰品
    • Event Calendar 日历
    • List 列表
    • Swiper 轮播图
    • Table 表格
    • Tabs 标签页
  • 反馈

    • Alert 警告提示
    • Message 全局提示
    • Modal 对话框
  • 其他

布局 Layout

协助进行页面级整体布局。

如何使用

  • Layout:布局容器,其下可嵌套 Header Sider Content Footer 或 Layout 本身,可以放在任何父容器中。
  • Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
  • Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
  • Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
  • Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

代码演示

Header
Content
Footer
Header
Sider
Content
Footer
Sider
Header
Content
Footer
基础布局

典型的页面布局。

API

属性

Layout 的属性说明如下:

属性说明类型默认值版本
className容器 classNamestring-
style指定样式CSSProperties-

Layout.Sider 的属性说明如下:

属性说明类型默认值版本
breakpoint触发响应式布局的断点xs | sm | md | lg | xl | xxl-
className容器 classNamestring-
collapsed当前收起状态boolean-
collapsible是否可收起booleanfalse
defaultCollapsed是否默认收起booleanfalse
style指定样式CSSProperties-
width宽度number | string200
最近更新: 2023/8/30 16:09
Prev
Grid 栅格
Next
Space 间距