mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(clickable-tile): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 15:06:16 -07:00
commit d9e45e9825
1 changed files with 9 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/ClickableTile.svx
View file

@ -3,15 +3,19 @@
import Preview from "../../components/Preview.svelte";
</script>
Clickable tiles create interactive content areas that link to other pages or trigger actions. Use them to group related content and provide clear navigation targets.
## Default
Create a clickable tile with an `href` to link to another page.
<ClickableTile href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>
## Prevent default behavior
Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.
Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.
<ClickableTile
href="/"
@ -25,12 +29,16 @@ Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the n
## Light variant
Set `light` to `true` to use the light color scheme.
<ClickableTile light href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>
## Disabled state
Set `disabled` to `true` to prevent interaction.
<ClickableTile disabled href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>