New component in studio-components using flexbox and flex-grow to create a resizable layout that keeps proportions when scaled
StudioResizableLayoutContainer
Should be used as parent element to StudioResizableLayoutElement
Can be defined as either a vertical or horizontal layout
Saves resize state in local storage (uniquely identified by localStorageContext prop)
Custom styling can be added with the style prop
StudioResizableLayoutElement
Can restrict resizing with minimumSize
Collapsing can be toggled with collapsed and size controlled with collapsedSize
Custom styling can be added with the style prop
StudioResizableLayoutHandle
Automatically added between Element components
Handles mouse and keyboard events for resizing
Container is a wrapper to set up the resizable layout container. Element is used to create individual resizable boxes within the container and should only be used inside a Container component
New storybook entry
Moved useLocalStorage and useWebStorage hooks to studio-components hooks folder
Moved layoutSet dropdown from components pane to new toolbar similar to the one on the datamodels page
Related Issue(s)
12787
12730
Also trying to solve #13006 as part of using the component in formdesigner
Verification
[ ] Your code builds clean without any errors or warnings
[ ] Manual testing done (required)
[ ] Relevant automated test added (if you find this hard, leave it and we'll help out)
Documentation
[ ] User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)
Description
studio-components
using flexbox and flex-grow to create a resizable layout that keeps proportions when scaledStudioResizableLayoutElement
localStorageContext
prop)style
propminimumSize
collapsed
and size controlled withcollapsedSize
style
propElement
componentsContainer
is a wrapper to set up the resizable layout container.Element
is used to create individual resizable boxes within the container and should only be used inside aContainer
componentuseLocalStorage
anduseWebStorage
hooks tostudio-components
hooks folderlayoutSet
dropdown from components pane to new toolbar similar to the one on the datamodels pageRelated Issue(s)
12787
12730
Verification
Documentation