mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
Merge branch 'main' into development
This commit is contained in:
@@ -96,18 +96,7 @@
|
||||
{% if head %}{{ head | safe }}{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% include "partials/sidebar.njk" %}
|
||||
|
||||
<main id="content">
|
||||
<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
|
||||
{% include "partials/header.njk" %}
|
||||
</header>
|
||||
|
||||
<div class="p-6 md:p-8 xl:p-12">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</main>
|
||||
{{ content | safe }}
|
||||
|
||||
{% from "toast.njk" import toaster %}
|
||||
{{ toaster() }}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
|
||||
{% include "partials/sidebar.njk" %}
|
||||
|
||||
<main id="content">
|
||||
<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
|
||||
{% include "partials/header.njk" %}
|
||||
</header>
|
||||
|
||||
<div class="p-6 md:p-8 xl:p-12">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</main>
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
layout: layouts/layout.njk
|
||||
---
|
||||
|
||||
<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
|
||||
|
||||
@@ -8,19 +8,18 @@
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/success" hx-target="#toast-htmx">
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/success" hx-target="#toaster" hx-swap="beforeend">
|
||||
Success
|
||||
</button>
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/error" hx-target="#toast-htmx">
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/error" hx-target="#toaster" hx-swap="beforeend">
|
||||
Error
|
||||
</button>
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/info" hx-target="#toast-htmx">
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/info" hx-target="#toaster" hx-swap="beforeend">
|
||||
Info
|
||||
</button>
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/warning" hx-target="#toast-htmx">
|
||||
<button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/warning" hx-target="#toaster" hx-swap="beforeend">
|
||||
Warning
|
||||
</button>
|
||||
<div id="toast-htmx"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+38
-130
@@ -56,7 +56,6 @@
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
@@ -258,9 +257,6 @@
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -302,9 +298,6 @@
|
||||
.right-3 {
|
||||
right: calc(var(--spacing) * 3);
|
||||
}
|
||||
.left-1\/2 {
|
||||
left: calc(1/2 * 100%);
|
||||
}
|
||||
.left-2 {
|
||||
left: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -353,12 +346,6 @@
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -408,10 +395,6 @@
|
||||
width: calc(var(--spacing) * 2);
|
||||
height: calc(var(--spacing) * 2);
|
||||
}
|
||||
.size-2\.5 {
|
||||
width: calc(var(--spacing) * 2.5);
|
||||
height: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
.size-3\.5 {
|
||||
width: calc(var(--spacing) * 3.5);
|
||||
height: calc(var(--spacing) * 3.5);
|
||||
@@ -458,27 +441,9 @@
|
||||
.h-14 {
|
||||
height: calc(var(--spacing) * 14);
|
||||
}
|
||||
.h-18 {
|
||||
height: calc(var(--spacing) * 18);
|
||||
}
|
||||
.h-20 {
|
||||
height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.h-24 {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
.h-48 {
|
||||
height: calc(var(--spacing) * 48);
|
||||
}
|
||||
.max-h-64 {
|
||||
max-height: calc(var(--spacing) * 64);
|
||||
}
|
||||
.max-h-\[150px\] {
|
||||
max-height: 150px;
|
||||
}
|
||||
.max-h-\[200px\] {
|
||||
max-height: 200px;
|
||||
}
|
||||
.max-h-\[612px\] {
|
||||
max-height: 612px;
|
||||
}
|
||||
@@ -566,19 +531,12 @@
|
||||
.min-w-56 {
|
||||
min-width: calc(var(--spacing) * 56);
|
||||
}
|
||||
.min-w-\[8rem\] {
|
||||
min-width: 8rem;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -608,8 +566,8 @@
|
||||
.list-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -656,9 +614,6 @@
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-5 {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-6 {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -668,13 +623,6 @@
|
||||
.gap-10 {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
}
|
||||
.space-y-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -696,9 +644,6 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.gap-x-1\.5 {
|
||||
column-gap: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.gap-x-2 {
|
||||
column-gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -745,8 +690,8 @@
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.rounded-\[2px\] {
|
||||
border-radius: 2px;
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: calc(infinity * 1px);
|
||||
@@ -782,12 +727,6 @@
|
||||
.border-amber-50 {
|
||||
border-color: var(--color-amber-50);
|
||||
}
|
||||
.border-border\/50 {
|
||||
border-color: var(--color-border);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.border-muted {
|
||||
border-color: var(--color-muted);
|
||||
}
|
||||
@@ -857,6 +796,9 @@
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-\[0\.3rem\] {
|
||||
padding-inline: 0.3rem;
|
||||
}
|
||||
.py-1\.5 {
|
||||
padding-block: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@@ -869,6 +811,9 @@
|
||||
.py-4 {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.py-\[0\.2rem\] {
|
||||
padding-block: 0.2rem;
|
||||
}
|
||||
.pt-2 {
|
||||
padding-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -936,10 +881,6 @@
|
||||
--tw-leading: var(--leading-tight);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-medium {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
@@ -1007,26 +948,16 @@
|
||||
.underline-offset-4 {
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.opacity-0 {
|
||||
opacity: 0%;
|
||||
}
|
||||
.opacity-50 {
|
||||
opacity: 50%;
|
||||
}
|
||||
.opacity-60 {
|
||||
opacity: 60%;
|
||||
}
|
||||
.opacity-100 {
|
||||
opacity: 100%;
|
||||
}
|
||||
.shadow-none {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xs {
|
||||
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -1060,10 +991,6 @@
|
||||
--tw-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.duration-400 {
|
||||
--tw-duration: 400ms;
|
||||
transition-duration: 400ms;
|
||||
}
|
||||
.outline-none {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
@@ -1082,17 +1009,6 @@
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.peer-checked\:border {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
.peer-checked\:border-blue-500 {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
}
|
||||
.peer-checked\:border-primary {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
border-color: var(--color-primary);
|
||||
@@ -1156,13 +1072,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-accent {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-accent\/50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1197,13 +1106,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-accent-foreground {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-accent-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-foreground {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1211,13 +1113,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-muted-foreground {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-zinc-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1382,6 +1277,11 @@
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-2 {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.xl\:block {
|
||||
@media (width >= 80rem) {
|
||||
display: block;
|
||||
@@ -1828,21 +1728,6 @@
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
.htmx-indicator {
|
||||
visibility: hidden;
|
||||
opacity: 0%;
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
.htmx-indicator:not(.htmx-request) {
|
||||
display: none;
|
||||
}
|
||||
.htmx-request, .htmx-request.htmx-indicator {
|
||||
visibility: visible;
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.alert, .alert-destructive {
|
||||
@@ -4281,6 +4166,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.htmx-indicator {
|
||||
visibility: hidden;
|
||||
opacity: 0%;
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
.htmx-indicator:not(.htmx-request) {
|
||||
display: none;
|
||||
}
|
||||
.htmx-request, .htmx-request.htmx-indicator {
|
||||
visibility: visible;
|
||||
opacity: 100%;
|
||||
}
|
||||
.content {
|
||||
> h2 {
|
||||
margin-top: calc(var(--spacing) * 16);
|
||||
@@ -4310,6 +4210,14 @@
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
> h4 {
|
||||
margin-block: calc(var(--spacing) * 6);
|
||||
scroll-margin: calc(var(--spacing) * 22);
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.prose {
|
||||
margin-block: calc(var(--spacing) * 6);
|
||||
a {
|
||||
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
---
|
||||
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
@@ -53,12 +53,28 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p class="prose">The Alert Dialog component uses the same Alpine.js code as the <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> component with one small difference: we set <code>initialCloseOnOverlayClick</code> to <code>false</code> to prevent the dialog from closing when the overlay is clicked.</p>
|
||||
<section class="prose">
|
||||
<p>The Alert Dialog component uses the same Alpine.js code as the <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> component with one small difference: we set <code>initialCloseOnOverlayClick</code> to <code>false</code> to prevent the dialog from closing when the overlay is clicked.</p>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dialog.js" target="_blank">
|
||||
Individual JS file (dialog.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
@@ -67,9 +83,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="alert-dialog", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% set footer %}
|
||||
<button class="btn-outline" @click="open = false">Cancel</button>
|
||||
|
||||
@@ -64,10 +64,32 @@ document.addEventListener('alpine:init', () => {
|
||||
|
||||
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
||||
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>The example above uses some simple Tailwind CSS along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
|
||||
<p>This example uses some simple Tailwind CSS styles along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
|
||||
Individual JS file (select.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
- label: Examples
|
||||
id: examples
|
||||
children:
|
||||
@@ -57,12 +57,9 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<div class="prose">
|
||||
<p>Combobox uses the same Alpine.js code and markup as the <a href="/components/select">Select</a> component, the only difference being the search box at the top of the listbox.</p>
|
||||
<p>You can set up a few additional options on the <code><div data-popover></code> element:</p>
|
||||
<ul>
|
||||
@@ -70,7 +67,24 @@ document.addEventListener('alpine:init', () => {
|
||||
<li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
|
||||
<li><code>data-empty</code> to set up the message when the search is empty.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
|
||||
Individual JS file (select.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
@@ -79,9 +93,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="combobox", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">select()</code> Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks).</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/select.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/select.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% call select(
|
||||
listbox_attrs={"data-empty": "No framework found."},
|
||||
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
- label: Examples
|
||||
id: examples
|
||||
children:
|
||||
@@ -60,7 +60,7 @@ document.addEventListener('alpine:init', () => {
|
||||
</script>
|
||||
{% endset %}
|
||||
|
||||
{{ code_preview("dialog", code_html | prettyHtml) }}
|
||||
{{ code_preview("dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
|
||||
|
||||
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
||||
|
||||
@@ -69,9 +69,6 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
@@ -89,8 +86,24 @@ document.addEventListener('alpine:init', () => {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dialog.js" target="_blank">
|
||||
Individual JS file (dialog.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
@@ -98,9 +111,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="combobox", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% set footer %}
|
||||
<button class="btn-outline" @click="open = false">Cancel</button>
|
||||
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
- label: Examples
|
||||
id: examples
|
||||
children:
|
||||
@@ -87,9 +87,6 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
@@ -113,8 +110,25 @@ document.addEventListener('alpine:init', () => {
|
||||
<li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
|
||||
<li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dropdown-menu.js" target="_blank">
|
||||
Individual JS file (dropdown-menu.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
@@ -122,9 +136,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="dropdown-menu", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dropdown_menu()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dropdown-menu.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dropdown-menu.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% call dropdown_menu(
|
||||
id="dropdown-menu",
|
||||
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
---
|
||||
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
@@ -70,25 +70,42 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>The component is structured as such:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div class="popover"></code> which wraps around the entire component and holds it state (e.g. open/close).</li>
|
||||
<li>A <code><button></code> that acts as the trigger to open or close the popover.</li>
|
||||
<li>A <code><div data-popover></code> that holds the content of the popover.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can set up a few additional options on the <code><div data-popover></code> element:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
|
||||
<li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/popover.js" target="_blank">
|
||||
Individual JS file (popover.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
@@ -96,11 +113,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="popover", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<section class="prose">
|
||||
<p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
</section>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">popover()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/popover.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/popover.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% call popover(
|
||||
id="demo-popover",
|
||||
|
||||
@@ -10,8 +10,8 @@ toc:
|
||||
id: usage-html
|
||||
- label: HTML + Javascript
|
||||
id: usage-js
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
- label: Examples
|
||||
id: examples
|
||||
children:
|
||||
@@ -78,16 +78,9 @@ document.addEventListener('alpine:init', () => {
|
||||
|
||||
<h3 id="usage-js"><a href="#usage-js">HTML + Javascript</a></h3>
|
||||
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>If you need to do more than what <code><select></code> allows (e.g. HTML options), you can use this component. It is structured as such:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div class="popover"></code> which wraps around the entire component and holds it state (e.g. open/close).</li>
|
||||
<li>A <code><button></code> that acts as the trigger to open or close the popover.</li>
|
||||
@@ -102,13 +95,32 @@ document.addEventListener('alpine:init', () => {
|
||||
</li>
|
||||
<li>An <code><input type="hidden"></code> to hold the value of the field (if needed).</li>
|
||||
</ul>
|
||||
|
||||
<p>As with the <a href="/components/popover">Popover</a> component, you can set up a few additional options on the <code><div data-popover></code> element:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
|
||||
<li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
|
||||
Individual JS file (select.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
@@ -116,9 +128,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="select", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dropdown_menu()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% call select(name="select-js") %}
|
||||
<div role="group" aria-labelledby="fruit-options-label">
|
||||
|
||||
@@ -1,11 +1,151 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Sidebar
|
||||
description: A responsive table component.
|
||||
description: A composable, themeable and customizable sidebar component.
|
||||
toc:
|
||||
- label: Usage
|
||||
id: usage
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
---
|
||||
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
{% from "macros/code_block.njk" import code_block %}
|
||||
{% from "sidebar.njk" import sidebar %}
|
||||
|
||||
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
||||
|
||||
<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
|
||||
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>To use a sidebar, you will need the sidebar itself and a sibling container for the content of the page (e.g. <code><main></code>), with the following structure for the sidebar:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div class="sidebar"></code> which wraps around the entire component and holds it state (e.g. open/close). It accepts an optional <code>data-side</code> set to <code>left</code>, or <code>right</code> to specify the side of the sidebar (defaults to <code>left</code>).</li>
|
||||
<li>A <code><nav></code> that contains the actual sidebar with the following children:
|
||||
<ul>
|
||||
<li>A <code><header></code> and <code><footer></code> for the header and footer of the sidebar (fixed position).</li>
|
||||
<li>A <code><section></code> for the main navigation list. To add links, you <b>must</b> wrap them in a <code><div role="group"></code> first. These groups can contain <code><h3"></code> for group headings and lists (i.e. <code><ul></code>) of links or buttons. You can also use <code><details></code> to wrap around collapsbile sections.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>sidebar:toggle</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/sidebar.js" target="_blank">
|
||||
Individual JS file (sidebar.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set code_html %}
|
||||
{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
|
||||
{% set icon_bot %}{% lucide "bot" %}{% endset %}
|
||||
{% set icon_settings %}{% lucide "settings" %}{% endset %}
|
||||
|
||||
{% set menu = [
|
||||
{ type: "group", label: "Getting started", items: [
|
||||
{ label: "Playground", url: "#", icon: icon_square_terminal },
|
||||
{ label: "Models", url: "#", icon: icon_bot },
|
||||
{ label: "Settings", type: "submenu", icon: icon_settings, items: [
|
||||
{ label: "General", url: "#" },
|
||||
{ label: "Team", url: "#" },
|
||||
{ label: "Billing", url: "#" },
|
||||
{ label: "Limits", url: "#" }
|
||||
] }
|
||||
]}
|
||||
] %}
|
||||
|
||||
{{ sidebar(
|
||||
label="Sidebar navigation",
|
||||
content_attrs={
|
||||
"class": "scrollbar"
|
||||
},
|
||||
menu=menu
|
||||
) }}
|
||||
<main>
|
||||
<button type="button" @click="$dispatch('sidebar:toggle')">Toggle sidebar</button>
|
||||
<h1>Content</h1>
|
||||
</main>
|
||||
{% endset %}
|
||||
|
||||
{% set code_script %}
|
||||
<script>
|
||||
{% fetchCode "src/js/sidebar.js" %}
|
||||
|
||||
document.addEventListener('alpine:init', () => {
|
||||
window.basecoat.registerSidebar(Alpine);
|
||||
});
|
||||
</script>
|
||||
{% endset %}
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
{ tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
|
||||
] %}
|
||||
{{ tabs(id="sidebar", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">sidebar()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/sidebar.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/sidebar.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% set menu = [
|
||||
{ type: "group", label: "Getting started", items: [
|
||||
{ label: "Playground", url: "#" },
|
||||
{ label: "Models", url: "#" },
|
||||
{ label: "Settings", type: "submenu", items: [
|
||||
{ label: "General", url: "#" },
|
||||
{ label: "Team", url: "#" },
|
||||
{ label: "Billing", url: "#" },
|
||||
{ label: "Limits", url: "#" }
|
||||
] }
|
||||
]}
|
||||
] %}
|
||||
|
||||
{{ sidebar(
|
||||
label="Sidebar navigation",
|
||||
menu=menu
|
||||
) }}
|
||||
<main>
|
||||
<h1>Content</h1>
|
||||
</main>
|
||||
{% endraw %}{% endset%}
|
||||
{{ code_block(raw_code, "jinja") }}
|
||||
@@ -8,8 +8,8 @@ toc:
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
- label: Jinja or Nunjucks
|
||||
id: usage-jinja
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
---
|
||||
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
@@ -95,20 +95,35 @@ document.addEventListener('alpine:init', () => {
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
<section>
|
||||
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>The component is structured as such:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div class="tabs"></code> which wraps around the entire component and holds it state (e.g. open/close).</li>
|
||||
<li>A <code><nav role="tablist"></code> that holds the tab buttons (<code><button role="tab"></code>).</li>
|
||||
<li>A series of <code><div role="tabpanel"></code> that holds the tab panels corresponding to each tab button.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/tabs.js" target="_blank">
|
||||
Individual JS file (tabs.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
||||
@@ -116,9 +131,26 @@ document.addEventListener('alpine:init', () => {
|
||||
] %}
|
||||
{{ tabs(id="combobox", tabsets=tabsets) }}
|
||||
|
||||
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">tabs()</code> Nunjucks or Jinja macro for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/tabs.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/tabs.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code %}{% raw %}{% set account_panel %}
|
||||
<div class="card">
|
||||
|
||||
+230
-13
@@ -2,35 +2,252 @@
|
||||
layout: layouts/page.njk
|
||||
title: Toast
|
||||
description: A succinct message that is displayed temporarily.
|
||||
toc:
|
||||
- label: Usage
|
||||
id: usage
|
||||
children:
|
||||
- label: HTML + Javascript
|
||||
id: usage-default
|
||||
children:
|
||||
- label: Append a toast
|
||||
id: usage-append-toast
|
||||
- label: Use $toast()
|
||||
id: usage-use-magic-method
|
||||
- label: Jinja and Nunjucks
|
||||
id: usage-macro
|
||||
---
|
||||
|
||||
{% from "toast.njk" import toaster, toast %}
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
{% set code %}<button
|
||||
{% from "macros/code_block.njk" import code_block %}
|
||||
|
||||
{% set code_htmx %}<button
|
||||
class="btn-outline"
|
||||
hx-trigger="click"
|
||||
hx-get="/fragments/toast/success"
|
||||
hx-target="#toast-htmx"
|
||||
hx-target="#toaster"
|
||||
hx-swap="beforeend"
|
||||
>
|
||||
Toast from backend
|
||||
</button>
|
||||
<div id="toast-htmx"></div>{% endset %}
|
||||
{{ code_preview("toast-htmx", code, "max-w-md") }}
|
||||
Toast from backend (with HTMX)
|
||||
</button>{% endset %}
|
||||
{{ code_preview("toast-htmx", code_htmx, "max-w-md") }}
|
||||
|
||||
{% from "macros/code_preview.njk" import code_preview %}
|
||||
{% set code %}<button
|
||||
{% set code_alpine %}<button
|
||||
class="btn-outline"
|
||||
@click='
|
||||
$toast({
|
||||
category: "success",
|
||||
title: "Great success",
|
||||
description: "Tremendous success toast.",
|
||||
title: "Success",
|
||||
description: "A success toast called from the front-end.",
|
||||
action: {
|
||||
label: "Go to Google",
|
||||
url: "https://google.com"
|
||||
label: "Dismiss",
|
||||
click: "open =false"
|
||||
}
|
||||
})
|
||||
'>
|
||||
Toast from front-end
|
||||
</button>
|
||||
{% endset %}
|
||||
{{ code_preview("toast-alpine", code, "max-w-md") }}
|
||||
{{ code_preview("toast-alpine", code_alpine, "max-w-md") }}
|
||||
|
||||
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
||||
|
||||
<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
|
||||
|
||||
<div class="alert my-6">
|
||||
{% lucide "circle-alert" %}
|
||||
<h2>This component requires Javascript.</h2>
|
||||
</div>
|
||||
|
||||
<section class="prose">
|
||||
<p>To use toasts, you will first need to set up the toaster code to the end of your <code><body></code> (see HTML below).</p>
|
||||
|
||||
<p>The <code><template id="toast-template"></code> bit is only required if you plan on using the <code>$toast()</code> method (see below).</p>
|
||||
|
||||
<p>You will also need to include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
||||
</section>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-js">
|
||||
Components with Javascript
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="/installation/#install-cli">
|
||||
Use the CLI
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/toast.js" target="_blank">
|
||||
Individual JS file (toast.js)
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% set code_script %}
|
||||
<script>
|
||||
{% fetchCode "src/js/popover.js" %}
|
||||
|
||||
document.addEventListener('alpine:init', () => {
|
||||
window.basecoat.registerPopover(Alpine);
|
||||
});
|
||||
</script>
|
||||
{% endset %}
|
||||
|
||||
{% set code_html_toaster %}{{ toaster() }}{% endset %}
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "HTML", panel: code_block(code_html_toaster | prettyHtml, class="") },
|
||||
{ tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
|
||||
] %}
|
||||
{{ tabs(id="popover", tabsets=tabsets) }}
|
||||
|
||||
<section class="prose">
|
||||
<p>Once that's in place, we can do one of two things:</p>
|
||||
|
||||
<ul>
|
||||
<li>Append a <code><div class="toast"></code> to the toaster.</li>
|
||||
<li>Use the <code>$toast()</code> Alpine.js "magic method".</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h4 id="usage-append-toast"><a href="#usage-append-toast">Append a toast</a></h4>
|
||||
|
||||
<section class="prose">
|
||||
<p>To display a toast, just append the following to the toaster:</p>
|
||||
</section>
|
||||
|
||||
{% set code_toast_simple %}<div class="toast" x-data="toast" x-bind="$toastBindings">
|
||||
<div class="toast-content">
|
||||
<p>This is a toast.</p>
|
||||
</div>
|
||||
</div>{% endset %}
|
||||
|
||||
{{ code_block(code_toast_simple | prettyHtml, "html") }}
|
||||
|
||||
<section class="prose">
|
||||
<p>You can implement the layout you want within the toast, but here is the standard format used in the examples above:</p>
|
||||
</section>
|
||||
|
||||
{% set code_toast %}{{ toast(
|
||||
category="success",
|
||||
title="Success",
|
||||
description="A success toast called from the front-end.",
|
||||
action={
|
||||
label: "Dismiss",
|
||||
click: "close()"
|
||||
}
|
||||
) }}{% endset %}
|
||||
{{ code_block(code_toast | prettyHtml, "html") }}
|
||||
|
||||
<section class="prose">
|
||||
<p>When setting up <code>x-data</code>, you can pass a config object with `category` (e.g. "success", "error", "info", "warning") and `duration` (in milliseconds). By default, the duration will be 3 seconds, and 5 seconds for errors.</p>
|
||||
|
||||
<p>This approach is used in the first example with HTMX: when the button is clicked, we retrieve the a fragment that contains the markup for the toast and append it to <code>#toaster</code>.</p>
|
||||
</section>
|
||||
|
||||
{% set code_htmx %}<button
|
||||
class="btn-outline"
|
||||
hx-trigger="click"
|
||||
hx-get="/fragments/toast/success"
|
||||
hx-target="#toaster"
|
||||
hx-swap="beforeend"
|
||||
>
|
||||
Toast from backend (with HTMX)
|
||||
</button>{% endset %}
|
||||
|
||||
<h4 id="usage-use-magic-method"><a href="#usage-use-magic-method">Use $toast()</a></h4>
|
||||
|
||||
<section class="prose">
|
||||
<p>If you want to display a toast directly from the front-end, you can use the <code>$toast()</code> Alpine.js magic method. This is what we're doing in the second example above:</p>
|
||||
</section>
|
||||
|
||||
{% set code_magic_method %}<button
|
||||
class="btn-outline"
|
||||
@click='
|
||||
$toast({
|
||||
category: "success",
|
||||
title: "Success",
|
||||
description: "A success toast called from the front-end.",
|
||||
action: {
|
||||
label: "Dismiss",
|
||||
click: "open =false"
|
||||
}
|
||||
})
|
||||
'>
|
||||
Toast from front-end
|
||||
</button>
|
||||
{% endset %}
|
||||
{{ code_block(code_magic_method, "html") }}
|
||||
|
||||
<section class="prose">
|
||||
<p>The <code>$toast()</code> method accepts a config object with the following properties:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>duration</code> (optional): the duration of the toast in milliseconds. By default, the duration will be 3 seconds, or 5 seconds if <code>category</code> is "error".</li>
|
||||
<li><code>category</code> (optional): "success", "error", "info", "warning" or any arbitrary string.</li>
|
||||
<li><code>title</code> (optional): the title of the toast.</li>
|
||||
<li><code>description</code> (optional): the description of the toast.</li>
|
||||
<li><code>action</code> (optional): an object to define an action button:
|
||||
<ul>
|
||||
<li><code>label</code>: the label of the action button.</li>
|
||||
<li><code>click</code> (optional): a string of Javascript to execute when the button is clicked.</li>
|
||||
<li><code>url</code> (optional): a URL to link to when the button is clicked.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>cancel</code> (optional): an object to define a cancel button (similar structure to action).</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
||||
|
||||
<div class="prose">
|
||||
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">toaster()</code> and <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">toast()</code> Nunjucks or Jinja macros for this component.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 my-6">
|
||||
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
||||
Use Nunjucks or Jinja macros
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/toast.html.jinja" target="_blank">
|
||||
Jinja macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/toast.njk" target="_blank">
|
||||
Nunjucks macro
|
||||
{% lucide "arrow-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% set raw_code_toaster %}{% raw %}{% from "toast.njk" import toaster %}
|
||||
{{ toaster(
|
||||
toasts=[
|
||||
{
|
||||
type: "success",
|
||||
title: "Success",
|
||||
description: "A success toast called from the front-end.",
|
||||
action: { label: "Dismiss", click: "close()" }
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
title: "Info",
|
||||
description: "An info toast called from the front-end.",
|
||||
action: { label: "Dismiss", click: "close()" }
|
||||
}
|
||||
]
|
||||
) }}{% endraw %}{% endset%}
|
||||
|
||||
{% set raw_code_toast %}{% raw %}{% from "toast.njk" import toast %}
|
||||
{{ toast(
|
||||
title="Event has been created",
|
||||
description="Sunday, December 03, 2023 at 9:00 AM",
|
||||
cancel={ label: "Undo", click: "close()" }
|
||||
) }}{% endraw %}{% endset %}
|
||||
|
||||
{% from "tabs.njk" import tabs %}
|
||||
{% set tabsets = [
|
||||
{ tab: "toaster()", panel: code_block(raw_code_toaster, "jinja", class="") },
|
||||
{ tab: "toast()", panel: code_block(raw_code_toast, "jinja", class="") }
|
||||
] %}
|
||||
{{ tabs(id="macros", tabsets=tabsets) }}
|
||||
@@ -1,7 +1,6 @@
|
||||
{% from "toast.njk" import toaster %}
|
||||
{% set toasts = [{
|
||||
category: "error",
|
||||
title: "Event has not been created",
|
||||
cancel: { label: "Dismiss", click: "close()" }
|
||||
}] %}
|
||||
{{ toaster(toasts=toasts, is_fragment=true) }}
|
||||
{% from "toast.njk" import toast %}
|
||||
{{ toast(
|
||||
category="error",
|
||||
title="Event has not been created",
|
||||
cancel={ label: "Dismiss", click: "close()" }
|
||||
) }}
|
||||
@@ -1,6 +1,5 @@
|
||||
{% from "toast.njk" import toaster %}
|
||||
{% set toasts = [{
|
||||
category: "info",
|
||||
title: "Be at the area 10 minutes before the event time"
|
||||
}] %}
|
||||
{{ toaster(toasts=toasts, is_fragment=true) }}
|
||||
{% from "toast.njk" import toast %}
|
||||
{{ toast(
|
||||
category="info",
|
||||
title="Be at the area 10 minutes before the event time"
|
||||
) }}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
{% from "toast.njk" import toaster %}
|
||||
{% set toasts = [{
|
||||
title: "Event has been created",
|
||||
description: "Sunday, December 03, 2023 at 9:00 AM",
|
||||
cancel: { label: "Undo", click: "close()" }
|
||||
}] %}
|
||||
{{ toaster(toasts=toasts, is_fragment=true) }}
|
||||
{% from "toast.njk" import toast %}
|
||||
{{ toast(
|
||||
title="Event has been created",
|
||||
description="Sunday, December 03, 2023 at 9:00 AM",
|
||||
cancel={ label: "Undo", click: "close()" }
|
||||
) }}
|
||||
@@ -1,6 +1,5 @@
|
||||
{% from "toast.njk" import toaster %}
|
||||
{% set toasts = [{
|
||||
category: "warning",
|
||||
title: "Event start time cannot be earlier than 8am"
|
||||
}] %}
|
||||
{{ toaster(toasts=toasts, is_fragment=true) }}
|
||||
{% from "toast.njk" import toast %}
|
||||
{{ toast(
|
||||
category="warning",
|
||||
title="Event start time cannot be earlier than 8am"
|
||||
) }}
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
layout: layouts/layout.njk
|
||||
---
|
||||
|
||||
{% from "select.njk" import select %}
|
||||
@@ -16,7 +16,7 @@ layout: layouts/base.njk
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid grid-cols-2 gap-4 mt-8">
|
||||
<section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="card">
|
||||
<header>
|
||||
|
||||
@@ -14,10 +14,14 @@ toc:
|
||||
id: install-css-import
|
||||
- label: That's it
|
||||
id: install-css-done
|
||||
- label: Components with Javascript code
|
||||
- label: Components with Javascript
|
||||
id: install-js
|
||||
- label: Use the CLI
|
||||
id: install-cli
|
||||
- label: Use Nunjucks or Jinja macros
|
||||
id: install-macros
|
||||
- label: Theming
|
||||
id: install-theming
|
||||
---
|
||||
|
||||
{% from "macros/code_block.njk" import code_block %}
|
||||
@@ -63,7 +67,7 @@ toc:
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="install-js"><a href="#install-js">Components with Javascript code</a></h2>
|
||||
<h2 id="install-js"><a href="#install-js">Components with Javascript</a></h2>
|
||||
|
||||
<div class="prose">
|
||||
<p><b>Some components require Javascript code to work.</b></p>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
layout: layouts/layout.njk
|
||||
---
|
||||
{% set components = [
|
||||
{ label: "Accordion", id: "accordion" },
|
||||
|
||||
Reference in New Issue
Block a user