Option to show only a single section at a time (take them as distinct tabs)

[techpet]

Expected behavior: Section component should wrap it's children inside a Tab and show/hide them when the tab is active.

Issue: Children components are displayed inline, just after previous section children components.

Case: Screenshot from cider-house example:

[VojtaStanek]

Hi techpet!

Thanks for your interest in Contember Admin and for taking your time to open this issue!

This is expected behaviour, we believe it's the better default. I agree that on the presented screenshot it looks odd - this is usable, especially on long pages - e.g. article edit page, where there is the content of the article and below there is some setting for SEO / meta tags.

There are several ways you can achieve the behaviour you want:

• You can create a seperate page for each section and add link buttons like this: <EditPage rendererProps={{ afterTitle: <>Buttons here</> }}.
• If you need it on the same page, you can do it by using lower-level components like DataBindingProvider, EntitySubTree and LayoutRenderer in a custom stateful component.

I am converting this issue into a feature request for the behaviour you expected.

[techpet]

Thank you for your reply @VojtaStanek! Indeed, one can achieve this functionality with the very reasonable ways that you have proposed. It's great that Contember has all the flexibility that allows you to think out of the box and apply several different solutions to a problem!

In my mind, the default expected behaviour of the headings (tabs) placed on top with the ability to change the active one would be either to navigate you to hidden content or work as anchor links to the related Section content. But again, that might be just me thinking of this as the default behaviour.