oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-21 21:52:08 +08:00
1 parent d37d92996a
commit a8f3e58a27
25 files changed
+1401 -399
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/badge/demo.vue
+79
View File
@@ -0,0 +1,79 @@
<script setup lang="ts">
</script>
<template>
<div class="container">
<ABadge count="12">
<AButton>测试</AButton>
</ABadge>
<ABadge type="dot">
<AButton>测试</AButton>
</ABadge>
<ABadge type="custom">
<template #content>
<AIcon icon="material-symbols:10k-outline-rounded" />
</template>
<AButton>测试</AButton>
</ABadge>
<ABadge count="12" :offset="[10, -5]">
<AButton>测试</AButton>
</ABadge>
<ABadge count="12" color="blue">
<AButton>测试</AButton>
</ABadge>
<ABadge count="12" type="ribbon" ribbon-text="123" background-color="red">
<div
style="
width: 200px;
height: 120px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333;
"
>
测试卡片
</div>
</ABadge>
<ABadge count="12" type="ribbon" ribbon-text="123" background-color="red" color="blue">
<div
style="
width: 200px;
height: 120px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333;
"
>
测试卡片
</div>
</ABadge>
</div>
</template>
<style lang="scss" scoped>
.container {
height: 800px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
}
</style>