Как сделать индикатор прогресса отзывчивым

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 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-адреса могут быть относительными или полными.