如何使进度指示器响应

Question

我参考以下示例-进度指示器 （在垂直布局中完成）在水平布局中制作了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布局来实现它。

<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可以是相对的或完整的。