mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
Adopts Standardize props and events #1621
This commit is contained in:
Samuel Janda
parent
00338eb6df
commit
d8d16a63d1
5 changed files with 130 additions and 87 deletions
|
|
@ -4215,50 +4215,53 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| value | No | <code>let</code> | Yes | <code>null | number | string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| counter | No | <code>let</code> | No | <code>"char" | "word"</code> | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
|
||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release<br />@deprecated |
|
||||
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
|
||||
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| value | No | <code>let</code> | Yes | <code>null | number | string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| counter | No | <code>let</code> | No | -- | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release<br />@deprecated |
|
||||
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
|
||||
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| labelAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Set HTML attributes on the `label` element |
|
||||
| inputAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Set HTML attributes on the `input` element |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :----------------------- |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :--------- | :------ | :---- | :------------------------ |
|
||||
| helperText | No | -- | <code>{helperText}</code> |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :-------------------------------------------- |
|
||||
| change | dispatched | <code>null | number | string</code> |
|
||||
| input | dispatched | <code>null | number | string</code> |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
| input | dispatched | -- |
|
||||
| change | dispatched | -- |
|
||||
|
||||
## `TextInputSkeleton`
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue