\'class\' 속성을 사용하여 UI5 XML 보기에서 CSS 클래스에 바인딩하는 방법은 무엇입니까?

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

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

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

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

   <code class="xml"><Text class="myControl">
     <customData>
       <core:CustomData writeToDom="{= myExpression }" key="green" value="" />
     </customData>
   </Text></code>

   로그인 후 복사

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

   <code class="css">.myApp .sapText.myControl[data-green] { /* ... */ }</code>

   로그인 후 복사

예

다음 예에서는 "green" 클래스가 "활성화" 속성이 true인 경우 제어:

<code class="xml"><Text class="myControl">
  <customData>
    <core:CustomData writeToDom="{= ${myTable>enabled} ? 'green' : 'red' }" key="green" value="" />
  </customData>
</Text></code>

<code class="css">.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl[data-red] { color: red; }</code>

고려 사항

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

위 내용은 \'class\' 속성을 사용하여 UI5 XML 보기에서 CSS 클래스에 바인딩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!