Ionic/Angular를 확장하는 웹 컴포넌트 mobiscroll

머리



이 기사는 Ionic Advent Calendar의 7 일째 기사입니다.

주식회사 브라이트 비의 이이다 유이치입니다.

폐사는 개호·의료·육아 지원 등 지역 공생 사회의 실현을 향해, 다양한 ICT 서포트를 실시하고 있습니다.
Web 시스템이나 태블릿 앱·스마트 폰 앱 등을 구축하고 있습니다만,
앱 클라이언트는 '올 Ionic'으로 구축되었습니다.

과거에는 Backbone/Angular1에서의 실장이나, Aurelia의 시행 등을 거쳐, 향후는 Ionic과 마음 속의 기세로 유용하고 있습니다!

Ionic이 표준으로 제공하는 UI는 고맙습니다.



UI 디자이너가 확보할 수 없는 팀의 경우,
쉽고 쉬운 디자인을 아름답게 지원하는 Ionic 인터페이스는 매우 고맙습니다.

표준으로 제공되는 인터페이스는 다양합니다.
htp // 이오니 cf 라메를 rk. 코 m / 두 cs / 코 m 포넨 ts /



카드
htp // 이오니 cf 라메를 rk. 코 m / 두 cs / 코 m 포넨 ts / # 세 ct

선택
htp // 이오니 cf 라메를 rk. 코 m / 두 cs / 코 m 포넨 ts / # 세 ct

하지만 좀 더 다양한 UI를 원한다 → Mobiscroll의 차례



Mobiscroll은 Ionic에는 제공되지 않는 다양한 UI를 구성 요소로 확장합니다.



준비된 모든 UI는 여기에 샘플을 포함하여 소개되어 있습니다.
htps : // 녹 sc 로트 l. 코 m / 이오니 c # 키 t 짱신 k

「Ionic에 부족한 컴퍼넌트를 보완하고 있어!」라는 어필도 있으면서!


Mobiscroll의 조작감을 실기로 시험해보고 싶다



Mobiscroll의 조작감을 시험해보고 싶다면,
자신의 모의를 만들지 않고도 Ionic 개발자 익숙한 Ionic View에서 시도할 수 있습니다.

■App Store/Google Play
htps: //언제나 s. 아 ぇ. 코 m / 우 s / 아 p / 이오니 c - ゔ ぃ
htps : // p ぁ y. 오, ぇ. 이 m / s 취해 / 아 ps /에서 원하는 ls? 아니 d = m. 이오니 cf 라메를 rk.ゔ아

Enter Code로

09372c58

를 입력하면 mobiscroll 공식에서 제공하는 모의 앱을 사용해 볼 수 있습니다.



기존 Ionic 프로젝트에 적용 정보



설치는 매우 간단합니다.
$ npm install -g @mobiscroll/cli

$ mobiscroll config ionic

이상으로 종료입니다.

HTML 코드도 간단합니다.mbsc-date 등의 애트리뷰트를 붙이는 것만으로 Mobiscroll의 컴퍼넌트를 이용할 수 있습니다.
<ion-content>
    <ion-item>
        <ion-label>Birthday</ion-label>
        <ion-input [(ngModel)]="myBirthday" mbsc-date></ion-input>
    </ion-item>
</ion-content>

Mobiscroll은 유료



좋은 일 만들기의 Mobiscroll입니다만, 유상이 됩니다.

라이센스 미구매로 사용하고 있으면, Trial 라고 쓰여진 워터마크가 컴퍼넌트에 표시됩니다 (확실히 Trial 이었다고··).

약간의 가치가 있지만, 이러한 구성 요소를 자체 제작하는 비용을 고려하면,
충분히 검토할만한 컴포넌트집이 아닐까 생각합니다.

당사가 제공하는 어플리케이션에는 mobiscroll 없이는 성립하지 않을 정도로 혜택을 받고 있습니다 w

라이센스를 구입하면 모듈을 다운로드하는 전용 페이지에 액세스할 수 있으며,
그곳에서 다운로드 한 모듈을 소정의 디렉토리에 배치함으로써,
Trial의 문자 워터마크가 사라집니다.
追記(2017/12/16)
오랜만에 신규 앱으로 시도했지만 지불하지 않은 샘플이라면,
이런 식의 font-icon이 꽂혀 버리는 경우도있는 것 같습니다.



The products can be downloaded from h tps : // 어쨌든 d. 녹 sc 로트. 이 m
After downloading all you have to do is exchange the trial files with the licensed version.

좋은 웹페이지 즐겨찾기