Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-09 22:20:09 +04:00
Code Issues Projects Releases Wiki Activity

Add segmented control component (#2087)

Browse Source 
* Add segmented control component and update related files

* Implement segmented navigation component and update related styles

* Create grumpy-flowers-act.md

* Refactor .gitignore and move playground pages to preview directory

* Enhance segmented navigation with hover state and class support

* Refactor segmented control layout for improved responsiveness and alignment
This commit is contained in:
Paweł Kuna
2025-02-06 18:02:46 +01:00
committed by GitHub
parent 117fbbb2d5
commit cb278c762d
14 changed files with 278 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
core/scss/ui/_segmented.scss Normal file
View File

@@ -0,0 +1,101 @@
.nav-segmented {
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
--#{$prefix}nav-padding: 2px;
--#{$prefix}nav-height: 2.5rem;
--#{$prefix}nav-gap: .25rem;
--#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
--#{$prefix}nav-font-size: inherit;
--#{$prefix}nav-radius: 6px;
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
--#{$prefix}nav-link-gap: .25rem;
--#{$prefix}nav-link-padding-x: .75rem;
--#{$prefix}nav-link-icon-size: 1.25rem;
display: inline-flex;
flex-wrap: wrap;
gap: var(--#{$prefix}nav-gap);
padding: var(--#{$prefix}nav-padding);
list-style: none;
background: var(--#{$prefix}nav-bg);
border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
.nav-link {
display: inline-flex;
gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
align-items: center;
margin: 0;
font-size: var(--#{$prefix}nav-font-size);
min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
border: 1px solid transparent;
background: transparent;
color: var(--#{$prefix}secondary);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color $transition-time, color $transition-time;
border-radius: var(--#{$prefix}nav-radius);
flex-grow: 1;
justify-content: center;
&:hover,
&.hover {
background: rgba(0, 0, 0, .04);
color: var(--#{$prefix}body-color);
}
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
cursor: not-allowed;
}
}
.nav-link-input:checked + .nav-link,
.nav-link.active {
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}nav-active-bg);
border-color: var(--#{$prefix}border-color);
}
.nav-link-input {
display: none;
}
.nav-link-icon {
width: var(--#{$prefix}nav-link-icon-size);
height: var(--#{$prefix}nav-link-icon-size);
margin: 0 -.25rem;
color: inherit;
}
}
.nav-segmented-vertical {
flex-direction: column;
.nav-link {
justify-content: flex-start;
}
}
.nav-sm {
--#{$prefix}nav-height: 2rem;
--#{$prefix}nav-font-size: var(--tblr-font-size-h5);
--#{$prefix}nav-radius: 4px;
--#{$prefix}nav-link-padding-x: .5rem;
--#{$prefix}nav-link-gap: .25rem;
--#{$prefix}nav-link-icon-size: 1rem;
}
.nav-lg {
--#{$prefix}nav-height: 3rem;
--#{$prefix}nav-font-size: var(--tblr-font-size-h3);
--#{$prefix}nav-radius: 8px;
--#{$prefix}nav-link-padding-x: 1rem;
--#{$prefix}nav-link-gap: .5rem;
--#{$prefix}nav-link-icon-size: 1.5rem;
}