カスタマイズされたsemantic-ui-reactメニュー

Question

いつかsemantic-ui-reactを使用していますが、すべて正常に動作しますが、ナビゲーションメニューに問題があります。

私はそれをモバイルとデスクトップ向けにカスタマイズしたいと思っています。つまり、私はモバイルとデスクトップの完全な異なる実装を望んでおり、カスタマイズされたセマンティックを使ってそれを行う適切な方法があるかどうか疑問でした私は既にテーマなどをカスタマイズしているので）。

もう1つの考えは、メニューには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セクションを確認することができます。