fineP
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(button-group): [button-group] Adapting to the SMB theme (#2011) 

* feat(button-group): [button-group] Adapting to the SMB theme

* feat(button-group): [button-group] Adapting to the SMB theme
This commit is contained in:
东风使命必达 2024-08-31 03:04:51 -07:00 committed by GitHub
parent 68d17cd02c
commit 470e93172c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 134 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
examples/sites/demos/pc/app/button-group/sup-composition-api.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="demo-button">
<p>原生及插槽</p>
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<tiny-icon-plus-circle></tiny-icon-plus-circle>
@ -8,12 +9,23 @@
</span>
</template>
</tiny-button-group>
<br /><br />
<p>插槽引用tag角标</p>
<tiny-button-group :data="groupDataTag" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
import { Tag as TinyTag } from '@opentiny/vue'
import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
const TinyIconPlusCircle = iconPlusCircle()
@ -53,6 +65,45 @@ const groupData = ref([
}
}
])
const groupDataTag = ref([
{
text: '1年',
value: 'Button1',
sup: {
slot: 'btn',
class: 'sup-tag',
text: '特惠'
}
},
{
text: '2年',
value: 'Button2',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconSearch()
}
},
{
text: '3年',
value: 'Button3',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconPlusCircle()
}
},
{
text: '4年',
value: 'Button4',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconPlusCircle(),
text: '8折'
}
}
])
</script>
<style scoped>
@ -80,4 +131,13 @@ const groupData = ref([
.demo-button button {
width: 124px;
}
.demo-button p {
margin-bottom: 8px;
}
.demo-button .tiny-tag {
border-radius: 0px 5px 0 8px;
}
.demo-button .tiny-svg-size {
margin-right: 4px;
}
</style>

61
examples/sites/demos/pc/app/button-group/sup.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="demo-button">
<p>原生及插槽</p>
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<icon-plus-circle></icon-plus-circle>
@ -8,16 +9,28 @@
</span>
</template>
</tiny-button-group>
<br /><br />
<p>插槽引用tag角标</p>
<tiny-button-group :data="groupData2" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
</div>
</template>
<script>
import { ButtonGroup } from '@opentiny/vue'
import { Tag } from '@opentiny/vue'
import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
const IconPlusCircle = iconPlusCircle()
export default {
components: {
TinyTag: Tag,
TinyButtonGroup: ButtonGroup,
IconPlusCircle
},
@ -58,6 +71,45 @@ export default {
text: '8折'
}
}
],
groupData2: [
{
text: '1年',
value: 'Button1',
sup: {
slot: 'btn',
class: 'sup-tag',
text: '特惠'
}
},
{
text: '2年',
value: 'Button2',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconSearch()
}
},
{
text: '3年',
value: 'Button3',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconPlusCircle()
}
},
{
text: '4年',
value: 'Button4',
sup: {
slot: 'btn',
class: 'sup-tag',
icon: iconPlusCircle(),
text: '8折'
}
}
]
}
}
@ -86,7 +138,16 @@ export default {
</style>
<style>
.demo-button p {
margin-bottom: 8px;
}
.demo-button button {
width: 124px;
}
.demo-button .tiny-tag {
border-radius: 0px 5px 0 8px;
}
.demo-button .tiny-svg-size {
margin-right: 4px;
}
</style>

11
packages/theme/src/button-group/index.less
View File

@ -173,19 +173,20 @@
}
&__sup-icon {
background-color: #fa9841;
border-radius: var(--ti-button-group-sup-icon-border-radius);
border-radius: 2px;
fill: #fff;
line-height: var(--ti-button-group-sup-icon-line-height);
border-bottom-left-radius: var(--ti-button-group-sup-icon-bottom-left-border-radius);;
}
&__sup-text {
background-color: #fa9841;
padding: 0 4px;
border-top-left-radius: var(--ti-button-group-sup-text-top-left-border-radius);
border-bottom-right-radius: var(--ti-button-group-sup-text-bottom-right-border-radius);
border-bottom-left-radius: var(--ti-button-group-sup-text-bottom-left-border-radius);
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.sup-tag {
background-color: unset;
}
}
& > .@{button-prefix-cls} {

7
packages/theme/src/button-group/smb-theme.js
View File

@ -16,10 +16,5 @@ export const tinyButtonGroupTheme = {
'ti-button-group-item-sup-position-top': 'var(--ti-common-space-0)',
'ti-button-group-item-sup-height': 'var(--ti-common-line-height-base)',
'ti-button-group-mini-side-border-radius': 'var(--ti-button-group-mini-border-radius)',
'ti-button-group-sup-text-top-left-border-radius': '0',
'ti-button-group-sup-text-bottom-right-border-radius': '0',
'ti-button-group-sup-text-bottom-left-border-radius': '8px',
'ti-button-group-sup-icon-border-radius': 'unset',
'ti-button-group-sup-icon-line-height': '22px',
'ti-button-group-sup-icon-bottom-left-border-radius': '8px'
'ti-button-group-sup-icon-line-height': '22px'
}

6
packages/theme/src/button-group/vars.less
View File

@ -115,12 +115,6 @@
--ti-button-group-item-sup-font-color: var(--ti-common-color-text-white, #fff);
// 按钮角标字体大小
--ti-button-group-item-sup-font-size: var(--ti-common-font-size-base, 12px);
// 角标圆角
--ti-button-group-sup-text-top-left-border-radius: 4px;
--ti-button-group-sup-text-bottom-right-border-radius: 4px;
--ti-button-group-sup-text-bottom-left-border-radius: 0;
// icon角标
--ti-button-group-sup-icon-border-radius: 2px;
--ti-button-group-sup-icon-line-height: 18px;
--ti-button-group-sup-icon-bottom-left-border-radius: 2px;
}

10
packages/vue/src/button-group/src/pc.vue
View File

@ -37,8 +37,9 @@
:class="[
'tiny-group-item__sup',
{
'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text && !node.sup.tag,
'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon && !node.sup.tag,
'tiny-group-item__sup-tag': node.sup.tag
},
typeof node.sup.class === 'string' ? node.sup.class : '',
...(Array.isArray(node.sup.class) ? node.sup.class : [])
@ -65,8 +66,9 @@
:class="[
'tiny-group-item__sup',
{
'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text,
'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon
'tiny-group-item__sup-text': !node.sup.slot && !node.sup.icon && node.sup.text && node.sup.tag,
'tiny-group-item__sup-icon': !node.sup.slot && node.sup.icon && node.sup.tag,
'tiny-group-item__sup-tag': node.sup.tag
},
typeof node.sup.class === 'string' ? node.sup.class : '',
...(Array.isArray(node.sup.class) ? node.sup.class : [])