Link

🌏 Translated with the assistance of DeepSeek and ChatGPT

A component used to display hyperlinks.

Basic Usage

Usually, we use it just like an <a> tag.

_self

_blank

<template>
	<px-space>
		<px-link href="./link" target="_self">_self</px-link>
		<px-link href="./link" target="_blank">_blank</px-link>
	</px-space>
</template>

Link Themes

The link offers six themes: 'primary' (default), 'success', 'warning', 'danger', 'info', and 'sakura'.

WARNING

The href attribute will be passed directly to the <a> tag. If a value like javascript:alert(1) or a malicious URL is passed, it may lead to XSS or open redirect vulnerabilities.

Primary

Success

Warning

Danger

Info

Sakura

<template>
	<px-space>
		<px-link style="margin-right: 8px">Primary</px-link>
		<px-link theme="success">Success</px-link>
		<px-link theme="warning">Warning</px-link>
		<px-link theme="danger">Danger</px-link>
		<px-link theme="info">Info</px-link>
		<px-link theme="sakura">Sakura</px-link>
	</px-space>
</template>

Disabled Status

disabled indicates that the link is disabled; the browser's default click-to-navigate behavior will not be triggered.

No Allow

<template>
	<px-link disabled>No Allow</px-link>
</template>

Loading Status

loading indicates whether the link is in a loading state; while loading, the browser's default click-to-navigate behavior will not be triggered.

Loading

Loading

<template>
	<px-space>
		<px-link loading>Loading</px-link>
		<px-link loading disabled>Loading</px-link>
	</px-space>
</template>

Icon

<template>
	<px-link>
		<template #icon>
			<IconMinds></IconMinds>
		</template>
		Icon
	</px-link>
</template>
<script setup lang="ts">
import { IconMinds } from '@pixelium/web-vue/icon-hn/es'
</script>

Custom Color

Custom primary color: similar to the button component, the component will generate a complete color palette based on it, and this palette takes precedence over the preset palettes provided by theme. It supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.

#409EFF

#FAE13C

#E956AE

#909399

<template>
	<px-space>
		<px-link color="#409EFF">#409EFF</px-link>
		<px-link color="#FAE13C">#FAE13C</px-link>
		<px-link color="#E956AE">#E956AE</px-link>
		<px-link color="#909399">#909399</px-link>
	</px-space>
</template>

API

LinkProps

Attribute	Type	Optional	Default	Description	Version
disabled	boolean	True		Whether the link is disabled.	0.0.0-beta
loading	boolean	True		Whether the link is in a loading state.	0.0.0-beta
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'	True	'primary'	Link theme.	0.0.0-beta
color	string	True			0.0.0-beta
href	string	True		Native HTML <a> href attribute.	0.0.0-beta
target	string	True		Native HTML <a> target attribute.	0.0.0-beta

LinkSlots

Slot	Parameter	Description	Version
default		The link's content.	0.0.0-beta
icon		The link's icon.	0.0.0-beta

LinkEvents

Event	Parameter	Description	Version
click	e: MouseEvent		0.0.0-beta