🌹

開発日記-2024-01-20

公開日
5か月前
2024-01-20
更新履歴

Separatorコンポーネントが消える

shadcn/uiのSeparatorコンポーネントの縦線で区切るセパレータが表示されない問題が発生した。

orientation="vertical" の場合、tailwindの h-full が当てられているため、flexの子要素に <Separator orientation="vertical" /> を配置すると高さが 0 になって消えてしまうというのが原因だった。

<div className="flex items-center">
  <div>xxxx</div>
  <div className="h-4">
    <Separator orientation="vertical" />
  </div>
  <div>xxxx</div>
</div>

このような方法で、とりあえず表示できる。Next UIのDividerコンポーネントも同じようなことが起きる。

Front Matter CMSのカテゴリの設定

一つだけ選択するタイプのカテゴリのフィールド設定:

{
  "title": "Category",
  "name": "category",
  "type": "categories",
  "taxonomyLimit": 1,
  "singleValueAsString": true
},