YPerf
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(container): Optimize Container's docs and demo (#812)

This commit is contained in:
申君健 2023-11-15 10:14:12 +08:00 committed by GitHub
parent 19d6c520f7
commit dcb0ed51e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 81 additions and 838 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
examples/sites/demos/pc/app/container/basic-usage-composition-api.vue
View File

@ -1,29 +1,43 @@
<template>
<div class="demo-container coBox1">
<tiny-container>
<div class="demo-container coBox7">
<tiny-button-group :data="patternData" v-model="myPattern"></tiny-button-group>
<tiny-container :pattern="myPattern">
<tiny-layout> Main </tiny-layout>
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
</script>
import { ref } from 'vue'
import { Container as TinyContainer, Layout as TinyLayout, ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
const myPattern = ref('default')
const patternData = ref([
{ text: '默认:default', value: 'default' },
{ text: '经典:classic', value: 'classic' },
{ text: '简约:simple', value: 'simple' },
{ text: '时尚:fashion', value: 'fashion' },
{ text: '传奇:legend', value: 'legend' }
])
</script>
<style>
.demo-container .tiny-container {
height: 200px;
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
margin-top: 24px;
}
.demo-container .tiny-container .tiny-container__header {
@ -33,7 +47,7 @@ import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}

34
examples/sites/demos/pc/app/container/basic-usage.vue
View File

@ -1,35 +1,53 @@
<template>
<div class="demo-container coBox1">
<tiny-container>
<div class="demo-container coBox7">
<tiny-button-group :data="patternData" v-model="myPattern"></tiny-button-group>
<tiny-container :pattern="myPattern">
<tiny-layout> Main </tiny-layout>
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
import { Container, Layout, ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
TinyLayout: Layout,
TinyButtonGroup: ButtonGroup
},
data() {
return {
myPattern: 'default',
patternData: [
{ text: '默认:default', value: 'default' },
{ text: '经典:classic', value: 'classic' },
{ text: '简约:simple', value: 'simple' },
{ text: '时尚:fashion', value: 'fashion' },
{ text: '传奇:legend', value: 'legend' }
]
}
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
margin-top: 24px;
}
.demo-container .tiny-container .tiny-container__header {
@ -39,7 +57,7 @@ export default {
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
@ -55,4 +73,4 @@ export default {
border: 3px solid #ffffff;
color: #84a18a;
}
</style>
</style>

65
examples/sites/demos/pc/app/container/classic-composition-api.vue
View File

@ -1,65 +0,0 @@
<template>
<div class="demo-container coBox7">
<tiny-container :pattern="pattern">
<template #header>
<tiny-layout>header</tiny-layout>
</template>
<template #aside>
<tiny-layout>aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
const pattern = ref('classic')
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
.demo-container .tiny-container .main .changePattern .tiny-radio {
color: #a3a355;
font-size: 16px;
margin: 0 7px;
}
</style>

16
examples/sites/demos/pc/app/container/classic.spec.js
View File

@ -1,16 +0,0 @@
import { test, expect } from '@playwright/test'
test('经典布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#simple')
await page.getByText('经典布局').click()
await page.locator('#preview').getByText('header').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
await page.getByText('Main').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
'style',
'top: 60px; left: 0px; bottom: 60px;'
)
await page.locator('#preview').getByText('footer').click()
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute('style', 'height: 60px; left: 0px;')
})

72
examples/sites/demos/pc/app/container/classic.vue
View File

@ -1,72 +0,0 @@
<template>
<div class="demo-container coBox7">
<tiny-container :pattern="pattern">
<template #header>
<tiny-layout>header</tiny-layout>
</template>
<template #aside>
<tiny-layout>aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
},
data() {
return {
pattern: 'classic'
}
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
.demo-container .tiny-container .main .changePattern .tiny-radio {
color: #a3a355;
font-size: 16px;
margin: 0 7px;
}
</style>

93
examples/sites/demos/pc/app/container/custom-container-composition-api.vue
View File

@ -1,93 +0,0 @@
<template>
<div class="demo-container coBox7">
<tiny-container :pattern="myPattern">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>
Main
<br />
<div v-for="item in patternData" :key="item.value" class="select-item">
<input type="radio" :id="item.value" name="pattern" :value="item.value" v-model="myPattern" />
<label :for="item.value">{{ item.title }}</label>
</div>
</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
const mode = ref('pc')
const myPattern = ref('default')
const patternData = ref([
{
title: '默认:default',
value: 'default'
},
{
title: '经典:classic',
value: 'classic'
},
{
title: '简约:simple',
value: 'simple'
},
{
title: '时尚:fashion',
value: 'fashion'
},
{
title: '传奇:legend',
value: 'legend'
}
])
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
.demo-container .tiny-container .main .changePattern .tiny-radio {
color: #a3a355;
font-size: 16px;
margin: 0 7px;
}
</style>

41
examples/sites/demos/pc/app/container/custom-container.spec.js
View File

@ -1,41 +0,0 @@
import { test, expect } from '@playwright/test'
test('版型切换', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#simple')
await page.getByText('版型切换').click()
await page.getByLabel('默认:default').check()
await expect(page.locator('.tiny-container > div').first(1)).toHaveAttribute('style', 'height: 60px;')
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 0px;'
)
await page.getByLabel('经典:classic').check()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
'style',
'top: 60px; left: 0px; bottom: 60px;'
)
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute('style', 'height: 60px; left: 0px;')
await page.getByLabel('简约:simple').check()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'top: 0px; width: 200px;')
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
'style',
'top: 0px; left: 200px; bottom: 0px;'
)
await page.getByLabel('时尚:fashion').check()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px; left: 200px;')
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 0px; width: 200px;')
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 0px;'
)
await page.getByLabel('传奇:legend').check()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 60px; width: 200px;')
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 60px;'
)
await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 60px; left: 200px;')
})

102
examples/sites/demos/pc/app/container/custom-container.vue
View File

@ -1,102 +0,0 @@
<template>
<div class="demo-container coBox7">
<tiny-container :pattern="myPattern">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>
Main
<br />
<div v-for="item in patternData" :key="item.value" class="select-item">
<input type="radio" :id="item.value" name="pattern" :value="item.value" v-model="myPattern" />
<label :for="item.value">{{ item.title }}</label>
</div>
</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
},
data() {
return {
mode: 'pc',
myPattern: 'default',
patternData: [
{
title: '默认:default',
value: 'default'
},
{
title: '经典:classic',
value: 'classic'
},
{
title: '简约:simple',
value: 'simple'
},
{
title: '时尚:fashion',
value: 'fashion'
},
{
title: '传奇:legend',
value: 'legend'
}
]
}
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
.demo-container .tiny-container .main .changePattern .tiny-radio {
color: #a3a355;
font-size: 16px;
margin: 0 7px;
}
</style>

10
examples/sites/demos/pc/app/container/custom-with-height-composition-api.vue
View File

@ -7,14 +7,14 @@
:header-height="headerHeight"
>
<template #header>
<tiny-layout>header-height：80</tiny-layout>
<tiny-layout>header-height：80px</tiny-layout>
</template>
<template #aside>
<tiny-layout>aside-width：200</tiny-layout>
<tiny-layout>aside-width：200px</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<tiny-layout>Main 自动填充空间</tiny-layout>
<template #footer>
<tiny-layout>footer-height：80</tiny-layout>
<tiny-layout>footer-height：80px</tiny-layout>
</template>
</tiny-container>
</div>
@ -32,7 +32,7 @@ const headerHeight = ref(80)
<style>
.demo-container .tiny-container {
height: 200px;
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;

12
examples/sites/demos/pc/app/container/custom-with-height.vue
View File

@ -7,14 +7,14 @@
:header-height="headerHeight"
>
<template #header>
<tiny-layout>header-height：80</tiny-layout>
<tiny-layout>header-height：80px</tiny-layout>
</template>
<template #aside>
<tiny-layout>aside-width：200</tiny-layout>
<tiny-layout>aside-width：200px</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<tiny-layout>Main 自动填充空间</tiny-layout>
<template #footer>
<tiny-layout>footer-height：80</tiny-layout>
<tiny-layout>footer-height：80px</tiny-layout>
</template>
</tiny-container>
</div>
@ -41,7 +41,7 @@ export default {
<style>
.demo-container .tiny-container {
height: 200px;
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;
@ -77,4 +77,4 @@ export default {
font-size: 16px;
margin: 0 7px;
}
</style>
</style>

51
examples/sites/demos/pc/app/container/fashion-composition-api.vue
View File

@ -1,51 +0,0 @@
<template>
<div class="demo-container coBox4">
<tiny-container pattern="fashion">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

16
examples/sites/demos/pc/app/container/fashion.spec.js
View File

@ -1,16 +0,0 @@
import { test, expect } from '@playwright/test'
test('时尚布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#classic')
await page.getByText('时尚布局').click()
await page.locator('#preview').getByText('Aside').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'top: 0px; width: 200px;')
await page.locator('#preview').getByText('Header').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px; left: 200px;')
await page.getByText('Main').click()
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 0px;'
)
})

58
examples/sites/demos/pc/app/container/fashion.vue
View File

@ -1,58 +0,0 @@
<template>
<div class="demo-container coBox4">
<tiny-container pattern="fashion">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

54
examples/sites/demos/pc/app/container/legend-composition-api.vue
View File

@ -1,54 +0,0 @@
<template>
<div class="demo-container coBox5">
<tiny-container pattern="legend">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

18
examples/sites/demos/pc/app/container/legend.spec.js
View File

@ -1,18 +0,0 @@
import { test, expect } from '@playwright/test'
test('传奇布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#fashionid')
await page.getByText('传奇布局').click()
await page.locator('#preview').getByText('Header').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
await page.locator('#preview').getByText('Aside').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 60px;')
await page.getByText('Main').click()
await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
'style',
'top: 60px; left: 200px; bottom: 60px;'
)
await page.locator('#preview').getByText('Footer').click()
await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 60px; left: 200px;')
})

61
examples/sites/demos/pc/app/container/legend.vue
View File

@ -1,61 +0,0 @@
<template>
<div class="demo-container coBox5">
<tiny-container pattern="legend">
<template #header>
<tiny-layout>Header</tiny-layout>
</template>
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
<template #footer>
<tiny-layout>Footer</tiny-layout>
</template>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

48
examples/sites/demos/pc/app/container/simple-composition-api.vue
View File

@ -1,48 +0,0 @@
<template>
<div class="demo-container coBox2">
<tiny-container pattern="simple">
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
</tiny-container>
</div>
</template>
<script setup lang="jsx">
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

14
examples/sites/demos/pc/app/container/simple.spec.js
View File

@ -1,14 +0,0 @@
import { test, expect } from '@playwright/test'
test('简约布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('container#basic-usage')
await page.getByText('简约布局').click()
await page.locator('#preview').getByText('Aside').click()
await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'top: 0px; width: 200px;')
await page.getByText('Main').click()
await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute(
'style',
'top: 0px; left: 200px; bottom: 0px;'
)
})

55
examples/sites/demos/pc/app/container/simple.vue
View File

@ -1,55 +0,0 @@
<template>
<div class="demo-container coBox2">
<tiny-container pattern="simple">
<template #aside>
<tiny-layout>Aside</tiny-layout>
</template>
<tiny-layout>Main</tiny-layout>
</tiny-container>
</div>
</template>
<script lang="jsx">
import { Container, Layout } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyLayout: Layout
}
}
</script>
<style>
.demo-container .tiny-container {
height: 200px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
}
.demo-container .tiny-container .tiny-container__header {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container .tiny-container__aside {
background-color: #ffecec;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container .tiny-container__main {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container .tiny-container__footer {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

2
examples/sites/demos/pc/app/container/webdoc/container.cn.md
View File

@ -4,4 +4,4 @@ title: Container 版型
# Container 版型
<div>用于布局的容器组件，方便快速搭建页面的版型。</div>
<div> 内置5种常见布局版型，方便快速搭建页面。</div>

69
examples/sites/demos/pc/app/container/webdoc/container.js
View File

@ -4,50 +4,25 @@ export default {
demos: [
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '默认布局', 'en-US': 'Default Layout' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '通过<code> pattern </code> 来设置版型组件的布局。',
'en-US': 'Set the layout of the template component with <code> pattern </code>.'
},
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'simple',
'name': { 'zh-CN': '简约布局', 'en-US': 'Simple Layout' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['simple.vue']
},
{
'demoId': 'classic',
'name': { 'zh-CN': '经典布局', 'en-US': 'Classic Layout' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['classic.vue']
},
{
'demoId': 'fashionid',
'name': { 'zh-CN': '时尚布局', 'en-US': 'Fashion Layout' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['fashion.vue']
},
{
'demoId': 'legend',
'name': { 'zh-CN': '传奇布局', 'en-US': 'Legendary Layout' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['legend.vue']
},
{
'demoId': 'custom-with-height',
'name': { 'zh-CN': '自定义宽度和高度', 'en-US': 'Custom width and height' },
'desc': {
'zh-CN':
'<p>Container 布局容器支持用户通过设置 <code>headerHeight</code>、<code>footerHeight</code>、<code>asideWidth</code> 等属性来控制 <code>header（头部区域）</code>、<code>footer（底部区域）</code> 的高度和 <code>aside(左侧区域)</code> 的宽度。<code>main（主体区域）</code> 的宽度和高度是自适应的。</p>\n',
'en-US':
'<p>Container layout container allows users to control <code>header by setting attributes such as <code>headerHeight</code>, <code>footerHeight</code>, and <code>asideWidth</code> (Header area)</code>, <code>footer (bottom area)</code>, and <code>aside (left area)</code>. The width and height of <code>main (main area)</code> are adaptive. </p>\n'
'zh-CN': `<p>
Container 布局容器支持用户通过设置 <code>headerHeight</code>、<code>footerHeight</code>、<code>asideWidth</code> 等属性来控制 <code>header（头部区域）</code>、<code>footer（底部区域）</code> 的高度和 <code>aside(左侧区域)</code> 的宽度。<code>main（主体区域）</code> 的宽度和高度是自适应的。
</p>`,
'en-US': `<p>
Container layout container allows users to control <code>header by setting attributes such as <code>headerHeight</code>, <code>footerHeight</code>, and <code>asideWidth</code> (Header area)</code>, <code>footer (bottom area)</code>, and <code>aside (left area)</code>. The width and height of <code>main (main area)</code> are adaptive.
</p>`
},
'codeFiles': ['custom-with-height.vue']
},
{
'demoId': 'custom-container',
'name': { 'zh-CN': '版型切换', 'en-US': 'Switch' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['custom-container.vue']
}
],
apis: [
@ -57,29 +32,29 @@ export default {
'properties': [
{
'name': 'aside-width',
'type': 'number , string',
'defaultValue': '该属性的默认值为 200',
'type': 'number | string',
'defaultValue': '200',
'desc': { 'zh-CN': '左侧宽度', 'en-US': 'Left width' },
'demoId': 'custom-with-height'
},
{
'name': 'footer-height',
'type': 'number , string',
'defaultValue': '该属性的默认值为 60',
'type': 'number | string',
'defaultValue': '60',
'desc': { 'zh-CN': '底部高度', 'en-US': 'Height at the bottom' },
'demoId': 'custom-with-height'
},
{
'name': 'header-height',
'type': 'number , string',
'defaultValue': '该属性的默认值为 60',
'type': 'number | string',
'defaultValue': '60',
'desc': { 'zh-CN': '头部高度', 'en-US': 'Head height' },
'demoId': 'custom-with-height'
},
{
'name': 'pattern',
'type': 'string',
'defaultValue': '该属性的默认值为 default',
'defaultValue': 'default',
'desc': {
'zh-CN': '版型类型;该属性的可选值为 default / simple / legend / classic / fashion',
'en-US':
@ -94,28 +69,28 @@ export default {
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '主要内容', 'en-US': 'Main Content' },
'desc': { 'zh-CN': '主要内容插槽', 'en-US': 'Main Content Slot' },
'demoId': 'basic-usage'
},
{
'name': 'header',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '头部内容', 'en-US': 'Header Content' },
'desc': { 'zh-CN': '头部内容插槽', 'en-US': 'Header Content Slot' },
'demoId': 'basic-usage'
},
{
'name': 'aside',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '侧边内容', 'en-US': 'Side Content' },
'desc': { 'zh-CN': '侧边内容插槽', 'en-US': 'Side Content Slot' },
'demoId': 'basic-usage'
},
{
'name': 'footer',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '底部内容', 'en-US': 'Bottom Content' },
'desc': { 'zh-CN': '底部内容插槽', 'en-US': 'Bottom Content Slot' },
'demoId': 'classic'
}
]