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

Refactored Carousel

pull/5677/head
Cagatay Civici 2024-04-10 09:34:25 +03:00
parent 774782a778
commit a79cbfc3be
2 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/lib/carousel/style/CarouselStyle.js
View File

@ -9,19 +9,18 @@ const classes = {
} }
], ],
header: 'p-carousel-header', header: 'p-carousel-header',
content: 'p-carousel-content', content: 'p-carousel-content-container',
container: 'p-carousel-container', container: 'p-carousel-content',
previousButton: ({ instance }) => [ previousButton: ({ instance }) => [
'p-carousel-prev p-link', 'p-carousel-prev-button',
{ {
'p-disabled': instance.backwardIsDisabled 'p-disabled': instance.backwardIsDisabled
} }
], ],
previousButtonIcon: 'p-carousel-next-icon', itemsContent: 'p-carousel-viewport',
itemsContent: 'p-carousel-items-content', itemsContainer: 'p-carousel-items',
itemsContainer: 'p-carousel-items-container',
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [ itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
'p-carousel-item p-carousel-item-cloned', 'p-carousel-item p-carousel-item-clone',
{ {
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible, 'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
'p-carousel-item-start': index === 0, 'p-carousel-item-start': index === 0,
@ -37,20 +36,19 @@ const classes = {
} }
], ],
nextButton: ({ instance }) => [ nextButton: ({ instance }) => [
'p-carousel-next p-link', 'p-carousel-next-button',
{ {
'p-disabled': instance.forwardIsDisabled 'p-disabled': instance.forwardIsDisabled
} }
], ],
nextButtonIcon: 'p-carousel-prev-icon', indicators: 'p-carousel-indicators',
indicators: 'p-carousel-indicators p-reset',
indicator: ({ instance, index }) => [ indicator: ({ instance, index }) => [
'p-carousel-indicator', 'p-carousel-indicator',
{ {
'p-highlight': instance.d_page === index 'p-carousel-indicator-active': instance.d_page === index
} }
], ],
indicatorButton: 'p-link', indicatorButton: 'p-carousel-indicator-button',
footer: 'p-carousel-footer' footer: 'p-carousel-footer'
}; };

26
components/lib/themes/primeone/base/carousel/index.js
View File

@ -5,23 +5,23 @@ export default {
flex-direction: column; flex-direction: column;
} }
.p-carousel-content { .p-carousel-content-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
} }
.p-carousel-container { .p-carousel-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.p-carousel-items-content { .p-carousel-viewport {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
.p-carousel-items-container { .p-carousel-items {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -66,9 +66,11 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 1rem;
gap: 0.5rem; gap: 0.5rem;
margin: 0;
list-style: none;
} }
.p-carousel-indicator button { .p-carousel-indicator-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -79,26 +81,30 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
padding: 0;
margin: 0;
border: none;
user-select: none;
} }
.p-carousel-indicator button:focus-visible { .p-carousel-indicator-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-carousel-indicator button:hover { .p-carousel-indicator-button:hover {
background: ${dt('carousel.indicator.hover.background')}; background: ${dt('carousel.indicator.hover.background')};
} }
.p-carousel-indicator.p-highlight button { .p-carousel-indicator-active .p-carousel-indicator-button {
background: ${dt('carousel.indicator.active.background')}; background: ${dt('carousel.indicator.active.background')};
} }
.p-carousel-vertical .p-carousel-container { .p-carousel-vertical .p-carousel-content {
flex-direction: column; flex-direction: column;
} }
.p-carousel-vertical .p-carousel-items-container { .p-carousel-vertical .p-carousel-items {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }