Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

fix #1357: buttons group not active (#1358)

Browse Source
This commit is contained in:
Paweł Kuna
2022-11-11 18:00:46 +01:00
committed by GitHub
parent 7a9702a908
commit 5da22ec4e4
8 changed files with 91 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/_includes/forms/form-elements-4.html
View File

@@ -3,47 +3,32 @@
{% include parts/form/selectgroup-payments.html %}
{% include parts/form/selectgroup-project-manager.html %}
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn">1 min</button>
<button type="button" class="btn btn-primary">5 min</button>
<button type="button" class="btn">10 min</button>
<button type="button" class="btn">30 min</button>
</div>
{% include ui/button-group.html items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
</div>
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100">
<button type="button" class="btn">Option 1</button>
<button type="button" class="btn btn-primary">Option 2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6
</a>
</div>
{% include ui/button-group.html items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %}
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label">Vertical buttons group</label>
{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%}
</div>
</div>
<div class="col">
<div class="mb-3">
<label class="form-label">Vertical with dropdown</label>
{% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Toolbar</label>
<div class="btn-group w-100">
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %}
{% include ui/button.html icon=icon icon-only=true %}
{% endfor %}
</div>
{% include ui/button-group.html icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
</div>

44
src/pages/_includes/ui/button-group.html Normal file
View File

@@ -0,0 +1,44 @@
{% assign items = include.items | split: ',' %}
{% assign icons = include.icons | split: ',' %}
{% assign id = include.id %}
<div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
{% for item in items %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% for icon in icons %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} class="btn btn-icon{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{% include ui/icon.html icon=icon %}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% if include.dropdown %}
<div class="btn-group" role="group">
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-dropdown" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-dropdown"{% else %}button{% endif %} class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</{% if include.radio %}label{% else %}button{% endif %}>
{% include ui/dropdown-menu.html %}
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6dropdown-menu
</a>
</div>
</div>
{% endif %}
</div>

1
src/pages/_includes/ui/dropdown-menu.html
View File

@@ -1,6 +1,5 @@
<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.menu %}
{% assign menu = include.menu | split: ',' %}
{% for item in menu %}

1
src/scss/_core.scss
View File

@@ -17,6 +17,7 @@
@import "ui/badges";
@import "ui/breadcrumbs";
@import "ui/buttons";
@import "ui/button-group";
@import "ui/calendars";
@import "ui/carousel";
@import "ui/cards";

4
src/scss/_variables.scss
View File

@@ -183,7 +183,9 @@ $border-color-light-translucent: rgba($text-muted, $border-light-opacity) !defau
$border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
$border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
$active-bg: var(--#{$prefix}gray-100) !default;
$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
$active-color: var(--#{$prefix}primary) !default;
$active-border-color: var(--#{$prefix}primary) !default;
$hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;

14
src/scss/ui/_button-group.scss Normal file
View File

@@ -0,0 +1,14 @@
.btn-group,
.btn-group-vertical {
> .btn-check:checked + .btn,
> .btn:active,
> .btn.active {
z-index: 5;
}
> .btn-check:focus + .btn,
> .btn:hover,
> .btn:focus {
z-index: 1;
}
}

11
src/scss/ui/_buttons.scss
View File

@@ -6,9 +6,12 @@
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-border-color: var(--#{$prefix}border-color);
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-bg};
--#{$prefix}btn-active-border-color: #{$active-border-color};
display: inline-flex;
align-items: center;
@@ -38,6 +41,12 @@
.badge {
top: auto;
}
.btn-check + &:hover {
color: var(--#{$prefix}btn-hover-color);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
}
}
.btn-link {

6
src/scss/ui/forms/_form-selectgroup.scss
View File

@@ -94,9 +94,9 @@ Select group
.form-selectgroup-input:checked + .form-selectgroup-label {
z-index: 1;
color: var(--#{$prefix}primary);
background: rgba(var(--#{$prefix}primary-rgb), .04);
border-color: var(--#{$prefix}primary);
color: #{$active-color};
background: #{$active-bg};
border-color: #{$active-border-color};
}
.form-selectgroup-input:focus + .form-selectgroup-label {