mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-29 22:11:22 +00:00
91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<title>HTMx - Teaching HTML new tricks</title>
|
|
<style type="text/css">body {
|
|
margin: 40px auto;
|
|
max-width: 740px;
|
|
line-height: 1.6;
|
|
font-size: 18px;
|
|
color: #333;
|
|
padding: 0 10px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
|
|
}
|
|
h1, h2, h3 {
|
|
line-height: 1.2
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 4em
|
|
}
|
|
.flair {
|
|
color: rgb(52, 101, 164);
|
|
}</style>
|
|
</head>
|
|
<body>
|
|
<h1><<span class="flair">/</span>> HTM<sub class="flair">x</sub></h1>
|
|
<section>
|
|
<p>HTMx is a set of extensions to HTML that bring many of the useful features of modern web browsers directly
|
|
into HTML. It fills gaps in functionality found in standard HTML, dramatically expanding its expressiveness while
|
|
retaining the fundamental simplicity of declarative hypertext.</p>
|
|
<p>Here is a simple example of HTMx in action:</p>
|
|
<pre><button hx-get="/example" hx-target="#myDiv">Click Me</button></pre>
|
|
<p>This example issues an AJAX request to <code>/example</code> when a user clicks on it, and swaps the response
|
|
HTML into the element with the id <code>myDiv</code></p>
|
|
<p>HTMx is inspired by <a href="http://intercoolerjs.org">intercooler.js</a>, and aims to be a minimalist &
|
|
dependency free implementation of the same concept.</p>
|
|
</section>
|
|
<section>
|
|
<h2><<span class="flair">/</span>> Attributes</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Attribute</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>hx-get</td>
|
|
<td>Issues an HTTP GET to the given URL</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hx-target</td>
|
|
<td>Specifies the target element that should be swapped</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hx-swap</td>
|
|
<td>Specifies how target element should be swapped: innerHTML, outerHTML, append</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<h2><<span class="flair">/</span>> Events</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Event</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<h2><<span class="flair">/</span>>HTTP Headers</h2>
|
|
<h3>Request Headers</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Header</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
</body>
|
|
</html> |