mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
c6bed151a5
* feat(website): init viteperss (#3162) * init vitepress * Finish homepage * relayout page * partial finish * update * update use lang * remove font weight; change font size * docs: optimize docs folder structure * reorganize project * fix ssr issue * fix build issues Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> * feat(website) integrate with crowdin (#3218) - Introduce Crowdin CLI - Add script for fetching Crowdin token from env - Add script for local development * fix formatting * update codeblocks (#3249) * feat(docs): update website preview script - Update azure preview build script - Eliminate dead links * bootstrap docs * fix homepage layout issue * fix formating * Finish ToC and codepen integration * reorganized files and fix issue that causes demo unavailable after build * feat(docs): migration documentations (#3283) * feat(docs): migration documentations - Move documentations to docs/ * remove unused files * docs: [popconfirm] migrate document (#3285) * feat(docs): migrate documentation from space.md to upload.md (#3292) - Upload documentations acorrodingly * docs: [date-picker] migrate document (#3289) * docs: [date-picker] migrate document * fix: typo * docs: [slider] migrate document (#3287) * docs: migrate documents (#3290) * docs: migrate-datetime-picker * docs: migrate descriptions * docs: migrate dialog * docs: migrate divider * docs: migrate drawer * docs: migrate drapdown * docs: fix drapdown * docs: migrate empty * docs: migrate form * docs: add scoped for style * docs: simplify toRefs * chore: update doc (#3297) * chore: update doc * chore: update doc * chore: update doc * feat(docs): migrate documentations from infinite-scroll to page-header (#3303) - Update docs accordingly - Update CodePen icon to match style - Update component name to match others * docs: migrate documentions (#3293) migrate list: * image * popover * scrollbar * radio * rate * skeleton * select * select-v2 * reault * progress * pagination * chore: update doc (#3305) Co-authored-by: 0song <0song@gmail.com> * Fix broken pipeline * chore: update demo plugin * website perfection * fix hydration bug * docs: update guide (#3342) * WIP docs * docs: update docs * add dark mode * make dev fetch components from local instead of node_modules Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: 三咲智子 <sxzz@sxzz.moe> * fix(docs): fix codepen code example issue (#3380) * fix(docs): fix codepen code example issue - Add lang="ts" for all example files - Fix codepen import error * revert changes in resource.vue * feat(docs): complete crowdin integration (#3408) * Update mds for preparing the integration script * deprecate old website * update sponsors and even handler for resize * update build script for preview * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * update deploy script and some bugs * Fix existing issue * chore(project): add dev preview workflow * chore(project): rename dev to staging * update the size of toc * update staging-preview script * update preview scripts * enable website build for preview * fix build error * final commitment for update the details * remove azure pipeline * move docs ignores into docs and update date Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com>
122 lines
4.7 KiB
Markdown
122 lines
4.7 KiB
Markdown
# Layout
|
|
|
|
Quickly and easily create layouts with the basic 24-column.
|
|
|
|
:::tip
|
|
|
|
The component uses flex layout by default, no need to set `type="flex"` manually.
|
|
|
|
Please note that the parent container should avoid using `inline` related styles,
|
|
which will cause the component to not fill up its width.
|
|
|
|
:::
|
|
|
|
## Basic layout
|
|
|
|
Create basic grid layout using columns.
|
|
|
|
:::demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
|
|
|
|
layout/basic-layout
|
|
|
|
:::
|
|
|
|
## Column spacing
|
|
|
|
Column spacing is supported.
|
|
|
|
:::demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
|
|
|
|
layout/column-spacing
|
|
|
|
:::
|
|
|
|
## Hybrid layout
|
|
|
|
Form a more complex hybrid layout by combining the basic 1/24 columns.
|
|
|
|
:::demo
|
|
|
|
layout/hybrid-layout
|
|
|
|
:::
|
|
|
|
## Column offset
|
|
|
|
You can specify column offsets.
|
|
|
|
:::demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
|
|
|
|
layout/column-offset
|
|
|
|
:::
|
|
|
|
## Alignment
|
|
|
|
Default use the flex layout to make flexible alignment of columns.
|
|
|
|
:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
|
|
|
layout/alignment
|
|
|
|
:::
|
|
|
|
## Responsive Layout
|
|
|
|
Taking example by Bootstrap's responsive design, five breakpoints are preset:
|
|
xs, sm, md, lg and xl.
|
|
|
|
:::demo
|
|
|
|
layout/responsive-layout
|
|
|
|
:::
|
|
|
|
## Utility classes for hiding elements
|
|
|
|
Additionally, Element Plus provides a series of classes for hiding elements under
|
|
certain conditions. These classes can be added to any DOM elements or custom components.
|
|
You need to import the following CSS file to use these classes:
|
|
|
|
```js
|
|
import 'element-plus/lib/theme-chalk/display.css'
|
|
```
|
|
|
|
The classes are:
|
|
|
|
- `hidden-xs-only` - hide when on extra small viewports only
|
|
- `hidden-sm-only` - hide when on small viewports and down
|
|
- `hidden-sm-and-down` - hide when on small viewports and down
|
|
- `hidden-sm-and-up` - hide when on small viewports and up
|
|
- `hidden-md-only` - hide when on medium viewports only
|
|
- `hidden-md-and-down` - hide when on medium viewports and down
|
|
- `hidden-md-and-up` - hide when on medium viewports and up
|
|
- `hidden-lg-only` - hide when on large viewports only
|
|
- `hidden-lg-and-down` - hide when on large viewports and down
|
|
- `hidden-lg-and-up` - hide when on large viewports and up
|
|
- `hidden-xl-only` - hide when on extra large viewports only
|
|
|
|
## Row Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
| --------- | ----------------------------------- | ------ | ------------------------------------------- | ------- |
|
|
| gutter | grid spacing | number | — | 0 |
|
|
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
|
|
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
|
|
| tag | custom element tag | string | \* | div |
|
|
|
|
## Col Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
| --------- | --------------------------------------------------- | ----------------------------------------- | --------------- | ------- |
|
|
| span | number of column the grid spans | number | — | 24 |
|
|
| offset | number of spacing on the left side of the grid | number | — | 0 |
|
|
| push | number of columns that grid moves to the right | number | — | 0 |
|
|
| pull | number of columns that grid moves to the left | number | — | 0 |
|
|
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
|
| tag | custom element tag | string | \* | div |
|