如何使进度指示器响应

Question

我参考Sample - Progress Indicator做了3个横向布局的Progress Indicators （垂直布局完成）如下：

<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 box 中所以我试过：

<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 布局来实现它。

<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 用于根据网格大小而不是根据设备大小（大、中和小）获取大小。 defaultSpan 根据您的要求设置。有关网格的更多信息，请访问 Grid API

风格

/* Progress indicator styling */    
.gridProgressIndicator .sapMPIBarRemaining {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.gridProgressIndicator .sapMPI, 
.gridProgressIndicator .sapUiSizeCompact .sapMPI:not(.sapMPIDisplayOnly) {
    height: 2rem;
    border-radius: 22px;
}

输出

大型设备

中型设备

小型设备

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

如何使进度指示器响应

How to make progress indicator responsive

nsprogressindicator

responsive-design

sapui5

结果图片：