보안 전공생의 공부

Materialize(1) - Button, Table, Card, Navbar 본문

WEB/Vue

Materialize(1) - Button, Table, Card, Navbar

수잉 2021. 5. 17. 21:21

●Button

1) Raised Button

- 기본 버튼

- 클릭했을 때 물결 효과

- 버튼색 -> waves-color 형태로 정의해서 사용

<a class="btn waves-effect waves-light">button</a>

2) Floating Button

- 원형 모양 버튼

<a class="btn-floating waves-effect waves-light red">
<i class="material-icons">add</i></a>

3) Flat Button

- card, modal 내에서 사용하는 버튼

<a class="btn-flat waves-effect waves-teal">button</a>

 

 

 

<예제>

index.html

<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <a class="btn waves-effect waves-red blue" @click="showMessage($event)">wireless</a>
            <a class="btn-flat waves-effect waves-teal" @click="showMessage($event)">
                <i class="material-icons left">cloud</i>cloud</a>
            <a class="btn-floating waves-effect waves-yellow" @click="showMessage($event)">
                <i class="material-icons right">wifi</i>wifi</a>

        </div>
    </div>
</div>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
  
</body>
</html>

app.js

new Vue({
    el:'#app',
    methods:{
        showMessage($event){
            ($event.target.children.length == 2) ?
            alert($event.target.children[0].innerText) :
            alert($event.target.innerText);
        }
    }
})

 

조건부 3항 연산자 이용 : 입력 파라미터로부터 받은 $event 대상이 자식 엘리먼트를 2개 가지고 있는지 체크

-> 맞다면, 첫번째 자녀 노드의 innerText 속성 이용해 해당 텍스트를 알림창으로 띄움

-> 아니라면, innerText 속성을 이용해 대상의 텍스트를 알림창으로 띄움

실행결과
버튼을 클릭하였을 때 색깔변화, 알림창

 

 

●Table

- 여러 데이터를 페이지에 나타내는 데 유용하게 사용할 수 있는 컴포턴트

- 스마트폰 환경에서는 자동으로 위치 조정됨

 

<기본적인 테이블 구조>

<thead> 블록 : <th>엘리먼트를 이용해 테이블 헤더 정의

<tbody>블록 : <td> 엘리먼트를 이용해 실제 데이터 정의

<tr> - 테이블의 한 행을 나타내는 데 사용

 

<예제>

index.html

<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container">
        <table>
            <thead class="blue white-text">
                <tr><th>주문번호</th><th>음료</th><th>수량</th><th>가격</th></tr>
            </thead>
            <tbody>
                <tr v-for="order in orders" :key="order.order_num">
                    <td>{{order.order_num}}</td>
                    <td>{{order.item}}</td>
                    <td>{{order.quantity}}</td>
                    <td>{{order.price}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
  
</body>
</html>

app.js

new Vue({
    el:'#app',
    data: {
        orders: [
            {order_num:'T1',item:'아메리카노', quantity:1, price:2500},
            {order_num:'T2',item:'카푸치노', quantity:2, price:3500},
            {order_num:'T3',item:'민트초코라떼', quantity:1, price:4500},
            {order_num:'T4',item:'아포카토', quantity:3, price:4000}
        ]
    }
})

실행 결과

 

●Card

- 다양한 컨텐트를 나타내고자 할 때 유용한 컴포넌트

- 보통 이미지를 포함한 형태로 사용

 

<기본 구조>

실행결과

 

<예제>

<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container">
        
<div class="row">
    <div class="col s12 m6">
        <div class="card black darken-1">
            <div class="card-image">
                <img src="images/madmonster.jpg">
                <span class="card-title dense">매드 몬스터</span>
            </div>
            <div class="card-content white-text">
                <p>Hot! Hot! 데뷔 이후 3연속 전세계 전플렛폼 디지털 싱글 매진을 기록한 Mad Monster!
                    전세계 최초 디지털 싱글 리셀가가 책정되었던 환상의 그룹 Mad Monster!
                    그들의 4번째 Digital Single [내루돌프 / Mine Rudolph] 대발매!
                    과연 이번에도 전세계 매진을 이룰 수 있을것인지 귀추가 주목!
                    봄에 나와서 크리스마스까지 전세계 60억 포켓몬스터들과 함께 할,
                    그리고 포브스가 선정한 천재 작곡가 범도와의 환상적인 호흡으로 완성된 2021 가장 완벽한 싱글!
                </p>
            </div>
            <div class="card-action">
                <a href="https://youtu.be/-1CxQjBnqP0">뮤직비디오 바로가기</a>
            </div>
        </div>
    </div>
    <div class="col s12 m5">
        <div class="card gray">
            <div class="card-image">
                <img src="images/minerudolph.jpg">
            </div>
            <div class="card-content black-text">
                <span class="card-title dense">내 루돌프</span>
                <p>
                    이 어둠을 빨간 코로 비춰줄래
                    어디서부터 잘못된 건지
                    온 세상이 all black black black
                    지금 너와 난
                    다 깨져버린 1000피스 lego block block block
                    차라리 더 어두워지면 좋겠어
                    이 세상에 스위치가 있다면
                    꺼버릴거야
                    그리고 널 향한 노랠 부르겠어    
                    이 노랠 듣는다면 내게로 와
                    이 어둠을 빨간 코로 비춰줄래
                    코코코 red 코
                    코 red 코
                    switch on 내 루돌프 </p>
            </div>
            <div class="card-action">
                <a href="https://youtu.be/qPLsismWsMg">무대 영상이 궁금하다면 ..</a>
            </div>
        </div>
    </div>
</div>
    </div>
</div>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
  
</body>
</html>

실행결과

 

●Navbor

- 웹사이트 탐색에 사용

- class="container"가 정의된 div 태그 내에서 사용할 것을 권장

<기본 구성>

기본구성

'WEB > Vue' 카테고리의 다른 글

Materialize(2) - Navbar, Slider  (0) 2021.05.24
Materialize 설치, 사용 방법  (0) 2021.05.03
슬롯(slot)  (0) 2021.03.15
이벤트 버스 - 관계 없는 컴포넌트 간 통신  (0) 2021.02.27
컴포넌트 정의 및 등록 / 컴포넌트 간의 통신  (0) 2021.01.27
'WEB/Vue' Related Articles more
Comments