Basecoat animates <details> elements by default. The example above shows how to use Alpine.js, Tailwind and <details> elements to implement a simple accordion.
Basecoat animates <details> elements by default. Using Alpine.js to handle the open/close state and Tailwind to style the the <details> elements, you can get an accordion component:
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).
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 example below shows how to implement it with Tailwind and the Dropdown Menu component.
-Using Tailind and the Dropdown Menu component you can get a breadcrumb component:
+The Combobox component uses the same Alpine.js code as the Select component, and almost identical markup, the only difference being the search box.
+If you use Jinja (or Nunjucks), you can use the select() macro directly, making sure to set is_combobox to True (or true for Nunjucks).
Simply use regular Tailwind classes. You can find more examples of avatars in the kitchen sink.
-
{% endset %}
-{{ code_block("accordion", code, "max-w-md") }}
\ No newline at end of file
+{% from "components/popover.njk" import popover %}
+
+{% set code %}
+{% call popover(
+ id="demo-popover",
+ trigger="Open popover",
+ trigger_attrs={"class": "btn-outline"},
+ content_attrs={"class": "w-80 p-4"}
+) %}
+ Set the dimensions for the layer.
+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 use Jinja (or Nunjucks), you can use the popover() macro directly.
Set the dimensions for the layer.
+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).
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 use Jinja (or Nunjucks), you can use the select() macro directly.