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

fix scrollable tabs

Browse Source
This commit is contained in:
Cory LaViska
2021-06-01 08:21:10 -04:00
parent 9f405686ec
commit 115e80dce0
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/resources/changelog.md
View File

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Added `?` to optional arguments in methods tables
- Added the `scrollPosition()` method to `sl-textarea` to get/set scroll position
- Fixed a bug in `sl-tab-group` where scrollable tab icons were not displaying correctly
- Removed `fill: both` from internal animate utility so styles won't "stick" by default [#450](https://github.com/shoelace-style/shoelace/issues/450)
## 2.0.0-beta.42

12
src/components/tab-group/tab-group.ts
View File

@@ -202,14 +202,14 @@ export default class SlTabGroup extends LitElement {
}
}
handleScrollLeft() {
handleScrollToStart() {
this.nav.scroll({
left: this.nav.scrollLeft - this.nav.clientWidth,
behavior: 'smooth'
});
}
handleScrollRight() {
handleScrollToEnd() {
this.nav.scroll({
left: this.nav.scrollLeft + this.nav.clientWidth,
behavior: 'smooth'
@@ -344,11 +344,11 @@ export default class SlTabGroup extends LitElement {
${this.hasScrollControls
? html`
<sl-icon-button
class="tab-group__scroll-button tab-group__scroll-button--left"
class="tab-group__scroll-button tab-group__scroll-button--start"
exportparts="base:scroll-button"
name="chevron-left"
library="system"
@click=${this.handleScrollLeft}
@click=${this.handleScrollToStart}
></sl-icon-button>
`
: ''}
@@ -363,11 +363,11 @@ export default class SlTabGroup extends LitElement {
${this.hasScrollControls
? html`
<sl-icon-button
class="tab-group__scroll-button tab-group__scroll-button--right"
class="tab-group__scroll-button tab-group__scroll-button--end"
exportparts="base:scroll-button"
name="chevron-right"
library="system"
@click=${this.handleScrollRight}
@click=${this.handleScrollToEnd}
></sl-icon-button>
`
: ''}