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

Initial commit

Browse source
This commit is contained in:
davideraccagni 2022-04-14 18:29:54 +02:00
commit db2d2ad69b
23 changed files with 6936 additions and 1158 deletions
Download patch file Download diff file Expand all files Collapse all files

84
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 165 components exported from carbon-components-svelte@0.62.3.
> 167 components exported from carbon-components-svelte@0.62.4.
## Components
@ -8,6 +8,8 @@
- [`AccordionItem`](#accordionitem)
- [`AccordionSkeleton`](#accordionskeleton)
- [`AspectRatio`](#aspectratio)
- [`AutoComplete`](#autocomplete)
- [`AutoCompleteSkeleton`](#autocompleteskeleton)
- [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton)
@ -269,6 +271,86 @@ None.
None.
## `AutoComplete`
### Types
```ts
export type AutoCompleteItemId = any;
export type AutoCompleteItemText = string;
export interface AutoCompleteItem {
id: AutoCompleteItemId;
text: AutoCompleteItemText;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | <code>let</code> | Yes | <code>AutoCompleteItemId</code> | <code>undefined</code> | Specify the selected item id |
| filteredItems | <code>let</code> | Yes | <code>[]</code> | <code>[]</code> | -- |
| items | <code>let</code> | No | <code>AutoCompleteItem[]</code> | <code>[]</code> | Set the dropdown items |
| itemToString | <code>let</code> | No | <code>(item: AutoCompleteItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
| placeholder | <code>let</code> | No | -- | <code>null</code> | ???? |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------- | :-------------------------------- |
| -- | Yes | <code>{ item: AutoCompleteItem; index: number; } </code> | <code>{itemToString(item)}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------------------------------------------ |
| select | dispatched | <code>{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }</code> |
| change | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| input | forwarded | -- |
| clear | dispatched | -- |
## `AutoCompleteSkeleton`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
### Slots
None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Breadcrumb`
### Props