自定义semantic-ui-react Menu

Question

我使用 semantic-ui-react 一段时间了，一切正常，但我的导航菜单有问题。

问题是我希望它针对移动和桌面进行自定义，所以换句话说，我想要针对移动和桌面的完全不同的实现，我想知道是否有使用自定义语义的正确方法来做到这一点（因为我已经在自定义主题等等）。

我的另一个想法是，也许 only 选项可用于菜单，但在文档中没有真正找到任何内容。

最佳

Answer 1

只有 Grid 组件有视口断点（在原版 SUI 中也是如此），因此您应该将菜单包装到其中。

<Grid>
  <Grid.Row columns={1} only='mobile'>
    <Grid.Column>
      <MobileMenu />
    </Grid.Column>
  </Grid.Row>
  <Grid.Row columns={1} only='tablet computer'>
    <Grid.Column>
      <ComputerMenu />
    </Grid.Column>
  </Grid.Row>
</Grid>

您还可以查看 Grid 文档的 device visibility 部分。

自定义semantic-ui-react Menu

Customised semantic-ui-react Menu

reactjs

semantic-ui

semantic-ui-react