Lien

VLink est un lien natif coloré selon un ton. Il prend la taille et la graisse du texte qui l’entoure, dans une phrase, un titre ou une légende.

Utilisation

vue

Read the installation guide before adding the package to your project.

<script setup lang="ts">
import { VLink, VTypography } from 'vectis-ui'
</script>

<template>
  <VTypography>
    Read the <VLink href="#usage">installation guide</VLink> before adding the package to your
    project.
  </VTypography>
</template>

Exemples

Tons

tone colore le lien. neutral prend la couleur du texte.

vue

Accent
Neutral
Delete account
View receipt
Review settings

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <ul class="links">
    <li><VLink href="#tones">Accent</VLink></li>
    <li><VLink href="#tones" tone="neutral">Neutral</VLink></li>
    <li><VLink href="#tones" tone="danger">Delete account</VLink></li>
    <li><VLink href="#tones" tone="success">View receipt</VLink></li>
    <li><VLink href="#tones" tone="warning">Review settings</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Couleur héritée

tone="inherit" prend la couleur du texte qui entoure le lien, comme une ligne de pied de page atténuée, et passe à la couleur d’accent au survol. Gardez le soulignement : c’est alors lui qui distingue le lien.

vue

Built with Vectis UI and Nuxt.

<script setup lang="ts">
import { VLink, VTypography } from 'vectis-ui'
</script>

<template>
  <VTypography variant="body-sm" tone="muted">
    Built with <VLink href="#inherited-colour" tone="inherit">Vectis UI</VLink> and
    <VLink href="#inherited-colour" tone="inherit">Nuxt</VLink>.
  </VTypography>
</template>

Soulignement

Les liens sont toujours soulignés par défaut, pour que la couleur seule ne soit pas le seul moyen de les repérer dans un texte. hover et none conviennent aux menus, pieds de page et listes de liens.

vue

Always underlined
Underlined on hover
Never underlined

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <ul class="links">
    <li><VLink href="#underline">Always underlined</VLink></li>
    <li><VLink href="#underline" underline="hover">Underlined on hover</VLink></li>
    <li><VLink href="#underline" underline="none">Never underlined</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Liens externes

external ouvre un nouvel onglet avec rel="noopener noreferrer", ajoute une icône et le signale aux lecteurs d’écran. L’icône est l’icône intégrée open_in_new, qu’un résolveur d’icônes peut remplacer partout. externalIcon la remplace pour un lien et hideExternalIcon la retire.

vue

<script setup lang="ts">
import { VLink } from 'vectis-ui'
import { description } from 'vectis-ui/icons'
</script>

<template>
  <ul class="links">
    <li><VLink href="https://vuejs.org" external>Vue documentation</VLink></li>
    <li>
      <VLink href="https://vuejs.org" external :external-icon="description">Another icon</VLink>
    </li>
    <li><VLink href="https://vuejs.org" external hide-external-icon>Without the icon</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: grid;
  gap: var(--vectis-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Désactivé

Un lien désactivé perd son adresse et ses écouteurs de clic, et porte aria-disabled.

vue

Archived release notes

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <VLink href="#disabled" disabled>Archived release notes</VLink>
</template>

Routeur

VLink rend toujours un vrai <a>. Avec Nuxt ou Vue Router, placez-le dans le lien du routeur en mode custom et transmettez href et navigate. Un clic avec une touche de modification ouvre toujours un nouvel onglet.

vue

<RouterLink v-slot="{ href, navigate }" to="/settings" custom>
  <VLink :href="href" @click="navigate">Settings</VLink>
</RouterLink>

API

Props

Prop	Type	Défaut
`href`	`string`	aucune
Destination du lien.
`tone`	`LinkTone'accent' \| 'neutral' \| 'danger' \| 'success' \| 'warning' \| 'inherit'`	`'accent'`
Couleur du lien. `inherit` prend la couleur du parent et passe à l’accent au survol.
`underline`	`LinkUnderline'always' \| 'hover' \| 'none'`	`'always'`
Quand le lien est souligné. Gardez `always` dans un texte courant.
`external`	`boolean`	`false`
Ouvre un nouvel onglet avec `rel="noopener noreferrer"`, ajoute une icône et le signale aux lecteurs d’écran.
`externalIcon`	`IconSource`	`open_in_new`
Icône d’un lien externe.
`hideExternalIcon`	`boolean`	`false`
Retire l’icône d’un lien externe. Les lecteurs d’écran annoncent toujours le nouvel onglet.
`disabled`	`boolean`	`false`
Retire l’adresse et marque le lien `aria-disabled`.

Slots

Slot	Type
`default`	`{}`
Texte du lien.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender