跳转到内容
Proto UI

搜索

正在加载搜索…
Toggle theme

Button

<div class="flex flex-wrap items-center justify-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
  <wc-shadcn-button variant="secondary">Secondary</wc-shadcn-button>
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
  <wc-shadcn-button variant="ghost">Ghost</wc-shadcn-button>
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
  <wc-shadcn-button variant="link">Link</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
      <ShadcnButton variant="outline">Outline</ShadcnButton>
      <ShadcnButton variant="ghost">Ghost</ShadcnButton>
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
      <ShadcnButton variant="link">Link</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="link">Link</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="link">Link</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

安装

Section titled “安装”
npm
Copy command 

        npx @proto.ui/cli@latest add wc shadcn-button
npm
Copy command 

        npx @proto.ui/cli@latest add react shadcn-button
npm
Copy command 

        npx @proto.ui/cli@latest add vue shadcn-button

用法

Section titled “用法”

default 默认

Section titled “default 默认”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDefaultDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

secondary 次要

Section titled “secondary 次要”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="secondary">Secondary</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonSecondaryDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

outline 轮廓

Section titled “outline 轮廓”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonOutlineDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="outline">Outline</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="outline">Outline</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="outline">Outline</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

ghost 虚化

Section titled “ghost 虚化”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="ghost">Ghost</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonGhostDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="ghost">Ghost</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

destructive 危险

Section titled “destructive 危险”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDestructiveDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

size 尺寸

Section titled “size 尺寸”
<div class="flex flex-wrap items-center justify-center gap-3">
  <wc-shadcn-button size="sm">Small</wc-shadcn-button>
  <wc-shadcn-button>Default</wc-shadcn-button>
  <wc-shadcn-button size="lg">Large</wc-shadcn-button>
  <wc-shadcn-button size="icon" variant="outline">+</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ShadcnButton size="sm">Small</ShadcnButton>
      <ShadcnButton>Default</ShadcnButton>
      <ShadcnButton size="lg">Large</ShadcnButton>
      <ShadcnButton size="icon" variant="outline">
        +
      </ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton size="sm">Small</ShadcnButton>
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton size="lg">Large</ShadcnButton>
    <ShadcnButton size="icon" variant="outline">+</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton size="sm">Small</ShadcnButton>
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton size="lg">Large</ShadcnButton>
    <ShadcnButton size="icon" variant="outline">+</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

disabled 禁用

Section titled “disabled 禁用”
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button disabled>Disabled</wc-shadcn-button>
</div>
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDisabledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton disabled>Disabled</ShadcnButton>
    </div>
  );
}
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

API 参考

Section titled “API 参考”
字段 类型 默认值
variant 'default' 'destructive' 'outline' 'secondary' 'ghost' 'link' default
size 'default' 'sm' 'lg' 'icon' default
disabled boolean false

参考依据

Section titled “参考依据”