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

update tab group placements

Browse Source
This commit is contained in:
Cory LaViska
2021-05-26 07:32:51 -04:00
parent 8d984d8dac
commit 489d713fa2
3 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/tab-group.md
View File

@@ -40,12 +40,12 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
</sl-tab-group>
```
### Tabs on Left
### Tabs on Start
Tabs can be shown on the left by setting `placement` to `left`.
Tabs can be shown on the starting side by setting `placement` to `start`.
```html preview
<sl-tab-group placement="left">
<sl-tab-group placement="start">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -58,12 +58,12 @@ Tabs can be shown on the left by setting `placement` to `left`.
</sl-tab-group>
```
### Tabs on Right
### Tabs on End
Tabs can be shown on the right by setting `placement` to `right`.
Tabs can be shown on the ending side by setting `placement` to `end`.
```html preview
<sl-tab-group placement="right">
<sl-tab-group placement="end">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>

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

@@ -44,11 +44,11 @@
width: var(--sl-spacing-x-large);
}
.tab-group__scroll-button--left {
.tab-group__scroll-button--start {
left: 0;
}
.tab-group__scroll-button--right {
.tab-group__scroll-button--end {
right: 0;
}
@@ -124,7 +124,7 @@
// Left
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.tab-group--left {
.tab-group--start {
flex-direction: row;
.tab-group__nav-container {
@@ -152,7 +152,7 @@
// Right
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.tab-group--right {
.tab-group--end {
flex-direction: row;
.tab-group__nav-container {

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

@@ -45,7 +45,7 @@ export default class SlTabGroup extends LitElement {
@state() private hasScrollControls = false;
/** The placement of the tabs. */
@property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
@property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
/**
* When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
@@ -298,8 +298,8 @@ export default class SlTabGroup extends LitElement {
this.indicator.style.transform = `translateX(${offsetLeft}px)`;
break;
case 'left':
case 'right':
case 'start':
case 'end':
this.indicator.style.width = 'auto';
this.indicator.style.height = `${height}px`;
this.indicator.style.transform = `translateY(${offsetTop}px)`;
@@ -333,8 +333,8 @@ export default class SlTabGroup extends LitElement {
'tab-group': true,
'tab-group--top': this.placement === 'top',
'tab-group--bottom': this.placement === 'bottom',
'tab-group--left': this.placement === 'left',
'tab-group--right': this.placement === 'right',
'tab-group--start': this.placement === 'start',
'tab-group--end': this.placement === 'end',
'tab-group--has-scroll-controls': this.hasScrollControls
})}
@click=${this.handleClick}