title | components |
---|---|
React 应用栏组件 |
AppBar, Toolbar, Menu |
应用栏组件展示了与当前屏幕息息相关的信息和操作。
而顶部应用栏则提供与当前屏幕相关的内容和操作。 它可用于展示品牌、屏幕标题、导航和操作选项。
它既可以用作于转换为上下文相关的操作栏,又可以直接充当导航栏。
{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}}
一个主要搜索栏。
{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}}
{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}}
一个侧边搜索栏。
{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}}
{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}}
一个突出的应用栏。
{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}}
{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}}
当渲染一个固定位置的应用栏时,元素的尺寸不会影响页面的其余内容。 这可能导致部分内容会被挡在应用程序栏后面,而无法可见。 下面是3种可能的解决方案:
- 使用
position =“ sticky”
代替 fixed。⚠️ IE 11不支持 sticky。 - 可以渲染第二个
<Toolbar />
组件:
function App() {
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</React.Fragment>
);
}
- 也可以用
theme.mixins.toolbar
的 CSS:
const useStyles = makeStyles(theme => ({
offset: theme.mixins.toolbar,
}))
function App() {
const classes = useStyles();
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<div className={classes.offset} />
</React.Fragment>
)
};
您可以使用 useScrollTrigger()
这个 hook 来相应用户触发的滚动操作。
向下滚动会隐藏应用栏,这样一来会留有更多的空间进行阅读。
{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}}
应用栏会在滚动时提升,以表明用户还未到页面的顶部。
{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}}
在滚动的时候,会出现一个浮动操作按钮,这样以便于返回页面的顶部。
{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}}
options
(Object [optional]):
options.disableHysteresis
(Boolean [optional]): 默认值为false
。 禁用迟滞的效果。 在决定trigger
的值时会忽略在滚动的方向。options.target
(Node [optional]):默认值时window
。options.threshold
(Number [optional]): 默认值是100
. 严格来说,当垂直滚动超过(但不包括)此阈值时,请更改trigger
的值。
trigger
: 此滚动的位置符合要求吗?
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
function HideOnScroll(props) {
const trigger = useScrollTrigger();
return (
<Slide in={!trigger}>
<div>Hello</div>
</Slide>
);
}