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

feat(link): support link with icon

Browse source
This commit is contained in:
Eric Y Liu 2021-04-30 16:46:47 -07:00
commit 7e108acead
5 changed files with 48 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
COMPONENT_INDEX.md
View file

@ -1945,14 +1945,15 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "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 &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "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

9
docs/src/COMPONENT_API.json
View file

@ -4614,6 +4614,15 @@
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",

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

@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
import Preview from "../../components/Preview.svelte";
</script>
@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div>
### Link with icon
Note that `inline` must be `false` when rendering a link with an icon.
<div>
Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
</div>
### Large size
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

16
src/Link/Link.svelte
View file

@ -14,6 +14,13 @@
/** Set to `true` to use the inline variant */
export let inline = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* `inline` must be `false`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/** Set to `true` to disable the checkbox */
export let disabled = false;
@ -37,7 +44,9 @@
on:mouseenter
on:mouseleave
>
<slot />
<slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
<svelte:component this="{icon}" />
</div>{/if}
</p>
{:else}
<a
@ -54,6 +63,9 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave><slot /></a
on:mouseleave
><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
<svelte:component this="{icon}" />
</div>{/if}</a
>
{/if}

6
types/Link/Link.d.ts vendored
View file

@ -19,6 +19,12 @@ export interface LinkProps
*/
inline?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* `inline` must be `false`
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Set to `true` to disable the checkbox
* @default false