Question

当屏幕宽度小于570px时，我想将HeaderToolbar拆分为两行。

<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

我如何为小屏幕管理它。

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>

请注意工具栏的高度设置为＆＃39; auto＆＃39;根据没有调整。重新对齐项目时创建的行数。此外，宽度是HBOX设置为＆＃39; 100％＆＃39;占据屏幕上可用的整个空间。

如何在sapui5中将工具栏拆分为两行以用于特定屏幕

1 个答案: