代码之家  ›  专栏  ›  技术社区  ›  Aldo

在哪里可以更改react admin标题中的配置文件图片?

  •  0
  • Aldo  · 技术社区  · 6 年前

    Profile image

    有什么道具要设置,如自定义登录或自定义注销按钮?

    谢谢。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Gildas Garcia    6 年前

    目前,这个过程涉及大量代码,因为您必须重写 UserMenu 完全。要使用它,还必须实现一个自定义 Layout 有一个习惯 AppBar . 当 https://github.com/marmelab/react-admin/pull/2391 将被合并。

    // in src/MyUserMenu.js
    import React, { Children, cloneElement } from 'react';
    import PropTypes from 'prop-types';
    import Tooltip from '@material-ui/core/Tooltip';
    import IconButton from '@material-ui/core/IconButton';
    import Menu from '@material-ui/core/Menu';
    import AccountCircle from '@material-ui/icons/AccountCircle';
    import { translate } from 'ra-core';
    
    class UserMenu extends React.Component {
        static propTypes = {
            children: PropTypes.node,
            label: PropTypes.string.isRequired,
            logout: PropTypes.node,
            translate: PropTypes.func.isRequired,
        };
    
        static defaultProps = {
            label: 'ra.auth.user_menu',
        };
    
        state = {
            auth: true,
            anchorEl: null,
        };
    
        handleChange = (event, checked) => {
            this.setState({ auth: checked });
        };
    
        handleMenu = event => {
            this.setState({ anchorEl: event.currentTarget });
        };
    
        handleClose = () => {
            this.setState({ anchorEl: null });
        };
    
        render() {
            const { children, label, logout, translate } = this.props;
            if (!logout && !children) return null;
            const { anchorEl } = this.state;
            const open = Boolean(anchorEl);
    
            return (
                <div>
                    <Tooltip title={label && translate(label, { _: label })}>
                        <IconButton
                            arial-label={label && translate(label, { _: label })}
                            aria-owns={open ? 'menu-appbar' : null}
                            aria-haspopup="true"
                            onClick={this.handleMenu}
                            color="inherit"
                        >
                            {/* Replace this icon with whatever you want, a user avatar or another icon */}
                            <AccountCircle />
                        </IconButton>
                    </Tooltip>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        open={open}
                        onClose={this.handleClose}
                    >
                        {Children.map(children, menuItem =>
                            cloneElement(menuItem, { onClick: this.handleClose })
                        )}
                        {logout}
                    </Menu>
                </div>
            );
        }
    }
    
    export default translate(UserMenu);
    
    // in src/MyAppBar.js
    import { AppBar } from 'react-admin';
    import MyUserMenu from './MyUserMenu';
    
    const MyAppBar = (props) => <AppBar {...props} userMenu={MyUserMenu} />;
    
    // in src/MyLayout.js
    import { Layout } from 'react-admin';
    import MyAppBar from './MyAppBar';
    
    const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;
    
    export default MyLayout;
    

    文档: https://marmelab.com/react-admin/Theming.html#using-a-custom-appbar