import { DownloadOutlined } from '@apitable/icons'; import { LinkButton } from './index'; import { Canvas, ArgsTable, Story } from '@storybook/addon-docs'; import { ThemeToggle } from '../../stories/theme-toggle'; import { colors } from '../../helper';

<Meta title="基础组件/Button 按钮/LinkButton 跳转按钮/文档" />

LinkButton 跳转按钮

使用方式

默认通过 a 标签跳转

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--default"/> </ThemeToggle> </Canvas>

设置 target 为 _blank 浏览器新窗口打开网站 https://apitable.com

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--button-href"/> </ThemeToggle> </Canvas>

颜色

默认是主题色，可以自定义颜色。

• 传入色板中的颜色，会自动处理 hover 、active 的颜色。
• 非色板颜色，则需要自己覆盖 hover、active 状态下的颜色。

<Canvas> <ThemeToggle> <LinkButton>点我跳转</LinkButton> <LinkButton color="#FF7A00">这个颜色 shade 小于 700</LinkButton> <LinkButton color={colors.textCommonSecondary}>这个颜色 shade 大于 700</LinkButton> <LinkButton className="myLinkButton">自定义 action 颜色</LinkButton> </ThemeToggle> </Canvas>

隐藏下划线

默认会带下划线，也可以通过设置 underline 为 false 去掉下划线。

<Canvas> <ThemeToggle> <LinkButton underline={false} href="https://apitable.com/" > 跳转链接 </LinkButton> </ThemeToggle> </Canvas>

跳转 Button

通过 component="button" 指定将 a 标签改为 button。也可根据需求指定为其他 HTML 标签，比如 div。

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--button-icon"/> </ThemeToggle> </Canvas>

设置前、后缀图标

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--left-icon"/> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--right-icon"/> </ThemeToggle> </Canvas>

禁用状态

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--disabled"/> </ThemeToggle> </Canvas>

占据整行

<Canvas> <ThemeToggle> <Story id="基础组件-button-按钮-linkbutton-跳转按钮--block"/> </ThemeToggle> </Canvas>

API

<ArgsTable of={LinkButton} />