Webhook Label

Webhook Label 组件用于标识 Webhook 事件类型，帮助开发者快速识别不同的事件。

Open in

Webhook 事件标签

user.createduser.updateduser.deletedorder.placedorder.completedpayment.successpayment.failed

在 Webhook 文档中使用

user.created用户创建时触发

order.placed订单下单时触发

payment.success支付成功时触发

自定义样式

custom.event

安装

使用方法

import { WebhookLabel } from "@/components/pivot/webhook-label";

<WebhookLabel event="user.created" />

示例

基本用法

<div className="flex flex-wrap items-center gap-2">
  <WebhookLabel event="user.created" />
  <WebhookLabel event="user.updated" />
  <WebhookLabel event="user.deleted" />
  <WebhookLabel event="order.completed" />
</div>

在 Webhook 文档中使用

<div className="space-y-3">
  <div className="flex items-center gap-3 p-3 border rounded">
    <WebhookLabel event="user.created" />
    <span className="text-sm text-muted-foreground">当新用户注册时触发</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <WebhookLabel event="payment.success" />
    <span className="text-sm text-muted-foreground">支付成功时触发</span>
  </div>
</div>

API 参考

Props

属性	类型	默认值	描述
`event`	`string`	-	Webhook 事件名
`className`	`string`	-	额外的 CSS 类名