Link
Link
Component demo
Interactive example
<ic-linkhref="/components/link/code">About our coffees</ic-link><IcLinkhref="/components/link/code">About our coffees</IcLink>Link details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
The appearance of the link, e.g. dark, light, or default. |
|
|
|
If |
|
|
|
The URL that the link points to. |
|
|
|
The human language of the linked URL. |
|
|
|
How much of the referrer to send when following the link. |
|
|
|
The relationship of the linked URL as space-separated link types. |
|
|
|
|
|
|
|
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
|
|
The appearance of the link, e.g. dark, light, or default. |
|
If |
|
The URL that the link points to. |
|
The human language of the linked URL. |
|
How much of the referrer to send when following the link. |
|
The relationship of the linked URL as space-separated link types. |
|
|
|
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
Slots
A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.
Content can be slotted into a component by adding it as a top-level child of the component.
Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a
slot
attribute on the slotted content.
|
|
|
|---|---|
|
|
|
|
|
Methods
|
|
|
|
|---|---|---|
|
|
|
|
|
|
Variants
With icon
Interactive example
<ic-linkhref="#"target="_blank">About our coffees</ic-link><IcLinkhref="#"target="_blank">About our coffees</IcLink>Appearance
Interactive example
<ic-linkhref="#"appearance="dark"target="_blank">About our coffees</ic-link><ic-linkhref="#"appearance="light"target="_blank">About our coffees</ic-link><IcLinkhref="#"appearance="dark"target="_blank">About our coffees</IcLink><IcLinkhref="#"appearance="light"target="_blank">About our coffees</IcLink>With React Router
Interactive example
<MemoryRouterinitialEntries={["/"]}><divclassName={classes.linkContainer}><IcLink><NavLinkto="/"slot="router-item">Home</NavLink></IcLink><IcLink><NavLinkto="/daily-tippers"slot="router-item">Beverages</NavLink></IcLink></div><IcSectionContainer><Routes><Routepath="/"element={<IcTypography>This is the home page</IcTypography>}/><Routepath="/daily-tippers"element={<IcTypography>This page is about beverages</IcTypography>}/></Routes></IcSectionContainer></MemoryRouter>