vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5729 - Small size dbadge

pull/5756/head
Cagatay Civici 2024-05-13 18:09:09 +03:00
parent 4455d6ec59
commit 97081aa039
4 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/badge/style/BadgeStyle.js
View File

@ -72,6 +72,13 @@ const theme = ({ dt }) => `
color: ${dt('badge.contrast.color')};
}
.p-badge-sm {
font-size: ${dt('badge.sm.font.size')};
min-width: ${dt('badge.sm.min.width')};
height: ${dt('badge.sm.height')};
line-height: ${dt('badge.sm.height')};
}
.p-badge-lg {
font-size: ${dt('badge.lg.font.size')};
min-width: ${dt('badge.lg.min.width')};
@ -93,6 +100,7 @@ const classes = {
{
'p-badge-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
'p-badge-sm': props.size === 'small',
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge',
'p-badge-info': props.severity === 'info',

41
components/lib/themes/aura/badge/index.js
View File

@ -1,6 +1,6 @@
export default {
root: {
borderRadius: '{border.radius.lg}',
borderRadius: '{border.radius.md}',
padding: '0 0.5rem',
fontSize: '0.75rem',
fontWeight: '700',
@ -10,21 +10,26 @@ export default {
dot: {
size: '0.5rem'
},
sm: {
fontSize: '0.625rem',
minWidth: '1.25rem',
height: '1.25rem'
},
lg: {
fontSize: '1.125rem',
minWidth: '2.25rem',
height: '2.25rem'
fontSize: '0.875rem',
minWidth: '1.75rem',
height: '1.75rem'
},
xl: {
fontSize: '1.5rem',
minWidth: '3rem',
height: '3rem'
fontSize: '1rem',
minWidth: '2rem',
height: '2rem'
},
colorScheme: {
light: {
primary: {
background: '{primary.color}',
color: '{primary.inverse.color}'
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.100}',
@ -53,28 +58,28 @@ export default {
},
dark: {
primary: {
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
color: '{primary.300}'
background: '{primary.color}',
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.800}',
color: '{surface.300}'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
color: '{green.300}'
background: '{green.400}',
color: '{green.950}'
},
info: {
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
color: '{sky.300}'
background: '{sky.400}',
color: '{sky.950}'
},
warn: {
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
color: '{orange.300}'
background: '{orange.400}',
color: '{orange.950}'
},
danger: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
color: '{red.300}'
background: '{red.400}',
color: '{red.950}'
},
contrast: {
background: '{surface.0}',

17
components/lib/themes/lara/badge/index.js
View File

@ -10,15 +10,20 @@ export default {
dot: {
size: '0.5rem'
},
sm: {
fontSize: '0.625rem',
minWidth: '1.25rem',
height: '1.25rem'
},
lg: {
fontSize: '1.125rem',
minWidth: '2.25rem',
height: '2.25rem'
fontSize: '0.875rem',
minWidth: '1.75rem',
height: '1.75rem'
},
xl: {
fontSize: '1.5rem',
minWidth: '3rem',
height: '3rem'
fontSize: '1rem',
minWidth: '2rem',
height: '2rem'
},
colorScheme: {
light: {

30
doc/badge/SizeDoc.vue
View File

@ -1,11 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Use the <i>size</i> property to customize the size of a Badge, currently <i>large</i> and <i>xlarge</i> are available as size options.</p>
<p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge>
<Badge value="2"></Badge>
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div>
<DocSectionCode :code="code" />
</template>
@ -16,16 +17,18 @@ export default {
return {
code: {
basic: `
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge>
<Badge value="2"></Badge>
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge>
<Badge value="2"></Badge>
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div>
</template>
@ -36,9 +39,10 @@ export default {
composition: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge>
<Badge value="2"></Badge>
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div>
</template>