Apifox Markdown 语法
  1. 组件
Apifox Markdown 语法
  • Apifox Markdown 概述
  • 基础语法及功能
    • 标题和文本
    • 列表和表格
    • 图片
    • 视频
    • 代码
    • 图标
    • Tailwind CSS 支持
  • 组件
    • 告示
    • 高亮块
    • 折叠块
    • 折叠组
    • 多列
    • 卡片
    • 卡片组
    • 图片边框
    • 图片背景
    • 步骤
    • 选项卡
    • 提示语
    • 点击复制文字
    • 文字 Hover 提示
    • 容器
    • 文本绘图 - Mermaid
      • 流程图
      • 时序图
      • 类图
      • 状态图
      • 关系图
      • 旅程图
      • 甘特图
      • 饼状图
    • 公式
      • 行内公式
      • 块级公式
  • 其它问题
    • 常用快捷键
  • 最佳实践
    • 打造高颜值产品文档的 10 个技巧
  1. 组件

卡片

通过 Card 定义矩形组件。

示例效果#

卡片标题
这里是卡片内容
代码:
<Card title="卡片标题" > 
这里是卡片内容
</Card>
卡片内容遵循 Markdown 语法。

设置图标#

带图标卡片
这里是卡片内容
代码:
<Card title="带图标卡片" icon="material-two-tone-storefront" > 
这里是卡片内容
</Card>

可点击跳转的卡片#

可点击跳转的卡片
点击卡片可跳转至 Apifox 官网
代码:
<Card title="可点击跳转的卡片" href="https://apifox.com" icon="material-two-tone-storefront">
点击卡片可跳转至 Apifox 官网
</Card>

跳转到指定目录#

点击跳转到指定目录
点击卡片可跳转至 “Apifox Markdown 文本” 目录
代码:
<Card title="点击跳转到指定目录" href="https://markdown.apifox.cn/4245931m0#文本" icon="material-two-tone-storefront">
点击卡片可跳转至 “Apifox Markdown 文本” 目录
</Card>

通过 class 引用 Tailwind CSS 样式#

卡片
卡片内容
代码:
<Card title="卡片" class="text-center text-xl font-bold">
卡片内容
</Card>

通过 style 直接定义样式#

卡片
卡片内容
代码:
<Card title="卡片" style="background-color: #f0f0f0; padding: 10px;">
卡片内容
</Card>

参数说明#

Card
title
string 
定义卡片标题
必需
href
string 
定义卡片跳转地址
可选
icon
string 
可选
定义图标。定义方法请查阅图标
class
string 
可选
为HTML元素分配一个或多个类名,支持 Tailwind CSS
style
string 
可选
内联样式属性,允许直接定义CSS样式

常见问题#

如何在 Apifox 的卡片组件中链接到项目内的文档或接口?
可以使用以下方式在卡片组件内创建跳转链接。
image.png
如何快速获取文档、接口、目录路径 ?
点击 Apifox 中的 "插入项目内接口/文档"按钮,选中资源插入后,资源路径将会显示在页面上。
上一页
多列
下一页
卡片组
Built with