LinkButton

基本用法

<LinkButton
    href="https://nacos.io"
    text="按钮文案"
    theme="primary"
    textTheme="secondary"
/>

按钮文案

代码演示

使用不同主题色 theme / textTheme

<LinkButton
    href="https://nacos.io"
    text="按钮文案"
    theme="error"
    textTheme="secondary"
/>

<LinkButton
    href="https://nacos.io"
    text="按钮文案"
    theme="secondary"
    textTheme="primary"
/>

按钮文案
按钮文案

使用内置 useIcon

<LinkButton
    href="https://nacos.io"
    text="按钮文案"
    theme="error"
    textTheme="primary"
    useIcon="star"
/>

<LinkButton
    href="https://nacos.io"
    text="按钮文案"
    theme="secondary"
    textTheme="primary"
    useIcon="fork"
/>

useIcon=“star”

按钮文案

useIcon=“fork”

按钮文案

使用自定义 Icon

使用 slot="useIcon" 属性为 LinkButton 使用自定义 Icon。
注意，使用 solt 时、LinkButton.useIcon 属性不生效。

<LinkButton
  text="按钮文案"
  theme="primary"
  textTheme="secondary"
>
  <svg
    slot="useIcon"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    fill="none"
    version="1.1"
    width="17"
    height="16"
    viewBox="0 0 17 16"
  >
    <g>
      <path
          d="M5.37213,12.9639L8.49958,11.1049L11.627,12.9883L10.8079,9.46608L13.5631,7.11791L9.9392,6.79992L8.49958,3.47334L7.05996,6.77546L3.4361,7.09345L6.19123,9.46608L5.37213,12.9639ZM8.49958,13.4042L4.37929,15.8502Q4.10626,16.0214,3.80841,15.9969Q3.51056,15.9725,3.28717,15.8013Q3.06378,15.63,2.93968,15.3737Q2.81557,15.1174,2.89003,14.7984L3.98216,10.1754L0.333471,7.06898Q0.0852605,6.84884,0.0237046,6.56706Q-0.0378512,6.28528,0.0604399,6.0172Q0.159724,5.74814,0.358292,5.57692Q0.55686,5.40569,0.904353,5.35677L5.71963,4.94095L7.5812,0.587044Q7.7053,0.293522,7.96642,0.146761Q8.22754,0,8.49958,0Q8.77261,0,9.03273,0.146761Q9.29286,0.293522,9.41795,0.587044L11.2795,4.94095L16.0948,5.35677Q16.4423,5.40569,16.6409,5.57692Q16.8394,5.74814,16.9387,6.0172Q17.038,6.28626,16.9764,6.56804Q16.9149,6.84982,16.6657,7.06898L13.017,10.1754L14.1091,14.7984Q14.1836,15.1164,14.0595,15.3737Q13.9354,15.631,13.712,15.8013Q13.4886,15.9725,13.1907,15.9969Q12.8929,16.0214,12.6199,15.8502L8.49958,13.4042Z"
          fill="#F4F4F6"
          fill-opacity="1"
      />
    </g>
  </svg>
</LinkButton>

按钮文案

API

LinkButton

属性	说明	类型	默认值
text	按钮文案	string	-
theme	组件主题色	string	”primary”
textTheme	文案主题色（同时作用于 Icon）	string	”primary”
useIcon	使用内置 Icon star fork	string	-
classes	按钮自定义类名	LinkButton.classes	-

LinkButton.classes

属性	说明	类型	默认值
container	LinkButton 最外层元素样式	string	—
title	作用于 LinkButton.text 部分的样式	string	-
upRight	作用于 hover 右侧箭头部分的样式	string	-