跳转到内容
Docs Prototypes Whitepaper

Button

按钮组件

这是 wc 的 button 组件

<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
  <div>
    <wc-shadcn-button>Default2</wc-shadcn-button>
  </div>
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
  <wc-shadcn-button variant="ghost" size="icon">+</wc-shadcn-button>
  <wc-shadcn-button disabled>Disabled</wc-shadcn-button>
</div>

这是 wc 的 测试 组件

<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
  <div>
    <wc-shadcn-button>Default2</wc-shadcn-button>
  </div>
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
  <wc-shadcn-button variant="ghost" size="icon">+</wc-shadcn-button>
  <wc-shadcn-button disabled>Disabled</wc-shadcn-button>
</div>

这是 react 的 button 组件

import { ShadcnButton } from '@prototype-libs/shadcn';

export function DemoButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
      <div>
        <ShadcnButton>Default2</ShadcnButton>
      </div>
      <ShadcnButton variant="outline">Outline</ShadcnButton>
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
      <ShadcnButton variant="ghost" size="icon">
        +
      </ShadcnButton>
      <ShadcnButton disabled>Disabled</ShadcnButton>
    </div>
  );
}

这是 vue 的 button 组件

<script setup lang="ts">
import { ShadcnButton } from '@prototype-libs/shadcn';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <div>
      <ShadcnButton>Default2</ShadcnButton>
    </div>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="ghost" size="icon">+</ShadcnButton>
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>

这是 vue 的 测试 组件

<script setup lang="ts">
import { ShadcnButton } from '@prototype-libs/shadcn';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <div>
      <ShadcnButton>Default2</ShadcnButton>
    </div>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="ghost" size="icon">+</ShadcnButton>
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>