I'm submitting a ... <li class=

Blurring page dimmer about suicrux HOT 3 CLOSED

metnew commented on May 2, 2024

Blurring page dimmer

from suicrux.

Comments (3)

Metnew commented on May 2, 2024 1

Hi @TheDolo, I faced next issues when I was trying to add blurred dimmer: There are 2 ways to add blurred dimmer:

wrap whole app in Dimmer.Dimmable, like:

         <SidebarSemanticPusherStyledPatch>
           <Dimmer.Dimmable {...dimmerDimmableProps}>
           <StyledDimmer {...dimmerProps} />
           <Header {...headerProps} />
           <MainLayout>
             <MainContent>
               <MainContainer id="main-container">
                 {children}
               </MainContainer>
             </MainContent>
             <Footer />
           </MainLayout>
           </Dimmer.Dimmable>
</SidebarSemanticPusherStyledPatch>

Problem: bad performance.

Add Dimmer with page:true prop, so the dimmer renders outside the app + add class="blurred" to <body>.
Problem: Sidebar is blurred and covered by the dimmer.

I still try to find the simplest way to add blurred dimmer without a lot of custom code.

from suicrux.

Metnew commented on May 2, 2024

I'm going to implement this, have never thought about blurring dimmer

from suicrux.

Metnew commented on May 2, 2024

I'm closing it, because it's not directly connected to the boilerplate, but mostly to SUIR

from suicrux.

Blurring page dimmer about suicrux HOT 3 CLOSED

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent