希望Notification 在省略description情况下，message居中

[yangbin1994]

What problem does this feature solve?

Message 借用 Notification 的展现形式，但是内容上没那么需要显示的详情信息

What does the proposed API look like?

notification[status].({message, description: false)

[afc163]

notification.info({
  message: <div style={{ textAlign: 'center' }}>message</div>,
})

[yangbin1994]

实际上我想说的是垂直居中~

[afc163]

这个之前考虑过，但是多行标题的情况不好适应。

[yangbin1994]

我觉得可以description使用boolean类型来针对一下~

[afc163]

都是没有 description 的情况，标题对于是否换行的样式不一样，这一点比较麻烦。

[NE-SmallTown]

Sorry for that I am not good at CSS,so maybe I can't consider it too depth,probably below is not the best solution.And if I understand correct,if you just want one line and multiple lines can in the middle and just use one css class.Yes,you can do that. .e.g. :

<div class="ant-notification-notice-with-icon" style="position: relative;">
  <span class="ant-notification-notice-icon" style="top: 50%;position: absolute;transform: translateY(-50%);">
    <i class="anticon anticon-smile-circle" style="color: rgb(16, 142, 233);"></i>
  </span>
  
  <div style="margin-left: 48px;">
       // you can change below to make it one line or multiple lines
  	<div class="ant-notification-notice-message">Notification Title</div>
  	<div class="ant-notification-notice-description">
      This is the content of the notification. This is the content of the notification. This is the content of the notification.
  	</div>
  </div>
</div>

[yangbin1994]

target => icon, thank you for your train of thought and the CSS is very awesome, 3q

[afc163]

Icon should not be vertically centered, it is against our design spec.

[afc163]

Actually, notification was used to be like @NE-SmallTown described in antd@1.x

http://1x.ant.design/components/notification/

[NE-SmallTown]

Ye,sorry for forgoting to say,that's why I don't suggest him to send a pr because I am not sure it is what antd really needs.And I make it by set style rather than class is because hope that if it is not a good choice for antd,you can just override the style to realize your goal.

[afc163]

Found a very tricky solution inspired by http://stackoverflow.com/a/22901203/3040605 😃

http://jsfiddle.net/jrfcjhmm/

[afc163]

Works like magic and it is a pure css workaround! 😆 😆 😆

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.