NativeScript를 통해 버튼의 CSS 색상을 변경하는 방법은 무엇입니까?

방금 사용 시작했습니다 Nativescript. XML 호출 (id="mainButton" class="btn") 외부 CSS 파일에 선언 된 단추가 있습니다. 모든 것이 잘 작동합니다 (버튼은 원래 파란색으로 렌더링됩니다). 그러나 코드를 통해 색상을 빨간색으로 변경해야합니다.NativeScript를 통해 버튼의 CSS 색상을 변경하는 방법은 무엇입니까?

어떻게 수행하나요?

나는 (콘솔에 오류하지만 페이지가 더 이상 렌더링하지 않습니다) 성공없이 아래의 라인을 시도했다 :

page.css = "mainButton { backgroundColor: red }";

출처

2017-05-05 Alex Souza

간단한 해결책이 ID를 사용하여 버튼의 인스턴스를 얻을 것 mainButton. 그런 다음 CSS 또는 View 인스턴스의 backgroundColor 속성을 변경합니다. 당신의 XML로

function changeColor(args) { 
    var btn = args.object; 
    btn.backgroundColor = "#3489db"; 
}

: 예를 들어

는 버튼의 tap 이벤트에서이 이벤트가 있다고

<Button tap="changeColor" class="whatever" />

실행하지만이해야하는 경우에 다른 방법의 많음이있다 당신이 알아낼 수 있도록 도와주세요 :)

출처

2017-05-05 00:43:06

감사합니다. 이 버튼을 누르면 작동하지만 클릭하지 않고 색상을 변경하고 싶습니다. 더 잘 설명하면, 새로운 색상을 가진 변수가 있습니다. 페이지가로드되면이 변수를 읽고 mainButton을 새 색상으로 설정해야합니다. 가능합니까? 나는 XML 파일의 "id"를 통해 버튼에 대한 참조를 얻을 수 있다고 생각했지만 이것이 작동하지 않는 것 같습니다. –

넵 - 초기화 후 이벤트 중에 'id'가있는 버튼을 얻을 수 있습니다. :) '페이지로드'에 대해 언급합니다. nativescript의 페이지에는 많은 이벤트가로드되어 있습니다. 따라서 페이지로드에 이벤트를 추가 한 다음 해당 ID로 버튼을 가져온 다음 backgroundColor에 대한 속성을 설정합니다. 말이 돼? –

불행히도 어떻게해야할지 모르겠습니다. 일반 템플릿을 사용하고 있으며 createViewModel() 함수 내에 코드를 추가하려고합니다. 이드에 의해 어떻게 요소를 얻을 수 있습니까? –

당신의 CSS 파일에서 직접 이렇게 할 수 있습니다

Button { 
    background-color: red; 
}

또는

.button-class { 
    background-color: red; 
}

당신은 너무

Button:highlighting { 
    background-color: green; 
}

하이라이트 컬러를 업데이트 할 수 있습니다 당신이 tns-core-modules/color

에서 Color를 가져올 것을 잊지 JS의/시액의 스타일 속성을 사용 해달라고 수 있습니다

buttonInstance.style.backgroundColor = new Color("#00FF00");

출처

2017-05-05 00:48:04 KielSoft

NativeScript를 통해 버튼의 CSS 색상을 변경하는 방법은 무엇입니까?

답변

관련 문제