mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 11:59:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(clickable-tile): support disabled state for ClickableTile

Browse source
This commit is contained in:
Eric Y Liu 2021-04-30 16:34:59 -07:00
commit ce5348fdc0
5 changed files with 38 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Tile/ClickableTile.svelte
View file

@ -5,21 +5,23 @@
/** Set to `true` to enable the light variant */
export let light = false;
/** Set to `true` to disable the tile */
export let disabled = false;
/**
* Set the `href`
* @type {string}
*/
export let href = undefined;
import Link from "../Link/Link.svelte";
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<a
class:bx--tile="{true}"
class:bx--tile--clickable="{true}"
class:bx--tile--is-clicked="{clicked}"
class:bx--tile--light="{light}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
<Link
{...$$restProps}
disabled="{disabled}"
class="bx--tile bx--tile--clickable {clicked &&
'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
href="{href}"
on:click
on:click="{() => {
@ -36,4 +38,4 @@
on:mouseleave
>
<slot />
</a>
</Link>