sapui5의 특정 화면에서 툴바를 두 줄로 나누는 방법

Question

내 화면 너비가 570px 미만일 때 HeaderToolbar를 두 줄로 분할하려고합니다.

![Toolbar ]1

<headerToolbar> 
<Toolbar id="dsdfgfanfgjd"> 
    <FormattedText class="customPanelHeader" htmlText="customHtml"></FormattedText> 
    <ToolbarSpacer></ToolbarSpacer> 
     <Input id="searchFilter" class="searchFilterInput" placeholder="filter value" value="{/searchFilter}" width="12em" liveChange=".onChangedSearchFilter" valueLiveUpdate="true"/> 
     <core:Icon class="searchFilterIcon" size="1.75em" src="sap-icon://search" tooltip="search"/> 
</Toolbar>      

나는 작은 화면을 manange 수있는 방법.

Answer 1

툴바의 응답 측면을 해결하려면 HBOX를 사용하십시오. 화면 크기가 변경되면 자동으로 정렬됩니다. 문제가 해결되었는지 테스트하십시오.

<Toolbar height='auto'> 
       <content> 
        <HBox width='100%' wrap='Wrap'> 
         <items> 
          <Text text='text0' width='3rem' /> 
          <Text text='text1' width='3rem' /> 
          <Text text='text2' width='3rem' /> 
          <Text text='text3' width='3rem' /> 
          <Text text='text4' width='3rem' /> 
          <Text text='text5' width='3rem' /> 
          <Text text='text6' width='3rem' /> 
          <Text text='text7' width='3rem' /> 
          <Text text='text8' width='3rem' /> 
          <Text text='text9' width='3rem' /> 
          <Text text='text10' width='3rem' /> 
          <Text text='text11' width='3rem' /> 
          <Text text='text12' width='3rem' /> 
          <ToolbarSpacer></ToolbarSpacer> 
          <Input id="searchFilter" class="searchFilterInput" 
           placeholder="filter value" value="{/searchFilter}" width="100%" 
           liveChange=".onChangedSearchFilter" valueLiveUpdate="true" /> 
          <core:Icon class="searchFilterIcon" size="1.75rem" 
           src="sap-icon://search" tooltip="search" /> 
         </items> 
        </HBox> 
       </content> 
      </Toolbar> 

높이에 따라 툴바 높이를 '자동'으로 설정하십시오. 항목이 다시 정렬 될 때 생성 된 행 수입니다. 또한, 폭은 HBOX가 '100 %'로 설정되어 화면에서 사용할 수있는 전체 공간을 차지합니다.