动态高度模态

Question

告诉我如何使模态的高度动态化。也就是说，最大高度为 85%（如我的代码所示），但如果下拉列表已关闭（如初始位置）或仅部分打开，则模态的高度将调整为合适的尺寸。

        const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 300,
    bgcolor: 'background.paper',
    border: '1px solid #000',
    boxShadow: 24,
    p: 4,
    overflow: 'auto',

};

export default function ModalWindow() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Button onClick={handleOpen}><FilterAltIcon/></Button>
            <Modal
                open={open}
                onClose={handleClose}
                disableScrollLock= {true}
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Filters
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterMethod></FilterMethod>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterStatusCode></FilterStatusCode>
                    </Typography>

                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

Answer 1

您要让模态框占据视口高度的 85%。所以它会一直占据那 85%，因为你告诉它这样做。

从您的样式中删除 85% 的高度。并编写一个条件，当你的过滤器打开时，将高度从自动更改为 85%。

       const style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 300,
        bgcolor: 'background.paper',
        border: '1px solid #000',
        boxShadow: 24,
        p: 4,
        overflow: 'auto'
       };
    
    export default function ModalWindow() {
        const [open, setOpen] = React.useState(false);
        const [isFilterMethodExpanded, setIsFilterMethodExpanded] = React.useState(false);
        const [isFilterStatusCodeExpanded, setIsFilterStatusCodeExpanded] = React.useState(false);
        const [isFilterLinkExpanded, setIsFilterLinkExpanded] = React.useState(false);
        const [isFilterDateExpanded, setIsFilterDateExpanded] = React.useState(false);
        const handleOpen = () => setOpen(true);
        const handleClose = () => setOpen(false);
    
        return (
            <div>
                <Button onClick={handleOpen}><FilterAltIcon/></Button>
                <Modal
                    open={open}
                    onClose={handleClose}
                    disableScrollLock= {true}
                >
                    <Box sx={style} style={{ height: (isFilterMethodExpanded && isFilterStatusCodeExpanded && isFilterLinkExpanded && isFilterDateExpanded) ? '85%' : 'auto' }}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Filters
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterMethod isExpanded={isFilterMethodExpanded} setIsExpanded={setIsFilterMethodExpanded}></FilterMethod>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterStatusCode isExpanded={isFilterStatusCodeExpanded} setIsExpanded={setIsFilterStatusCodeExpanded}></FilterStatusCode>
                    </Typography>

                    <Typography sx={{mt: 1}}>
                        <FilterLink isExpanded={isFilterLinkExpanded} setIsExpanded={setIsFilterLinkExpanded}></FilterLink>
                    </Typography>
                    <Typography sx={{mt: 1}}>
                        <FilterDate isExpanded={isFilterDateExpanded} setIsExpanded={setIsFilterDateExpanded}></FilterDate>
                    </Typography>
                    </Typography>
                    </Box>
                </Modal>
            </div>
        );
    }


    export default function FilterStatusCode({isExpanded, setIsExpanded}) {
      const [values, setValues] = React.useState([]);
      const toggleExpand = () => {
          setIsExpanded(!isExpanded);
      };
    
      return <>
        <div className="item-toggle-statuscode" onClick={toggleExpand}>
            <h6>Status Code</h6>
            { isExpanded ? <span class="material-icons">
                arrow_drop_up
              </span> :  <span class="material-icons">
                arrow_drop_down
              </span> }
              
        </div>
        { isExpanded &&
          <div>
            <TagInput
              inputProps={{ placeholder: 'Add status code...' }}
              values={values}
              onChange={(values) => {
              setValues(values)}}>
            </TagInput>
          </div>
        }
    </>;
    }

      export default function FilterStatusCode({isExpanded, setIsExpanded}) {
      const [values, setValues] = React.useState([]);
    
      const toggleExpand = () => {
          setIsExpanded(!isExpanded);
      };
    
      return <>
        <div className="item-toggle-statuscode" onClick={toggleExpand}>
            <h6>Status Code</h6>
            { isExpanded ? <span class="material-icons">
                arrow_drop_up
              </span> :  <span class="material-icons">
                arrow_drop_down
              </span> }
              
        </div>
        { isExpanded &&
          <div>
            <TagInput
              inputProps={{ placeholder: 'Add status code...' }}
              values={values}
              onChange={(values) => {
              setValues(values)}}>
            </TagInput>
          </div>
        }
    </>;
    }

        export default function FilterLink({isExpanded, setIsExpanded}) {
      const [values, setValues] = React.useState([]);
    
      return (
        <div>
          <div className="item-toggle-link" onClick={() => setIsExpanded(!isExpanded)}>
            <h6>Link</h6>
            {isExpanded
              ? <span class="material-icons"> arrow_drop_up </span>
              : <span class="material-icons"> arrow_drop_down </span>
            }
          </div>
          {isExpanded && <TagsInput tags={values} setTags={setValues} inputPlaceholder="Enter a link"/>}
        </div>
      );
    }

        export default function FilterDate({isExpanded, setIsExpanded}) {
      const [values, setValues] = React.useState([]);
    
      return (
        <div>
          Date component
        </div>
      );
    }

动态高度模态

Dynamic height modal

javascript

reactjs