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
提交 014b64f8 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

Update CSS.uvue

上级 e8674538
隐藏空白更改
内联 并排
Showing with 351 addition and 351 deletion
pages/tabBar/CSS.uvue
浏览文件 @ 014b64f8
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/cssIndex.png"></image> <image class="uni-header-image" src="/static/cssIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</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> <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<template v-for="item in list" :key="item.id"> <template v-for="item in list" :key="item.id">
<uni-collapse-item :title="item.name" class="item"> <uni-collapse-item :title="item.name" class="item">
<view class="uni-navigate-item":hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)"> <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon"></image> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</template> </template>
</uni-collapse> </uni-collapse>
<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <!-- <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)"> <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> <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
<image :src=" <image :src="
item.pages.length > 0 item.pages.length > 0
? item.open ? item.open
? arrowUpIcon ? arrowUpIcon
: arrowDownIcon : arrowDownIcon
: arrowRightIcon : arrowRightIcon
" class="uni-icon"></image> " class="uni-icon"></image>
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <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)"> <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 == false ? 'text-disabled' : ''">{{ page.name }}</text> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon"></image> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
</view> --> </view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="ts"> <script lang="ts">
type Page = { type Page = {
name : string name : string
enable ?: boolean enable ?: boolean
url ?: string url ?: string
} }
type ListItem = { type ListItem = {
id : string id : string
name : string name : string
open : boolean open : boolean
pages : Page[] pages : Page[]
url ?: string url ?: string
enable ?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'background', id: 'background',
name: 'background', name: 'background',
open: false, open: false,
pages: [ pages: [
{ {
name: 'background-color', name: 'background-color',
url: '/pages/CSS/background/background-color', url: '/pages/CSS/background/background-color',
}, },
{ {
name: 'background-image', name: 'background-image',
url: '/pages/CSS/background/background-image', url: '/pages/CSS/background/background-image',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'border', id: 'border',
name: 'border', name: 'border',
open: false, open: false,
pages: [ pages: [
{ {
name: 'border', name: 'border',
url: '/pages/CSS/border/border', url: '/pages/CSS/border/border',
}, },
{ {
name: 'border-width', name: 'border-width',
url: '/pages/CSS/border/border-width', url: '/pages/CSS/border/border-width',
}, },
{ {
name: 'border-style', name: 'border-style',
url: '/pages/CSS/border/border-style', url: '/pages/CSS/border/border-style',
}, },
{ {
name: 'border-color', name: 'border-color',
url: '/pages/CSS/border/border-color', url: '/pages/CSS/border/border-color',
}, },
{ {
name: 'border-radius', name: 'border-radius',
url: '/pages/CSS/border/border-radius', url: '/pages/CSS/border/border-radius',
}, },
{ {
name: 'border属性复合示例', name: 'border属性复合示例',
url: '/pages/CSS/border/complex-border/complex-border', url: '/pages/CSS/border/complex-border/complex-border',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'box-shadow', id: 'box-shadow',
name: 'box-shadow', name: 'box-shadow',
open: false, open: false,
pages: [ pages: [
{ {
name: 'box-shadow', name: 'box-shadow',
url: '/pages/CSS/box-shadow/box-shadow', url: '/pages/CSS/box-shadow/box-shadow',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'flex', id: 'flex',
name: 'flex', name: 'flex',
open: false, open: false,
pages: [ pages: [
{ {
name: 'align-content', name: 'align-content',
url: '/pages/CSS/flex/align-content', url: '/pages/CSS/flex/align-content',
}, },
{ {
name: 'align-items', name: 'align-items',
url: '/pages/CSS/flex/align-items', url: '/pages/CSS/flex/align-items',
}, },
{ {
name: 'flex-basis', name: 'flex-basis',
url: '/pages/CSS/flex/flex-basis', url: '/pages/CSS/flex/flex-basis',
}, },
{ {
name: 'flex-direction', name: 'flex-direction',
url: '/pages/CSS/flex/flex-direction', url: '/pages/CSS/flex/flex-direction',
}, },
{ {
name: 'flex-flow', name: 'flex-flow',
url: '/pages/CSS/flex/flex-flow', url: '/pages/CSS/flex/flex-flow',
}, },
{ {
name: 'flex-grow', name: 'flex-grow',
url: '/pages/CSS/flex/flex-grow', url: '/pages/CSS/flex/flex-grow',
}, },
{ {
name: 'flex-shrink', name: 'flex-shrink',
url: '/pages/CSS/flex/flex-shrink', url: '/pages/CSS/flex/flex-shrink',
}, },
{ {
name: 'flex', name: 'flex',
url: '/pages/CSS/flex/flex', url: '/pages/CSS/flex/flex',
}, },
{ {
name: 'justify-content', name: 'justify-content',
url: '/pages/CSS/flex/justify-content', url: '/pages/CSS/flex/justify-content',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'layout', id: 'layout',
name: 'layout', name: 'layout',
open: false, open: false,
pages: [ pages: [
{ {
name: 'height', name: 'height',
url: '/pages/CSS/layout/height', url: '/pages/CSS/layout/height',
}, },
{ {
name: 'max-height', name: 'max-height',
url: '/pages/CSS/layout/max-height', url: '/pages/CSS/layout/max-height',
}, },
{ {
name: 'max-width', name: 'max-width',
url: '/pages/CSS/layout/max-width', url: '/pages/CSS/layout/max-width',
}, },
{ {
name: 'min-height', name: 'min-height',
url: '/pages/CSS/layout/min-height', url: '/pages/CSS/layout/min-height',
}, },
{ {
name: 'min-width', name: 'min-width',
url: '/pages/CSS/layout/min-width', url: '/pages/CSS/layout/min-width',
}, },
{ {
name: 'position', name: 'position',
url: '/pages/CSS/layout/position', url: '/pages/CSS/layout/position',
}, },
{ {
name: 'width', name: 'width',
url: '/pages/CSS/layout/width', url: '/pages/CSS/layout/width',
}, },
{ {
name: 'visibility', name: 'visibility',
url: '/pages/CSS/layout/visibility', url: '/pages/CSS/layout/visibility',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'margin', id: 'margin',
name: 'margin', name: 'margin',
open: false, open: false,
pages: [ pages: [
{ {
name: 'margin-bottom', name: 'margin-bottom',
url: '/pages/CSS/margin/margin-bottom', url: '/pages/CSS/margin/margin-bottom',
}, },
{ {
name: 'margin-left', name: 'margin-left',
url: '/pages/CSS/margin/margin-left', url: '/pages/CSS/margin/margin-left',
}, },
{ {
name: 'margin-right', name: 'margin-right',
url: '/pages/CSS/margin/margin-right', url: '/pages/CSS/margin/margin-right',
}, },
{ {
name: 'margin-top', name: 'margin-top',
url: '/pages/CSS/margin/margin-top', url: '/pages/CSS/margin/margin-top',
}, },
{ {
name: 'margin', name: 'margin',
url: '/pages/CSS/margin/margin', url: '/pages/CSS/margin/margin',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'padding', id: 'padding',
name: 'padding', name: 'padding',
open: false, open: false,
pages: [ pages: [
{ {
name: 'padding-bottom', name: 'padding-bottom',
url: '/pages/CSS/padding/padding-bottom', url: '/pages/CSS/padding/padding-bottom',
}, },
{ {
name: 'padding-left', name: 'padding-left',
url: '/pages/CSS/padding/padding-left', url: '/pages/CSS/padding/padding-left',
}, },
{ {
name: 'padding-right', name: 'padding-right',
url: '/pages/CSS/padding/padding-right', url: '/pages/CSS/padding/padding-right',
}, },
{ {
name: 'padding-top', name: 'padding-top',
url: '/pages/CSS/padding/padding-top', url: '/pages/CSS/padding/padding-top',
}, },
{ {
name: 'padding', name: 'padding',
url: '/pages/CSS/padding/padding', url: '/pages/CSS/padding/padding',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'text', id: 'text',
name: 'text', name: 'text',
open: false, open: false,
pages: [ pages: [
{ {
name: 'color', name: 'color',
url: '/pages/CSS/text/color', url: '/pages/CSS/text/color',
}, },
{ {
name: 'font-family', name: 'font-family',
url: '/pages/CSS/text/font-family', url: '/pages/CSS/text/font-family',
}, },
{ {
name: 'font-size', name: 'font-size',
url: '/pages/CSS/text/font-size', url: '/pages/CSS/text/font-size',
}, },
{ {
name: 'font-style', name: 'font-style',
url: '/pages/CSS/text/font-style', url: '/pages/CSS/text/font-style',
}, },
{ {
name: 'font-weight', name: 'font-weight',
url: '/pages/CSS/text/font-weight', url: '/pages/CSS/text/font-weight',
}, },
{ {
name: 'line-height', name: 'line-height',
url: '/pages/CSS/text/line-height', url: '/pages/CSS/text/line-height',
}, },
{ {
name: 'text-align', name: 'text-align',
url: '/pages/CSS/text/text-align', url: '/pages/CSS/text/text-align',
}, },
{ {
name: 'text-overflow', name: 'text-overflow',
url: '/pages/CSS/text/text-overflow', url: '/pages/CSS/text/text-overflow',
}, },
{ {
name: 'text-decoration-line', name: 'text-decoration-line',
url: '/pages/CSS/text/text-decoration-line', url: '/pages/CSS/text/text-decoration-line',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'animate', id: 'animate',
name: '动画', name: '动画',
open: false, open: false,
pages: [ pages: [
{ {
name: 'transition', name: 'transition',
url: '/pages/CSS/transition/transition', url: '/pages/CSS/transition/transition',
}, },
{ {
name: 'transform', name: 'transform',
url: '/pages/CSS/transform/transform', url: '/pages/CSS/transform/transform',
}, },
] as Page[], ] as Page[],
}, },
] as ListItem[], ] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png', arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png', arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png', arrowRightIcon: '/static/icons/arrow-right.png',
} }
}, },
methods: { methods: {
triggerCollapse(index ?: number, item : ListItem) { triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) { if (item.pages.length == 0) {
const page : Page = { const page : Page = {
name: item.name, name: item.name,
enable: item.enable, enable: item.enable,
url: item.url, url: item.url,
} }
this.goDetailPage(page) this.goDetailPage(page)
return return
} }
for (var i = 0; i < this.list.length; ++i) { for (var i = 0; i < this.list.length; ++i) {
if (index == i) { if (index == i) {
this.list[i].open = !this.list[i].open this.list[i].open = !this.list[i].open
} else { } else {
this.list[i].open = false this.list[i].open = false
} }
} }
}, },
goDetailPage(e : Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '暂不支持', title: '暂不支持',
}) })
return return
} }
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}` const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
uni.navigateTo({ uni.navigateTo({
url, url,
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
.item { .item {
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或