mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(search): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:39:10 -07:00
commit eb2cb7dc60
1 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/src/pages/components/Search.svx
View file

@ -4,54 +4,72 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`Search` provides a flexible search input component with support for expandable variants, different sizes, and custom icons. It includes built-in functionality for clearing input and handling keyboard events.
## Default ## Default
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants. The search component is extra-large by default. Use the `size` prop to choose between [large](#large-size) and [small](#small-size) variants.
<Search /> <Search />
## Default value ## Default value
Set an initial value using the `value` prop.
<Search placeholder="Search catalog..." value="Cloud functions" /> <Search placeholder="Search catalog..." value="Cloud functions" />
## Reactive example ## Reactive example
Bind to the `value` prop for reactive updates.
<FileSource src="/framed/Search/SearchReactive" /> <FileSource src="/framed/Search/SearchReactive" />
## on:clear ## Clear event
The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key. The `clear` event is dispatched when clicking the clear button or pressing the Escape key.
<Search value="Cloud functions" on:clear={() => console.log('clear')}/> <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
## Expandable variant ## Expandable variant
Set `expandable` to `true` to use the expandable variant. Enable the expandable variant to show a compact search icon that expands on focus.
<FileSource src="/framed/Search/SearchExpandableReactive" /> <FileSource src="/framed/Search/SearchExpandableReactive" />
## Light variant ## Light variant
Use the light variant for light backgrounds.
<Search light /> <Search light />
## Large size ## Large size
Set `size` to `"lg"` for a large search input.
<Search size="lg" /> <Search size="lg" />
## Small size ## Small size
Set `size` to `"sm"` for a small search input.
<Search size="sm" /> <Search size="sm" />
## Disabled state ## Disabled state
Disable the search input using the `disabled` prop.
<Search disabled /> <Search disabled />
## Custom search icon ## Custom icon
Replace the default search icon with a custom one.
<Search icon={Query} /> <Search icon={Query} />
## Skeleton ## Skeleton
Display a loading state using the skeleton variant.
<Search skeleton /> <Search skeleton />
## Skeleton (large) ## Skeleton (large)