mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-03-19 09:25:40 +00:00
Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
carson
@@ -21,5 +21,8 @@ You can copy and paste them and then adjust them for your needs.
|
||||
| [Active Search](/examples/active-search) | Demonstrates the active search box pattern
|
||||
| [Progress Bar](/examples/progress-bar) | Demonstrates a job-runner like progress bar
|
||||
| [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select
|
||||
| [Dialogs](/examples/dialogs) | Demonstrates the prompt and confirm dialogs
|
||||
| [Animations](/examples/animations) | Demonstrates various animation techniques
|
||||
| [Dialogs - Browser](/examples/dialogs) | Demonstrates the prompt and confirm dialogs
|
||||
| [Dialogs - UIKIt](/examples/modal-uikit) | Demonstrates modal dialogs using UIKit
|
||||
| [Dialogs - Bootstrap](/examples/modal-bootstrap) | Demonstrates modal dialogs using Bootstrap
|
||||
|
||||
|
||||
125
www/examples/modal-bootstrap.md
Normal file
125
www/examples/modal-bootstrap.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
layout: demo_layout.njk
|
||||
---
|
||||
|
||||
## Modal Dialogs in Bootstrap
|
||||
|
||||
Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
|
||||
This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to
|
||||
trigger its animation styles in Javascript.
|
||||
|
||||
We start with a button that triggers the dialog, along with a DIV at the bottom of your
|
||||
markup where the dialog will be loaded:
|
||||
|
||||
```html
|
||||
<button
|
||||
hx-get="/modal"
|
||||
hx-target="#show-modals-here"
|
||||
hx-trigger="click"
|
||||
class="btn btn-primary"
|
||||
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
|
||||
|
||||
<div id="show-modals-here"></div>
|
||||
```
|
||||
|
||||
This button uses a `GET` request to `/modal` when this button is clicked. The
|
||||
contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
|
||||
|
||||
We're replacing Bootstrap's javascript widgets with a small bit of Hyperscript to provide
|
||||
smooth animations when the dialog opens and closes.
|
||||
|
||||
Finally, the server responds with a slightly modified version of Bootstrap's standard modal
|
||||
|
||||
```html
|
||||
<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
|
||||
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
We're replacing the standard Bootstrap Javascript library with a little bit of Javascript,
|
||||
which triggers Bootstrap's smooth animations.
|
||||
|
||||
```javascript
|
||||
function closeModal() {
|
||||
var container = document.getElementById("modals-here")
|
||||
var backdrop = document.getElementById("modal-backdrop")
|
||||
var modal = document.getElementById("modal")
|
||||
|
||||
modal.classList.remove("show")
|
||||
backdrop.classList.remove("show")
|
||||
|
||||
setTimeout(function() {
|
||||
container.removeChild(backdrop)
|
||||
container.removeChild(modal)
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<div id="show-modals-here"></div>
|
||||
|
||||
{% include demo_ui.html.liquid %}
|
||||
|
||||
<script src="https://unpkg.com/hyperscript.org"></script>
|
||||
|
||||
<style>
|
||||
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css";
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function closeModal() {
|
||||
document.getElementById("modal").classList.remove("show")
|
||||
document.getElementById("modal-backdrop").classList.remove("show")
|
||||
|
||||
setTimeout(function() {
|
||||
document.getElementById("show-modals-here").innerHTML = ""
|
||||
}, 200)
|
||||
}
|
||||
|
||||
//=========================================================================
|
||||
// Fake Server Side Code
|
||||
//=========================================================================
|
||||
|
||||
// routes
|
||||
init("/demo", function(request, params) {
|
||||
return `<button
|
||||
hx-get="/modal"
|
||||
hx-target="#show-modals-here"
|
||||
bx-trigger="click"
|
||||
class="btn btn-primary"
|
||||
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
|
||||
`})
|
||||
|
||||
onGet("/modal", function(request, params){
|
||||
return `<div id="modal-backdrop" class="modal-backdrop fade" style="display:block;"></div>
|
||||
<div id="modal" class="modal fade" tabindex="-1" style="display:block;">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
});
|
||||
</script>
|
||||
135
www/examples/modal-uikit.md
Normal file
135
www/examples/modal-uikit.md
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
layout: demo_layout.njk
|
||||
---
|
||||
|
||||
## Modal Dialogs
|
||||
|
||||
Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
|
||||
This example shows how to use HTMX to display dynamic dialog using UIKit, and how to
|
||||
trigger its animation styles with little or no Javascript.
|
||||
|
||||
We start with a button that triggers the dialog, along with a DIV at the bottom of your
|
||||
markup where the dialog will be loaded:
|
||||
|
||||
This is an example of using HTMX to remotely load modal dialogs using UIKit.
|
||||
|
||||
```html
|
||||
<button
|
||||
id="showButton"
|
||||
hx-get="/uikit-modal.html"
|
||||
hx-target="#show-modals-here"
|
||||
class="uk-button uk-button-primary"
|
||||
_="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal">Open Modal</button>
|
||||
|
||||
<div id="show-modals-here"></div>
|
||||
```
|
||||
|
||||
This button uses a `GET` request to `/uikit-modal.html` when this button is clicked. The
|
||||
contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
|
||||
|
||||
We're replacing the standard UIKit Javascript library with a little bit of Hyperscript,
|
||||
which triggers UIKit's smooth animations. It is delayed by 10ms so that UIKit's animations
|
||||
will run correctly.
|
||||
|
||||
Finally, the server responds with a slightly modified version of UIKit's standard modal
|
||||
|
||||
```html
|
||||
<div id="modal" class="uk-modal" style="display:block;">
|
||||
<div class="uk-modal-dialog uk-modal-body">
|
||||
<h2 class="uk-modal-title">Modal Dialog</h2>
|
||||
<p>This modal dialog was loaded dynamically by HTMX.</p>
|
||||
|
||||
<form _="on submit take .uk-open from #modal">
|
||||
<div class="uk-margin">
|
||||
<input class="uk-input" placeholder="What is Your Name?">
|
||||
</div>
|
||||
<button type="button" class="uk-button uk-button-primary">Save Changes</button>
|
||||
<button
|
||||
id="cancelButton"
|
||||
type="button"
|
||||
class="uk-button uk-button-default"
|
||||
_="on click take .uk-open from #modal wait 200ms then remove #modal">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Hyperscript on the button and the form trigger animations when this dialog is completed
|
||||
or canceled. If you don't want to use Hyperscript, the modals will still work but UIKit's
|
||||
fade in animations will not be triggered.
|
||||
|
||||
Alternatively, you can add and remove these CSS classes without Hyperscript, by using in straight Javascript.
|
||||
It's just a lot more code:
|
||||
|
||||
```javascript
|
||||
|
||||
// This triggers the fade-in animation when a modal dialog is loaded and displayed
|
||||
window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad", function() {
|
||||
setTimeout(function(){
|
||||
window.document.getElementById("modal").classList.add("uk-open")
|
||||
}, 10)
|
||||
})
|
||||
|
||||
|
||||
// This triggers the fade-out animation when the modal is closed.
|
||||
window.document.getElementById("cancelButton").addEventListener("click", function() {
|
||||
window.document.getElementById("modal").classList.remove("uk-open")
|
||||
setTimeout(function(){
|
||||
window.document.getElementById("show-modals-here").innerHTML = ""
|
||||
,200
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
<div id="show-modals-here"></div>
|
||||
|
||||
{% include demo_ui.html.liquid %}
|
||||
|
||||
<style>
|
||||
@import "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.5.9/css/uikit-core.min.css";
|
||||
</style>
|
||||
|
||||
<script src="https://unpkg.com/hyperscript.org"></script>
|
||||
<script>
|
||||
//=========================================================================
|
||||
// Fake Server Side Code
|
||||
//=========================================================================
|
||||
|
||||
// routes
|
||||
init("/demo", function(request, params) {
|
||||
return `
|
||||
<button
|
||||
class="uk-button uk-button-primary"
|
||||
hx-get="/modal"
|
||||
hx-trigger="click"
|
||||
hx-target="#show-modals-here"
|
||||
_="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal">Show Modal Dialog</button>`
|
||||
})
|
||||
|
||||
onGet("/modal", function(request, params){
|
||||
return `
|
||||
<div id="modal" class="uk-modal" style="display:block;">
|
||||
<div class="uk-modal-dialog uk-modal-body">
|
||||
<h2 class="uk-modal-title">Modal Dialog</h2>
|
||||
<p>This modal dialog was loaded dynamically by HTMX. You can put any server request here and you don't (necessarily) need to use the UIKit Javascript file to make it work</p>
|
||||
|
||||
<form _="on submit take .uk-open from #modal">
|
||||
<div class="uk-margin">
|
||||
<input class="uk-input" placeholder="What is Your Name?">
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<input class="uk-input" placeholder="What is Your Quest?">
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<input class="uk-input" placeholder="What is Your Favorite Color?">
|
||||
</div>
|
||||
|
||||
<button type="button" class="uk-button uk-button-primary" _="on click call alert('submit to server and close dialog.')">Save Changes</button>
|
||||
<button type="button" class="uk-button uk-button-default" _="on click take .uk-open from #modal wait 200ms then remove #modal">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>`
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user