본문 바로가기
SPA

Svelte Material UI 적용하기

by NOMADFISH 2022. 5. 30.

시작

  • Svelte도 우리가 흔히 사용하는 UI Frameworks을 적용할 수 있다. 이번에는 그중 Material UI를 적용해 보고자 한다.
  • React, Vue, Angular등 중 2개 이상을 사용해본 개발자라면, 아마도 Material UI 등과 같은 Framworks을 사용해 보았으며, 각 SPA framework마다 세팅이 약간씩 다르다는 것을 알 수 있을 것이다.
  • 또한, 같은 UI Framework인데, 개발자 혹은 개발 회사 마다 약간 씩 다른 방식의 사용법을 가지고 있다는 것도 알 수 있을 것이다.
  • https://svelte-materialify.vercel.app/
 

Svelte Material Design Component Framework - Svelte Materialify

Svelte Materialify is a Material UI component library for Svelte, with full support for light and dark themes.

svelte-materialify.vercel.app

 

Svelte Material UI

Material UI Components for Svelte, ready to use in your app.

sveltematerialui.com

  • 위 2가지 Library 모두 Material UI를 지원하지만 사용방법이 약간씩 다르다.
  • 첫 번째 사이트는 곧 문을 닫을 듯한 느낌이 들기 때문에 2번째 사이트의 방법을 이용하여, 기본적인 material ui를 적용한 샘플 페이지를 만들고, 다음 시간에는 material ui를 이용하여 todo list를 만들어 보겠다.

설치

 

1. 기본 Package 설치

 

Svelte Material UI

Material UI Components for Svelte, ready to use in your app.

sveltematerialui.com

  • install 가이드를 차근차근 따라 하자.
  • install 링크 아래 Sveltekit이라는 항목이 있는데 이건 Sveltekit(Rect의 next.js 같은) 세팅 방법이니 일단은 무시하자
  • 먼저 아래와 같이 material button과 card를 설치하라는 듯한 설명이 나온다. 하지만 필요한 컴포넌트만 부분 부분 설치 가능하기 때문에 굳이 둘 다 설치할 필요는 없다. 필요한 Component만 받아서 사용하자
npm install --save-dev @smui/button
npm install --save-dev @smui/card
  • 일단 card ui를 만들어 볼 것이기 때문에, card만 설치 하자

 

2. Front, Theme css

  • 대부분의 이런 UI framework는 어떤 방식이던 Font와 css의 연결을 해주게 되어 있다. 역시 여기도 마찬가지로 조금은 원시적인 느낌 일 수 있지만, 링크를 넣어 줘야 한다.
  • Svelte에서 css, front를 link tag로 명시해 주는 방법은 2가지이다.
  • public/index.html의 head 부분에 넣어 주는 방식
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>
	<--!이부분에 css, font link를 추가 한다-->
	<script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>
  • <svelte:head> 태그를 이용하여, svelte code에 직접 넣어 주는 방식, 이 방법을 사용하자
<svelte:head>
    <!-- Fonts -->
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
    />

    <!-- Material Typography -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/@material/typography@13.0.0/dist/mdc.typography.css"
    />

    <!-- SMUI -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/svelte-material-ui/bare.css"
    />
</svelte:head>
  • 위와 같은 코드를  App.svelte 맨 위에 추가한다. 이제 기본 Front, Theme CSS가 추가되었다. 이제 각 Component를 추가해서 화면에 그리면, 디폴트 Material UI 테마의 Component를 확인할 수 있다.
<script lang="ts">
	export let name: string;
</script>
<svelte:head>
    <!-- Fonts -->
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
    />

    <!-- Material Typography -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/@material/typography@13.0.0/dist/mdc.typography.css"
    />

    <!-- SMUI -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/svelte-material-ui/bare.css"
    />
</svelte:head>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

 

Component

<div class="card-display">
  <div class="card-container">
    <Card>
      <PrimaryAction on:click={() => clicked++}>
        <Media class="card-media-16x9" aspectRatio="16x9">
          <MediaContent>
            <div
              style="color: #fff; position: absolute; bottom: 16px; left: 16px;"
            >
              <h2 class="mdc-typography--headline6" style="margin: 0;">
                A card with media.
              </h2>
              <h3 class="mdc-typography--subtitle2" style="margin: 0;">
                And a subtitle.
              </h3>
            </div>
          </MediaContent>
        </Media>
        <Content class="mdc-typography--body2">
          It's all in this card. It's a veritable smorgasbord of card features.
        </Content>
      </PrimaryAction>
      <Actions>
        <ActionButtons>
          <Button on:click={() => clicked++}>
            <Label>Action</Label>
          </Button>
          <Button on:click={() => clicked++}>
            <Label>Another</Label>
          </Button>
        </ActionButtons>
        <ActionIcons>
          <IconButton
            on:click={() => clicked++}
            toggle
            aria-label="Add to favorites"
            title="Add to favorites"
          >
            <Icon class="material-icons" on>favorite</Icon>
            <Icon class="material-icons">favorite_border</Icon>
          </IconButton>
          <IconButton
            class="material-icons"
            on:click={() => clicked++}
            title="Share">share</IconButton
          >
          <IconButton
            class="material-icons"
            on:click={() => clicked++}
            title="More options">more_vert</IconButton
          >
        </ActionIcons>
      </Actions>
    </Card>
  </div>

  <div class="card-container">
    <Card>
      <PrimaryAction on:click={() => clicked++}>
        <Media class="card-media-16x9" aspectRatio="16x9" />
        <Content class="mdc-typography--body2">
          <h2 class="mdc-typography--headline6" style="margin: 0;">
            A card with media.
          </h2>
          <h3
            class="mdc-typography--subtitle2"
            style="margin: 0 0 10px; color: #888;"
          >
            And a subtitle.
          </h3>
          It's all in this card. It's a veritable smorgasbord of card features.
        </Content>
      </PrimaryAction>
      <Actions>
        <ActionButtons>
          <Button on:click={() => clicked++}>
            <Label>Action</Label>
          </Button>
          <Button on:click={() => clicked++}>
            <Label>Another</Label>
          </Button>
        </ActionButtons>
        <ActionIcons>
          <IconButton
            on:click={() => clicked++}
            toggle
            aria-label="Add to favorites"
            title="Add to favorites"
          >
            <Icon class="material-icons" on>favorite</Icon>
            <Icon class="material-icons">favorite_border</Icon>
          </IconButton>
          <IconButton
            class="material-icons"
            on:click={() => clicked++}
            title="Share">share</IconButton
          >
          <IconButton
            class="material-icons"
            on:click={() => clicked++}
            title="More options">more_vert</IconButton
          >
        </ActionIcons>
      </Actions>
    </Card>
  </div>
</div>

<pre class="status">Clicked: {clicked}</pre>

<script lang="ts">
  import Card, {
    Content,
    PrimaryAction,
    Media,
    MediaContent,
    Actions,
    ActionButtons,
    ActionIcons,
  } from '@smui/card';
  import Button, { Label } from '@smui/button';
  import IconButton, { Icon } from '@smui/icon-button';

  let clicked = 0;
</script>

<style>
  * :global(.card-media-16x9) {
    background-image: url(https://place-hold.it/320x180?text=16x9&fontsize=23);
  }
</style>
  • card.svelte code를 하나 생성 하자, 그리고 위 코드를 붙여 넣어 Card component를 만든다.

  • 그리고 새로 만든 card component를 App위에 뿌려준다.
<script lang="ts">
	import Card from './card.svelte' // card component import
	export let name: string;
</script>
<svelte:head>
    <!-- Fonts -->
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
    />

    <!-- Material Typography -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/@material/typography@13.0.0/dist/mdc.typography.css"
    />

    <!-- SMUI -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/svelte-material-ui/bare.css"
    />
</svelte:head>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Card /> <!--카드 component rendering-->
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
  • npm run dev으로 실행해보자
  • 화면에 Card나 나타나는 걸 볼 수 있다.

'SPA' 카테고리의 다른 글

Svelte Material Todos (2)  (0) 2022.08.31
Svelte Material Todos (1)  (0) 2022.08.23
Svelte Store  (0) 2021.10.31
Svelte 글자 바꾸기2  (0) 2021.03.24
Svelte로 글자를 바꾸자1  (0) 2021.02.22

관련글

티스토리툴바