Material Design의 Rally를 만들고 싶다.

소개

자작의 가계부 앱을 쇄신하고 싶었다. 유행의 머티리얼 디자인으로 하고 싶다-라고 생각하고, 좋은 디자인 없는가-와 검색하고 있었던 것이 Rally

이 녀석 누구야! 라고 생각해, Material Components for the web 사용하면 정말 할 수 있을까-! 라고 생각해, 도전해 본다.

그런 메모.

전제 조건

조금은 프런트 엔드 개발이 가능하다.
조금은, 영어가 할 수 있다. 하지만 영어 문서를 읽고 싶지 않습니다.
Bootstrap 정도는 프레임워크 사용한 적이 있다.

그 정도의 기술력.

정말 Rally 같은 것을 할 수 있을까.

우려사항

자신의 동기가 어디까지 이어질까.
기사의 양이 얼마나 되는지. 전혀 보이지 않습니다.

해보자 - 1

웹은 1부터입니다! 라고 초보자가 된 마음으로 임해 보자.

처음 보기

우선은 Getting Started을 읽고 환경을 만든다.

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

이것 로드하면 좋다.

···.

이미 막혔다.

이런 일?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    Hello World
  </body>
</html>

버튼에서도 넣어 볼까.

<button class="foo-button mdc-button">Button</button>

오, 버튼 배치할 수 있었다.

JS도 사용해 볼까.

<script>
  mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
</script>

오, 애니메이션!

왠지, 웹 경계에서는 JS 마지막으로 읽어들일 것 많다…

[JS] JavaScript의 로드 위치를 페이지 마지막으로 하는 것이 좋은 이유

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
  </head>
  <body>
    Hello World
    <button class="foo-button mdc-button">Button</button>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
    </script>
  </body>
</html>

Rally까지의 길은 멀다….

Reference

이 문제에 관하여(Material Design의 Rally를 만들고 싶다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/aoi70/items/9a644587fa60f20334ee

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다