Skip to content

Commit

Permalink
chore(badge): split demo (#2799)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Dec 25, 2023
1 parent bbb2673 commit b473472
Show file tree
Hide file tree
Showing 16 changed files with 270 additions and 759 deletions.
16 changes: 16 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div>
<nut-badge :value="8">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
16 changes: 16 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/color.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div>
<nut-badge :value="8" color="skyblue">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" color="green">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW" color="purple">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot color="blue">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
26 changes: 26 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/icon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div>
<nut-badge>
<template #icon>
<Check color="#ffffff" size="12px"></Check>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
<template #icon>
<Link color="#ffffff" size="12px"></Link>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
<template #icon>
<Download color="#ffffff" size="12px"></Download>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>

<script setup lang="ts">
import { Check, Link, Download } from '@nutui/icons-vue-taro';
</script>
121 changes: 35 additions & 86 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,46 @@
<template>
<Demo class="badge-demo">
<h2>基础用法</h2>
<nut-row>
<nut-badge :value="8">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW" bubble>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</nut-row>
<h2>最大值</h2>
<nut-row>
<nut-badge :value="200" :max="9">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="20">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="99">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</nut-row>
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>自定义颜色</h2>
<nut-row>
<nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</nut-row>
<h2>{{ t('max') }}</h2>
<Max />

<h2>自定义徽标内容</h2>
<nut-row>
<nut-badge>
<template #icon>
<Check color="#ffffff" size="12px"></Check>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
<template #icon>
<Link color="#ffffff" size="12px"></Link>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
<template #icon>
<Download color="#ffffff" size="12px"></Download>
</template>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</nut-row>
<h2>{{ t('color') }}</h2>
<Color />

<h2>自定义位置</h2>
<nut-row>
<nut-badge :value="8" top="5" right="5">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" top="10" right="10">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</nut-row>
<h2>{{ t('icon') }}</h2>
<IconDemo />

<h2>独立展示</h2>
<nut-row>
<nut-badge :value="8"> </nut-badge>
<nut-badge :value="76"> </nut-badge>
<nut-badge value="NEW"> </nut-badge>
</nut-row>
<h2>{{ t('position') }}</h2>
<Position />
</Demo>
</template>
<script lang="ts" setup>
import { Check, Link, Download } from '@nutui/icons-vue-taro';

<script setup lang="ts">
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Max from './max.vue';
import Color from './color.vue';
import IconDemo from './icon.vue';
import Position from './position.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
max: '最大值',
color: '自定义颜色',
icon: '自定义徽标内容',
position: '自定义位置'
},
'en-US': {
basic: 'Basic Usage',
max: 'Max',
color: 'Custom Color',
icon: 'Custom Content',
position: 'Custom Position '
}
});
</script>

<style lang="scss">
Expand Down
13 changes: 13 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/max.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<div>
<nut-badge :value="200" :max="9">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="20">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="99">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
13 changes: 13 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/badge/position.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<div>
<nut-badge :value="8" top="5" right="5">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" top="10" right="10">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
121 changes: 0 additions & 121 deletions src/packages/__VUE/badge/demo.vue
View file

This file was deleted.

16 changes: 16 additions & 0 deletions src/packages/__VUE/badge/demo/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div>
<nut-badge :value="8">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot>
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
16 changes: 16 additions & 0 deletions src/packages/__VUE/badge/demo/color.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div>
<nut-badge :value="8" color="skyblue">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" color="green">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW" color="purple">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot color="blue">
<nut-avatar shape="square"></nut-avatar>
</nut-badge>
</div>
</template>
Loading

0 comments on commit b473472

Please sign in to comment.