Weirdo-UI

Appearance

Link 按钮 ​

文字超链接

基础用法 ​

基础的文字链接用法。

基础用法
Link 组件的基础用法
primarysuccesswarningdangerinfo
<template lang="">
  <div class="basic block">
    <el-link type="primary">primary</el-link>
    <el-link type="success">success</el-link>
    <el-link type="warning">warning</el-link>
    <el-link type="danger">danger</el-link>
    <el-link type="info">info</el-link>
  </div>
</template>
<script setup>
import ElLink from '@/components/Link/Link.vue'
</script>

禁用 ​

文字链接不可用状态。

基础用法
Button 组件的基础用法
primarysuccesswarningdangerinfo
<template lang="">
  <div class="basic block">
    <el-link type="primary" disabled>primary</el-link>
    <el-link type="success" disabled>success</el-link>
    <el-link type="warning" disabled>warning</el-link>
    <el-link type="danger" disabled>danger</el-link>
    <el-link type="info" disabled>info</el-link>
  </div>
</template>
<script setup>
import ElLink from '@/components/Link/Link.vue'
</script>

下划线 ​

文字链接下划线。

基础用法
Button 组件的基础用法
primarysuccesswarningdangerinfo
<template lang="">
  <div class="basic block">
    <el-link type="primary" underline>primary</el-link>
    <el-link type="success" underline>success</el-link>
    <el-link type="warning" underline>warning</el-link>
    <el-link type="danger" underline>danger</el-link>
    <el-link type="info" underline>info</el-link>
  </div>
</template>
<script setup>
import ElLink from '@/components/Link/Link.vue'
</script>

图标 ​

带图标的链接

基础用法
Button 组件的基础用法
primary
<template lang="">
  <div class="basic block">
    <el-link type="primary" icon="arrow-right">primary</el-link>
  </div>
</template>
<script setup>
import ElLink from '@/components/Link/Link.vue'
import ElIcon from '@/components/Icon/Icon.vue'
</script>