セマンティックUIメニューにボトムアップメニュー以外のコンテンツを追加する方法

semantic-ui（react-semantic-ui経由）を使用しています。私は私のメニューの列の下部にログオンのための小さな領域が欲しい。セマンティックUIメニューにボトムアップメニュー以外のコンテンツを追加する方法

私はこの持っている：私はposition: absolute; bottom: 0を使用して、上記ましたが、私は意味的な位置決めクラスまたはreact-semantic-uiコンポーネントがあります賭けている

：私はこれが欲しい

をそれを使用してそれを達成するだろうマニュアルスタイル

私のコンポーネントは以下の通りです：

<Menu vertical fixed={'left'} inverted> 
    <Menu.Item name='account' active /> 
    <Menu.Item name='settings' active={false} /> 
    <Menu.Menu> 
     <img width="50px" height="50px" style={{ backgroundColor: 'red' }} /> 
     <Menu.Item name='logout' active={false} onClick={() => null} /> 
    </Menu.Menu> 
    </Menu>

出典

2016-11-29 cdaringe

セマンティックUIには「下部に位置合わせされたコンテンツ」クラスがあります。 http://semantic-ui.com/views/item.html –

ちょっと@IlanHasanov、情報ありがとうございます。私はそれを実装するのが難しいです。あなたのリンクでは、すべてが 'items'グループにラップされています。しかし、itemsグループは、スペースを埋めるために垂直方向に展開されないので、私の小さな赤いボックスのノードは固まってしまいます。さらに、verticalAlignはアイテム内のコンテンツではなく、アイテムグループ内のアイテムであるように見えます。そこにどんな考え？ありがとう！ – cdaringe

カスタムCSSを使用してください。 –

私はSegment elementを使用します。 attached小道具は最も有用なものであり、それを簡単にカスタマイズしてフルメニューにすることができます。

<Segment attached='bottom'></Segment>

あなたのスタイルに合わせて簡単にカスタマイズすることができます。

出典

2016-11-29 04:24:13 Chase

ちょっとチェイス！先端のおかげで！ 'Segment'は、私が使っていたカードの周りに素晴らしいラッパーを追加します - thx！残念ながら、attached = 'bottom'は実際にはメニューの一番下にドロップしません。ここには生の例があります（https://cdaringe.github.io/octagon/?selectedKind=core.Menu&selectedStory=vertical%20w%2F%20bottom%20content&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon- actions％2Factions-panel）：この例では、[ここにソースがあります]（https://github.com/cdaringe/octagon/blob/master/src/menu/Menu.stories.js#L22） – cdaringe

セマンティックUIメニューにボトムアップメニュー以外のコンテンツを追加する方法

答えて

関連する問題