如何将语义 UI 类别 headers 显示为搜索结果列表中的项目？

Question

我有一个semantic ui search field which is working correctly. But the category names are rather long, and having them on the left is taking up a lot of space. I'd like the category to appear as another item in the same list, just styled differently. Something like this, where the gray headers correspond to the item categories (source):

我看不到在初始化组件时进行此更改的方法。我该怎么做？

Answer 1

事实证明，这个改起来很简单，完全可以在CSS中完成。关键是将构成建议弹出窗口的 div 从 display: table-cell 更改为 display: block 并给它们一个宽度。

  .ui.category.search>.results .category {
      display: block;
      width: 100%;
  }

  .ui.category.search .results {
      width: 600px;
      width: 100%;
  }

  .ui.category.search>.results .category>.name {
      display: block;
      width: 100%;
      white-space: normal;
  }

  .ui.category.search>.results .category .results {
      display: block;
      width: 100%;
  }

  .ui.category.search>.results .category .result {
      display: block;
      width: 100%;
  }

  .ui.search>.results .result .description {
      width: 100%;
  }

如何将语义 UI 类别 headers 显示为搜索结果列表中的项目？

How do I show Semantic UI category headers as an item in the search results list?

javascript

search

semantic-ui