MaterializeCSS - 如何向 card/card-panel 添加关闭按钮？

Question

各位！

我想问一下如何在 MaterializeCSS 中创建一个可用于卡片或卡片面板的关闭按钮 (x)。 Bootstrap 有一个警报组件，不幸的是，MaterializeCSS 没有。

有办法吗？

我的提醒（卡片面板） IMAGE 1: My Alert (Card-panel)

这就是我想做的。（我在某处看到了这个，但代码不是免费的）。

IMAGE 2: What I would like to do

非常感谢评论、建议和帮助。

注意：我不能post图像，因为我没有至少 10 个声誉。谢谢。

Answer 1

我已经解决了我自己的问题。

我会将其分享给正在寻找相同问题答案的其他人。

Alert

我没有使用 card/card-panel，而是使用了 'Chip'。

这是代码。

<div class="row">
    <div class="col s12 m10 l10 offset-m1 offset-l1">
        <div class="chip green" style="padding: 10px 10px 10px 10px; width: 100%; height: 50px;">
            <i class=" close material-icons right white-text">close</i>
            <i class="material-icons white-text left" style="padding-top: 2px;">check_circle</i>
            <h6 class="white-text"><b>SUCCESS!</b> Your password has been changed.<h6>
        </div>
    </div>
</div>

可以添加border-radius: 0;如果你想删除圆边。

MaterializeCSS - 如何向 card/card-panel 添加关闭按钮？

MaterializeCSS - How to add a close button to a card/card-panel?

html

materialize

twitter-bootstrap-3