Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 9c9f75e3 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
浏览文件
操作

新增CSS示例

上级 bfebd74a
隐藏空白更改
内联 并排
Showing with 2078 addition and 2 deletion
pages.json
浏览文件 @ 9c9f75e3
......@@ -137,7 +137,265 @@
"style": {
"navigationBarTitleText": "退出应用"
}
}
},
{
"path": "pages/tabBar/CSS/CSS",
"style": {
"navigationBarTitleText": "CSS"
}
},
{
"path": "pages/CSS/background/background-color",
"style": {
"navigationBarTitleText": "background-color"
}
},
{
"path": "pages/CSS/background/background-image",
"style": {
"navigationBarTitleText": "background-image"
}
},
{
"path": "pages/CSS/border/border-color",
"style": {
"navigationBarTitleText": "border-color"
}
},
{
"path": "pages/CSS/border/border-radius",
"style": {
"navigationBarTitleText": "border-radius"
}
},
{
"path": "pages/CSS/border/border-style",
"style": {
"navigationBarTitleText": "border-style"
}
},
{
"path": "pages/CSS/border/border-width",
"style": {
"navigationBarTitleText": "border-width"
}
},
{
"path": "pages/CSS/border/border",
"style": {
"navigationBarTitleText": "border"
}
},
{
"path": "pages/CSS/box-shadow/box-shadow",
"style": {
"navigationBarTitleText": "box-shadow"
}
},
{
"path": "pages/CSS/flex/align-content",
"style": {
"navigationBarTitleText": "align-content"
}
},
{
"path": "pages/CSS/flex/align-items",
"style": {
"navigationBarTitleText": "align-items"
}
},
{
"path": "pages/CSS/flex/flex-basis",
"style": {
"navigationBarTitleText": "flex-basis"
}
},
{
"path": "pages/CSS/flex/flex-direction",
"style": {
"navigationBarTitleText": "flex-direction"
}
},
{
"path": "pages/CSS/flex/flex-flow",
"style": {
"navigationBarTitleText": "flex-flow"
}
},
{
"path": "pages/CSS/flex/flex-grow",
"style": {
"navigationBarTitleText": "flex-grow"
}
},
{
"path": "pages/CSS/flex/flex-shrink",
"style": {
"navigationBarTitleText": "flex-shrink"
}
},
{
"path": "pages/CSS/flex/flex",
"style": {
"navigationBarTitleText": "flex"
}
},
{
"path": "pages/CSS/flex/justify-content",
"style": {
"navigationBarTitleText": "justify-content"
}
},
{
"path": "pages/CSS/layout/height",
"style": {
"navigationBarTitleText": "height"
}
},
{
"path": "pages/CSS/layout/max-height",
"style": {
"navigationBarTitleText": "max-height"
}
},
{
"path": "pages/CSS/layout/max-width",
"style": {
"navigationBarTitleText": "max-width"
}
},
{
"path": "pages/CSS/layout/min-height",
"style": {
"navigationBarTitleText": "min-height"
}
},
{
"path": "pages/CSS/layout/min-width",
"style": {
"navigationBarTitleText": "min-width"
}
},
{
"path": "pages/CSS/layout/position",
"style": {
"navigationBarTitleText": "position"
}
},
{
"path": "pages/CSS/layout/width",
"style": {
"navigationBarTitleText": "width"
}
},
{
"path": "pages/CSS/margin/margin-bottom",
"style": {
"navigationBarTitleText": "margin-bottom"
}
},
{
"path": "pages/CSS/margin/margin-left",
"style": {
"navigationBarTitleText": "margin-left"
}
},
{
"path": "pages/CSS/margin/margin-right",
"style": {
"navigationBarTitleText": "margin-right"
}
},
{
"path": "pages/CSS/margin/margin-top",
"style": {
"navigationBarTitleText": "margin-top"
}
},
{
"path": "pages/CSS/margin/margin",
"style": {
"navigationBarTitleText": "margin"
}
},
{
"path": "pages/CSS/padding/padding-bottom",
"style": {
"navigationBarTitleText": "padding-bottom"
}
},
{
"path": "pages/CSS/padding/padding-left",
"style": {
"navigationBarTitleText": "padding-left"
}
},
{
"path": "pages/CSS/padding/padding-right",
"style": {
"navigationBarTitleText": "padding-right"
}
},
{
"path": "pages/CSS/padding/padding-top",
"style": {
"navigationBarTitleText": "padding-top"
}
},
{
"path": "pages/CSS/padding/padding",
"style": {
"navigationBarTitleText": "padding"
}
},
{
"path": "pages/CSS/text/color",
"style": {
"navigationBarTitleText": "color"
}
},
{
"path": "pages/CSS/text/font-family",
"style": {
"navigationBarTitleText": "font-family"
}
},
{
"path": "pages/CSS/text/font-size",
"style": {
"navigationBarTitleText": "font-size"
}
},
{
"path": "pages/CSS/text/font-style",
"style": {
"navigationBarTitleText": "font-style"
}
},
{
"path": "pages/CSS/text/font-weight",
"style": {
"navigationBarTitleText": "font-weight"
}
},
{
"path": "pages/CSS/text/line-height",
"style": {
"navigationBarTitleText": "line-height"
}
},
{
"path": "pages/CSS/text/text-align",
"style": {
"navigationBarTitleText": "text-align"
}
},
{
"path": "pages/CSS/text/text-decoration-line",
"style": {
"navigationBarTitleText": "text-decoration-line"
}
}
],
"globalStyle": {
"pageOrientation": "portrait",
......@@ -169,7 +427,13 @@
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png",
"text": "接口"
}
},
{
"pagePath": "pages/tabBar/CSS/CSS",
"iconPath": "static/extui.png",
"selectedIconPath": "static/extuiHL.png",
"text": "CSS"
}
]
},
"uniIdRouter": {},
......
pages/CSS/background/background-color.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>background-color: red</text>
<view class="common" style="background-color: red;"></view>
</view>
<view>
<text>background-color: #ff0000</text>
<view class="common" style="background-color: #ff0000;"></view>
</view>
<view>
<text>background-color: #f00</text>
<view class="common" style="background-color: #f00;"></view>
</view>
<view>
<text>background-color: rgb(255, 0, 0)</text>
<view class="common" style="background-color: rgb(255, 0, 0);"></view>
</view>
<view>
<text>background-color: rgba(255, 0, 0, 0.5)</text>
<view class="common" style="background-color: rgba(255, 0, 0, 0.5);"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
}
</style>
\ No newline at end of file
pages/CSS/background/background-image.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>background-image: linear-gradient(to right, red, yellow)</text>
<view class="common" style="background-image: linear-gradient(to right, red, yellow);"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
}
</style>
\ No newline at end of file
pages/CSS/border/border-color.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>border-color: red</text>
<view class="common" style="border-width: 10rpx;border-color: red;"></view>
</view>
<view>
<text>border-left-color: red</text>
<view class="common" style="border-left-width: 10rpx;border-left-color: red;"></view>
</view>
<view>
<text>border-top-color: green</text>
<view class="common" style="border-top-width: 10rpx;border-top-color: green;"></view>
</view>
<view>
<text>border-right-color: yellow</text>
<view class="common" style="border-right-width: 10rpx;border-right-color: yellow;"></view>
</view>
<view>
<text>border-bottom-color: blue</text>
<view class="common" style="border-bottom-width: 10rpx;border-bottom-color: blue;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/border/border-radius.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>border-radius: 20rpx</text>
<view class="common" style="border-radius: 20rpx;"></view>
</view>
<view>
<text>border-top-left-radius: 20rpx</text>
<view class="common" style="border-top-left-radius: 20rpx;"></view>
</view>
<view>
<text>border-top-right-radius: 20rpx</text>
<view class="common" style="border-top-right-radius: 20rpx;"></view>
</view>
<view>
<text>border-bottom-left-radius: 20rpx</text>
<view class="common" style="border-bottom-left-radius: 20rpx;"></view>
</view>
<view>
<text>border-bottom-right-radius: 20rpx</text>
<view class="common" style="border-bottom-right-radius: 20rpx;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/border/border-style.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>border-style: dashed</text>
<view class="common" style="border-width: 10rpx;border-style: dashed;"></view>
</view>
<view>
<text>border-left-style: dashed</text>
<view class="common" style="border-left-width: 10rpx;border-left-style: dashed;"></view>
</view>
<view>
<text>border-top-style: dashed</text>
<view class="common" style="border-top-width: 10rpx;border-top-style: dashed;"></view>
</view>
<view>
<text>border-right-style: dotted</text>
<view class="common" style="border-right-width: 10rpx;border-right-style: dotted;"></view>
</view>
<view>
<text>border-bottom-style: dotted</text>
<view class="common" style="border-bottom-width: 10rpx;border-bottom-style: dotted;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/border/border-width.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>border-width: 10rpx</text>
<view class="common" style="border-width: 10rpx;"></view>
</view>
<view>
<text>border-left-width: 10rpx</text>
<view class="common" style="border-left-width: 10rpx;"></view>
</view>
<view>
<text>border-top-width: 20rpx</text>
<view class="common" style="border-top-width: 20rpx;"></view>
</view>
<view>
<text>border-right-width: 30rpx</text>
<view class="common" style="border-right-width: 30rpx;"></view>
</view>
<view>
<text>border-bottom-width: 40rpx</text>
<view class="common" style="border-bottom-width: 40rpx;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/border/border.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>border: 10rpx dotted blue</text>
<view class="common" style="border: 10rpx dotted blue;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/box-shadow/box-shadow.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>box-shadow: 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 10px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: -5px -5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 10px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset -5px -5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 250rpx;
height: 250rpx;
background-color: red;
}
</style>
\ No newline at end of file
pages/CSS/flex/align-content.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>align-content: center</text>
<view class="common" style="align-content: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: flex-start</text>
<view class="common" style="align-content: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: flex-end</text>
<view class="common" style="align-content: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: space-between</text>
<view class="common" style="align-content: space-between;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: space-around</text>
<view class="common" style="align-content: space-around;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: stretch</text>
<view class="common" style="align-content: stretch;">
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-flow: row wrap;
}
</style>
\ No newline at end of file
pages/CSS/flex/align-items.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>align-items: center</text>
<view class="common" style="align-items: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-items: flex-start</text>
<view class="common" style="align-items: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-items: flex-end</text>
<view class="common" style="align-items: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-items: stretch</text>
<view class="common" style="align-items: stretch;">
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex-basis.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-basis</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex-basis: 300rpx;">
<text>300rpx</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex-direction.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-direction: row</text>
<view class="common" style="flex-direction: row;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex-direction: row-reverse</text>
<view class="common" style="flex-direction: row-reverse;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex-direction: column</text>
<view class="common" style="flex-direction: column;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex-direction: column-reverse</text>
<view class="common" style="flex-direction: column-reverse;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex-flow.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-flow: row nowrap</text>
<view class="common" style="flex-flow: row nowrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<view>
<text>flex-flow: row wrap</text>
<view class="common" style="flex-flow: row wrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<view>
<text>flex-flow: column nowrap</text>
<view class="common" style="flex-flow: column nowrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<view>
<text>flex-flow: column wrap</text>
<view class="common" style="flex-flow: column wrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex-grow.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-grow</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="background-color: red;flex-grow: 0.5;">
<text>0.5</text>
</view>
<view class="common" style="background-color: green;flex-grow: 1;">
<text>1</text>
</view>
<view class="common" style="background-color: blue;flex-grow: 2">
<text>2</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex-shrink.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-shrink</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="background-color: red;flex-shrink: 1;">
<text>1</text>
</view>
<view class="common" style="background-color: green;flex-shrink: 2;">
<text>2</text>
</view>
<view class="common" style="background-color: blue;flex-shrink: 3;">
<text>3</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 250rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/flex/flex.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>flex: 0</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="min-width: 50rpx;flex: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex: 1</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: 1"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex: auto</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: auto;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex: none</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: none;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
}
</style>
\ No newline at end of file
pages/CSS/flex/justify-content.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>justify-content: center</text>
<view class="common" style="justify-content: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: flex-start</text>
<view class="common" style="justify-content: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: flex-end</text>
<view class="common" style="justify-content: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: space-between</text>
<view class="common" style="justify-content: space-between;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: space-around</text>
<view class="common" style="justify-content: space-around;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
\ No newline at end of file
pages/CSS/layout/height.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>height: 500rpx</text>
<view class="common" style="height: 500rpx;"></view>
</view>
<view style="height: 500rpx;">
<text>height: 50%</text>
<view class="common" style="height: 50%;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
background-color: red;
}
</style>
\ No newline at end of file
pages/CSS/layout/max-height.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>max-height: 500rpx</text>
<view class="common" style="max-height: 500rpx;">
<text>height: 1000rpx</text>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 1000rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/layout/max-width.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>max-width: 500rpx</text>
<view class="common" style="max-width: 500rpx;">
<text>width: 1000rpx</text>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 1000rpx;
height: 500rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/layout/min-height.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>min-height: 500rpx</text>
<view class="common" style="min-height: 500rpx;">
<text>height: 100rpx</text>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 100rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/layout/min-width.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>min-width: 500rpx</text>
<view class="common" style="min-width: 500rpx;">
<text>width: 100rpx</text>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 500rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/layout/position.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>position: relative</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: relative;">
<text>relative</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
<view>
<text>position: absolute</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: absolute;">
<text>absolute</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
<view>
<text>position: fixed</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: fixed;">
<text>fixed</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: green;
top: 50rpx;
left: 50rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/CSS/layout/width.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>width: 500rpx</text>
<view class="common" style="width: 500rpx;"></view>
</view>
<view style="width: 500rpx;">
<text>width: 50%</text>
<view class="common" style="width: 50%;"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 500rpx;
background-color: red;
}
</style>
\ No newline at end of file
pages/CSS/margin/margin-bottom.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>margin-bottom: 50rpx</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-bottom: 50rpx;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
<view>
<text>margin-bottom: 10%</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-bottom: 10%;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 100rpx;
background-color: green;
}
</style>
\ No newline at end of file
pages/CSS/margin/margin-left.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>margin-left: 50rpx</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-left: 50rpx;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
<view>
<text>margin-left: 10%</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-left: 10%;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 100rpx;
background-color: green;
}
</style>
\ No newline at end of file
pages/CSS/margin/margin-right.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>margin-right: 50rpx</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-right: 50rpx;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
<view>
<text>margin-right: 10%</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-right: 10%;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 100rpx;
background-color: green;
}
</style>
\ No newline at end of file
pages/CSS/margin/margin-top.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>margin-top: 50rpx</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-top: 50rpx;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
<view>
<text>margin-top: 10%</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin-top: 10%;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 100rpx;
background-color: green;
}
</style>
\ No newline at end of file
pages/CSS/margin/margin.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>margin: 50rpx</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin: 50rpx;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
<view>
<text>margin: 10%</text>
<view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view class="common" style="background-color: red;"></view>
<view class="common" style="margin: 10%;"></view>
<view class="common" style="background-color: blue;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
height: 100rpx;
background-color: green;
}
</style>
\ No newline at end of file
pages/CSS/padding/padding-bottom.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>padding-bottom: 50rpx</text>
<view class="common" style="padding-bottom: 50rpx;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
<view style="width: 500rpx;">
<text>padding-bottom: 10%</text>
<view class="common" style="padding-bottom: 10%;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/padding/padding-left.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>padding-left: 50rpx</text>
<view class="common" style="padding-left: 50rpx;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
<view style="width: 500rpx;">
<text>padding-left: 10%</text>
<view class="common" style="padding-left: 10%;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/padding/padding-right.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>padding-right: 50rpx</text>
<view class="common" style="padding-right: 50rpx;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
<view style="width: 500rpx;">
<text>padding-right: 10%</text>
<view class="common" style="padding-right: 10%;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/padding/padding-top.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>padding-top: 50rpx</text>
<view class="common" style="padding-top: 50rpx;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
<view style="width: 500rpx;">
<text>padding-top: 10%</text>
<view class="common" style="padding-top: 10%;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/padding/padding.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view>
<text>padding: 50rpx</text>
<view class="common" style="padding: 50rpx;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
<view style="width: 500rpx;">
<text>padding: 10%</text>
<view class="common" style="padding: 10%;">
<view style="flex-grow: 1;background-color: red;"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
pages/CSS/text/color.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="color: rgb(255, 0, 0);">color: rgb(255, 0, 0)</text>
<text class="common" style="color: rgba(255, 0, 0, 0.5);">color: rgba(255, 0, 0, 0.5)</text>
<text class="common" style="color: #ff0000;">color: #ff0000</text>
<text class="common" style="color: #f00;">color: #f00</text>
<text class="common" style="color: red;">color: red</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/font-family.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="font-family: monospace;">font-family: monospace</text>
<text class="common" style="font-family: cursive;">font-family: cursive</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/font-size.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text style="font-size: 30px;">font-size: 30px</text>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
pages/CSS/text/font-style.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="font-style: italic;">font-style: italic</text>
<text class="common" style="font-style: normal;">font-style: normal</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/font-weight.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="font-weight: normal;">font-weight: normal</text>
<text class="common" style="font-weight: bold;">font-weight: bold</text>
<text class="common" style="font-weight: 400;">font-weight: 400</text>
<text class="common" style="font-weight: 700;">font-weight: 700</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/line-height.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common">CSS测试 CSS测试 CSS测试</text>
<text class="common" style="line-height: 150rpx;">line-height: 150rpx</text>
<text class="common">CSS测试 CSS测试 CSS测试</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/text-align.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="text-align: left;">text-align: left</text>
<text class="common" style="text-align: center;">text-align: center</text>
<text class="common" style="text-align: right;">text-align: right</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
font-size: 20px;
}
</style>
\ No newline at end of file
pages/CSS/text/text-decoration-line.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="text-decoration-line: underline;">text-decoration-line: underline</text>
<text class="common" style="text-decoration-line: line-through;">text-decoration-line: line-through</text>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
font-size: 20px;
}
</style>
\ No newline at end of file
pages/tabBar/CSS/CSS.uvue 0 → 100644
浏览文件 @ 9c9f75e3
<template>
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/extuiIndex.png"></image>
</view>
<view class="uni-hello-text">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
type Page = {
name : string,
enable ?: boolean,
url ?: string
}
type ListItem = {
id : string,
name : string,
open : boolean,
pages : Page[],
url ?: string,
enable ?: boolean
}
export default {
data() {
return {
list: [{
id: 'background',
name: 'background',
open: false,
pages: [
{
name: 'background-color',
enable: true,
url: '/pages/CSS/background/background-color'
},
{
name: 'background-image',
enable: true,
url: '/pages/CSS/background/background-image'
}
] as Page[]
}, {
id: 'border',
name: 'border',
open: false,
pages: [
{
name: 'border',
enable: true,
url: 'pages/CSS/border/border'
},
{
name: 'border-width',
enable: true,
url: 'pages/CSS/border/border-width'
},
{
name: 'border-style',
enable: true,
url: 'pages/CSS/border/border-style'
},
{
name: 'border-color',
enable: true,
url: 'pages/CSS/border/border-color'
},
{
name: 'border-radius',
enable: true,
url: 'pages/CSS/border/border-radius'
}
] as Page[]
}, {
id: 'box-shadow',
name: 'box-shadow',
open: false,
pages: [
{
name: 'box-shadow',
enable: true,
url: 'pages/CSS/box-shadow/box-shadow'
},
] as Page[]
}, {
id: 'flex',
name: 'flex',
open: false,
pages: [
{
name: 'align-content',
enable: true,
url: 'pages/CSS/flex/align-content'
},
{
name: 'align-items',
enable: true,
url: 'pages/CSS/flex/align-items'
},
{
name: 'flex-basis',
enable: true,
url: 'pages/CSS/flex/flex-basis'
},
{
name: 'flex-direction',
enable: true,
url: 'pages/CSS/flex/flex-direction'
},
{
name: 'flex-flow',
enable: true,
url: 'pages/CSS/flex/flex-flow'
},
{
name: 'flex-grow',
enable: true,
url: 'pages/CSS/flex/flex-grow'
},
{
name: 'flex-shrink',
enable: true,
url: 'pages/CSS/flex/flex-shrink'
},
{
name: 'flex',
enable: true,
url: 'pages/CSS/flex/flex'
},
{
name: 'justify-content',
enable: true,
url: 'pages/CSS/flex/justify-content'
}
] as Page[]
}, {
id: 'layout',
name: 'layout',
open: false,
pages: [
{
name: 'height',
enable: true,
url: 'pages/CSS/layout/height'
},
{
name: 'max-height',
enable: true,
url: 'pages/CSS/layout/max-height'
},
{
name: 'max-width',
enable: true,
url: 'pages/CSS/layout/max-width'
},
{
name: 'min-height',
enable: true,
url: 'pages/CSS/layout/min-height'
},
{
name: 'min-width',
enable: true,
url: 'pages/CSS/layout/min-width'
},
{
name: 'position',
enable: true,
url: 'pages/CSS/layout/position'
},
{
name: 'width',
enable: true,
url: 'pages/CSS/layout/width'
}
] as Page[]
}, {
id: 'margin',
name: 'margin',
open: false,
pages: [
{
name: 'margin-bottom',
enable: true,
url: 'pages/CSS/margin/margin-bottom'
},
{
name: 'margin-left',
enable: true,
url: 'pages/CSS/margin/margin-left'
},
{
name: 'margin-right',
enable: true,
url: 'pages/CSS/margin/margin-right'
},
{
name: 'margin-top',
enable: true,
url: 'pages/CSS/margin/margin-top'
}, {
name: 'margin',
enable: true,
url: 'pages/CSS/margin/margin'
}
] as Page[]
}, {
id: 'padding',
name: 'padding',
open: false,
pages: [
{
name: 'padding-bottom',
enable: true,
url: 'pages/CSS/padding/padding-bottom'
},
{
name: 'padding-left',
enable: true,
url: 'pages/CSS/padding/padding-left'
},
{
name: 'padding-right',
enable: true,
url: 'pages/CSS/padding/padding-right'
},
{
name: 'padding-top',
enable: true,
url: 'pages/CSS/padding/padding-top'
}, {
name: 'padding',
enable: true,
url: 'pages/CSS/padding/padding'
}
] as Page[]
}, {
id: 'text',
name: 'text',
open: false,
pages: [
{
name: 'color',
enable: true,
url: 'pages/CSS/text/color'
},
{
name: 'font-family',
enable: true,
url: 'pages/CSS/text/font-family'
},
{
name: 'font-size',
enable: true,
url: 'pages/CSS/text/font-size'
},
{
name: 'font-style',
enable: true,
url: 'pages/CSS/text/font-style'
},
{
name: 'font-weight',
enable: true,
url: 'pages/CSS/text/font-weight'
},
{
name: 'line-height',
enable: true,
url: 'pages/CSS/text/line-height'
},
{
name: 'text-align',
enable: true,
url: 'pages/CSS/text/text-align'
},
{
name: 'text-decoration-line',
enable: true,
url: 'pages/CSS/text/text-decoration-line'
}
] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable != true) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
uni.navigateTo({
url
})
}
}
}
</script>
<style>
@import '../../../common/uni-uvue.css';
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或