2016-10-16 5 views
4

materializeCSSからFABを取得しようとしていますが、私が試したことはありません。 HERESに私のコード:アンバサダー2で働く固定アクションボタンを実現する方法

のindex.html:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>DevWright Education</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" 
    crossorigin="anonymous"></script> 
    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 

    <!-- Compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script> 

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 
<body style="background-color: #eceff1;"> 
    <de-root> 
    <img src="assets/images/ripple.gif" alt=""> 
    </de-root> 
</body> 
</html> 

新ポストcard.component.html:

<div class="card"> 
    <div class="card-content"> 
    <span class="card-title">Post something!</span> 
    <!-- Fixed Action Button --> 
    <div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;"> 
     <a class="btn-floating btn-large red"> 
     <i class="large material-icons">mode_edit</i> 
     </a> 
     <ul> 
     <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> 
     <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> 
     <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> 
     <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

私はangular2-マテリアライズ使ってみましたが、私は右を見つけるカントコンポーネントを使用して作業します。

答えて

1

FAB上の位置が固定されたので、私の場合、それはそう

<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px; position:static;"> 

<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;"> 

を変更、でしたが、問題を修正しました。

関連する問題