React Semantic UI - 粘性侧边栏答案

【问题标题】：React Semantic UI - Sticky SidebarReact Semantic UI - 粘性侧边栏
【发布时间】：2018-03-11 01:13:45
【问题描述】：

有没有什么办法可以使用react-semantic-ui的<Sidebar>来设置一个粘性侧边栏？

实现粘性行为的一种方法是跳过而不使用<Sidebar.Pushable>，但是我不能使用<Sidebar.Pusher> 的dimmed 道具。

除了我上面说的方法，我发现没有其他方法不是太 hacky。

【问题讨论】：

标签： semantic-ui sidebar semantic-ui-react

【解决方案1】：

不久前我一直在寻找这个。这是我的做法：

my-sidebar.css:

.pushable {
  height: auto;
}
.pushable > .pusher {
  min-height: fit-content;
}

很久以前，如果它不起作用，请告诉我，以便我更新。

【讨论】：

【解决方案2】：

使用侧边栏粘贴

我希望有一个粘性错误消息溢出内容并在左侧有一个垂直侧边栏。

我用粘性尝试了几个小时，但我没能成功。

我找到的最干净的解决方案是使用 Portal 并添加 css 以将其推送到顶部。

这是我的消息组件（在可推送侧边栏旁边）

    class AppAlert extends React.Component{

    getColor(){
        return 'green';
    }

    render(){
        return (
            <TransitionablePortal open={true} transition={{ animation: 'swing down', duration:1000 }} closeOnDocumentClick={false}>
                <Sidebar style={{position: 'fixed', top: '0'}} direction="top" animation="overlay">
                    <Message color={this.getColor()}>
                        My message<br/>
                        My message<br/>
                        My message<br/>
                    </Message>
                </Sidebar>
          </TransitionablePortal>
        )
    }
}

export default AppAlert;

Screenshot of the result

【讨论】：