mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 01:11:25 +08:00

epic(website): refactor website (#3426 )

* 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>

2021-09-17 00:18:50 +08:00

4.7 KiB

Raw Blame History

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:

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

4.7 KiB Raw Blame History