ヘアライン

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

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

ヘアラインは、:afterと:beforeの疑似要素で作成されています。この方法により、真の0.5pxと0.33px幅の「境界線」を実現できます。

ヘアラインを追加

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

例:

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

ヘアラインを削除

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

ヘアラインの色

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

例:

<!-- add bottom hairline with red-500 color to the element -->
<div class="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
  class="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500"
>
  ...
</div>