import {CommandPalette, MinimalPage} from "ui"; import {ArgsTable, Canvas, Meta, Story} from "@storybook/addon-docs"; <Meta title="Components/Sections/CommandPalette/old" component={CommandPalette}/> export const Template = (args) => ( <MinimalPage pageTitle="Command Palette" pageDescription="" commandPrompt> <p> Press command + k or ctrl + k in order to open the command palette.</p> <CommandPalette {...args} /> </MinimalPage> ); # CommandPalette Description of a CommandPalette ## Props <ArgsTable story="Empty"/> ## Examples <Canvas> <Story name="Empty" args={{ startOpen: false, onType: (value) => { return value; }, onSelect: (value) => { return value; }, options: [], loading: false, }} > {Template.bind({})} </Story> </Canvas> <Canvas> <Story name="Full" args={{ startOpen: false, onType: (value) => { return value; }, onSelect: (value) => { return value; }, options: [ { id: "1", title: "Test 1", description: `Multi line string Text wrap Test testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest `, }, { id: "2", title: "Test 2", description: "test", }, { id: "3", title: "Test 3", description: "test", }, { id: "4", title: "Test 4", description: "test", }, { id: "5", title: "Test 5", description: "test", }, { id: "6", title: "Test 6", description: "test", }, { id: "7", title: "Test 7", description: "test", }, { id: "8", title: "Test 8", description: "test", }, { id: "9", title: "Test 9", description: "test", }, { id: "10", title: "Test 10", description: "test", }, { id: "11", title: "Test 11", description: "test", }, { id: "12", title: "Test 12", description: "test", }, { id: "13", title: "Test 13", description: "test", }, { id: "14", title: "Test 14", description: "test", }, { id: "15", title: "Test 15", description: "test", }, { id: "15", title: "Test 15", description: "test", }, ], loading: false, }} > {Template.bind({})} </Story> </Canvas> <Canvas> <Story name="Error" args={{ startOpen: false, onType: (value) => { return value; }, onSelect: (value) => { return value; }, options: [], error: "There was an error.", loading: false, }} > {Template.bind({})} </Story> </Canvas>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter