Button / 按钮

最常用的 UI 组件之一，用于触发一个即时操作。

特性

符合现代浏览器标准的语义化

支持动态渲染

允许 Hover 状态拥有不同变体

Variant

Size

Disabled

<template>
  <Btn size="md" variant="default">
    Button
  </Btn>
</template>

通过 is 属性可以动态渲染不同的组件，从而实现按钮形式的链接。

这种用法有许多好处。在桌面端，用户可以使用鼠标中键在新的标签页中打开链接；在移动端，用户可以长按链接实现小窗展现，并可以在多个应用之间的拖拽。

<template>
  <Btn is="a" href="https://jannchie.com" target="_blank">
    To Jannchie's Blog
  </Btn>
</template>

如果你在使用 Nuxt 等 SSR 框架，你可能需要将按钮渲染为 NuxtLink。它能够获得更好的 SSR 支持。

<template>
  <Btn :is="NuxtLink" href="https://jannchie.com" target="_blank">
    To Jannchie's Blog
  </Btn>
</template>

通过 icon 属性可以实现图标按钮。它与普通按钮的区别在于 padding 会改为四边相同。

<template>
  <Btn icon>
    <i class="i-tabler-circle-plus" />
  </Btn>
</template>

其中图标本身需要由其他库导入。 Roku UI 已经引入了 @unocss/icon，你可以使用 CSS 类名来使用图标。它非常易于管理，并且能获得最好的 SSR 效果，避免图标在刷新载入时的闪烁。不过图标库的容量过大，为了让图标生效，你需要另行下载相应的图标库数据使得它们能够正常显示。

有时候，我们希望一个按钮在被鼠标悬停时拥有不同的变体。通过组合不同的变体，你可以实现更多的效果。

<template>
  <Btn icon>
    <i class="i-tabler-circle-plus" />
  </Btn>
</template>