Skip to content

H
hello uni-app x

Accustomed_ / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x
提交 b509a35a 编写于 作者: 杜庆泉's avatar 杜庆泉
浏览文件
操作

Merge branch 'master' of http://git.dcloud.io/uni-app-x/hello-uniapp-x into master

上级 d25d9358 d377f1b7
隐藏空白更改
内联 并排
Showing with 2236 addition and 19 deletion
env.js 0 → 100644
浏览文件 @ b509a35a
module.exports = {
"is-custom-runtime": false,
"compile": true,
"h5": {
"options": {
"headless": true
},
"executablePath": ""
},
"mp-weixin": {
"port": 9420,
"account": "",
"args": "",
"cwd": "",
"launch": true,
"teardown": "disconnect",
"remote": false,
"executablePath": ""
},
"app-plus": {
"android": {
"id": "",
"executablePath": ""
},
"version": "",
"ios": {
"id": "",
"executablePath": ""
},
"uni-app-x": {
"version": "/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniappx-launcher/base/version.txt",
"android": {
"id": "emulator-5554",
"executablePath": "/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniappx-launcher/base/android_base.apk"
}
}
}
}
\ No newline at end of file
jest.config.js 0 → 100644
浏览文件 @ b509a35a
module.exports = {
testTimeout: 10000,
reporters: [
'default'
],
watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
moduleFileExtensions: ['js', 'json'],
rootDir: __dirname,
testMatch: ["<rootDir>/pages/**/*test.[jt]s?(x)"],
testPathIgnorePatterns: ['/node_modules/']
}
pages.json
浏览文件 @ b509a35a
......@@ -143,7 +143,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",
......@@ -175,7 +433,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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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
浏览文件 @ b509a35a
<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/component/button/button.test.js 0 → 100644
浏览文件 @ b509a35a
function getData(key = '') {
return new Promise(async (resolve, reject) => {
const data = await page.data()
resolve(key ? data[key] : data)
})
}
let page
beforeAll(async () => {
page = await program.reLaunch('/pages/component/button/button')
await page.waitFor(1000)
})
describe('Button.uvue', () => {
it('click', async () => {
const defaultBtn = await page.$('.default-button')
const disabledBtn = await page.$('.disabled-button')
expect(await getData('count')).toEqual(0)
await defaultBtn.tap()
expect(await getData('count')).toEqual(1)
await disabledBtn.tap()
expect(await getData('count')).toEqual(1)
})
it('length', async () => {
const btnLen = await page.$$('.button')
expect(btnLen.length).toBe(13)
})
it('text', async () => {
const textBtn = await page.$('.text-button')
expect(await textBtn.text()).toEqual('按钮')
await page.setData({
text: 'button'
})
// TODO 待修复
expect(await textBtn.text()).toEqual('button')
})
it('type', async () => {
// TODO 目前获取组件属性只能通过组件的name,并且拿到的是最后一个
const btn = await page.$('Button')
expect(await btn.property('type')).toBe('warn')
await page.setData({
type: 'default'
})
await page.waitFor(500)
expect(await btn.property('type')).toBe('default')
await page.setData({
type: 'warn'
})
await page.waitFor(500)
expect(await btn.property('type')).toBe('warn')
})
it('size', async () => {
const btn = await page.$('Button')
expect(await btn.property('size')).toBe('mini')
await page.setData({
size: 'default'
})
await page.waitFor(500)
expect(await btn.property('size')).toBe('default')
await page.setData({
size: 'mini'
})
})
it('plain', async () => {
const btn = await page.$('Button')
expect(await btn.property('plain')).toBe(false)
await page.setData({
plain: true
})
await page.waitFor(500)
expect(await btn.property('plain')).toBe(true)
})
it('disabled', async () => {
const btn = await page.$('Button')
expect(await btn.property('disabled')).toBe(false)
await page.setData({
disabled: true
})
await page.waitFor(500)
expect(await btn.property('disabled')).toBe(true)
})
})
\ No newline at end of file
pages/component/button/button.uvue
浏览文件 @ b509a35a
......@@ -2,18 +2,18 @@
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<button type="primary" class="button test-button">页面主操作 Normal</button>
<!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
<button type="primary" :disabled="true" class="button">页面主操作 Disabled</button>
<button type="default" class="button">页面次要操作 Normal</button>
<button type="default" :disabled="true" class="button">页面次要操作 Disabled</button>
<button type="default" class="button default-button" @click="addCount">页面次要操作 Normal</button>
<button type="default" :disabled="true" class="button disabled-button">页面次要操作 Disabled</button>
<button type="warn" class="button">警告类操作 Normal</button>
<button type="warn" :disabled="true" class="button">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" :plain="true" class="button">按钮</button>
<button type="primary" :plain="true" class="button text-button">{{text}}</button>
<button type="primary" :disabled="true" :plain="true" class="button">
不可点击的按钮
</button>
......@@ -24,7 +24,8 @@
<view class="uni-flex uni-row">
<button class="button mini-btn" type="primary" size="mini">按钮</button>
<button class="button mini-btn" type="default" size="mini">按钮</button>
<button class="button mini-btn" type="warn" size="mini">按钮</button>
<button class="button mini-btn" :type="type" :size="size" :plain="plain"
:disabled="disabled">按钮</button>
</view>
</view>
</view>
......@@ -36,7 +37,13 @@
return {
title: 'button',
loading: false,
_timer: 0
_timer: 0,
text: '按钮',
type: 'warn',
size: 'mini',
plain: false,
disabled: false,
count: 0
}
},
onShow() {
......@@ -55,6 +62,9 @@
// clearTimeout(this._timer);
// }
// }
addCount() {
this.count++
}
},
}
</script>
......
pages/component/text/text.uvue
浏览文件 @ b509a35a
......@@ -18,18 +18,18 @@
return {
title: 'text',
texts: [
'HBuilder，400万开发者选择的IDE',
'MUI，轻巧、漂亮的前端开源框架',
'wap2app，M站快速转换原生体验的App',
'5+Runtime，为HTML5插上原生的翅膀',
'HBuilderX，轻巧、极速，极客编辑器',
'uni-app，终极跨平台方案',
'HBuilder，400万开发者选择的IDE',
'MUI，轻巧、漂亮的前端开源框架',
'wap2app，M站快速转换原生体验的App',
'5+Runtime，为HTML5插上原生的翅膀',
'HBuilderX，轻巧、极速，极客编辑器',
'uni-app，终极跨平台方案',
'uni-app x，终极跨平台方案',
'uniCloud，js serverless云服务',
'uts，大一统语言',
'uniMPSdk，让你的App具备小程序能力',
'uni-admin，开源、现成的全端管理后台',
'uni-id，开源、全端的账户中心',
'uni-pay，开源、云端一体、全平台的支付',
'uni-ai，聚合ai能力',
'uni-cms，开源、云端一体、全平台的内容管理平台',
'uni-im，开源、云端一体、全平台的im即时消息',
'uni统计，开源、完善、全平台的统计报表',
'......'
] as string[],
text: '',
......
pages/tabBar/CSS/CSS.uvue 0 → 100644
浏览文件 @ b509a35a
<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.
先完成此消息的编辑！
想要评论请 注册 或