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

Refactor modal component structure and update modal examples (#2138)

Browse Source 
Co-authored-by: Kevin Papst <kevinpapst@users.noreply.github.com>
This commit is contained in:
Paweł Kuna
2025-03-02 13:16:17 +01:00
committed by GitHub
parent 6d0271ad57
commit d7f4f50986
8 changed files with 102 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/lovely-dots-know.md Normal file
View File

@@ -0,0 +1,5 @@
---
"preview": patch
---
Update modal examples

4
core/scss/utils/_colors.scss
View File

@@ -50,4 +50,8 @@
.bg-surface-tertiary {
background-color: var(--#{$prefix}bg-surface-tertiary) !important;
}
.bg-surface-backdrop {
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
}

6
preview/eleventy.config.mjs
View File

@@ -592,7 +592,11 @@ export default function (eleventyConfig) {
});
['script', 'modal'].forEach((tag) => {
eleventyConfig.addPairedShortcode(`capture_${tag}`, function (content) {
eleventyConfig.addPairedShortcode(`capture_${tag}`, function (content, inline) {
if (inline) {
return content;
}
if (!this.page[tag]) {
this.page[tag] = []
}

2
preview/pages/_data/menu.json
View File

@@ -132,7 +132,7 @@
},
"modals": {
"url": "modals.html",
"title": "Modal"
"title": "Modals"
},
"markdown": {
"title": "Markdown",

23
preview/pages/_includes/parts/modals/signature.html Normal file
View File

@@ -0,0 +1,23 @@
{% include "ui/modal/close.html" %}
<div class="modal-body">
<h3 class="card-title">Confirm transfer</h3>
<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
<form action="">
<div class="mb-3">
<label class="form-label required">Signature</label>
<div class="position-relative select-none">
{% include "ui/signature.html" sample clear width=684 height=400 %}
</div>
</div>
</form>
<div class="text-secondary fs-5">
I agree that the signature and initials will be the electronic representation of my signature and initials for
all purposes when I (or my agent) use
them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn">Cancel</button>
<button type="button" class="btn btn-primary ms-auto">Confirm transfer</button>
</div>

1
preview/pages/_includes/parts/modals/success.html
View File

@@ -1,7 +1,6 @@
{% include "ui/modal/close.html" %}
<div class="modal-status bg-success"></div>
<div class="modal-body text-center py-4">
{% include "ui/icon.html" icon="circle-check" color="green" size="lg" class="mb-2" %}
<h3>Payment succedeed</h3>

5
preview/pages/_includes/ui/modal.html
View File

@@ -1,9 +1,10 @@
<!-- BEGIN MODAL -->
{% assign modal-id = include.modal-id | default: 'simple' %}
{% assign size = include['size'] %}
{% assign inline = include.inline | default: false %}
{% capture_modal %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
{% capture_modal inline %}
<div class="modal modal-blur fade{% if include.class %} {{ include.class }}{% endif %}" {% if include.style %} style="{{ include.style }}"{% endif %} id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
<div class="modal-content">
{% include "parts/modals/{{ modal-id }}.html" %}

83
preview/pages/modals.html
View File

@@ -4,31 +4,70 @@ page-header: Modals
page-menu: base.modals
layout: default
permalink: modals.html
page-libs: [signature_pad]
---
<div class="card">
<div class="card-body">
<div class="btn-list">
{% include "ui/button.html" text="Simple modal" modal-id="simple" %}
{% include "ui/button.html" text="Large modal" modal-id="large" %}
{% include "ui/button.html" text="Small modal" modal-id="small" %}
{% include "ui/button.html" text="Full width modal" modal-id="full-width" %}
{% include "ui/button.html" text="Scrollable modal" modal-id="scrollable" %}
{% include "ui/button.html" text="Modal with form" modal-id="report" %}
{% include "ui/button.html" text="Success modal" modal-id="success" %}
{% include "ui/button.html" text="Danger modal" modal-id="danger" %}
{% include "ui/button.html" text="Modal with simple form" modal-id="team" %}
<div class="row g-5">
<div class="d-none d-md-block col-3">
<div class="nav nav-vertical sticky-top pt-4">
<a href="#modal-simple" class="nav-link">Simple modal</a>
<a href="#modal-large" class="nav-link">Large modal</a>
<a href="#modal-small" class="nav-link">Small modal</a>
<a href="#modal-full-width" class="nav-link">Full width modal</a>
<a href="#modal-scrollable" class="nav-link">Scrollable modal</a>
<a href="#modal-report" class="nav-link">Modal with form</a>
<a href="#modal-success" class="nav-link">Success modal</a>
<a href="#modal-danger" class="nav-link">Danger modal</a>
<a href="#modal-team" class="nav-link">Modal with simple form</a>
<a href="#modal-signature" class="nav-link">Modal with signature form</a>
</div>
</div>
<div class="col">
<div class="space-y-6">
<div>
<h3>Simple modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="simple" inline %}
</div>
<div>
<h3>Large modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="large" size="lg" inline %}
</div>
<div>
<h3>Small modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="small" size="sm" inline %}
</div>
<div>
<h3>Full width modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="full-width" size="full-width" inline %}
</div>
<div>
<h3>Scrollable modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
</div>
<div>
<h3>Modal with form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="report" size="lg" inline %}
</div>
<div>
<h3>Success modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="success" size="sm" inline %}
</div>
<div>
<h3>Danger modal</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="danger" size="sm" inline %}
</div>
<div>
<h3>Modal with simple form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="team" inline %}
</div>
<div>
<h3>Modal with signature form</h3>
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="signature" inline %}
</div>
</div>
</div>
</div>
</div>
</div>
{% include "ui/modal.html" modal-id="simple" %}
{% include "ui/modal.html" modal-id="large" size="lg" %}
{% include "ui/modal.html" modal-id="small" size="sm" %}
{% include "ui/modal.html" modal-id="full-width" size="full-width" %}
{% include "ui/modal.html" modal-id="scrollable" scrollable=true %}
{% include "ui/modal.html" modal-id="report" size="lg" %}
{% include "ui/modal.html" modal-id="success" size="sm" %}
{% include "ui/modal.html" modal-id="danger" size="sm" %}
{% include "ui/modal.html" modal-id="team" %}
</div>