首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用materialize css创建警报

使用materialize css创建警报
EN

Stack Overflow用户
提问于 2016-07-02 11:45:34
回答 5查看 30.4K关注 0票数 6

我想使用materialize css创建一个警报。我不知道是怎么回事。请帮帮忙。我只想创建一个简单的html,它将显示一个警告错误,而不使用javascript。谢谢。

EN

回答 5

Stack Overflow用户

发布于 2018-07-24 01:02:04

因为这还没有答案,所以我做了一些可能对你有帮助的东西。Here is the repo

这是一个预告片。

html {
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
    position: relative;
    min-width: 150px;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.1s linear;
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.materialert .material-icons{
    margin-right: 10px;
}
.materialert .close-alert{
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    background: 0 0;
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    filter: alpha(opacity=40);
    margin-bottom: -5px;
    position: absolute;
    top: 16px;
    right: 5px;
}
.materialert.info{
    background-color: #039be5;
    color: #fff;
}
.materialert.success{
    background-color: #43a047;
    color: #fff;
}
.materialert.error{
    background-color: #c62828;
    color: #fff;
}
.materialert.danger{
    background-color: #c62828;
    color: #fff;
}
.materialert.warning{
    background-color: #fbc02d;
    color: #fff;
}
<html lang="es-MX">
<head>
    <meta charset="UTF-8">
    <link href="css/materialert.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
	<body>
		<div class="materialert">
		    <i class="material-icons">check_circle</i> <span>Bienvenido, Linebeck</span>
		    <button type="button" class="close-alert">×</button>
		</div>
		<div class="materialert info">
		    <div class="material-icons">info_outline</div>
		    Oh! What a beautiful alert :)
		</div>
		<div class="materialert error">
		    <div class="material-icons">error_outline</div>
		    Oh! What a beautiful alert :)
		</div>
		<div class="materialert success">
		    <div class="material-icons">check</div>
		    Oh! What a beautiful alert :)
		</div>
		<div class="materialert warning">
		    <div class="material-icons">warning</div>
		    Oh! What a beautiful alert :)
		</div>
	</body>
</html>

希望它能帮上忙!

票数 12
EN

Stack Overflow用户

发布于 2017-02-15 14:51:30

Materializecss警告框 Codepen link

<div class="row" id="alert_box">
 <div class="col s12 m12">
  <div class="card red darken-1">
   <div class="row">
    <div class="col s12 m10">
      <div class="card-content white-text">
        <p>1. Username cant be empty</p>
        <p>2. Password cant be empty</p>
        <p>3. Address cant be empty</p>
        <p>4. Name cant be empty</p>
    </div>
  </div>
  <div class="col s12 m2">
    <i class="fa fa-times icon_style"                             id="alert_close" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  </div>
  </div>

.icon_style{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: white;
cursor:pointer; 
}

$('#alert_close').click(function(){
$( "#alert_box" ).fadeOut( "slow", function() {
});
});
票数 10
EN

Stack Overflow用户

发布于 2016-09-15 22:57:19

不幸的是,materialize不像bootstrap那样提供警报。您可以改用card-panel类:

http://materializecss.com/color.html

但是你不会有关闭按钮来隐藏它。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38156282

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档