vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #5066 - New MeterGroup component

Browse source
This commit is contained in:
tugcekucukoglu 2024-01-11 16:42:20 +03:00
parent c5c8b84555
commit 6ce17e84be
66 changed files with 3570 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

76
components/lib/metergroup/style/MeterGroupStyle.js Normal file
View file

@ -0,0 +1,76 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-metergroup {
position: relative;
overflow: hidden;
}
.p-metergroup-vertical.p-metergroup {
display: flex;
}
.p-metergroup-vertical .p-metergroup-meter-container {
flex-direction: column;
}
.p-metergroup-meter-container {
display: flex;
}
.p-metergroup-label-list {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-metergroup-label-list-horizontal {
flex-direction: column;
}
.p-metergroup-vertical .p-metergroup-label-list-vertical {
align-items: start;
}
.p-metergroup-label-list-item {
display: inline-flex;
align-items: center;
}
.p-metergroup-label-type {
display: inline-block;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-metergroup p-component',
{
'p-metergroup-horizontal': instance.orientation === 'horizontal',
'p-metergroup-vertical': instance.orientation === 'vertical'
}
],
metercontainer: 'p-metergroup-meter-container',
meter: 'p-metergroup-meter',
labellist: ({ instance }) => [
'p-metergroup-label-list',
{
'p-metergroup-label-list-start': instance.labelPosition === 'start',
'p-metergroup-label-list-end': instance.labelPosition === 'end',
'p-metergroup-label-list-vertical': instance.labelOrientation === 'vertical',
'p-metergroup-label-list-horizontal': instance.labelOrientation === 'horizontal'
}
],
labellistitem: 'p-metergroup-label-list-item',
labellisttype: 'p-metergroup-label-type',
label: 'p-metergroup-label'
};
export default BaseStyle.extend({
name: 'metergroup',
css,
classes
});