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')}; 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 { .p-badge-lg {
font-size: ${dt('badge.lg.font.size')}; font-size: ${dt('badge.lg.font.size')};
min-width: ${dt('badge.lg.min.width')}; 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-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default, 'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
'p-badge-sm': props.size === 'small',
'p-badge-lg': props.size === 'large', 'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge', 'p-badge-xl': props.size === 'xlarge',
'p-badge-info': props.severity === 'info', 'p-badge-info': props.severity === 'info',

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

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

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

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

30
doc/badge/SizeDoc.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2"> <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge> <Badge value="6" size="large" severity="warn"></Badge>
<Badge value="2"></Badge> <Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -16,16 +17,18 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge> <Badge value="6" size="large" severity="warn"></Badge>
<Badge value="2"></Badge> <Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2"> <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge> <Badge value="6" size="large" severity="warn"></Badge>
<Badge value="2"></Badge> <Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div> </div>
</template> </template>
@ -36,9 +39,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2"> <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warn"></Badge> <Badge value="6" size="large" severity="warn"></Badge>
<Badge value="2"></Badge> <Badge value="4" severity="info"></Badge>
<Badge value="2" size="small"></Badge>
</div> </div>
</template> </template>