⌘⇧⌥⌃Ctrl+B

Installation

pnpm dlx kliping@latest add kbd

Usage

<script setup lang="ts">
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <Kbd>Ctrl</Kbd>
</template>

Examples

Grup

Pakai komponen KbdGroup untuk mengelompokkan beberapa tombol keyboard.

Use Ctrl + BCtrl + K to open the command palette

Button

Letakkan komponen Kbd di dalam Button untuk menampilkan tombol keyboard di dalam tombol.

Tooltip

Letakkan komponen Kbd di dalam Tooltip untuk menampilkan tooltip yang memuat tombol keyboard.

Input Group

Letakkan komponen Kbd di dalam InputGroupAddon untuk menampilkan tombol keyboard di dalam input group.

⌘K

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/kbd/kbd.vue components/ui/kbd/kbd-group.vue components/ui/kbd/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Kbd />
<KbdGroup>
  <Kbd />
</KbdGroup>

API Reference

Kbd

Pakai komponen Kbd untuk menampilkan satu tombol keyboard.

Slot	Props
#default	—

<Kbd>
Ctrl
</Kbd>

KbdGroup

Pakai komponen KbdGroup untuk mengelompokkan beberapa komponen Kbd.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"kbd-group"

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --muted, --muted-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.