First, great project, thanks for all the hard work and polished component documentation pages. Unfortunately one thing I see lacking is a good idea of how tabs and their associated content are intended to be laid out.
Taking a look at UI5's idea here, I think they have a really good symantec layout encapsulating tab content within the actual tab component, and supporting icons directly through component props.
<ui5-tabcontainer class="full-width" show-overflow>
<ui5-tab text="Tab 1">
<ui5-label>Tab 1 Content</ui5-label>
</ui5-tab>
<ui5-tab icon="activities" text="Tab 2" selected>
<ui5-label>Tab 2 Content</ui5-label>
</ui5-tab>
</ui5-tabcontainer>
Contrast to the current example:
<wl-tab-group>
<wl-tab>
<wl-icon slot="before">supervised_user_circle</wl-icon>
<span>Dogs</span>
</wl-tab>
<wl-tab>
<wl-icon slot="before">face</wl-icon>
<span>Cats</span>
</wl-tab>
</wl-tab-group>
I can understand the configuration options here for tab setup and customization (which I believe UI5 is lacking a bit), but this seems to fail to lend itself to doing what tabs are meant to do when they're not just triggers for disconnected functionality: Display previously hidden content with a 1:1 relationship with each tab.
Perhaps a backward compatible option here would be a named content slot that the tab component looks for and passes up the chain? I'm pretty new to web components so if this is off base please ignore, but if anything this is a request for documentation of an example for how to use tabs within a more "standard" use-case.
First, great project, thanks for all the hard work and polished component documentation pages. Unfortunately one thing I see lacking is a good idea of how tabs and their associated content are intended to be laid out.
Taking a look at UI5's idea here, I think they have a really good symantec layout encapsulating tab content within the actual tab component, and supporting icons directly through component props.
Contrast to the current example:
I can understand the configuration options here for tab setup and customization (which I believe UI5 is lacking a bit), but this seems to fail to lend itself to doing what tabs are meant to do when they're not just triggers for disconnected functionality: Display previously hidden content with a 1:1 relationship with each tab.
Perhaps a backward compatible option here would be a named
contentslot that the tab component looks for and passes up the chain? I'm pretty new to web components so if this is off base please ignore, but if anything this is a request for documentation of an example for how to use tabs within a more "standard" use-case.