kopia lustrzana https://github.com/shoelace-style/shoelace
chore: code formatting
rodzic
1eff2f888f
commit
33f3f2f892
|
@ -507,11 +507,11 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
id="scroll-container"
|
||||
part="scroll-container"
|
||||
class="${classMap({
|
||||
carousel__slides: true,
|
||||
'carousel__slides--horizontal': this.orientation === 'horizontal',
|
||||
'carousel__slides--vertical': this.orientation === 'vertical',
|
||||
'carousel__slides--dragging': this.dragging
|
||||
})}"
|
||||
carousel__slides: true,
|
||||
'carousel__slides--horizontal': this.orientation === 'horizontal',
|
||||
'carousel__slides--vertical': this.orientation === 'vertical',
|
||||
'carousel__slides--dragging': this.dragging
|
||||
})}"
|
||||
style="--slides-per-page: ${this.slidesPerPage};"
|
||||
aria-busy="${scrolling ? 'true' : 'false'}"
|
||||
aria-atomic="true"
|
||||
|
@ -525,15 +525,15 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
</div>
|
||||
|
||||
${this.navigation
|
||||
? html`
|
||||
? html`
|
||||
<div part="navigation" class="carousel__navigation">
|
||||
<button
|
||||
part="navigation-button navigation-button--previous"
|
||||
class="${classMap({
|
||||
'carousel__navigation-button': true,
|
||||
'carousel__navigation-button--previous': true,
|
||||
'carousel__navigation-button--disabled': !prevEnabled
|
||||
})}"
|
||||
'carousel__navigation-button': true,
|
||||
'carousel__navigation-button--previous': true,
|
||||
'carousel__navigation-button--disabled': !prevEnabled
|
||||
})}"
|
||||
aria-label="${this.localize.term('previousSlide')}"
|
||||
aria-controls="scroll-container"
|
||||
aria-disabled="${prevEnabled ? 'false' : 'true'}"
|
||||
|
@ -547,10 +547,10 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
<button
|
||||
part="navigation-button navigation-button--next"
|
||||
class=${classMap({
|
||||
'carousel__navigation-button': true,
|
||||
'carousel__navigation-button--next': true,
|
||||
'carousel__navigation-button--disabled': !nextEnabled
|
||||
})}
|
||||
'carousel__navigation-button': true,
|
||||
'carousel__navigation-button--next': true,
|
||||
'carousel__navigation-button--disabled': !nextEnabled
|
||||
})}
|
||||
aria-label="${this.localize.term('nextSlide')}"
|
||||
aria-controls="scroll-container"
|
||||
aria-disabled="${nextEnabled ? 'false' : 'true'}"
|
||||
|
@ -562,21 +562,27 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
</button>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
: ''}
|
||||
${this.pagination
|
||||
? html`
|
||||
<div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container" style="${styleMap({
|
||||
'--pages': pagesCount
|
||||
})}">
|
||||
? html`
|
||||
<div
|
||||
part="pagination"
|
||||
role="tablist"
|
||||
class="carousel__pagination"
|
||||
aria-controls="scroll-container"
|
||||
style="${styleMap({
|
||||
'--pages': pagesCount
|
||||
})}"
|
||||
>
|
||||
${map(range(pagesCount), index => {
|
||||
const isActive = index === currentPage;
|
||||
return html`
|
||||
const isActive = index === currentPage;
|
||||
return html`
|
||||
<button
|
||||
part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
|
||||
class="carousel__pagination-item"
|
||||
style="${styleMap({
|
||||
'--index': index
|
||||
})}"
|
||||
'--index': index
|
||||
})}"
|
||||
role="tab"
|
||||
aria-selected="${isActive ? 'true' : 'false'}"
|
||||
aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
|
||||
|
@ -585,10 +591,10 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
@keydown=${this.handleKeyDown}
|
||||
></button>
|
||||
`;
|
||||
})}
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
: ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
@ -152,11 +152,10 @@ export default css`
|
|||
|
||||
@supports (animation-timeline: view()) {
|
||||
.carousel__pagination-item {
|
||||
animation: pagination-item-active linear;
|
||||
animation-timeline: --carousel;
|
||||
animation-range:
|
||||
calc(var(--index) * calc(100% / var(--pages)))
|
||||
calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
|
||||
animation: pagination-item-active linear;
|
||||
animation-timeline: --carousel;
|
||||
animation-range: calc(var(--index) * calc(100% / var(--pages)))
|
||||
calc((var(--index) + 1) * calc(100% / var(--pages) + 1px));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue