mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
Align v10.33 (#619)
* chore(deps-dev): upgrade carbon-components to v10.33.0 * fix(clickable-tile): support disabled state for ClickableTile * fix(aspect-ratio): add missing 3x2 ratio * docs: update number of supported chart types * feat(link): support link with icon * refactor(outbound-link): use icon prop * fix(search): wrap search icon with div
This commit is contained in:
Eric Liu
GitHub
parent
081783c719
commit
f3cddbad9f
22 changed files with 131 additions and 62 deletions
|
|
@ -257,9 +257,9 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -479,6 +479,7 @@ None.
|
|||
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
|
||||
| clicked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile |
|
||||
| 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 tile |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` |
|
||||
|
||||
### Slots
|
||||
|
|
@ -1858,16 +1859,16 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
|
||||
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
|
||||
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
|
||||
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
|
||||
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
|
||||
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
|
||||
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
|
||||
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
|
||||
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
|
||||
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
|
||||
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
|
||||
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
|
||||
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1944,14 +1945,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg"</code> | -- | Specify the size of the link |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg"</code> | -- | Specify the size of the link |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
|
||||
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue