mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
80 lines
2.7 KiB
Plaintext
80 lines
2.7 KiB
Plaintext
---
|
|
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.
|
|
---
|
|
|
|
{% 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(
|
|
id="dropdown-menu",
|
|
trigger="Open",
|
|
trigger_attrs={"class": "btn-outline"},
|
|
content_attrs={"class": "min-w-56"},
|
|
register_on=["alpine:init", "htmx:afterSwap"]
|
|
) %}
|
|
<div role="group" aria-labelledby="account-options">
|
|
<span id="account-options" role="heading">Account Options</span>
|
|
<button type="button" role="menuitem">
|
|
{% lucide "user" %}
|
|
Profile
|
|
<span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
|
|
</button>
|
|
<button type="button" role="menuitem">
|
|
{% lucide "credit-card" %}
|
|
Billing
|
|
<span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
|
|
</button>
|
|
<button type="button" role="menuitem">
|
|
{% lucide "settings" %}
|
|
Settings
|
|
<span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
|
|
</button>
|
|
<button type="button" role="menuitem">
|
|
{% lucide "keyboard" %}
|
|
Keyboard shortcuts
|
|
<span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
|
|
</button>
|
|
</div>
|
|
<hr role="separator">
|
|
<button type="button" role="menuitem">
|
|
{% lucide "github" %}
|
|
GitHub
|
|
</button>
|
|
<button type="button" role="menuitem">
|
|
{% lucide "life-buoy" %}
|
|
Support
|
|
</button>
|
|
<button type="button" role="menuitem" disabled>
|
|
{% lucide "cloud" %}
|
|
API
|
|
</button>
|
|
<hr role="separator">
|
|
<button type="button" role="menuitem">
|
|
{% lucide "log-out" %}
|
|
Logout
|
|
<span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
|
|
</button>{% endcall %}{% endset %}
|
|
{{ code_preview("dropdown-menu", code | prettyHtml) }}
|
|
|
|
<h2 id="usage">Usage</h2>
|
|
|
|
<section class="prose my-6">
|
|
<p>You can use one of the <code class="">btn</code> classes to style any element as a button:</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<b>Variants</b>: <code>btn</code> or <code>btn-primary</code> for primary
|
|
buttons, then <code>btn-secondary</code>, <code>btn-destructive</code>, <code>btn-outline</code>,
|
|
<code>btn-ghost</code>, <code>btn-link</code>. You can also use <code>btn-icon</code> to
|
|
style an icon as a button, along with all of its variants (e.g. <code>btn-icon-destructive</code>).
|
|
</li>
|
|
<li>
|
|
<b>Sizes</b>: <code>btn-sm</code> for small and <code>btn-lg</code> for large.
|
|
You can combine this with other attributes, for example <code>btn-lg-destructive</code>
|
|
or <code>btn-icon-sm-secondary</code>.
|
|
</li>
|
|
</ul>
|
|
</section> |