SproutCore가있는 변형 된 버튼

이번 주에 나는 SproutCore를 배우기 시작했습니다. 나는 프레임 워크를 아주 좋아하지만, 학습 자료가 없다는 것을 싫어한다. 대부분의 가이드를 통과 한 후에 나는 무언가를 세우려고 노력함으로써 배우기로 결심했습니다. 나는 그 안에 버튼이있는 작은 GridView를 썼지 만, 버튼은 왜곡 된 것처럼 보이고, 각 버튼 아래에는 레이블이없는 파란색 복사본이 있고, 핑크 라인이 몇 개있다. 이게 뭐야? 왜 이런거야? 어떻게 제거합니까?SproutCore가있는 변형 된 버튼

관련 코드 :

buttons: SC.GridView.design({ 
    layout: { centerX: 0, top: 40, width: 300, height: 120 }, 
    columnWidth: 120, 
    rowHeight: 58, 
    contentBinding: SC.Binding.oneWay('Calculator.buttons'), 
    exampleView: SC.ButtonView.extend({ 
    titleBinding: SC.Binding.oneWay('.content') 
    }) 
})

그리고 :

Calculator.buttons = '1 2 3 4 5 6 7 8 9 0 + -/x ='.w()

출처

2013-05-27 11684

버튼 및 다른 스타일 위젯의 많은 테마에 의해 정의 된 특정 높이를 가지고있다.

SC.SMALL_CONTROL_SIZE : 18px
SC.REGULAR_CONTROL_SIZE : 24 픽셀
SC.HUGE_CONTROL_SIZE : 30 픽셀
SC.JUMBO_CONTROL_SIZE 다음 중 하나와 일치하는 controlSize과 (귀하의 경우에서의 GridView에서 rowHeight를) 버튼의 높이를 설정합니다 : 44px

buttons: SC.GridView.design({ 
    layout: { centerX: 0, top: 40, width: 300, height: 120 }, 
    columnWidth: 120, 
    rowHeight: 44, 
    contentBinding: SC.Binding.oneWay('Calculator.buttons'), 
    exampleView: SC.ButtonView.extend({ 
    titleBinding: SC.Binding.oneWay('.content'), 
    controlSize: SC.JUMBO_CONTROL_SIZE 
    }) 
})

테마에 사용 된 모든 이미지는 소수의 마스터 파일에만 적용되며 CSS는 타일 이미지의 어느 부분을 표시할지 선택하는 데 사용됩니다. 당신이보고있는 것은 그래픽이 "넘치며"다른 용도로 쓰이는 이미지 부분을 표시하는 것입니다. 그게 충분히 이해가 되니?

출처

2013-05-27 16:26:46

Brilliant! 지금은 바탕 화면에 없으므로 지금 테스트 할 수는 없지만 의미가 있습니다. – 11684

좋은 설명 존. 부록 : 핑크 라인은 스프라이트가 정확하게 맞지 않을 때 정말 명확하게하기위한 개발자 모드의 것이다. 생산을 위해 만들 때 분홍색이 투명하게 변합니다. 물론 목표는 스프라이트와 div가 일치하도록하는 것입니다. – Dave

@Dave Thanks! 그리고 당신과 존 락슨 : 당신은 SproutCore에 관해 많은 것을 알고있는 것 같습니다. 이걸 어디서 배웠 니? 원격으로 완전한 튜토리얼을 찾지 못했습니다. – 11684

SproutCore가있는 변형 된 버튼

답변

관련 문제