js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
Cory LaViska
2024-08-05 12:49:59 -04:00
parent d3e0db88c4
commit 669432d09d
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/pages/components/tab-group.md
View File

@@ -411,7 +411,7 @@ const App = () => (
);
```
### Auto hide scroll controls
### Auto hide scroll controls
When tabs are scrolled all the way to one side, the scroll button on that side can't be clicked. Add the `auto-hide-scroll-buttons` attribute to the tab group to hide the effected button in that case.

16
src/components/tab-group/tab-group.component.ts
View File

@@ -387,7 +387,7 @@ export default class SlTabGroup extends ShoelaceElement {
}
private isScrolledToEnd() {
return (this.scrollFromStart() + this.nav.clientWidth) >= this.nav.scrollWidth - this.scrollOffset;
return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset;
}
private scrollFromStart() {
@@ -457,9 +457,9 @@ export default class SlTabGroup extends ShoelaceElement {
part="scroll-button scroll-button--start"
exportparts="base:scroll-button__base"
class=${classMap({
"tab-group__scroll-button": true,
"tab-group__scroll-button--start": true,
"tab-group__scroll-button--start--hidden": this.shouldHideScrollStartButton
'tab-group__scroll-button': true,
'tab-group__scroll-button--start': true,
'tab-group__scroll-button--start--hidden': this.shouldHideScrollStartButton
})}
name=${isRtl ? 'chevron-right' : 'chevron-left'}
library="system"
@@ -469,7 +469,7 @@ export default class SlTabGroup extends ShoelaceElement {
`
: ''}
<div class="tab-group__nav" @scrollend=${this.updateScrollButtons}>
<div class="tab-group__nav" @scrollend=${this.updateScrollButtons}>
<div part="tabs" class="tab-group__tabs" role="tablist">
<div part="active-tab-indicator" class="tab-group__indicator"></div>
<slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
@@ -482,9 +482,9 @@ export default class SlTabGroup extends ShoelaceElement {
part="scroll-button scroll-button--end"
exportparts="base:scroll-button__base"
class=${classMap({
"tab-group__scroll-button": true,
"tab-group__scroll-button--end": true,
"tab-group__scroll-button--end--hidden": this.shouldHideScrollEndButton
'tab-group__scroll-button': true,
'tab-group__scroll-button--end': true,
'tab-group__scroll-button--end--hidden': this.shouldHideScrollEndButton
})}
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"