多列 - Apifox Markdown 语法

通过多列显示将文本或内容。

示例效果

第 1 列
这里是第 1 列内容

第 2 列
这里是第 2 列内容

第 3 列
这里是第 3 列内容

代码：

<Columns>
  <Column>
    **第 1 列**
    这里是第 1 列内容
  </Column>
  <Column>
    **第 2 列**
    这里是第 2 列内容
  </Column>
  <Column>
    **第 3 列**
    这里是第 3 列内容
  </Column>
</Columns>

列内容遵循 markdown 语法。

定义宽度

第 1 列
这里是第 1 列内容,宽度20%

第 2 列
这里是第 2 列内容,宽度20%

第 3 列
这里是第 3 列内容,宽度300px

代码：

<Columns>
  <Column width="20%">
    **第 1 列**
    这里是第 1 列内容,宽度20%
  </Column>
  <Column width="20%">
    **第 2 列**
    这里是第 2 列内容,宽度20%
  </Column>
  <Column width={300}>
    **第 3 列**
    这里是第 3 列内容,宽度300px
  </Column>
</Columns>

通过 class 引用 Tailwind CSS 样式

多列组件支持使用 TailwindCSS 来自定义样式，Columns和Column都可以通过class属性添加 TailwindCSS 样式。

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

代码：

<Columns>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

通过 style 直接定义样式

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

代码：

<Columns>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

参数说明

Column

多列

示例效果#

定义宽度#

通过 class 引用 Tailwind CSS 样式#

通过 style 直接定义样式#

参数说明#

示例效果

定义宽度

通过 class 引用 Tailwind CSS 样式

通过 style 直接定义样式

参数说明