如何解决如何在TeachingBubble FluentUI 组件中居中按钮?
我正在使用 Fluent UI 的 TeachingBubble 组件。我希望它有一个按钮,应该居中。那怎么办呢?我无法从右下角移动它。
当前代码:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",onClick: () => alert("Primary button pressed!"),}}
>
This is some content.
</TeachingBubble>
输出:
应该在这段代码中添加什么,以便主按钮居中(在我标记的红色十字处)?
解决方法
Button 在TeachingBubble 的footer 部分,所以footer 的样式应该改变:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",onClick: () => alert("Primary button pressed!"),}}
styles={{
footer: {
display: "flex",justifyContent: "center",},}}
>
Some text
</TeachingBubble>
呈现为:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。