Skip to content

Commit 3c5e6a2

Browse files
rohitpotatorohitpotato
committed
Updated Readme
1 parent 364d691 commit 3c5e6a2

File tree

1 file changed

+50
-6
lines changed

1 file changed

+50
-6
lines changed

‎README.md‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Svelte Command Palette
22

3-
### Increase your productivity exponentially. 🚀🚀
3+
#### Increase your productivity exponentially. 🚀🚀
44

55
#### Get started with command-palette with 2.1Kb Minified and ~700B Gzipped + Minified
66

77
## Demo
88

9-
![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif)
9+
![svelte-command-palette](https://rohit-misc.s3.ap-south-1.amazonaws.com/svelte-command-palette.gif?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAcaCmFwLXNvdXRoLTEiSDBGAiEArQtcSxpqlkpMiIXIRbzim6ygEdu%2FiWM0JafqMC67%2F%2FMCIQCyrjWfyugvigPDcM3KKLDMpybs7WuY6ia33eTzPtydBCrkAghAEAMaDDg0NzkwMjcyNzUyNCIMU0ZdGeUyXrP3cS%2BAKsECrRS0rQ1645z%2F1SjI2gh2nTd5z4HWvh4VO68TdetQudGZhAvWtAbqUi58xbKG10FtENPhIu%2FRxwOeDOF%2BWxXaEFisWKEcruAG1oo4s%2BMn%2BVGJwgIqNrXAG8XfuSviCT68XXPp2YZEnZ4RzFtxNxpsYfkEghpwtbXjATxmwnADyZQ4cogwScgUxZ7HaJkEm%2BSbEmSfj0nJ1AuY%2F%2BmP7AMHSvVA4ut7MaFtOtOb4jtSamsxmAv6JNeCmceGtAdzxXp0KWahWecXII4dR8fhY8ECygj3hQx23d90XBhmzzJvNW9EZj%2BTwSL4N43kjo4Bf9rDUuHdvs5nXHfYy%2B9tDj0P%2FmxE2A06zc8bq3wRHMa6oS5HCz5i2YdxkmcDo%2Fiwf%2FN%2BmzQyH%2FHkmcSUcu%2FQl7qx0M5lvhK91cujDasj8gOOM6hzMKOKr5YGOrIC8ycy1e2b2krfyhpHtYjRX1MkiOQ25oqZDwOZarY1iwrwNrvc%2FPzZoQvY%2FAFrf8%2BfbRUU6yC5RtJVBOzD8Fc207FethWt%2FLpPEHcB8APtM2wX%2FGFbTVUsNyb4zsTGfdgBdzY6HJbho0%2Fqsy7%2F%2FF0FKgInX3FLec3EFK3t%2BD10%2B6O72yO%2BsseBujEiqpOdnJahnUwycc9b4BQcltw3miOr7LOZUKqebSm8wt4z2VPBsTYTl8PMtfYr1%2BXzhTqTnfkgI3V9aYM4zagE4geh5SsJ5Jw%2FVKP8ueONkSylwupnI01PPRjs9KtYHLU7PIXRooUtbU21iK7JHn%2Fp0FmJEa50EhY30lGsB1ZaOaFO%2B2XzEH%2FYnuNCpiXyveUky9Y0h%2FTfd2bLdlGwLEc8sHRoHUqS7lVe&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20220711T064152Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA4K2XQ3VSAZXZYFHE%2F20220711%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Signature=553d6bef29fd1c97022ab3a4db0af5505b9b6d89d925ddf7e3745375588c8f62)
1010

1111
## Features
1212

@@ -37,11 +37,11 @@ Install svelte-command-palette with npm
3737

3838
const actions = defineActions([
3939
{
40-
actionId: 1,
40+
id: 1,
4141
title: "Open Svelte Command Palette on github",
42-
subTitle: "This opens github in a new tab!",
42+
subTitle: 'This opens github in a new tab!",
4343
onRun: ({ action, storeProps, storeMethods }) => {
44-
window.open("https://github.com/rohitpotato/svelte-command-palette")
44+
window.open("https://github.com/rohitpotato/svelte-command-palette"),
4545
},
4646
shortcut: "Space k"
4747
}
@@ -50,6 +50,50 @@ Install svelte-command-palette with npm
5050
5151
// render your command palette at the root of your application, say _layout.svelte
5252
53-
<CommandPalette {actions} />
53+
<CommandPalette {actions}>
5454
5555
```
56+
57+
## API
58+
59+
### Component Styling API
60+
61+
The `<CommandPalette />` component accepts the following optional properties for styling:
62+
63+
| Property | Type | Default | Description |
64+
| ---------------------------- | -------------------------------- | ---------------------- | ---------------------------------------------------------------------- |
65+
| **unstyled** | boolean | `false` | When `true`, the default styles are not applied to the modal elements. |
66+
| **placeholder** | string | `"Search for actions"` | Placeholder for the command palette input |
67+
| **overlayClass** | string \| null | `null` | Class name for the palette overlay. |
68+
| **paletteWrapperInnerClass** | string \| null | `null` | Class name for the cmd palette wrapper element. |
69+
| **inputClass** | string \| null | `null` | Class name for the cmd palette input. |
70+
| **resultsContainerClass** | string \| null | `null` | Class name for the results container. |
71+
| **resultContainerClass** | string \| null | `null` | Class name for the result item container. |
72+
| **optionSelectedClass** | string \| null | `null` | Class name for the currently selected result item. |
73+
| **titleClass** | string \| null | `null` | Class name for the result title. |
74+
| **subtitleClass** | string \| null | `null` | Class name for the result subtitle. |
75+
| **descriptionClass** | string \| null | `null` | Class name for the result description. |
76+
| **keyboardButtonClass** | string \| null | `null` | Class name for the keyboard shortcuts. |
77+
| **overlayStyle** | Record<string, string \| number> | `{}` | Style properties of the overlay. |
78+
| **paletteWrapperInnerStyle** | Record<string, string \| number> | `{}` | Style properties of the command palette wrapper element. |
79+
| **inputStyle** | Record<string, string \| number> | `{}` | Style properties of cmd palette input. |
80+
| **resultsContainerStyle** | Record<string, string \| number> | `{}` | Style properties of results container. |
81+
| **resultContainerStyle** | Record<string, string \| number> | `{}` | Style properties result item container. |
82+
| **titleStyle** | Record<string, string \| number> | `{}` | Style properties for result item title. |
83+
| **subtitleStyle** | Record<string, string \| number> | `{}` | Style properties for result item subtitle. |
84+
| **descriptionStyle** | Record<string, string \| number> | `{}` | Style properties for result item description. |
85+
| **optionSelectedStyle** | Record<string, string \| number> | `{}` | Style properties selected result item. |
86+
| **keyboardButtonStyle** | Record<string, string \| number> | `{}` | Style properties for the keyboard shortcut. |
87+
88+
## Action API
89+
90+
```
91+
actionId?: ActionId;
92+
canActionRun?: (args: onRunParams) => boolean;
93+
title: string;
94+
description?: string;
95+
subTitle?: string;
96+
onRun?: (args: onRunParams) => void;
97+
keywords?: Array<string>;
98+
shortcut?: string;
99+
```

0 commit comments

Comments
 (0)