EAIC界面库
消息由三部分组成
  • 消息容器
  • 可选的消息标题及删除按钮
  • 消息体

消息标题

消息内容

生活不止眼前的苟且,还有诗和远方

                <article class="message">
                    <div class="message-header">
                        <p>消息标题</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        消息内容
                        <p>生活不止眼前的苟且,还有诗和远方</p>
                    </div>
                </article>
            
颜色
消息可以有不同的颜色

Dark

生活不止眼前的苟且,还有诗和远方

Primary

生活不止眼前的苟且,还有诗和远方

Info

生活不止眼前的苟且,还有诗和远方

Success

生活不止眼前的苟且,还有诗和远方

Warning

生活不止眼前的苟且,还有诗和远方

Danger

生活不止眼前的苟且,还有诗和远方
                <article class="message is-dark">
                    <div class="message-header">
                        <p>Dark</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-primary">
                    <div class="message-header">
                        <p>Primary</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-link">
                    <div class="message-header">
                        <p>Link</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-info">
                    <div class="message-header">
                        <p>Info</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-success">
                    <div class="message-header">
                        <p>Success</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-warning">
                    <div class="message-header">
                        <p>Warning</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-danger">
                    <div class="message-header">
                        <p>Danger</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>
            
只有消息体
消息框可以只有消息体
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
生活不止眼前的苟且,还有诗和远方
                <article class="message">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>
                <article class="message is-dark">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-primary">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-link">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-info">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-success">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-warning">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>

                <article class="message is-danger">
                    <div class="message-body">
                        生活不止眼前的苟且,还有诗和远方
                    </div>
                </article>