- Account Options
+ My Account
{% endcall %}
+ {% call dropdown_menu(
+ id="dropdown-menu-checkboxes",
+ trigger="Checkboxes",
+ trigger_attrs={"class": "btn-outline"},
+ content_attrs={"class": "min-w-56"},
+ register_on=["alpine:init", "htmx:afterSwap"]
+ ) %}
+
+
+ + {% endcall %} + + + {% set profile_menu %}
@@ -69,28 +160,79 @@
Notifications
-
{% endset %} + {% call dropdown_menu( + id="dropdown-menu-radio-group", + trigger="Radio Group", + trigger_attrs={"class": "btn-outline"}, + content_attrs={"class": "min-w-56"}, + register_on=["alpine:init", "htmx:afterSwap"] + ) %} +
HTML
-
-
+ + + +
+ +{% endcall %} +{% endset %} + +{% set code_script %} +{% include "components/dropdown-menu-script.njk" %} +{% endset %} + +{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }} + +
+
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="dropdown-menu", tabsets=tabsets) }}
+
+
+ + + +
+ +{% endcall %}{% endraw %}{% endset%} +{{ code_block(raw_code, "jinja") }} + +
- - - +
{% endcall %}{% endset %} -{{ code_preview("dropdown-menu", code | prettyHtml) }} + +{% endcall %}{% endset %} +{{ code_preview("dropdown-menu-checkboxes", code | prettyHtml) }} -
-
\ No newline at end of file
+{% set code %}{% call dropdown_menu(
+ id="dropdown-menu-radio-group",
+ trigger="Open",
+ trigger_attrs={"class": "btn-outline"},
+ content_attrs={"class": "min-w-56"},
+ register_on=["alpine:init", "htmx:afterSwap"]
+) %}
+
+
+
+{{ code_block(code) }}
\ No newline at end of file
diff --git a/docs/components/input.njk b/docs/components/input.njk
index c54d19a..9e8d0a3 100644
--- a/docs/components/input.njk
+++ b/docs/components/input.njk
@@ -40,8 +40,6 @@ toc:
-
{% set code %}{% endset %}
-{{ code_block(code) }}
\ No newline at end of file
+{{ code_block(code) }}
+
+
{% endcall %}
{% endset %}
-{{ code_preview("select", code_alpine | prettyHtml) }}
+
+{% set code_script %}
+{% include "components/select-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
-
-
- {% set code_html %}
- {% call select(
- name="select-js",
- trigger_attrs={"class": "w-[180px]"},
- register_on=["alpine:init", "htmx:afterSwap"],
- include_script=false
- ) %}
-
-
-
- {% set code_script %}{% include "components/select-script.njk" %}{% endset %}
- {{ code_block(code_script | prettyHtml, "html") }}
-
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="select", tabsets=tabsets) }}
-
+
+ Account Options
+
+
+
+
+ +
+ Appearance
+
+
+
+
+ + + {% endcall %} + + + {% set profile_menu %}
@@ -69,28 +160,79 @@
Notifications
-
- Theme
-
-
-
-
- {% endset %} + {% call dropdown_menu( + id="dropdown-menu-radio-group", + trigger="Radio Group", + trigger_attrs={"class": "btn-outline"}, + content_attrs={"class": "min-w-56"}, + register_on=["alpine:init", "htmx:afterSwap"] + ) %} +
+ Panel Position
+
+ + + +
+ {% endcall %}
+
{% set trigger %}
+ + + +
diff --git a/docs/components/alert-dialog.njk b/docs/components/alert-dialog.njk
index 440daee..56d8059 100644
--- a/docs/components/alert-dialog.njk
+++ b/docs/components/alert-dialog.njk
@@ -6,6 +6,8 @@ toc:
- label: Usage
id: usage
children:
+ - label: HTML + Javascript
+ id: usage-default
- label: Jinja or Nunjucks
id: usage-jinja
---
@@ -14,7 +16,8 @@ toc:
{% from "macros/code_block.njk" import code_block %}
{% from "components/dialog.njk" import dialog %}
-{% set code %}{% set footer %}
+{% set code_html %}
+{% set footer %}
{% endset %}
@@ -28,39 +31,35 @@ toc:
close_button=false,
close_on_overlay_click=false,
register_on=["alpine:init", "htmx:afterSwap"]
-) }}{% endset %}
-{{ code_preview("alert-dialog", code | prettyHtml) }}
+) }}
+{% endset %}
+
+{% set code_script %}
+{% include "components/dialog-script.njk" %}
+{% endset %}
+
+{{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
-{% set code_html %}{% set footer %}
-
-
-{% endset %}
-{{ dialog(
- id="alert-dialog",
- title="Are you absolutely sure?",
- description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
- trigger="Open alert dialog",
- trigger_attrs={"class": "btn-outline"},
- footer=footer,
- close_button=false,
- close_on_overlay_click=false
- ) }}{% endset %}
- {{ code_block(code_html | prettyHtml) }}
-
-
-
- {% set code_script %}{% include "components/dialog-script.njk" %}{% endset %}
- {{ code_block(code_script | prettyHtml) }}
-
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="alert-dialog", tabsets=tabsets) }}
-{% set code_script %}{% include "components/dropdown-menu-script.njk" %}{% endset %}
-{% set code_html %}Usage
+HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
+
This component requires Javascript.
+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. x-bind, x-data, @click).
The Alert Dialog component uses the same Alpine.js code as the Dialog component with one small difference: we set initialCloseOnOverlayClick to false to prevent the dialog from closing when the overlay is clicked.
HTML
- -Javascript (Alpine.js)
- -Jinja or Nunjucks
diff --git a/docs/components/breadcrumb.njk b/docs/components/breadcrumb.njk index 5ab0767..fa2dd17 100644 --- a/docs/components/breadcrumb.njk +++ b/docs/components/breadcrumb.njk @@ -16,8 +16,12 @@ toc:There is no dedicated breadcrumb component in Basecoat.
-
+{% set code_script %}
+{% include "components/dropdown-menu-script.njk" %}
+{% endset %}
+
+{% set code_html %}
+
- Home @@ -47,8 +51,10 @@ toc:
- Breadcrumb -
Usage
@@ -56,14 +62,9 @@ toc:The example above uses some simple Tailwind CSS along with the Dropdown Menu.
-HTML
-
-
- {{ code_block(code_html | prettyHtml) }}
-
-
-Javascript (Alpine.js) for the Dropdown Menu
-
-
- {{ code_block(code_script | prettyHtml) }}
-
\ No newline at end of file
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="alert-dialog", tabsets=tabsets) }}
\ No newline at end of file
diff --git a/docs/components/combobox.njk b/docs/components/combobox.njk
index c2cb280..5dda31c 100644
--- a/docs/components/combobox.njk
+++ b/docs/components/combobox.njk
@@ -6,6 +6,8 @@ toc:
- label: Usage
id: usage
children:
+ - label: HTML + Javascript
+ id: usage-default
- label: Jinja or Nunjucks
id: usage-jinja
- label: Examples
@@ -22,7 +24,7 @@ toc:
{% from "components/select.njk" import select %}
{% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
-{% set code %}
+{% set code_html %}
{% call select(
trigger_attrs={"class": "w-[200px]"},
listbox_attrs={"data-empty": "No framework found."},
@@ -33,11 +35,27 @@ toc:
{% for framework in options_frameworks %}
{{ framework }}
{% endfor %}
-{% endcall %}{% endset %}
-{{ code_preview("combobox", code | prettyHtml) }}
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/select-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
Usage
+HTML + Javascript
+
+
+ {% lucide "circle-alert" %}
+ This component requires Javascript.
+
+ 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. x-bind, x-data, @click).
+
+
+
Combobox uses the same Alpine.js code and markup as the Select component, the only difference being the search box at the top of the listbox.
You can set up a few additional options on the <div data-popover> element:
@@ -48,30 +66,12 @@ toc:
-HTML
-
-
- {% set code_html %}
- {% call select(
- trigger_attrs={"class": "w-[200px]"},
- listbox_attrs={"data-empty": "No framework found."},
- is_combobox=true,
- search_placeholder="Search framework...",
- register_on=["alpine:init", "htmx:afterSwap"]
- ) %}
- {% for framework in options_frameworks %}
- {{ framework }}
- {% endfor %}
- {% endcall %}{% endset %}
- {{ code_block(code_html | prettyHtml) }}
-
-
-Javascript (Alpine.js)
-
-
- {% set code_script %}{% include "components/select-script.njk" %}{% endset %}
- {{ code_block(code_script | prettyHtml) }}
-
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
Jinja or Nunjucks
diff --git a/docs/components/dialog.njk b/docs/components/dialog.njk
index e348af5..e8e3edc 100644
--- a/docs/components/dialog.njk
+++ b/docs/components/dialog.njk
@@ -6,7 +6,7 @@ toc:
- label: Usage
id: usage
children:
- - label: Default
+ - label: HTML + Javascript
id: usage-default
- label: Jinja or Nunjucks
id: usage-jinja
@@ -21,7 +21,7 @@ toc:
{% from "macros/code_preview.njk" import code_preview %}
{% from "components/dialog.njk" import dialog %}
-{% set code %}
+{% set code_html %}
{% set footer %}
@@ -49,47 +49,79 @@ toc:
{% endcall %}
{% endset %}
-{{ code_preview("dialog", code | prettyHtml) }}
+
+{% set code_script %}
+{% include "components/dialog-script.njk" %}
+{% endset %}
+
+{{ code_preview("dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
Usage
-Default
+HTML + Javascript
+
+
+ {% lucide "circle-alert" %}
+ This component requires Javascript.
+
+ 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. x-bind, x-data, @click).
+
+
-
-
-
-{{ code_block(code | prettyHtml) }}
-
-Jinja or Nunjucks
-
-
- If you use Jinja (or Nunjucks), you can use the dialog() macro directly, making sure to set close_on_overlay_click to False (or false for Nunjucks).
+ The component is structured as such:
- -
- Read more about using Basecoat with Jinja or Nunjucks
-
- -
- Read more about the Dialog component
+
- A
<div class="dialog"> which wraps around the entire component and holds it state (e.g. open/close).
+ - A
<button> that acts as the trigger to open or close the popover.
+ - A
<div role="dialog"> that holds the dialog itself. It also acts as the backdrop for the dialog.
+ - Inside of it, we have:
+
+ - A
<header> that contains the title (<h2>) and description (<p>) of the dialog.
+ - A
<section> for the content.
+ - A
<footer> that usually contains actions.
+ - A close
<button>.
+
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
+
+Jinja or Nunjucks
+
+
{{ framework }}
{% endfor %}
-{% endcall %}{% endset %}
-{{ code_preview("combobox", code | prettyHtml) }}
+{% endcall %}
+{% endset %}
+
+{% set code_script %}
+{% include "components/select-script.njk" %}
+{% endset %}
+
+{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
Usage
+HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
+
This component requires Javascript.
+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. x-bind, x-data, @click).
Combobox uses the same Alpine.js code and markup as the Select component, the only difference being the search box at the top of the listbox.
You can set up a few additional options on the <div data-popover> element:
HTML
- -{{ framework }}
- {% endfor %}
- {% endcall %}{% endset %}
- {{ code_block(code_html | prettyHtml) }}
-Javascript (Alpine.js)
- -Jinja or Nunjucks
diff --git a/docs/components/dialog.njk b/docs/components/dialog.njk index e348af5..e8e3edc 100644 --- a/docs/components/dialog.njk +++ b/docs/components/dialog.njk @@ -6,7 +6,7 @@ toc: - label: Usage id: usage children: - - label: Default + - label: HTML + Javascript id: usage-default - label: Jinja or Nunjucks id: usage-jinja @@ -21,7 +21,7 @@ toc: {% from "macros/code_preview.njk" import code_preview %} {% from "components/dialog.njk" import dialog %} -{% set code %} +{% set code_html %} {% set footer %} @@ -49,47 +49,79 @@ toc: {% endcall %} {% endset %} -{{ code_preview("dialog", code | prettyHtml) }} + +{% set code_script %} +{% include "components/dialog-script.njk" %} +{% endset %} + +{{ code_preview("dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}Usage
-Default
+HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
This component requires Javascript.
+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. x-bind, x-data, @click).
Jinja or Nunjucks
- -If you use Jinja (or Nunjucks), you can use the dialog() macro directly, making sure to set close_on_overlay_click to False (or false for Nunjucks).
The component is structured as such:
-
-
- - Read more about using Basecoat with Jinja or Nunjucks - -
- - Read more about the Dialog component +
- A
<div class="dialog">which wraps around the entire component and holds it state (e.g. open/close).
+ - A
<button>that acts as the trigger to open or close the popover.
+ - A
<div role="dialog">that holds the dialog itself. It also acts as the backdrop for the dialog.
+ - Inside of it, we have:
+
-
+
- A
<header>that contains the title (<h2>) and description (<p>) of the dialog.
+ - A
<section>for the content.
+ - A
<footer>that usually contains actions.
+ - A close
<button>.
+
- A
Jinja or Nunjucks
+ +If you use Jinja (or Nunjucks), you can use the dialog() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
Examples
diff --git a/docs/components/dropdown-menu.njk b/docs/components/dropdown-menu.njk index 0cfbeeb..75ad49f 100644 --- a/docs/components/dropdown-menu.njk +++ b/docs/components/dropdown-menu.njk @@ -2,19 +2,179 @@ layout: layouts/component.njk title: Dropdown Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. +toc: + - label: Usage + id: usage + children: + - label: HTML + Javascript + id: usage-default + - label: Jinja or Nunjucks + id: usage-jinja + - label: Examples + id: examples + children: + - label: Checkboxes + id: example-checkboxes + - label: Radio Group + id: example-radio-group --- {% from "macros/code_block.njk" import code_block %} {% from "macros/code_preview.njk" import code_preview %} {% from "components/dropdown-menu.njk" import dropdown_menu %} -{% set code %}{% call dropdown_menu( +{% set code_html %} +{% call dropdown_menu( id="dropdown-menu", trigger="Open", trigger_attrs={"class": "btn-outline"}, content_attrs={"class": "min-w-56"}, register_on=["alpine:init", "htmx:afterSwap"] ) %} +
+ My Account
+
+
+
+
+
++ + + +
+ +{% endcall %} +{% endset %} + +{% set code_script %} +{% include "components/dropdown-menu-script.njk" %} +{% endset %} + +{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }} + +
Usage
+ +HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
+
+This component requires Javascript.
+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. x-bind, x-data, @click).
The component is structured as such:
+-
+
- A
<div class="popover">which wraps around the entire component and holds it state (e.g. open/close).
+ - A
<button>that acts as the trigger to open or close the popover.
+ - A
<div data-popover>that holds the content of the popover.
+ - Inside of the
<div data-popover>is a<nav role="menu">that contains a combination of: +-
+
<button role="menuitem">for menu items.
+ <button role="menuitemcheckbox">for menu items with checkboxes.
+ <button role="menuitemradio">for menu items with radio buttons.
+ <hr role="separator">to display a horizontal separator.
+ <div role="group">to group options.
+ <span role="heading">for group headings.
+
As with the Popover component, you can set up a few additional options on the <div data-popover> element:
-
+
data-sidecan be set totop,bottom,left, orrightto change the side of the popover.
+ data-aligncan be set tostart,center, orendto change the alignment of the popover.
+
Jinja or Nunjucks
+ +If you use Jinja (or Nunjucks), you can use the dropdown_menu() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
+ My Account
+
+
+
+
+
++ + + +
+ +{% endcall %}{% endraw %}{% endset%} +{{ code_block(raw_code, "jinja") }} + +
Examples
+ +Checkboxes
+ +{% set code %}{% call dropdown_menu( + id="dropdown-menu-checkboxes", + trigger="Open", + trigger_attrs={"class": "btn-outline"}, + content_attrs={"class": "min-w-56"}, + register_on=["alpine:init", "htmx:afterSwap"] +) %}
Account Options
-
- - - +
+ Appearance
+
+
+
+
{% endcall %}{% endset %} -{{ code_preview("dropdown-menu", code | prettyHtml) }} + +{% endcall %}{% endset %} +{{ code_preview("dropdown-menu-checkboxes", code | prettyHtml) }} -
Usage
+Radio Group
-You can use one of the btn classes to style any element as a button:
-
-
-
- Variants:
btnorbtn-primaryfor primary - buttons, thenbtn-secondary,btn-destructive,btn-outline, -btn-ghost,btn-link. You can also usebtn-iconto - style an icon as a button, along with all of its variants (e.g.btn-icon-destructive). -
- -
- Sizes:
btn-smfor small andbtn-lgfor large. - You can combine this with other attributes, for examplebtn-lg-destructive- orbtn-icon-sm-secondary. -
-
+ Panel Position
+
+ + + +
+{% endcall %}{% endset %}
+{{ code_preview("dropdown-menu", code | prettyHtml) }}
\ No newline at end of file
diff --git a/docs/components/form.njk b/docs/components/form.njk
new file mode 100644
index 0000000..e911e73
--- /dev/null
+++ b/docs/components/form.njk
@@ -0,0 +1,79 @@
+---
+layout: layouts/component.njk
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+toc:
+ - label: Usage
+ id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}{% endset %}
+{{ code_preview("input", code, "w-full max-w-sm") }}
+
++ + + +
Usage
+ +Adding the form class to the parent of any form element (<label>, <input>, <textarea>, <select>) will automatically apply the style you would get from adding label, input, textarea, or select classes. Read more about Label, Input, Textarea, and Select.
Examples
-Default
- {{ code_preview("input-default", code) }}Invalid
diff --git a/docs/components/label.njk b/docs/components/label.njk index d9b95ae..773aa71 100644 --- a/docs/components/label.njk +++ b/docs/components/label.njk @@ -5,6 +5,11 @@ description: Renders an accessible label associated with controls. toc: - label: Usage id: usage + - label: Examples + id: examples + children: + - label: Disabled + id: example-disabled --- {% from "macros/code_preview.njk" import code_preview %} @@ -19,8 +24,18 @@ toc:Usage
Simply add the label class to your <label> element or have a parent with the form class (read more about form). Labels will be styled accordingly if a peer or child element is disabled.
Simply add the label class to your <label> element or have a parent with the form class (read more about form). Labels' style may be affected by the presence of a disabled peer or child element.
Examples
+ +Disabled
+ +{% set code %}
+
+
+
{% endset %}
+{{ code_preview("label-disabled", code) }}
\ No newline at end of file
diff --git a/docs/components/popover.njk b/docs/components/popover.njk
index 645b33c..cdb1176 100644
--- a/docs/components/popover.njk
+++ b/docs/components/popover.njk
@@ -6,7 +6,7 @@ toc:
- label: Usage
id: usage
children:
- - label: Default
+ - label: HTML + Javascript
id: usage-default
- label: Jinja or Nunjucks
id: usage-jinja
@@ -16,7 +16,7 @@ toc:
{% from "macros/code_block.njk" import code_block %}
{% from "components/popover.njk" import popover %}
-{% set code %}
+{% set code_html %}
{% call popover(
id="demo-popover",
trigger="Open popover",
@@ -32,13 +32,7 @@ toc:
Usage
-Pure HTML
+HTML
If you use a <select> element, just add the select class to it or have a parent with the form class (read more about form).
With Javascript
+HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
This component requires Javascript.
+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. x-bind, x-data, @click).
If you need to do more than what <select> allows (e.g. HTML options), you can use the code below which uses the Popover component. Make sure to include the hidden input with the name you want to use for that field.
If you need to do more than what <select> allows (e.g. HTML options), you can use this component. It is structured as such:
-
+
- A
<div class="popover">which wraps around the entire component and holds it state (e.g. open/close).
+ - A
<button>that acts as the trigger to open or close the popover.
+ - A
<div data-popover>that holds the content of the popover.
+ - Inside of the
<div data-popover>is a<nav role="listbox">that contains a combination of: +-
+
<div role="option">for the options with adata-valueattribute.
+ <hr role="separator">to display a horizontal separator.
+ <div role="group">to group options.
+ <span role="heading">for group headings.
+
+ - An
<input type="hidden">to hold the value of the field (if needed).
+
As with the Popover component, you can set up a few additional options on the <div data-popover> element:
-
+
data-sidecan be set totop,bottom,left, orrightto change the side of the popover.
+ data-aligncan be set tostart,center, orendto change the alignment of the popover.
+
HTML
- -
- Fruits
-
- {% endcall %}
- {% endset %}
- {{ code_block(code_html | prettyHtml) }}
-Apple
- Banana
- Blueberry
- Grapes
- Pineapple
- Javascript
- -Jinja or Nunjucks
-If you use Jinja (or Nunjucks), you can use the select() macro directly.
If you use Jinja (or Nunjucks), you can use the dropdown_menu() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
diff --git a/docs/components/tabs.njk b/docs/components/tabs.njk
index ee06670..b7d1501 100644
--- a/docs/components/tabs.njk
+++ b/docs/components/tabs.njk
@@ -5,12 +5,18 @@ description: A set of layered sections of content—known as tab panels—that a
toc:
- label: Usage
id: usage
+ children:
+ - label: HTML + Javascript
+ id: usage-default
+ - label: Jinja or Nunjucks
+ id: usage-jinja
---
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
{% from "components/tabs.njk" import tabs %}
-{% set code %}
+
+{% set code_html %}
{% set account_panel %}
@@ -62,19 +68,110 @@ toc:
{ tab: "Password", panel: password_panel }
] %}
{{ tabs(
-id='demo-tabs-with-panels',
-tabsets=tabsets_demo,
-main_attrs={ "class": "w-full" },
-tablist_attrs={ "class": "w-full" },
-register_on=["alpine:init", "htmx:afterSwap"]
+ id='demo-tabs-with-panels',
+ tabsets=tabsets_demo,
+ main_attrs={ "class": "w-full" },
+ tablist_attrs={ "class": "w-full" },
+ register_on=["alpine:init", "htmx:afterSwap"]
) }}
{% endset %}
-{{ code_preview("tabs", code | prettyHtml, "max-w-[300px] w-full") }}
+
+{% set code_script %}
+{% include "components/tabs-script.njk" %}
+{% endset %}
+
+{{ code_preview("tabs", code_script | prettyHtml ~ code_html | prettyHtml, "max-w-[300px] w-full") }}
-
-{{ code_block(code) }}
\ No newline at end of file
+{% from "components/tabs.njk" import tabs %}
+{% set tabsets = [
+ { tab: "HTML", panel: code_block(code_html | prettyHtml) },
+ { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
+] %}
+{{ tabs(id="combobox", tabsets=tabsets) }}
+
+
Usage
+HTML + Javascript
+ +
+ {% lucide "circle-alert" %}
+
+
+
+
This component requires Javascript.
+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. x-bind, x-data, @click).
You can style an <input type="range"> element by either adding the input class or having a parent with the form class (read more about form). However, the range input also requries some Javacript code to be able to paint the left side of the slider.
The component is structured as such:
+-
+
- A
<div class="tabs">which wraps around the entire component and holds it state (e.g. open/close).
+ - A
<nav role="tablist">that holds the tab buttons (<button role="tab">).
+ - A series of
<div role="tabpanel">that holds the tab panels corresponding to each tab button.
+
Jinja or Nunjucks
+ +If you use Jinja (or Nunjucks), you can use the tabs() macro directly. Read more about using Basecoat with Jinja and Nunjucks.
+
+
+
+
+
+
+
+{% endset %}
+
+{% set password_panel %}
+Account
+Make changes to your account here. Click save when you're done.
+
+
+
+
+
+
+
+
+{% endset %}
+
+{% set tabsets_demo = [
+{ tab: "Account", panel: account_panel },
+{ tab: "Password", panel: password_panel }
+] %}
+
+{{ tabs(
+ id='demo-tabs-with-panels',
+ tabsets=tabsets_demo,
+ main_attrs={ "class": "w-full" },
+ tablist_attrs={ "class": "w-full" },
+ register_on=["alpine:init", "htmx:afterSwap"]
+) }}{% endraw %}{% endset%}
+{{ code_block(raw_code, "jinja") }}
\ No newline at end of file
diff --git a/docs/components/textarea.njk b/docs/components/textarea.njk
index fe51fb0..d220ee1 100644
--- a/docs/components/textarea.njk
+++ b/docs/components/textarea.njk
@@ -40,8 +40,6 @@ toc:
Password
+Change your password here. After saving, you'll be logged out.
+