Question

使用material-ui和react / jsx，我有一个AppBar。我想在其上添加带有徽章（编号）的通知菜单图标，即显示新通知的数量。

问题是徽章显示不正确。也就是说，有着奇怪的风格和外观。

以下是我已经尝试过的内容

<AppBar>
    <IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
              targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
              iconButtonElement={
                  <FlatButton label={<Badge badgeContent={5} />} icon={<NotificationsIcon />} />
              }
    />
</AppBar>

这样，徽章将无法与铃声（通知）图标正确对齐。

我也试过让IconMenu iconElementRight属性的AppBar's部分无效。

任何帮助？

Answer 1

你是对的 - 似乎确实需要对正确的嵌套顺序进行一些试验，即使这样你也要调整一下这种风格。但是，这是一个示例webpackbin，我认为看起来不错，而不是hacky：http://www.webpackbin.com/EJqz0NVzM

<AppBar>
  <IconMenu
    iconButtonElement={
      <IconButton style={{ padding: 0 }}>
        <Badge
          badgeStyle={{ top: 12, right: 12, backgroundColor: colors.yellow800 }}
          badgeContent={5}
          secondary={true}
          >
          <NotificationIcon color={muiTheme.appBar.textColor} />
        </Badge>
      </IconButton>
    }
    >
    <MenuItem primaryText="View Notifications" />
    <MenuItem primaryText="Dismiss All" />
  </IconMenu>
</AppBar>

正确嵌套组件后，最后一位将IconButton上的填充设置为零。执行此操作后，它将根据材料-ui文档按预期显示。

在这种配置中，我认为徽章悬浮在离通知图标太远的地方。所以，我还添加了一个自定义＆＃34; badgeStyle＆＃34;向内轻推徽章，稍微叠加在通知图标的顶部。我也在徽章上放了一个自定义的黄色，只是为了说明你可以进一步自定义徽章的外观（可以更改borderRadius，boxShadow，fontSize等）

希望有所帮助！

Material-UI / React：如何正确地将带Badge的通知按钮添加到AppBar？

1 个答案: