Question

我的材质UI抽屉组件如下所示，它由List组件组成，现在，我想将页脚添加到图像的抽屉组件中。我该怎么办？

我的抽屉代码是：

import React from 'react';
import { makeStyles, fade } from '@material-ui/core/styles';
import { Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, InputBase, Paper } from '@material-ui/core';
import {
    Home as HomeIcon, People as PeopleIcon, DnsRounded as DnsRoundedIcon,
    PhotoSizeSelectActual as PermMediaOutlinedIcon, Public as PublicIcon, ExitToApp,
    SettingsEthernet as SettingsEthernetIcon, SettingsInputComponent as SettingsInputComponentIcon,
    Timer as TimerIcon, Settings as SettingsIcon, PhonelinkSetup as PhonelinkSetupIcon, Search as SearchIcon
} from '@material-ui/icons';
import clsx from 'clsx';
import Wrapper from '../../../HOC/Wrapper/Wrapper';

const sidebarWidth = 50

const useStyles = makeStyles(theme => ({
    root: {
        maxWidth: sidebarWidth
    },
    categoryHeader: {
        paddingTop: theme.spacing(2),
        paddingBottom: theme.spacing(2),
        textAlign: 'right'
    },
    categoryHeaderPrimary: {
        color: theme.palette.common.white,
    },
    item: {
        paddingTop: 1,
        paddingBottom: 1,
        color: 'rgba(255, 255, 255, 0.7) !important',
        '&:hover,&:focus': {
            backgroundColor: 'rgba(255, 255, 255, 0.08)',
        },
        textAlign: 'right'
    },
    itemCategory: {
        backgroundColor: '#232f3e',
        boxShadow: '0 -1px 0 #404854 inset',
        paddingTop: theme.spacing(2),
        paddingBottom: theme.spacing(2),
    },
    firebase: {
        fontSize: 24,
        color: theme.palette.common.white,
        justifyContent: 'center'
    },
    itemActiveItem: {
        color: '#4fc3f7',
    },
    itemPrimary: {
        fontSize: 'inherit',
    },
    itemIcon: {
        minWidth: 'auto',
        marginRight: theme.spacing(2),
    },
    divider: {
        marginTop: theme.spacing(2),
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginRight: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(1),
            width: 'auto',
        },
        display: 'flex',
        justifyContent: 'flex-end',
    },
    searchIcon: {
        width: theme.spacing(7),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',

    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 7),
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 120,
            '&:focus': {
                width: 120,
            },
        },
    },
    drawerFooter: {
        // display: 'flex',
        // flexGrow:1,
        // width: '',
        position: 'relative',
        top: 'auto',
        bottom: 0,
        // backgroundColor: '#fff !important',
        // paddingTop: '0.5rem',
        boxSizing: 'border-box'
    },
}))

const categories = [
    {
        id: 'بازدید',
        children: [
            { id: 'مکاتبات', icon: <PeopleIcon />, active: true },
            { id: 'مغایرات', icon: <DnsRoundedIcon /> },
            { id: 'تخلفات', icon: <PermMediaOutlinedIcon /> },
            { id: 'اطلاعات بازدید', icon: <PublicIcon /> },
            { id: 'چک لیست عمومی', icon: <SettingsEthernetIcon /> },
            { id: 'لیست خدمات', icon: <SettingsInputComponentIcon /> },
        ],
    },
    {
        id: 'ابزارها',
        children: [
            { id: 'مسیریابی تا دفتر', icon: <SettingsIcon /> },
            { id: 'دفاتر پیشخوان اطراف', icon: <TimerIcon /> },
            { id: 'پراکندگی دفاتر در منطقه', icon: <PhonelinkSetupIcon /> },
        ],
    },
];

const Sidebar = (props) => {
    const classes = useStyles()

    const drawer = (
        <div>
            <List disablePadding >
                <ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory)}>
                    پست و پیشخوان
                </ListItem>
                <ListItem className={clsx(classes.item, classes.itemCategory)}>
                    <ListItemIcon className={classes.itemIcon}>
                        <HomeIcon />
                    </ListItemIcon>
                    <ListItemText
                        classes={{
                            primary: classes.itemPrimary,
                        }}
                    >
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase
                                placeholder="کد دفتر..."
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                                inputProps={{ 'aria-label': 'search' }}
                            />
                        </div>
                    </ListItemText>
                </ListItem>
                {categories.map(({ id, children }) => (
                    <React.Fragment key={id}>
                        <ListItem className={classes.categoryHeader}>
                            <ListItemText
                                classes={{
                                    primary: classes.categoryHeaderPrimary,
                                }}
                            >
                                {id}
                            </ListItemText>
                        </ListItem>
                        {children.map(({ id: childId, icon, active }) => (
                            <ListItem
                                key={childId}
                                button
                                className={clsx(classes.item, active && classes.itemActiveItem)}
                            >
                                <ListItemIcon className={classes.itemIcon}>{icon}</ListItemIcon>
                                <ListItemText
                                    classes={{
                                        primary: classes.itemPrimary,
                                    }}
                                >
                                    {childId}
                                </ListItemText>
                            </ListItem>
                        ))}

                        <Divider className={classes.divider} />
                    </React.Fragment>
                ))}
            </List>
            <ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
                Footer
            </ListItem>
        </div>
    )

    return (
        <Wrapper>
            <Drawer
                className={classes.root}
                variant="permanent"
                anchor="right"
            >{drawer}</Drawer>
        </Wrapper>
    );
}

export default Sidebar;

这是该图片：

我应该如何将页脚部分粘贴到抽屉底部？我在CSS代码中将页脚的ListItem的底部设置为零，但无法正常工作！当我将页脚项目的位置更改为固定时，页脚的宽度不适合抽屉。喜欢这张图片：

Answer 1

对此有一个简单的解决方案。无需使用列表项来创建页脚，而只需使用简单的div并为其提供一个类，使其可以进入抽屉底部。

您当前的代码：

<ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
    Footer
</ListItem>

代替使用：

<div className={classes.bottomPush}>
    <Typography>Footer</Typography>
</div>

对于班级使用：

bottomPush: {
    position: "fixed",
    bottom: 0,
    textAlign: "center",
    paddingBottom: 10,
}

Answer 2

您可以使用单行 CSS 完成此操作，无需 <Box> 或 <Grid>。

将您的页脚分成一个单独的列表。无论如何，它可能是语义/概念级别的一个。
设置margin-top: "auto"

注意：为了简单起见，我内联了 CSS，但在实际应用程序中，您可能希望将其放入一个类中。

<Drawer variant="permanent">
  <List>
    <ListItem button>
      <ListItemText>1</ListItemText>
    </ListItem>
    <ListItem button>
      <ListItemText>2</ListItemText>
    </ListItem>
  </List>

  <List style={{ marginTop: `auto` }} >
    <ListItem>
      <ListItemText>Footer</ListItemText>
    </ListItem>
  </List>
</Drawer>

Answer 3

您可以将当前存在的整个抽屉内容包装在一个div中，然后将页脚放在另一个div中，然后将这两个div放在一个包装div中，然后显示包装div：flex和flex-direction：列和justify-content：

我认为这可以解决您的问题

<div class="wrapper">
  <div class="content">
     your existing code
  </div>

  <div class="footer">
    your footer
  </div>
</div>

css：

.wrapper{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

如何在材料ui抽屉组件中添加页脚？

3 个答案: