Как разбить панель инструментов на две строки для определенного экрана в sapui5

Question

Я хочу разбить HeaderToolbar на две строки, когда ширина экрана меньше 570 пикселей.

<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>      

![Toolbar ]1

Как я могу 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%», чтобы занять все пространство, доступное на экране.