【问题标题】:Adding vertical divider to material-ui AppBar component为material-ui AppBar组件添加垂直分隔线
【发布时间】:2018-01-14 07:38:10
【问题描述】:

我们怎样才能像muicss's Left/Right divider component一样为AppBar设置垂直分隔线?

仅仅用height: 100% 插入div 元素是行不通的。

<AppBar position="static" color="default">
  <Toolbar>
    <Typography type="title" color="inherit">
      Title
    </Typography>
    <div style={{
      border: 'solid #ff0000',
      height: '100%'
      }}>
    </div>
    <Typography type="title" color="inherit">
      Title 2
    </Typography> 
  </Toolbar>
</AppBar>

这是实时示例代码。 https://codesandbox.io/s/54070o6v2x

谢谢。

我的环境

| Tech         | Version |
|--------------|---------|
| Material-UI  | next    |
| React        | 16.2.0  |
| Browser      | Chrome 63.0.3239.84 |

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    您可以使用右边框来添加垂直分隔线。 使用 em 作为边框大小和填充大小,以便您的元素具有响应性。 可以看到结果here

    <Toolbar>
      <Typography
        type="title"
        color="inherit"
        style={{ borderRight: '0.1em solid black', padding: '0.5em' }}
      >
        Title
      </Typography>
    
      <Typography type="title" color="inherit" style={{ padding: '0.5em' }}>
        Title 2
      </Typography>
    </Toolbar>

    【讨论】:

      【解决方案2】:

      这也可以用于垂直菜单栏分隔符:

      <Divider orientation="vertical" flexItem />
      

      请看这里:https://material-ui.com/components/dividers/

      【讨论】:

      • 如何增加分隔线和菜单项之间的间距?
      猜你喜欢
      • 1970-01-01
      • 2021-04-30
      • 1970-01-01
      • 2019-10-24
      • 1970-01-01
      • 1970-01-01
      • 2022-01-23
      • 2020-06-06
      • 1970-01-01
      相关资源
      最近更新 更多