보안 전공생의 공부

Materialize(2) - Navbar, Slider 본문

WEB/Vue

Materialize(2) - Navbar, Slider

수잉 2021. 5. 24. 21:40

[[앞 게시물 이어서 materialize의 기능들에 대해 설명하는 글 ! ]]

 

● Navbar

앞에서 navbar 컴포넌트(웹사이트 탐색에 이용) 보여준 기본 구조이다.

"hide-on-med-and-down"이라는 클래스의 속성 -> 태블릿 이하의 화면 크기에서는 보이지 않도록 하라

 

스마트폰에서 navbar을 이용하려면 >> a 태그의 data-target 속성 이용해 id 속성값을 설정하고, class 속성에 "sidenav-trigger" 설정

<a href="#" data-target="nav-mobile" class="sidenav-trigger">
<ul class="sidenav" id="nav-mobile"> <!--스마트폰을 위한 메뉴 sidenav-->

 

<예제>

  [index.html]

<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi14ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous"
    />
</head>
<body>
<div id="app">
    <div> <!--Navbar-->
        <div class="container">
            <nav class="cyan">
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo">수이니의 여행</a>
                    <a href="#" data-target="nav-mobile" class="sidenav-trigger">
                        <i class="material-icons">menu</i></a>
                    <ul class="right hide-on-med-and-down">
                        <li v-for="link in navlinks" :key="link.text">
                            <a :href="link.href">{{link.text}}</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div> 
    <ul class="sidenav" id="nav-mobile"> <!--스마트폰을 위한 메뉴 sidenav-->
        <li v-for="link in navlinks" :key="link.text"><a :href="link.href">{{link.text}}</a></li>
    </ul>
    <!--추후 추가-->
</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="/js/app.js"></script>
<script src="/js/matcon.js"></script> 
</body>

</html>

1) index.html파일 - head 태그 : Google Icon Font, materialize.css, fontawesome.com 링크 추가

2) index.html파일 - body 태그 : Navbar 관련 코드 작성 

a 태그의 data-target, class 속성
ul 태그 내의 id, class 속성

a 태그의 data-target, class 속성-->사용하기 위한 ul 태그 내의 id, class 속성과 대응해 동작함

 

 

3) matcon.js파일 : querySelector()메서드를 이용해 class속성값이 'sidenav'인 html 엘리먼트를 변수로 저장 -> 초기화

  [matcon.js]

const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav, {});

 

 

4) app.js : html파일에서 v-for 디렉티브를 이용해 li태그 구성한 것을 정상적으로 동작하게 하기 위해 코드 작성

  [app.js]

new Vue({
    el:'#app',
    data:{
        navlinks:[
            {text: '홈', href:'#home'},
            {text: '검색', href:'#search'},
            {text: '관광명소', href:'#attractions'},
            {text: '문의', href:'#contact'}
        ]
    }
})

 

<실행결과>

pc 화면 실행결과

 

스마트폰 실행결과(PC내에서 페이지 사이즈 축소함)

 

● Slider

몇 초마다 이미지가 바뀌는 이미지 슬라이더를 만들 수 있음

 

-형식

<div class="slider">
  <ul class="sliders>
  	<li>
    	<img> <!--이미지-->
        <div> <!--타이틀, 세부설명-->
    </li>
    <li>...</li>
  </ul>
 </div>

 

<예제>

 

1) index.html 파일 - Slider 코드 추가

[index.html] (앞의 예제의 index.html 파일 <!--추후 추가-->부분에 추가)

 

2) img 폴더 생성 -> jpg 파일 저장

 

3) app.js 파일 - v-for에 사용된 데이터 코드를 navlinks 다음에 추가

[app.js]

new Vue({
    el:'#app',
    data:{
        navlinks:[
            {text: '홈', href:'#home'},
            {text: '검색', href:'#search'},
            {text: '관광명소', href:'#attractions'},
            {text: '문의', href:'#contact'}
        ],
        slides:[
            {imgsrc:'img/amsterdam.jpg', title:'Netherlands', description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
            {imgsrc:'img/dresden.jpg', title:'Dresden', description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
            {imgsrc:'img/venezia.jpg', title:'Venezia', description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}

        ]
    }
})

 

 

4) matcon.js 파일 - 슬라이드 기능 동작하도록 document.querySelector() 메소드 이용해 초기화하는 코드 추가

 [matcon.js]

const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav, {});

const slider = document.querySelector('.slider');
M.Slider.init(slider, {indicators: true, height: 485, duration: 5, interval: 6000});

indication : 하단에 순서를 나타낼지 여부

height : 이미지 높이

duration : 전이가 나타나는 시간

interval : 전이 사이 시간 간격

<실행결과>

( -> indicatons)

 

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

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