mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
76 lines
1.9 KiB
Plaintext
76 lines
1.9 KiB
Plaintext
---
|
|
layout: layouts/page.njk
|
|
title: Kbd
|
|
description: Used to display textual user input from keyboard.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
- label: Examples
|
|
id: examples
|
|
children:
|
|
- label: Group
|
|
id: example-group
|
|
- label: Button
|
|
id: example-button
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
|
|
{% set code_html %}
|
|
<div class="flex flex-col items-center gap-4">
|
|
<span class="inline-flex items-center gap-1">
|
|
<kbd class="kbd">⌘</kbd>
|
|
<kbd class="kbd">⇧</kbd>
|
|
<kbd class="kbd">⌥</kbd>
|
|
<kbd class="kbd">⌃</kbd>
|
|
</span>
|
|
<span class="inline-flex items-center gap-1">
|
|
<kbd class="kbd">Ctrl</kbd>
|
|
<span>+</span>
|
|
<kbd class="kbd">B</kbd>
|
|
</span>
|
|
</div>
|
|
{% endset %}
|
|
|
|
{{ code_preview("kbd", code_html | prettyHtml) }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<section class="prose">
|
|
<p>Use the <code><kbd></code> element with the <code>kbd</code> class:</p>
|
|
</section>
|
|
|
|
{% set code_simple %}
|
|
<kbd class="kbd">⌘K</kbd>
|
|
{% endset %}
|
|
|
|
{{ code_block(code_simple | prettyHtml, "html") }}
|
|
|
|
<h2 id="examples"><a href="#examples">Examples</a></h2>
|
|
|
|
<h3 id="example-group"><a href="#example-group">Group</a></h3>
|
|
|
|
{% set group_html %}
|
|
<p class="text-muted-foreground text-sm">
|
|
Use
|
|
<span class="inline-flex items-center gap-1">
|
|
<kbd class="kbd">Ctrl + B</kbd>
|
|
<kbd class="kbd">Ctrl + K</kbd>
|
|
</span>
|
|
to open the command palette
|
|
</p>
|
|
{% endset %}
|
|
|
|
{{ code_preview("kbd-group", group_html | prettyHtml) }}
|
|
|
|
<h3 id="example-button"><a href="#example-button">Button</a></h3>
|
|
|
|
{% set button_html %}
|
|
<div class="flex flex-wrap items-center gap-x-4">
|
|
<button class="btn-sm-outline pr-2">Accept <kbd class="kbd">⏎</kbd></button>
|
|
<button class="btn-sm-outline pr-2">Cancel <kbd class="kbd">Esc</kbd></button>
|
|
</div>
|
|
{% endset %}
|
|
|
|
{{ code_preview("kbd-button", button_html | prettyHtml) }} |