开发预览更新于 2026-05-10

MethodBadge HTTP 方法徽标

ProtocolBadge 的别名，专用于 HTTP method 上下文。API 完全一致。

CfMethodBadge 是 CfProtocolBadge 的别名导出。当上下文明确只涉及 HTTP method 时， import CfMethodBadge 更精确表达意图，运行时与底层组件相同。

基础用法

仅展示 HTTP method 语义，颜色和尺寸规则沿用 ProtocolBadge。

背景视口

GETPOSTPUTPATCHDELHEADOPTS

src/App.vue

<script setup lang="ts">
import { CfMethodBadge } from '@chufix-design/vue';

const methods = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfMethodBadge v-for="method in methods" :key="method" :kind="method" />
  </div>
</template>

<script setup>
import { CfMethodBadge } from '@chufix-design/vue';

const methods = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfMethodBadge v-for="method in methods" :key="method" :kind="method" />
  </div>
</template>

import { CfMethodBadge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfMethodBadge kind="get" />
      <CfMethodBadge kind="post" />
      <CfMethodBadge kind="put" />
      <CfMethodBadge kind="delete" />
    </>
  );
}

import { CfMethodBadge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfMethodBadge kind="get" />
      <CfMethodBadge kind="post" />
      <CfMethodBadge kind="put" />
      <CfMethodBadge kind="delete" />
    </>
  );
}

导入

// Vue
import { CfMethodBadge } from '@chufix-design/vue';

// React
import { CfMethodBadge } from '@chufix-design/react';

参见 ProtocolBadge 的完整 API。