naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🌹

開発日記-2024-01-20 / Separatorコンポーネントが消える問題

公開日
2年近く前
2024-01-20
更新履歴
GitHubで見る
  • Markdown
  • 開発日記
  • React

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
},

目次

最近更新された記事

🛷
開発日記-2025-10-29 / tocbot のオプション
1日前 - 2025年10月29日
  • 開発日記
  • tocbot
🚩
Next.js 16にアップグレードする
2日前 - 2025年10月27日
  • Next.js
✒️
エンジニア個人ブログまとめ
3日前 - 2025年10月27日
  • デザイン
  • Next.js
  • Markdown