複数列
テキストやコンテンツを複数列で表示します。
効果
コード:
<Columns>
<Column>
**列 1**
こちらは列 1 のコンテンツです
</Column>
<Column>
**列 2**
こちらは列 2 のコンテンツです
</Column>
<Column>
**列 3**
こちらは列 3 のコンテンツです
</Column>
</Columns>
列のコンテンツはMarkdownの記法に従います。
幅の定義
<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スタイルの適用
複数列コンポーネントは、Tailwind CSSを使用したスタイルのカスタマイズをサポートしています。 Columns
と Column
の両方のコンポーネントで、class
属性を使用してTailwind CSSクラスを追加できます。
Photographs of scenery
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>
<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 ![](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 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>
パラメータ説明
更新時間 3 months ago