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

Implemented Striped Rows for Listbox

pull/5806/head
Cagatay Civici 2024-05-26 00:53:16 +03:00
parent c6663196a0
commit cb20a7b158
5 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/listbox/style/ListboxStyle.js
View File

@ -69,6 +69,10 @@ const theme = ({ dt }) => `
box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
}
.p-listbox-striped li:nth-child(even of .p-listbox-option) {
background: ${dt('listbox.option.striped.background')};
}
.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
background: ${dt('listbox.option.selected.background')};
color: ${dt('listbox.option.selected.color')};

12
components/lib/themes/aura/listbox/index.js
View File

@ -50,5 +50,17 @@ export default {
},
emptyMessage: {
padding: '{list.option.padding}'
},
colorScheme: {
light: {
option: {
stripedBackground: '{surface.50}'
}
},
dark: {
option: {
stripedBackground: '{surface.900}'
}
}
}
};

12
components/lib/themes/lara/listbox/index.js
View File

@ -50,5 +50,17 @@ export default {
},
emptyMessage: {
padding: '{list.option.padding}'
},
colorScheme: {
light: {
option: {
stripedBackground: '{surface.50}'
}
},
dark: {
option: {
stripedBackground: '{surface.900}'
}
}
}
};

12
components/lib/themes/nora/listbox/index.js
View File

@ -50,5 +50,17 @@ export default {
},
emptyMessage: {
padding: '{list.option.padding}'
},
colorScheme: {
light: {
option: {
stripedBackground: '{surface.100}'
}
},
dark: {
option: {
stripedBackground: '{surface.800}'
}
}
}
};

8
doc/listbox/VirtualScrollDoc.vue
View File

@ -6,7 +6,7 @@
</p>
</DocSectionText>
<div class="card flex justify-center">
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
</div>
<DocSectionCode :code="code" />
</template>
@ -20,13 +20,13 @@ export default {
code: {
basic: `
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
`,
options: `
<template>
<div class="card flex justify-center">
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
</div>
</template>
@ -45,7 +45,7 @@ export default {
<template>
<div class="card flex justify-center">
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" />
:virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows />
</div>
</template>