ヘアライン

• ヘアラインを追加
• ヘアラインを削除
• ヘアラインの色
• ヘアラインのトランジション時間

Konsta UIでは、多くの要素に対して、通常のCSSのボーダーの代わりに、いわゆる「ヘアライン」を使用します。

ヘアラインは、:afterおよび:before疑似要素を使用して作成されています。この方法により、真の0.5pxおよび0.33px幅の「ボーダー」を実現できます。

ヘアラインを追加

ヘアラインを追加するには、.hairline-[side]クラスを使用する必要があります。

例:

// add bottom hairline to the element
<div className="relative hairline-b">...</div>

ヘアラインを削除

ヘアラインを削除するには、.no-hairline-[side]クラスを使用する必要があります。

ヘアラインの色

ヘアラインの色は、.hairline-[color]クラスでカスタマイズすることもできます。

例:

// add bottom hairline with red-500 color to the element
<div className="relative hairline-b hairline-red-500">...</div>

ヘアラインのトランジション時間

ヘアラインのトランジション時間を制御するには、.hairline-duration-[duration]クラスを使用できます。

例:

// add bottom hairline with red-500 color to the element, and change its color to blue-500 on hover
<div className="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500">
  ...
</div>