gd-ui-vite

Link文字标签

基础用法

基础文字链接用法

使用color属性来定义文字链接基础样式
<template>
  <section>
    <div class="basic__item">
      <GLink>默认按钮</GLink>
      <GLink color="blue">主要按钮</GLink>
      <GLink color="green">成功按钮</GLink>
      <GLink color="yellow">警告按钮</GLink>
      <GLink color="red">危险按钮</GLink>
      <GLink color="gray">信息按钮</GLink>
      <GLink color="purple">其它按钮</GLink>
    </div>
  </section>
</template>

禁用状态

文字链接不可用状态

使用disabled属性来定义文字链接禁用状态
<template>
  <section>
    <div class="basic__item">
      <GLink disabled>默认按钮</GLink>
      <GLink color="blue" disabled>主要按钮</GLink>
      <GLink color="green" disabled>成功按钮</GLink>
      <GLink color="yellow" disabled>警告按钮</GLink>
      <GLink color="red" disabled>危险按钮</GLink>
      <GLink color="gray" disabled>信息按钮</GLink>
      <GLink color="purple" disabled>其它按钮</GLink>
    </div>
  </section>
</template>

下划线

文字链接下划线

使用underline属性来定义文字链接下划线
<template>
  <section>
    <div class="basic__item">
      <GLink>有下划线按钮</GLink>
      <GLink :underline="false">无下划线按钮</GLink>
    </div>
  </section>
</template>

图标

携带图标的文字链接可以增强辨识度

使用icon属性来定义文字链接图标
<template>
  <section>
    <div class="basic__item">
      <GLink icon="search">链接</GLink>
      <GLink icon="edit">链接</GLink>
      <GLink icon="check">链接</GLink>
      <GLink icon="message">链接</GLink>
    </div>
  </section>
</template>

API

参数说明类型可选值默认值
color颜色stringblue/green/red/gray/purple/yellowdefault
disabled是否禁用状态boolean————false
underline是否下划线boolean————true
icon图标类名string————————
href原生href属性string————————