English
fs-link
About 447 wordsAbout 1 min
Introduction
A link is a component used to navigate to another page or to a specified location on the current page.
Use Cases
- Navigate to other pages in the system
- Open external sites
- Jump to other elements on the same page
When not to use: If the action triggers an operation or changes state on the current page, use a button component instead of a link component.
Code Demo
Type
Styles and States
Size
Icon
Maximum Width and Ellipsis
API
Properties
| Property | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| type | Type | string | default/normal/primary/info/success/warning/danger | default |
| size | Size | string | micro/mini/small | small |
| underline | Underline | boolean | true/false | false |
| disabled | Disabled | boolean | true/false | false |
| href | Navigation URL | string | — | — |
| target | Navigation target | string | _self/_blank | _self |
| leftIcon | Left icon | string | — | — |
| rightIcon | Right icon | string | — | — |
| text | Text | string | — | — |
| maxWidth | Maximum width | string | — | — |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| click | Triggered on tap | event |
Slot
| Name | Description |
|---|---|
| Default | Link content |
Design Notes
- Details such as color, size, underline, and disabled state strictly follow the design specification.
- Supports custom content via slot.
- Supports icons, navigation, external links, and disabled state.
- Each type has three states: normal, tap, and disabled. The tap state uses a darker color, while the disabled state uses a lighter color.
- Links provide three sizes:
- micro: 12px font size, suitable for extremely compact spaces
- mini: 13px font size, suitable for compact spaces
- small: 14px font size, suitable for common scenarios (default)
- Supports setting the maximum width through the maxWidth property. Overflow content is displayed with an ellipsis, suitable for limited-space scenarios.