用於检测点击事件是否发生在元素之外,它可以监听文档中某处发生的点击事件。
和之前部分的组件有 onClose 的属性一样,他可以针对想要监听的部分加入监听事件。
例如,当用户在点击页面除菜单外的任何一处,您可能想隐藏一个下拉的菜单:
<ClickAwayListener onClickAway={handleClickAway}>
<div className={classes.root}>
<button type="button" onClick={handleClick}>
Open menu dropdown
</button>
{open ? (
<div className={classes.dropdown}>
Click me, I will stay visible until you click outside.
</div>
) : null}
</div>
</ClickAwayListener>
使用的逻辑和之前的 menu 是一样的,这样类似的应用其实在之前介绍过的组件中也有,详细的内容可以至官方文件中查询。
这个部分之前也有提及了,就是在做 normailize.css 所做的事情。
import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
export default function MyApp() {
return (
<React.Fragment>
<CssBaseline />
{/* 其他内容的组件 */}
</React.Fragment>
);
}
详细设定的内容可以到文件中查看。
Modal 组件可以用来快速创建对话框、弹出窗口,灯箱等任何你所需的组件。
这边建构的逻辑和之前的 Dialog, Menu, Drawer, Popover 是一样的。
<button type="button" onClick={handleOpen}>
Open Modal
</button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
这边看到的效果和之前的 Dialog 是差不多的,详细的内容可以到官方文件查看。
这个组件和之前介绍的 tooltips 是一样的,他的文件中有各式 Anchor 属性情况下的范例可以参考,连结在这,在这个章节也解释了前面组件所用的属性是如何作用的。
Popper 可用於在另一个内容之上显示一些内容。它是 react-popper 的替代品。
和上述 Popover 的情况一样也解释了前面组件所用的属性是如何作用的,其他使用上的细节可以至官方文件。
这个部分说明了 modal 和 Popper 是如何运作的,将其子组件呈现到当前 DOM 层次结构之外的新子节点中。
export default function SimplePortal() {
const classes = useStyles();
const [show, setShow] = React.useState(false);
const container = React.useRef(null);
const handleClick = () => {
setShow(!show);
};
return (
<div>
<button type="button" onClick={handleClick}>
{show ? 'Unmount children' : 'Mount children'}
</button>
<div className={classes.alert}>
It looks like I will render here.
{show ? (
<Portal container={container.current}>
<span>But I actually render here!</span>
</Portal>
) : null}
</div>
<div ref={container} />
</div>
);
}
细节的话可以至官方文件中查询。
这个部分真的没什麽需要特别讲解的,跟原生的 Textarea tag 是一样的,连结在此。
这边提供了一些过场动画的用法,当然也可以透过 styles 去自己写入啦,但这里用起来的方式要便捷许多。
Material-UI 为某些过场组件 (Fade, Grow, Zoom, Slide) 的子级提供了 style 属性。为了让动画如期实现,您必须将 style 属性应用到DOM上。
// `props` 包含一个 `style` 属性
// 需要将这个属性提供给 `div` 元素
function MyComponent(props) {
return (
<div {...props}>
Fade
</div>
);
}
export default Main() {
return (
<Fade>
<MyComponent />
</Fade>
);
}
其他个别的效果可以至官方文件中查看,会比较清楚他们各自的效果。
这是 React 的 CSS 媒体查询 (Media queries)hook。它监听与 CSS 媒体查询的匹配的内容。它允许根据查询的结果是否匹配来渲染组件。
你应该将媒体查询提供给 hook 作为第一个参数。媒体查询的字符串可以是任何有效的 CSS 媒体查询,例如 '(prefers-color-scheme: dark)'。
export default function SimpleMediaQuery() {
const matches = useMediaQuery('(min-width:600px)');
return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}
function MyComponent() {
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up('sm'));
return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}
其他细部的应用可以到官方文件中查询。
以上就是今天的全部内容了,明天会接续後面的内容做讲解,我是不打算讲解 LAB 的应用,因为本身 material ui 就是一个很庞大的 UI 库,再加上 LAB 的安装,专案会太过庞大,其中一些应用也不是很必需,除了 autoComplete 的部分是真的很方便之外,其他的存在真的是可有可无。
所以,明天要讲的内容会是接续 Styles 的进阶部分。
<<: [Day10] TS:什麽!Conditional Types 中还能建立型别?使用 infer 来实作 ReturnType 和 Parameters
>>: 第二十天:在 TeamCity 上执行 Build Scan
再来是办公室表单的处理, 假设有些表单只有图像或是只有纸本, 想要汇入成Excel档案时, 我们就可...
27 - First non-repeating character Don't say so mu...
暑假後期,指导教授给了第三届 Line Chatbot 设计大赛的资讯。 虽然比赛内容主要放在设计、...
点击进入React源码调试仓库。 本篇是详细解读React DOM操作的第壹篇文章,文章所讲的内容发...
前言 接下来来讲讲如何透过 VSCode 快速上传图片到 imgur 吧! imgur 前面章节「(...