代码

Question

我正在尝试在React项目中第一次使用Material-UI。我已经将AppBar放在一起调用Drawer，并从侧边栏中显示一个菜单项列表。我面临的问题是它们具有巨大的边缘顶部间距。

间距示例

Close (X)








About









Contact

我希望彼此相邻，一个接一个。

Close (X)
About 
Contact

我不确定是什么造成了额外的间距。我把一个类似的模拟放在我现在使用的设计上，间距是正常的。我已经在下面提供了完整的组件。

代码

import React, { Component } from 'react'
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import AppBar from 'material-ui/AppBar'
import Menu from 'material-ui/Menu'
import MenuItem from 'material-ui/MenuItem'
import Drawer from 'material-ui/Drawer'
import FlatButton from 'material-ui/FlatButton'

class AppBars extends Component {
    constructor(props) {
        super(props) 
            this.state = {
                open: false
            }
    }

    //toggleDrawer = () => this.setState({open: !this.state.open});

    toggleDrawer() {
        this.setState({
            open: !this.state.open,
        });
    }

    render() {
        return(
            <div>
                <AppBar
                    title="Advanced Surface Innovations"
                    onLeftIconButtonTouchTap={this.toggleDrawer.bind(this)} 
                />
                <Drawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)}>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}>
                    CLOSE ( X )
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to="/"> 
                        <FlatButton label="Home" primary={true} />
                    </Link>
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to="/About"> 
                        <FlatButton label="About" primary={true} />
                    </Link>
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to ="/Contact"> 
                        <FlatButton label="Contact" primary={true} />
                    </Link>
                    </MenuItem>
                </Drawer>
            </div>
        )
    }
}

class NavBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nav: ''
        }
    }

    handleScroll(event) {
        console.log('handleScroll invoked');
    }

    componentDidMount() {
        console.log('componentDidMount invoked');
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount invoked');
        window.removeEventListener('scroll', this.handleScroll);
    }

    render() {
        return (
            <div>
                 <AppBars />
            </div>
        )
    }
}

export default NavBar;

Answer 1

我有一些问题，想知道如何用MenuIcon完成一个密集的MenuItem列表。看看MenuItem来源透露我可以使用'lineHeight'影响间距。但是'minHeight'确定的间距有一个最小限制。因此，通过将minHeight设置为小于或等于所需的lineHeight，外观将根据我的需要进行调整。

const denseStyle = {
  minHeight:"10px",
  lineHeight: "25px",      // Smaller: Height of menu item row
  fontSize: "12px",        // Smaller font
  // color:"#0000ff"
};

因此，对于每个菜单项都有样式：

<MenuItem style={denseStyle} onClick={ .......

同样在我的情况下，IconMenu的三点图标仅在我的略高度缩减表列表中部分可见，

<TableRow style={{height:"20px"}}> ......

但使用负上边距显示：

<IconMenu style={{ marginTop: "-12px" }} .......

Answer 2

您可能希望将(let [handle (fn handle [[v & more :as vs] i] (when (seq vs) (let [[ii res] (cond (case-1? v) [i (handle-case-1 v)] (case-2? v) [i (handle-case-2 v)] (special-case? v) [(inc i) (handle-special i v)])] (cons res (lazy-seq (handle more ii))))))] (lazy-seq (handle values 0)))封装在MenuItem块中：

Menu

这也使您不必在每个项目上重复<Drawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)}> <Menu onItemTouchTap={this.toggleDrawer.bind(this)}> <MenuItem > CLOSE ( X ) </MenuItem> … </Menu> </Drawer>代码。

此外，我还将路线链接用作onTouchTap的道具，而不是儿童。这样整个项目都是可点击的（否则它只是链接文本），你不需要将它设置为按钮样式：

MenuItem

如何更改React Material-ui Drawer菜单项间距？

代码

2 个答案: