Material UI in React [Day 24] Utils 工具组

Click away listener

用於检测点击事件是否发生在元素之外,它可以监听文档中某处发生的点击事件。
和之前部分的组件有 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 是一样的,这样类似的应用其实在之前介绍过的组件中也有,详细的内容可以至官方文件中查询。

CSS Baseline

这个部分之前也有提及了,就是在做 normailize.css 所做的事情。

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* 其他内容的组件 */}
    </React.Fragment>
  );
}

详细设定的内容可以到文件中查看。

Modal

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 是差不多的,详细的内容可以到官方文件查看。

Popover

这个组件和之前介绍的 tooltips 是一样的,他的文件中有各式 Anchor 属性情况下的范例可以参考,连结在这,在这个章节也解释了前面组件所用的属性是如何作用的。

Popper

Popper 可用於在另一个内容之上显示一些内容。它是 react-popper 的替代品。
和上述 Popover 的情况一样也解释了前面组件所用的属性是如何作用的,其他使用上的细节可以至官方文件

Portal

这个部分说明了 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 Autosize

这个部分真的没什麽需要特别讲解的,跟原生的 Textarea tag 是一样的,连结在此

Transitions

这边提供了一些过场动画的用法,当然也可以透过 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>
  );
}

其他个别的效果可以至官方文件中查看,会比较清楚他们各自的效果。

useMediaQuery

这是 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>;
}

使用 Material-UI 的断点辅助功能

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

AI ninja project [day 5] AI RPA系统--表单篇

再来是办公室表单的处理, 假设有些表单只有图像或是只有纸本, 想要汇入成Excel档案时, 我们就可...

见习村27 - First non-repeating character

27 - First non-repeating character Don't say so mu...

【Day 01】从零开始的 Line Chatbot 系统-序章

暑假後期,指导教授给了第三届 Line Chatbot 设计大赛的资讯。 虽然比赛内容主要放在设计、...

React和DOM的那些事-节点删除算法

点击进入React源码调试仓库。 本篇是详细解读React DOM操作的第壹篇文章,文章所讲的内容发...

(29) 试着学 Hexo - 奇淫技巧 - 快速上传你的图片到 imgur

前言 接下来来讲讲如何透过 VSCode 快速上传图片到 imgur 吧! imgur 前面章节「(...