MaterializeCSS에서 FAB 버튼처럼 카드 공개 버튼을 만드는 방법은 무엇입니까?

Question

FAB 버튼과 같이 card-reveal의 가까운 기능을 만들고 싶습니다. 내가 필요로 무엇

<div class="card"> 
    <div class="card-image waves-effect waves-block waves-light"> 
     <img class="activator" src="http://materializecss.com/images/office.jpg"> 
    </div> 
    <div class="card-content"> 
     <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">&#xE5D4;</i></span> 
     <p><a href="#">This is a link</a></p> 
    </div> 
    <div class="card-reveal"> 
     <span class="card-title grey-text text-darken-4">Card Title<i  class="material-icons right">close</i></span> 
     <p>Here is some more information about this product that is only revealed once clicked on.</p> 
    </div> 
</div> 

Here is my JSFiddle

? 머티리얼 디자인 아이콘이이 예제에서 작동하지만, "닫기"버튼을 팹으로 만들어야합니다. 즉, card-reveal 콘텐츠가 아래로 스크롤되며 닫기 버튼은 card-reveal 섹션의 위치를 ​​유지하고 표시됩니다. 가능합니까?

Answer 1

카드 구성 요소의 특성상 해킹을 당하지 않고 이상한 CSS 속성을 혼합하지 않으면이 작업을 어렵게 만드는 것처럼 보입니다. 나는 여전히 기쁘게 보이는 내가 달성 할 수있는 최선은 card-reveal으로 위아래로 움직이는 FAB라고 생각합니다. 또 다른 해결책이있을 수 있지만 깨끗하지 않을 수 있습니다.

<div class="card"> 
    <div class="card-image waves-effect waves-block waves-light"> 
    <img class="activator" src="http://materializecss.com/images/office.jpg"> 
    </div> 
    <div class="card-content"> 
    <span class="card-title grey-text text-darken-4"> 
     Card Title 
    </span> 
    <a class="activator btn-floating red right"></a> 
    <p><a href="#">This is a link</a></p> 
    </div> 
    <div class="card-reveal"> 
    <span class="card-title grey-text text-darken-4"> 
     Card Title 
     <a class="card-title btn-floating red right"></a> 
    </span> 
    <p>Here is some more information about this product that is only revealed once clicked on.</p> 
    </div> 
</div>