Question

我已参考Sample - Progress Indicator在水平布局中制定了3个进度指示器（以垂直布局完成），如下所示：

<l:HorizontalLayout
        class="sapUiContentPadding"
        width="100%">
        <l:content>
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="30"
                displayValue="30%"
                showValue="true"
                width="28.7rem"
                state="None" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="50"
                showValue="false"
                width="28.7rem"
                state="Error" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="99"
                displayValue="0.99GB of 1GB"
                showValue="true"
                width="28.7rem"
                state="Success" />
        </l:content>
    </l:HorizontalLayout>

为了使屏幕大小等于3个指示器的大小，我使用了width="28.7rem"，但这可能不是正确的方法，并且对此也不响应（已知）

结果图片：

要使其具有响应性，我读到我应该将整个东西包装在flex盒中，所以我尝试如下：

<l:content>
         <Panel class="sapUiDemoFlexBoxSizeAdjustments">
            <FlexBox
                alignItems="Start">
                    <items>
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="30"
                displayValue="30%"
                showValue="true"
                width="100%"
                state="None" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="50"
                showValue="false"
                width="100%"
                state="Error" />
            <ProgressIndicator
                class="sapUiSmallMarginBottom"
                percentValue="99"
                displayValue="0.99GB of 1GB"
                showValue="true"
                width="100%"
                state="Success" />
                    </items>
            </FlexBox>
          </Panel>
        </l:content>
    </l:HorizontalLayout>

但这对我也没有帮助（我想我的代码是错误的。）

我可以知道如何实现这些响应进度指标吗？

Answer 1

根据您的要求，您可以使用GRID布局来实现它。

Error

注意：网格布局将提供响应式布局。其中<l:Grid containerQuery="true" defaultSpan="XL2 L4" class="gridProgressIndicator "> <ProgressIndicator class="sapUiSmallMarginBottom" percentValue="30" displayValue="30%" showValue="true" state="None" /> <ProgressIndicator class="sapUiSmallMarginBottom" percentValue="50" showValue="false" state="Error" /> <ProgressIndicator class="sapUiSmallMarginBottom" percentValue="99" displayValue="0.99GB of 1GB" showValue="true" state="Success" /> </l:Grid>用于根据网格大小而不是基于设备大小（大，中和小）获取大小。 containerQuery是根据您的要求设置的。有关网格的更多信息，请访问Grid API

样式

defaultSpan

输出

大型设备

中型设备

小型设备

URL可以是相对的或完整的。

如何使进度指示器响应

结果图片：

1 个答案: