如何將底部浮動的非菜單內容添加到語義-UI菜單

我正在使用語義-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'組中。但是，項目組不會垂直擴展以填充空間，因此我的小紅盒節點卡住了。此外，verticalAlign似乎是針對項目中的內容，而不是項目組中的項目。那裏有任何想法？謝謝！ – cdaringe

然後用自定義的css .. –

我會用Segment element。 attached道具是你會發現最有用的，你可以很容易地定製它成爲一個完整的菜單。

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

您應該很容易就能夠對此進行調整以適應您的風格需求。

來源

2016-11-29 04:24:13 Chase

嘿追！謝謝你的提示！ 'Segment'在我使用的卡上添加了一個很好的小包裝 - thx！不幸的是，attach ='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-動作％2Factions面板）：，[這是源代碼]（https://github.com/cdaringe/octagon/blob/master/src/menu/Menu.stories.js#L22） – cdaringe

如何將底部浮動的非菜單內容添加到語義-UI菜單

回答

相關問題