如何隐藏 Grommet SideSplit 组件
How to hide Grommet SideSplit component
我有一个使用 grommet ux 框架的 React/redux 应用程序。基本结构为:
<App className="gol">
<Article>
<GLHeader />
<SideSplit active={props.nav} onResponsive={checkMobile} >
<GLNav />
<GLBoard />
</SideSplit>
<Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer>
</Article>
</App>
我希望隐藏 <GLNav />
组件,除非单击“设置”图标,从而允许 <GLBoard />
组件填满屏幕。我有一个连接到图标的 redux 状态变量来切换 active
道具,并在 <GLNav />
组件上切换 CSS class。 CSS 将宽度设置为 0,以便 NAV 组件滑入和滑出:
.hide{
width: 0 !important;
transition: width .3s ease-out;
}
.show{
transition: width .3s ease-out;
}
所有这些在 Chrome 中都能完美运行。但是在 Safari 中,当 SideSplit 组件处于非移动模式(屏幕宽度大于 750px)时 - 即使 active
属性为 false,并且 CSS class .hide
已应用 - <GLNav />
组件具有宽度值。如果我将宽度更改为小于 750 像素,索环会应用 hidden
class,这将根据需要隐藏 <GLNav />
。
这里是 <GLNav />
class:
const GLNav = props => {
return(
<SideBar colorIndex="neutral-1-a" className={props.nav}>
<Header pad="medium" justify="between">
<Title>
Settings
</Title>
<Button icon={<Close />} onClick={() => props.actions.toggleNav()} />
</Header>
</SideBar>
)
}
正在复制我的评论以在有效时回答。
让我们强制 .hide
class 最大宽度为 0
.hide{
width: 0 !important; /* may be you don't need !important anymore */
max-width: 0;
transition: width .3s ease-out;
}
尽管此解决方案有效,但我相信有更好的方法可以实现您的目标,而无需直接操作 css。
您见过 Grommet 中的 Animate 实用程序吗?
https://grommet.github.io/docs/animate/examples/#1
它允许您使用纯反应方法来隐藏元素,而无需依赖 css 来隐藏元素(它在幕后使用 react-addons-transition-group
)。
在你的例子中我会做这样的事情:
export default MyComponent extends Component {
state = { navActive: false }
render () {
const { navActive } = this.state;
let navNode;
if (navActive) {
navNode = (
<Animate leave={{"animation": "slide-left", "duration": 1000}}
visible={true}>
<GLNav />
</Animate>
);
}
<App className="gol">
<Article>
<GLHeader />
<SideSplit active={props.nav} onResponsive={checkMobile} >
{navNode}
<GLBoard />
</SideSplit>
<Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer>
</Article>
</App>
}
}
我有一个使用 grommet ux 框架的 React/redux 应用程序。基本结构为:
<App className="gol">
<Article>
<GLHeader />
<SideSplit active={props.nav} onResponsive={checkMobile} >
<GLNav />
<GLBoard />
</SideSplit>
<Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer>
</Article>
</App>
我希望隐藏 <GLNav />
组件,除非单击“设置”图标,从而允许 <GLBoard />
组件填满屏幕。我有一个连接到图标的 redux 状态变量来切换 active
道具,并在 <GLNav />
组件上切换 CSS class。 CSS 将宽度设置为 0,以便 NAV 组件滑入和滑出:
.hide{
width: 0 !important;
transition: width .3s ease-out;
}
.show{
transition: width .3s ease-out;
}
所有这些在 Chrome 中都能完美运行。但是在 Safari 中,当 SideSplit 组件处于非移动模式(屏幕宽度大于 750px)时 - 即使 active
属性为 false,并且 CSS class .hide
已应用 - <GLNav />
组件具有宽度值。如果我将宽度更改为小于 750 像素,索环会应用 hidden
class,这将根据需要隐藏 <GLNav />
。
这里是 <GLNav />
class:
const GLNav = props => {
return(
<SideBar colorIndex="neutral-1-a" className={props.nav}>
<Header pad="medium" justify="between">
<Title>
Settings
</Title>
<Button icon={<Close />} onClick={() => props.actions.toggleNav()} />
</Header>
</SideBar>
)
}
正在复制我的评论以在有效时回答。
让我们强制 .hide
class 最大宽度为 0
.hide{
width: 0 !important; /* may be you don't need !important anymore */
max-width: 0;
transition: width .3s ease-out;
}
尽管此解决方案有效,但我相信有更好的方法可以实现您的目标,而无需直接操作 css。
您见过 Grommet 中的 Animate 实用程序吗?
https://grommet.github.io/docs/animate/examples/#1
它允许您使用纯反应方法来隐藏元素,而无需依赖 css 来隐藏元素(它在幕后使用 react-addons-transition-group
)。
在你的例子中我会做这样的事情:
export default MyComponent extends Component {
state = { navActive: false }
render () {
const { navActive } = this.state;
let navNode;
if (navActive) {
navNode = (
<Animate leave={{"animation": "slide-left", "duration": 1000}}
visible={true}>
<GLNav />
</Animate>
);
}
<App className="gol">
<Article>
<GLHeader />
<SideSplit active={props.nav} onResponsive={checkMobile} >
{navNode}
<GLBoard />
</SideSplit>
<Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer>
</Article>
</App>
}
}