使用materialize css创建警报

时间：2016-07-02 03:45:34

标签： materialize

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

9 个答案:

答案 0 :(得分：9)

Materialisecss警告框 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() {
});
});

答案 1 :(得分：2)

不幸的是，实体化并不像引导程序那样提供警报。 您可以改为使用card-panel类：

http://materializecss.com/color.html

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

答案 2 :(得分：1)

cmap = clr.LinearSegmentedColormap.from_list('custom blue', 
                                             [(0,    '#ffff00'),
                                              (0.25, '#002266'),
                                              (1,    '#002266')], N=256)

参见 DEMO 此处：http://codepen.io/ihemant360/pen/pbPyJb

答案 3 :(得分：1)

这是一个非常晚的答案，但你可以使用modal类来做这些事情。

示例：

＆＃13;
＆＃13; 
$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
  });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Alert</h4>
      <p>You can use this as a alert!</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

参考： http://materializecss.com/modals.html#！

答案 4 :(得分：1)

您可以使用Matdialog.js创建不同类型的对话框。

在 - MatDialog.js website

查看

答案 5 :(得分：1)

安装Toastr

avLinks = ActiveWorkbook.LinkSources(XlLink.xlExcelLinks) If IsEmpty(avLinks) Then GetLinkStatus1 = "No links in workbook." Exit Sub End If For nIndex = 1 To UBound(avLinks) sLink = avLinks(nIndex) sLink = Right(sLink, Len(sLink) - InStrRev(sLink, "\")) nStatus = ActiveWorkbook.LinkInfo(sLink, xlLinkInfoStatus) Select Case nStatus Case xlLinkStatusCopiedValues ' Copied Values = 10 sResult = "Copied values" Case xlLinkStatusIndeterminate ' Unable to determine status = 5 sResult = "Indeterminate" Case xlLinkStatusInvalidName ' Invalid Name = 7 sResult = "Invalid name" Case xlLinkStatusMissingFile ' File Missing = 1 sResult = "Missing file" Case xlLinkStatusMissingSheet ' Sheet Missing = 2 sResult = "Missing sheet" Case xlLinkStatusNotStarted ' Not Started = 6 sResult = "Not started" Case xlLinkStatusOK ' No Errors = 0 sResult = "OK" Case xlLinkStatusOld ' Status may be out of date = 3 sResult = "Old" Case xlLinkStatusSourceNotCalculated ' Not yet calculated = 4 sResult = "Source not calculated" Case xlLinkStatusSourceNotOpen ' Not open = 8 sResult = "Source not open" Case xlLinkStatusSourceOpen ' Source document is open = 9 sResult = "Source open" Case Else sResult = "Unknown status code" End Select If nStatus <> 0 And nStatus <> 3 Then ' Checking for Case No Errors and Status may be out of date ActiveSheet.Range("D1") = nStatus ' To check error MsgBox avLinks(nIndex) & " - the link is broken. Choose new destiation" cf: f = Application.GetOpenFilename() If f <> "" Then ' Updating the "LINK" n = ActiveSheet.Cells(Rows.Count, 21).End(xlUp).Row For Each lnk In ActiveSheet.Range("U9:U" & n).Hyperlinks GetAddress = lnk.Address GetAddress = Right(GetAddress, Len(GetAddress) - InStrRev(GetAddress, "\")) If InStr(avLinks(nIndex), GetAddress) <> 0 Then ActiveSheet.Hyperlinks.Add Anchor:=ActiveSheet.Cells(lnk.Range.Row, 21), Address:=f, TextToDisplay:="Link" End If Next ActiveWorkbook.ChangeLink avLinks(nIndex), f, xlLinkTypeExcelLinks Else GoTo cf End If End If Next End Sub

需要文件

  • bower install toastr
  • /bower_components/toastr.css

初始化toastr

/bower_components/toastr.js

使用

  • 成功：toastr.options = { "closeButton": true, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-bottom-left", "preventDuplicates": true, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "3000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }
  • 错误：toastr.success('success');
  • 信息：toastr.error('fail');

信用

答案 6 :(得分：1)

由于尚无答案，因此我做了一些可能对您有所帮助的事情。 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>

希望有帮助！

答案 7 :(得分：0)

我通过使用筹码（https://materializecss.com/chips.html）和格式化CSS样式来解决此问题来解决此问题。

https://codepen.io/krazer_spa/pen/VRmxzy 

    <div class="container">
        <div class="flash_message">
            <div class="chip chip_message_info">
                This is an info message
                <i class="close material-icons">close</i>
            </div>
            <div class="chip chip_message_warning">
                This is a warning message
                <i class="close material-icons">close</i>
            </div>
            <div class="chip chip_message_alert">
                This is an alert message
                <i class="close material-icons">close</i>
            </div>
        </div>
    </div>

    <style>

    .flash_message {
        position: fixed;
        top: 70px;
        z-index: 99999;
        min-width: 80%;
    }

    .chip_message_info,
    .chip_message_warning,
    .chip_message_alert {
        text-align: center;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 20px !important;
        min-width: 80%;
        min-height: 50px;
    }

    .chip_message_info {
        background-color: #bbdefb !important;
    }

    .chip_message_warning {
        background-color: #ffcc80 !important;
    }

    .chip_message_alert {
        background-color: #ef9a9a !important;
    }

    </style>

答案 8 :(得分：0)

ReactJS +实现

Alert.js 

import React, { useState } from "react";

const Alert = ({ type, children }) => {
  const [isVisible, setIsVisible] = useState(true);

  // set alert color based on type
  let color;
  switch (type) {
    case "danger":
      color = "red lighten-2";
      break;
    case "success":
      color = "green lighten-2";
      break;
    case "info":
      color = "blue lighten-2";
      break;
    case "warning":
      color = "yellow lighten-2";
      break;
    default:
      color = "white lighten-2";
      break;
  }
  return (
    <>
      {isVisible && (
        <div className="row mv--small" id="alert-box">
          <div className="col s12 m12">
            <div className={`card m--none z-depth-0 ${color}`}>
              <div className="card-content black-text">{children}</div>
              <i
                className="material-icons icon_style"
                id="alert_close"
                aria-hidden="true"
                onClick={() => setIsVisible(false)}
              >
                close
              </i>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Alert;

然后您可以像这样使用它：

<Alert type="info">
test
</Alert>

它看起来像这样：

enter image description here

相关问题
最新问题