ant-design-vue/components/layout/index.zh-CN.md
tangjinzhou ff25efe185
update to antd3.8.3 (#159)
* refactor: align

* feat:  update align to 2.4.3

* feat: update trigger 2.5.4

* feat: update tooltip 3.7.2

* fix: align

* feat: update vc-calendar to 9.6.2

* feat: update vc-checkbox to 2.1.5

* feat: update vc-dialog to 7.1.8

* feat: update vc-from to 2.2.1

* feat: update vc-notification to 3.1.1

* test: update snapshots

* feat: update vc-tree to 1.12.6

* feat: update vc-table to 6.2.8

* feat: update vc-upload to 2.5.1

* feat: update vc-input-number to 4.0.12

* feat: update vc-tabs to 9.2.6

* refactor: vc-menu

* refactor: update vc-menu to 7.0.5

* style: remove unused

* feat: update pagination to 1.16.5

* feat: add vc-progress 2.2.5 tag

* feat: add vc-rate 2.4.0 tag

* feat: update vc-slider to 8.6.1

* fix: tooltip error

* style: delete conosle

* feat: update vc-steps to 3.1.1

* add vc-switch tag 1.6.0

* feat: update upload to 2.5.1

* fix: update vc-menu

* fix: update store

* fix: add ref dir

* fix: trigger mock shouldComponentUpdate

* fix: update vc-select

* revert: trigger lazyrenderbox

* fix: update vc-select

* fix: update vc-select

* fix: update vc-select

* fix: update vc-menu

* fix: update vc-slick ref

* update style to 3.8.2

* test: update snapshots

* update vc-select

* update util & affix

* feat: add drawer

* fix: support title add slot mode

* test: update affix test

* update alert

* update anchor

* update snapshots

* fix: doc and vc-drawer

* update select & auto-complete

* update back-top & grid

* feractor: avatar

* test: add drawer test

* update badge

* update button

* update card

* update divider

* feat: update vc-tabs to 9.3.6 and tabs

* add afterEnter callback

* update form

* fix: update drawer

* test: update snapshots

* update modal & notification

* test: update snapshots

* update message

* update locale-provider

* update dropdown

* update layout popconfirm popover

* update time-picker

* update menu

* update date-picker

* docs: update input docs

* update input

* update snapshots

* update table

* update test snapshots

* feat: update progress

* update checkbox

* feat: update spin

* update radio

* docs: slider steps timeline

* update list

* update transfer

* update collapse

* update cascader

* update upload
2018-09-05 21:28:54 +08:00

1.9 KiB
Raw Blame History

API

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

Layout

布局容器。

参数 说明 类型 默认值
class 容器 class string -
style 指定样式 object -
hasSider 表示子元素里有 Sider一般不用指定。可用于服务端渲染时避免样式闪动 boolean -

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

Layout.Sider

侧边栏。

参数 说明 类型 默认值
breakpoint 触发响应式布局的断点 Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } -
class 容器 class string -
collapsed(v-model) 当前收起状态 boolean -
collapsedWidth 收缩宽度,设置为 0 会出现特殊 trigger number 64
collapsible 是否可收起 boolean false
defaultCollapsed 是否默认收起 boolean false
reverseArrow 翻转折叠提示箭头的方向,当 Sider 在右边时可以使用 boolean false
style 指定样式 object|string -
theme 主题颜色 string: light dark dark
trigger 自定义 trigger设置为 null 时隐藏 trigger string|slot -
width 宽度 number|string 200

事件

事件名称 说明 回调参数
collapse 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 (collapsed, type) => {}
breakpoint 触发响应式布局断点时的回调 (broken) => {}

breakpoint width

{
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
}