Comments (6)
Hello!
In your example, you are removing the split panel from the page when no item is selected. We recommend not to do that, and instead keep the Split panel always present. Users can open & close the split panel using the arrow icon in the corner. If you have a need for modifying the open/close state of the panel from your code, you can use the splitPanelOpen
property on the AppLayout component.
You can see this in action in our "Split view" demo.
There is further documentation in the "Split view" article on our website with more recommendations (including e.g. "When nothing is selected, display the empty state").
from components.
But is there any way to hide the split panel (without 0 selected instances
view info) after user selects a record and deselects it ?
from components.
It is technically possible, yes. You can conditionally render the split panel by passing undefined
into the splitPanel
slot if you don't want to render anything (<AppLayout splitPanel={myCondition ? <SplitPanel /> : undefined} />
).
Note that in the code example you linked to, you are always passing a component into the splitPanel
slot (namely the AppSplitPanel
component), which causes the AppLayout to reserve that space on the screen and thus display the table scrollbar above the reserved space. Since your AppSplitPanel
component sometimes internally renders nothing, this reserved space is then transparent, so the scrollbar appears to be floating. To not reserve this space, you'd have to move the condition outside of the AppSplitPanel
component (as shown in the code above).
However, from a UX perspective, it could be confusing for your users if the split panel disappears sometimes, since there is no clear indication why the split panel is gone and what needs to be done to make it visible. Your users might get confused about the application ("Why is the panel missing - is the application broken? Did they remove that functionality?") or themselves ("Wasn't there a panel here last time I used this website? Am I on the wrong page?").
By always showing the split panel, your users can see that the element they're looking for is there, and they also see what they need to do so that they can use it, since the "0 instances selected" text implies that they should select an instance.
Thus, we recommend to always keep the split panel present (and your users can open/close it).
from components.
Ok, thanks for explanation, but by setting the condition myCondition ? <SplitPanel /> : undefined
at AppLayout
level, it would re-render the entire AppLayout
which is not desired.
Sure I can work around it, and apply the condition there, but isn't it a style bug on the component itself ?
I expect a component with render null
not to show a visible scrollbar (that previously was rendered)
WDYT ?
from components.
Currently, the AppLayout & SplitPanel components have been designed & implemented with the above-mentioned UX pattern in mind. Conditionally adding and removing the SplitPanel during the lifecycle of the AppLayout is neither intended nor supported, and we do not consider this a bug.
from components.
Closing due to inactivity. Feel free to reopen if you have additional questions
from components.
Related Issues (20)
- [Bug]: Slider component doesn't work with decimal HOT 2
- [Feature Request]: CloudWatch dashboard UI button not aligned HOT 1
- [Feature Request]: Adding Virtual Rendering to a Table Component HOT 3
- [Bug]: Build Error HOT 2
- Sint at et optio et HOT 1
- [Bug]: Date picker value format is different with show format HOT 2
- [Bug]: 'getLogicalBoundingClientRect' is not exported HOT 2
- top nav bar issue HOT 1
- Limit number of pagination pages shown when having large amount of items. HOT 1
- [Feature Request]: Time Picker HOT 1
- [Feature Request]: Hope to support Menu tabs theme customization ability HOT 3
- [Bug]: Drag and drop to upload a file does not work on macOS Safari HOT 2
- [Feature Request]: Paste to upload file HOT 3
- [Bug]: Gap between files missing on Safari HOT 1
- [Bug]: Updating selectedItems in Table component does not update HOT 1
- [Bug]: `act` from `react-dom/test-utils` is deprecated HOT 4
- [Bug]: Warning when openning and then closing dialog in tests HOT 4
- [Feature Request]: Custom button for DateRangePicker trigger node. HOT 1
- [Feature Request]: Allow year-by-year navigation in date picker HOT 3
- [Bug]: Missing "./internal/analytics-metadata" specifier in "@cloudscape-design/component-toolkit" package after upgrading from 3.0.684 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.