diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js index a97fb342d..6e38555a4 100644 --- a/components/lib/listbox/style/ListboxStyle.js +++ b/components/lib/listbox/style/ListboxStyle.js @@ -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')}; diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js index 10b574c48..357c28dd1 100644 --- a/components/lib/themes/aura/listbox/index.js +++ b/components/lib/themes/aura/listbox/index.js @@ -50,5 +50,17 @@ export default { }, emptyMessage: { padding: '{list.option.padding}' + }, + colorScheme: { + light: { + option: { + stripedBackground: '{surface.50}' + } + }, + dark: { + option: { + stripedBackground: '{surface.900}' + } + } } }; diff --git a/components/lib/themes/lara/listbox/index.js b/components/lib/themes/lara/listbox/index.js index 7605b7f35..b7f7ae785 100644 --- a/components/lib/themes/lara/listbox/index.js +++ b/components/lib/themes/lara/listbox/index.js @@ -50,5 +50,17 @@ export default { }, emptyMessage: { padding: '{list.option.padding}' + }, + colorScheme: { + light: { + option: { + stripedBackground: '{surface.50}' + } + }, + dark: { + option: { + stripedBackground: '{surface.900}' + } + } } }; diff --git a/components/lib/themes/nora/listbox/index.js b/components/lib/themes/nora/listbox/index.js index 10b574c48..bf3713b96 100644 --- a/components/lib/themes/nora/listbox/index.js +++ b/components/lib/themes/nora/listbox/index.js @@ -50,5 +50,17 @@ export default { }, emptyMessage: { padding: '{list.option.padding}' + }, + colorScheme: { + light: { + option: { + stripedBackground: '{surface.100}' + } + }, + dark: { + option: { + stripedBackground: '{surface.800}' + } + } } }; diff --git a/doc/listbox/VirtualScrollDoc.vue b/doc/listbox/VirtualScrollDoc.vue index de711c5d7..4e39925d5 100644 --- a/doc/listbox/VirtualScrollDoc.vue +++ b/doc/listbox/VirtualScrollDoc.vue @@ -6,7 +6,7 @@

- +
@@ -20,13 +20,13 @@ export default { code: { basic: ` + :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" stripedRows /> `, options: ` @@ -45,7 +45,7 @@ export default {