🍭 Web 上的亚克力效果

import React from 'react';
import { AcrylicAlert } from './acrylic-ui'
export const AcrylicDemo2 = () => {
  return (
    <div>
      <Button onClick={handleClick}>打开消息条</Button>
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <AcrylicAlert onClose={handleClose} variant="filled" severity="success">
          This is a success message!
        </AcrylicAlert>
      </Snackbar>
      <AcrylicAlert variant="filled" severity="error">This is an error message!</AcrylicAlert>
      <AcrylicAlert variant="filled" severity="warning">This is a warning message!</AcrylicAlert>
      <AcrylicAlert variant="filled" severity="info">This is an information message!</AcrylicAlert>
      <AcrylicAlert variant="filled" severity="success">This is a success message!</AcrylicAlert>
    </div>
  );
}

import React from 'react';
import { AcrylicTooltip } from './acrylic-ui'
export const AcrylicDemo1 = () => {
  return (
    <AcrylicTooltip title="提示文字、提示内容、BlaBla...">
        <Button>你好，世界！</Button>
    </AcrylicTooltip>
  );
}

import React from 'react';
import { AcrylicTooltip } from './acrylic-ui'
export const AcrylicDemo1 = () => {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => setAnchorEl(null);
  const open = Boolean(anchorEl);
  return (
    <div>
      <Button onClick={handleClick}>你好，世界！</Button>
      <AcrylicPopover open={open} anchorEl={anchorEl} onClose={handleClose}>
        <div>
          <div>
            <CheckOutlinedIcon fontSize="large" />
          </div>
          <div>
            <Button fullWidth>OK</Button>
          </div>
        </div>
      </AcrylicPopover>
    </div>
  );
}

import React from 'react';
import { AcrylicMenu } from './acrylic-ui'
export const AcrylicDemo1 = () => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => setAnchorEl(null);
  return (
    <div>
      <Button onClick={handleClick}>你好，世界！</Button>
      <AcrylicMenu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </AcrylicMenu>
    </div>
  );
}

import React from 'react';
import { AcrylicDialog } from './acrylic-ui'
export const AcrylicDemo1 = () => {
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
    <div>
      <Button onClick={handleClickOpen}>你好，世界！</Button>
      <AcrylicDialog open={open} onClose={handleClose}>
        <DialogTitle>{"Use Google's location service?"}</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Let Google help apps determine location. This means sending anonymous location data to
            Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">Disagree</Button>
          <Button onClick={handleClose} color="primary" autoFocus>Agree</Button>
        </DialogActions>
      </AcrylicDialog>
    </div>
  );
}