mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +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>
This commit is contained in:
92
docs/examples/container/basic.vue
Normal file
92
docs/examples/container/basic.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<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>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-header,
|
||||
.el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
115
docs/examples/container/example.vue
Normal file
115
docs/examples/container/example.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-container style="height: 500px; border: 1px solid #eee">
|
||||
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-sub-menu index="1">
|
||||
<template #title
|
||||
><i class="el-icon-message"></i>Navigator One</template
|
||||
>
|
||||
<el-menu-item-group>
|
||||
<template #title>Group 1</template>
|
||||
<el-menu-item index="1-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="1-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="1-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-sub-menu index="1-4">
|
||||
<template #title>Option4</template>
|
||||
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="2">
|
||||
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
|
||||
<el-menu-item-group>
|
||||
<template #title>Group 1</template>
|
||||
<el-menu-item index="2-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="2-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="2-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-sub-menu index="2-4">
|
||||
<template #title>Option 4</template>
|
||||
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="3">
|
||||
<template #title
|
||||
><i class="el-icon-setting"></i>Navigator Three</template
|
||||
>
|
||||
<el-menu-item-group>
|
||||
<template #title>Group 1</template>
|
||||
<el-menu-item index="3-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="3-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="3-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-sub-menu index="3-4">
|
||||
<template #title>Option 4</template>
|
||||
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: right; font-size: 12px">
|
||||
<el-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>View</el-dropdown-item>
|
||||
<el-dropdown-item>Add</el-dropdown-item>
|
||||
<el-dropdown-item>Delete</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span>Tom</span>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="date" label="Date" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="Name" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="Address"> </el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
}
|
||||
|
||||
const tableData = ref(Array(20).fill(item))
|
||||
|
||||
return {
|
||||
tableData,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user