ionic + Meteor에 머티리얼 디자인을 도입할 수 있습니까?

ionic + material

vol.1
vol.2

Material 디자인으로 만들고 싶습니다.

지난 며칠 동안 ionic + Meteor에서 만든 공식 튜토리얼 앱을 대상으로 머티리얼 디자인을 도입하기 위해 맛있는 프레임 워크를 사용할 수 없는지 시도했기 때문에 가볍게 요약합니다. 라고 해도 아직 둘뿐입니다만.

지금까지 사용한 적 | | 사용하려는 프레임 워크

ionicMaterial

ionic에 머티리얼 디자인을 도입하기 쉽게 하기 위한 프레임워크 1
ionic 단체라면, 나누기와 간단하게 머티리얼 디자인을 도입하기 쉬웠기 때문에 WebView 기반의 모바일 앱을 작성할 때 머티리얼 디자인을 도입한다면 굉장히 좋을 것 같았습니다.

배포에는 bower 명령을 사용합니다.bower install ionic-material 에서 bower_components에 추가되어 Github에서 소개된 내용에 따라 준비하면 OK

문제점

ionic + Meteor한 환경에 도입해 보려고 했지만, bower install 한 상태로 앱이 동작하지 않게 되었습니다.
ionic-material은 인스톨시에 ionic나 angular 등 의존하는 것에 대해서도 함께 인스톨을 실시하고 있는 것 같고, 그 근처의 부분이 Meteor 플랫폼에서 준비한 ionic나 angular의 환경과 부딪치고 있는 것이 원인과 같은 기분 합니다.

그건 그렇고

atmosphere에 jonmc12:ionic-material 가 meteor add 명령으로 취득할 수 있는 패키지로서 있습니다만, 본가의 zachsoft씨와는 다른 사람이 atmosphere에 등록하고 있는 것 같습니다.
동작을 확인할 수 없다는 플래그가 붙어 있기 때문에, 이쪽에는 접하지 않는 편이 좋을까 생각합니다(게다가 참조할 수 있는 Github 페이지가 zachsoft씨의 곳이거나 Bug Report의 앞도 zachsoft씨).

Materialize

머티리얼 디자인을 기반으로 한 프론트 엔드 프레임 워크입니다 2
도입 방법도 타사용의 방법도 몇 가지 있어, 그 중에 Meteor도 들어가 있습니다.npm install 이나 bower install 도 사용할 수 있으므로 개인적으로 기쁨이 있었습니다.

ionic + Meteor

앞에서 소개했지만 meteor add materialize:materialize 명령으로 Meteor에 Materialize를 도입 할 수 있습니다.
나머지는 Materialize 공식 Getting Started에 따라 준비하기만 하면 됩니다.
튜토리 앱에 간단한 버튼을 추가하여 잉크 효과가 나오는 곳까지 확인할 수 있었습니다.

문제점

이번에 ionic + Meteor의 튜토리 앱에 Materialize를 도입해 보았습니다만,
화면 하단에 있어야 할 탭이 화면 상단으로 옮겨 버려 타이틀과 덮여 버렸습니다.
이 탭은 ionic의 ion-tab을 사용하고 있었기 때문에, ionic측의 css와 Materialize와 궁합이 좋지 않을 가능성이 있습니다.

요약

현재는 ionic-material과 Materialize를 시도했을 뿐입니다.
다만, Materialize도 ionic이 관련되는 부분에서 레이아웃이 무너질 가능성이 있으므로, 조심해야 할까라고 생각합니다.



htps : // 기주 b. 코 m / 자 ch 소 ft / 이오니 c 마테리아 l  ↩

ht tp // 마테리아 아제 css. 코m/  ↩