-
Notifications
You must be signed in to change notification settings - Fork 835
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
257 additions
and
527 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton> | ||
</template> |
3 changes: 3 additions & 0 deletions
3
packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="200px" height="15px" animated></nut-skeleton> | ||
</template> |
106 changes: 38 additions & 68 deletions
106
packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,80 +1,50 @@ | ||
<template> | ||
<Demo> | ||
<h2>基础用法</h2> | ||
<nut-skeleton width="250px" height="15px" animated> </nut-skeleton> | ||
<h2>{{ t('basic') }}</h2> | ||
<Basic /> | ||
|
||
<h2>传入多行</h2> | ||
<nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton> | ||
<h2>{{ t('row') }}</h2> | ||
<Row /> | ||
|
||
<h2>显示头像</h2> | ||
<nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton> | ||
<h2>{{ t('avatar') }}</h2> | ||
<Avatar /> | ||
|
||
<h2>标题段落圆角风格</h2> | ||
<nut-skeleton width="250px" height="15px" animated round></nut-skeleton> | ||
<h2>{{ t('round') }}</h2> | ||
<Round /> | ||
|
||
<h2>图片组合</h2> | ||
<h2>{{ t('picture') }}</h2> | ||
<Picture /> | ||
|
||
<div class="pic-compose"> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
</div> | ||
|
||
<h2>显示子组件</h2> | ||
<view class="content"> | ||
<nut-switch v-model="checked" /> | ||
<nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked"> | ||
<view class="container"> | ||
<nut-avatar size="50"> | ||
<img | ||
src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" | ||
/> | ||
</nut-avatar> | ||
<view class="right-content"> | ||
<view class="title">NutUI</view> | ||
<view class="desc" | ||
>一套京东风格的轻量级移动端Vue组库,提供丰富的基础组件和业务组件,帮助开发者快速搭建移动应用。</view | ||
> | ||
</view> | ||
</view> | ||
</nut-skeleton> | ||
</view> | ||
<h2>{{ t('sub') }}</h2> | ||
<Sub /> | ||
</Demo> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue'; | ||
const checked = ref(false); | ||
</script> | ||
|
||
<style lang="scss"> | ||
.content { | ||
.nut-switch { | ||
margin: 0 16px 8px 0; | ||
import { useTranslate } from '../../../utils'; | ||
import Basic from './basic.vue'; | ||
import Row from './row.vue'; | ||
import Avatar from './avatar.vue'; | ||
import Round from './round.vue'; | ||
import Picture from './picture.vue'; | ||
import Sub from './sub.vue'; | ||
const t = useTranslate({ | ||
'zh-CN': { | ||
basic: '基础用法', | ||
row: '传入多行', | ||
avatar: '显示头像', | ||
round: '标题段落圆角风格', | ||
picture: '图片组合', | ||
sub: '显示子组件' | ||
}, | ||
'en-US': { | ||
basic: 'Basic Usage', | ||
row: 'Multi lines', | ||
avatar: 'Show Avatar', | ||
round: 'Round Style', | ||
picture: 'Picture combination', | ||
sub: 'Display sub-component' | ||
} | ||
.container { | ||
display: flex; | ||
.right-content { | ||
margin-left: 19px; | ||
font-family: PingFangSC; | ||
display: flex; | ||
flex-direction: column; | ||
.title { | ||
font-size: 14px; | ||
color: rgba(51, 51, 51, 1); | ||
} | ||
.desc { | ||
margin-top: 10px; | ||
font-size: 13px; | ||
color: rgba(154, 155, 157, 1); | ||
} | ||
} | ||
} | ||
} | ||
.pic-compose { | ||
display: flex; | ||
justify-content: space-between; | ||
.item { | ||
width: 47%; | ||
} | ||
} | ||
</style> | ||
}); | ||
</script> |
15 changes: 15 additions & 0 deletions
15
packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div class="skeleton-picture"> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
</div> | ||
</template> | ||
<style> | ||
.skeleton-picture { | ||
display: flex; | ||
justify-content: space-between; | ||
.item { | ||
width: 47%; | ||
} | ||
} | ||
</style> |
3 changes: 3 additions & 0 deletions
3
packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated round></nut-skeleton> | ||
</template> |
3 changes: 3 additions & 0 deletions
3
packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton> | ||
</template> |
46 changes: 46 additions & 0 deletions
46
packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<template> | ||
<div class="demo-skeleton"> | ||
<nut-switch v-model="checked" /> | ||
<nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked"> | ||
<div class="container"> | ||
<nut-avatar :size="50"> | ||
<img | ||
src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" | ||
/> | ||
</nut-avatar> | ||
<div class="right-content"> | ||
<div class="title">NutUI</div> | ||
<div class="desc"> | ||
一套京东风格的轻量级移动端Vue组库,提供丰富的基础组件和业务组件,帮助开发者快速搭建移动应用。 | ||
</div> | ||
</div> | ||
</div> | ||
</nut-skeleton> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue'; | ||
const checked = ref(false); | ||
</script> | ||
|
||
<style> | ||
.demo-skeleton .container { | ||
display: flex; | ||
} | ||
.demo-skeleton .right-content { | ||
margin-left: 19px; | ||
font-family: PingFangSC; | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
.demo-skeleton .title { | ||
font-size: 14px; | ||
color: rgba(51, 51, 51, 1); | ||
} | ||
.demo-skeleton .desc { | ||
margin-top: 10px; | ||
font-size: 13px; | ||
color: rgba(154, 155, 157, 1); | ||
} | ||
</style> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="200px" height="15px" animated></nut-skeleton> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<template> | ||
<Demo> | ||
<h2>{{ t('basic') }}</h2> | ||
<Basic /> | ||
|
||
<h2>{{ t('row') }}</h2> | ||
<Row /> | ||
|
||
<h2>{{ t('avatar') }}</h2> | ||
<Avatar /> | ||
|
||
<h2>{{ t('round') }}</h2> | ||
<Round /> | ||
|
||
<h2>{{ t('picture') }}</h2> | ||
<Picture /> | ||
|
||
<h2>{{ t('sub') }}</h2> | ||
<Sub /> | ||
</Demo> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { useTranslate } from '@/sites/utils'; | ||
import Basic from './basic.vue'; | ||
import Row from './row.vue'; | ||
import Avatar from './avatar.vue'; | ||
import Round from './round.vue'; | ||
import Picture from './picture.vue'; | ||
import Sub from './sub.vue'; | ||
const t = useTranslate({ | ||
'zh-CN': { | ||
basic: '基础用法', | ||
row: '传入多行', | ||
avatar: '显示头像', | ||
round: '标题段落圆角风格', | ||
picture: '图片组合', | ||
sub: '显示子组件' | ||
}, | ||
'en-US': { | ||
basic: 'Basic Usage', | ||
row: 'Multi lines', | ||
avatar: 'Show Avatar', | ||
round: 'Round Style', | ||
picture: 'Picture combination', | ||
sub: 'Display sub-component' | ||
} | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div class="skeleton-picture"> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
<nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton> | ||
</div> | ||
</template> | ||
<style> | ||
.skeleton-picture { | ||
display: flex; | ||
justify-content: space-between; | ||
.item { | ||
width: 47%; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated round></nut-skeleton> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton> | ||
</template> |
Oops, something went wrong.