"class" 속성을 사용하여 컨트롤에 바인딩

"class" 속성을 통해 XML 뷰의 CSS 클래스에 바인딩하는 것은 UI5에서 직접 지원되지 않습니다. 그러나 사용자 정의 데이터를 사용하는 해결 방법을 구현할 수 있습니다.

바인딩에 사용자 정의 데이터 사용

1. 컨트롤에 사용자 정의 데이터를 추가하고 writeToDom 속성을 설정한 후 바인딩합니다. 원하는 표현:

2. 사용자 정의 데이터 값을 기반으로 컨트롤을 대상으로 하는 CSS 선택기를 정의합니다. 예:

   .myApp .sapText.myControl[data-green] { /* ... */ }

예

다음 예에서는 "활성화" 속성이 true인 경우 "녹색" 클래스가 컨트롤에 추가됩니다.

.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl[data-red] { color: red; }

고려 사항

• 맞춤 데이터에 바인딩하면 CSS 스타일을 조작할 수 있지만 다음 사항을 고려하는 것이 중요합니다.
• 맞춤 CSS 스타일은 주의해서 사용해야 합니다. UI 일관성 및 유지 관리에 영향을 미칠 수 있기 때문입니다.
• 사용자 정의 CSS를 사용하기 전에 의미 클래스 또는 사용자 정의 포맷터 사용과 같은 대체 솔루션을 살펴보세요.