mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 01:12:37 +00:00
Refactor #3965 - Update for Carousel
This commit is contained in:
parent
9abaad7612
commit
ff695f200f
2 changed files with 47 additions and 49 deletions
|
@ -75,11 +75,22 @@ const styles = `
|
|||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance }) => ['p-carousel p-component', { 'p-carousel-vertical': instance.isVertical(), 'p-carousel-horizontal': !instance.isVertical() }],
|
||||
root: ({ instance }) => [
|
||||
'p-carousel p-component',
|
||||
{
|
||||
'p-carousel-vertical': instance.isVertical(),
|
||||
'p-carousel-horizontal': !instance.isVertical()
|
||||
}
|
||||
],
|
||||
header: 'p-carousel-header',
|
||||
content: ({ props }) => ['p-carousel-content ', props.contentClass],
|
||||
container: ({ props }) => ['p-carousel-container', props.containerClass],
|
||||
previousButton: ({ instance }) => ['p-carousel-prev p-link', { 'p-disabled': instance.backwardIsDisabled }],
|
||||
content: 'p-carousel-content',
|
||||
container: 'p-carousel-container',
|
||||
previousButton: ({ instance }) => [
|
||||
'p-carousel-prev p-link',
|
||||
{
|
||||
'p-disabled': instance.backwardIsDisabled
|
||||
}
|
||||
],
|
||||
previousButtonIcon: 'p-carousel-next-icon',
|
||||
itemsContent: 'p-carousel-items-content',
|
||||
itemsContainer: 'p-carousel-items-container',
|
||||
|
@ -87,18 +98,32 @@ const classes = {
|
|||
'p-carousel-item p-carousel-item-cloned',
|
||||
{
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
'p-carousel-item-start': 0 === index,
|
||||
'p-carousel-item-start': index === 0,
|
||||
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
|
||||
}
|
||||
],
|
||||
item: ({ instance, index }) => [
|
||||
'p-carousel-item',
|
||||
{ 'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index, 'p-carousel-item-start': instance.firstIndex() === index, 'p-carousel-item-end': instance.lastIndex() === index }
|
||||
{
|
||||
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
|
||||
'p-carousel-item-start': instance.firstIndex() === index,
|
||||
'p-carousel-item-end': instance.lastIndex() === index
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => [
|
||||
'p-carousel-next p-link',
|
||||
{
|
||||
'p-disabled': instance.forwardIsDisabled
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => ['p-carousel-next p-link', { 'p-disabled': instance.forwardIsDisabled }],
|
||||
nextButtonIcon: 'p-carousel-prev-icon',
|
||||
indicators: ({ props }) => ['p-carousel-indicators p-reset', props.indicatorsContentClass],
|
||||
indicator: ({ instance, i }) => ['p-carousel-indicator', { 'p-highlight': instance.d_page === i }],
|
||||
indicators: 'p-carousel-indicators p-reset',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-carousel-indicator',
|
||||
{
|
||||
'p-highlight': instance.d_page === index
|
||||
}
|
||||
],
|
||||
indicatorButton: 'p-link',
|
||||
footer: 'p-carousel-footer'
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue