CODEWITHSUNDEEP
responsive-designsapui5nsprogressindicator
KcH
KcH

Reputation: 3502

How to make progress indicator responsive

I have made 3 Progress Indicators in horizontal layout with reference to Sample - Progress Indicator (which is done in vertical layout) as below:

<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>

To fit the screen with equal size of 3 indicators I used width="28.7rem" but this may be not the correct way to do so and not responsive either(known)

Image of result:

3 progress indicators in same line

To make it responsive, I have read that I should wrap the whole thing in flex box so I tried as:

<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>

But this didn't help me either (I guess my code is wrong).

May I know how can I achieve these responsive progress indicators?

Upvotes: 0

Views: 845

Answers (1)

Inizio
Inizio

Reputation: 2256

As per you requirement you can use the GRID layout to achieve it.

<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>

Note: Grid layout will provide the responsive layout. Where containerQuery is used to get the size based on the Grid size not based on the device sizes(Large, Medium and Small). defaultSpan is set based on your requirement. For more information regarding the Grid go through the Grid API

Style

/* 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;
}

Output

Large Device

Medium Device

Small Device

URLs can be relative or full.

Upvotes: 5

Related Questions