Togglable tabs about re-com HOT 6 CLOSED

The disadvantage I see with this is that things can be become expensive to compute quite fast. You are rendering everything, not just what the user is seeing. In addition, if you change some ratoms associated with hidden tabs, everything will be re-rendered. 😢

If you want animations, wouldn't it be better to use React lifecycle handles like :component-will-unmount?

from re-com.

@Frozenlock, I think you bring up a great point.

Depending on how the hallowed reagent/atom is structured, any change in one tab may or maynot trigger (invisible) updates for another tab. I tend to structure my app-state as:

{...
    :tab-1 {...}
    :tab-2 {...}
...}

So the effects in one tab don't have any effects on another tab as data is compartmentalised.

This has the advantage that the swtiching tabs is really smooth as from a DOM perspective only a very few things are changing.

Ofcourse either way there will be a big browser repaint.

So I think with the current strategy and the proposed strategy, there are suboptimal solutions.

But, if adding and removing the classes is moved down to an individual tab component using :component-will-unmount and :component-did-mount, it may be possible be achieve the same effect without re-com deciding how how many tabs are laid out. It may be possible to achieve either.

I am going to modify my code to see how it functions.

from re-com.

I've improved the code so that now you can choose to show all the tabs or not. The code is now in tab-all branch.

The example has been updated as well. You may need to clear your browser cache to display the latest version.

In the example, the text above the line is based on all tabs being present. Below the line, the component changes on tab change.

With this new change, the code is a lot simpler and smaller. Nothing will be changed in re-com rather a Tab component will be added.

from re-com.

Update: I've learnt enough css to realise that this is possible to do this in pure css without changing anything in this library.

from re-com.

Good to hear you've solved this (re-com repo has not been receiving much love of late due to commercial realities taking precedence). Indeed CSS is a dark art, capable of many things that most are blissfully unaware of, including, no doubt, me.

from re-com.

no worries @Gregg8. But I am a big fan of the work you guys have done here along with re-frame.

from re-com.