Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdulmumin1/kbar-svelte-mini
Plug and play svelte's version of kbar
https://github.com/abdulmumin1/kbar-svelte-mini
svelte svelte-component svelte-components-library sveltejs sveltekit
Last synced: 29 days ago
JSON representation
Plug and play svelte's version of kbar
- Host: GitHub
- URL: https://github.com/abdulmumin1/kbar-svelte-mini
- Owner: Abdulmumin1
- License: mit
- Created: 2024-01-27T14:55:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-05-08T08:58:39.000Z (6 months ago)
- Last Synced: 2024-09-23T14:32:23.104Z (about 2 months ago)
- Topics: svelte, svelte-component, svelte-components-library, sveltejs, sveltekit
- Language: Svelte
- Homepage: https://kbar-mini.vercel.app
- Size: 124 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kbar-svelte-mini
Set up `crtl+k` or `command+k` navigation for your application with breeze!
## Getting Started
To set up a KBar-mini navigation system in your Svelte application, follow these steps:
# Installation
```bash
npm i kbar-svelte-mini
```
### Step 1: Add to Root Layout
Include the KDialog component in your root layout file (layout.svelte):
```js
// layout.svelte
import { KDialog } from 'kbar-svelte-mini';
```
### Step 2: Additional Configuration
Due to safety design decisions, add the following function call in your layout.svelte:
```js
import { setKbarState } from 'kbar-svelte-mini';
setKbarState();
```
### Step 3: Define Actions
Create an array of actions that represent the navigation items in your KBar. Each action should have an **_id_** (optional), **_title_**, **_optional subtitle_**, and a **_callback_** function:
```js
let actions = [
{
id: 'home',
title: 'Home',
subtitle: 'Subtitle can help with more context',
callback: () => {
console.log('home');
},
},
// ... add more actions as needed
];
// Include the KDialog component with defined actions
```
## Customization (Optional)
You can customize the appearance of the KBar-mini navigation system by adjusting the following variables:
- `--bg`: Change the background to fit your application.
- `--kbar-primary`: Primary color for your app, used for text and border highlight.
- `--kbar-gray`: Color for dimmed texts.
- `--kbar-search`: Search bar text color, primary color used in the absence.
- `--shadow`: Control the shadow of the dialog.
### Example:
```svelte
```
Feel free to customize these variables according to your application's design.
Goto to [docs](https://kbar-mini.vercel.app)