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

fix tab group indicator position (#366)

Browse Source 
* fix tab group indicator position for flex-end

* fix event type parsing

* update version

* 2.0.0-beta.31

* tab-group resize reposition active tab indicator

* tab-group remove transition constant

Co-authored-by: Nils Silbernagel <n.silbernagel@awesome-software.de>
Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
This commit is contained in:
Nils Silbernagel
2021-03-11 15:11:06 +01:00
committed by GitHub
parent 3b3aef7c63
commit e15bd8bca1
2 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/tab-group/tab-group.scss
View File

@@ -23,6 +23,7 @@
.tab-group__active-tab-indicator {
position: absolute;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
left: 0;
}
// Remove the focus ring when the user isn't interacting with a keyboard

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

@@ -6,6 +6,7 @@ import { SlTab, SlTabPanel } from '../../shoelace';
import { getOffset } from '../../internal/offset';
import { scrollIntoView } from '../../internal/scroll';
import { focusVisible } from '../../internal/focus-visible';
import { styleMap } from 'lit-html/directives/style-map';
/**
* @since 2.0
@@ -67,7 +68,11 @@ export default class SlTabGroup extends LitElement {
focusVisible.observe(this.tabGroup);
this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
this.resizeObserver = new ResizeObserver(() => {
this.stopActiveTabIndicatorTransitionUntilNextFrame();
this.respositionActiveTabIndicator();
this.updateScrollControls()
});
this.resizeObserver.observe(this.nav);
requestAnimationFrame(() => this.updateScrollControls());
@@ -253,30 +258,49 @@ export default class SlTabGroup extends LitElement {
return;
}
const width = tab.clientWidth;
const height = tab.clientHeight;
const offset = getOffset(tab, this.nav);
const offsetTop = offset.top + this.nav.scrollTop;
const offsetLeft = offset.left + this.nav.scrollLeft;
switch (this.placement) {
case 'top':
case 'bottom':
this.activeTabIndicator.style.width = `${width}px`;
(this.activeTabIndicator.style.height as string | undefined) = undefined;
this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
break;
case 'left':
case 'right':
(this.activeTabIndicator.style.width as string | undefined) = undefined;
this.activeTabIndicator.style.height = `${height}px`;
this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
break;
}
this.respositionActiveTabIndicator()
}
}
respositionActiveTabIndicator() {
const currentTab = this.getActiveTab();
if(!currentTab){
return;
}
const width = currentTab.clientWidth;
const height = currentTab.clientHeight;
const offset = getOffset(currentTab, this.nav);
const offsetTop = offset.top + this.nav.scrollTop;
const offsetLeft = offset.left + this.nav.scrollLeft;
switch (this.placement) {
case 'top':
case 'bottom':
this.activeTabIndicator.style.width = `${width}px`;
(this.activeTabIndicator.style.height as string | undefined) = undefined;
this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
break;
case 'left':
case 'right':
(this.activeTabIndicator.style.width as string | undefined) = undefined;
this.activeTabIndicator.style.height = `${height}px`;
this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
break;
}
}
stopActiveTabIndicatorTransitionUntilNextFrame() {
const transitionValue = this.activeTabIndicator.style.transition;
this.activeTabIndicator.style.transition = 'none';
requestAnimationFrame(() => {
this.activeTabIndicator.style.transition = transitionValue;
});
}
syncTabsAndPanels() {
this.tabs = this.getAllTabs();
this.panels = this.getAllPanels();