mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
Adopted suggested changes
This commit is contained in:
Samuel Janda
parent
8cf5e3a6a3
commit
6d9f45b107
6 changed files with 236 additions and 279 deletions
|
|
@ -4215,30 +4215,30 @@ 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 |
|
||||
| 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. |
|
||||
| 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 |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| 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 `typeof value === "number"` and `value` is empty |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>"md"</code> | Set the size of the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder 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 |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| counter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable display the character counter. Requires `maxCount` to be set. |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
|
||||
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
|
||||
| labelAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLLabelAttributes</code> | <code>{}</code> | Set HTML attributes on the `label` element |
|
||||
| inputAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLInputAttributes</code> | <code>{}</code> | Set HTML attributes on the `input` element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4251,29 +4251,29 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :--------- | :-------------------------------------------- |
|
||||
| change | dispatched | <code>null | number | string</code> |
|
||||
| input | dispatched | <code>null | number | string</code> |
|
||||
| click | forwarded | -- |
|
||||
| pointerup | forwarded | -- |
|
||||
| pointerover | forwarded | -- |
|
||||
| pointerenter | forwarded | -- |
|
||||
| pointerleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| pointerup | forwarded | -- |
|
||||
| pointerover | forwarded | -- |
|
||||
| pointerenter | forwarded | -- |
|
||||
| pointerleave | forwarded | -- |
|
||||
| change | forwarded | -- |
|
||||
| input | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
|
||||
## `TextInputSkeleton`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | ----------------------------------- | ------------------ | ---------------------------------------------------------- |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
|
||||
| divAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Specify the div HTML attributes for the skeleton container |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
|
||||
| divAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLDivAttributes</code> | <code>{}</code> | Specify the div HTML attributes for the skeleton container |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue