본문 바로가기

hybrid app/sencha touch

[sencha touch] 다양한 색깔의 button 만들어보기

다양한 색깔의 버튼을 만드는 방법도 scss파일을 사용하여 만듭니다.


이 scss파일을 다루는 방법을 조금만 익히면 sench touch잡업하는데 많은 도움이 될 것입니다.


간단한 코드 몇줄로 전체 theme을 수정하고 설정할 수 있습니다.


이 부분은 다음에 알아보기로 하고 오늘은 다양한 색깔의 button을 만드는 방법을 알아보겠습니다.


scss파일을 열고 아래와 같이 추가해 봅니다.



첫번째는 사용할 이름을 설정합니다. 여기서는 black이란 이름으로 설정했습니다.


두번째는 버튼의 color를 설정합니다.


세번째는 버튼의 효과를 설정합니다.


효과로는 bevel, glossy, matte, flat이 있습니다.


bevel


glossy


matte


flat


다음과 같이 추가한 후 scss파일을 컴파일 합니다.


컴파일 방법은 


터미널 창에서 sass폴더로 경로를 이동힙니다.


이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.




그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.



컴파일이 끝나고


view class에서 다음과 같이 ui에 scss에서 설정한 이름을 넣어 사용합니다.