0

Asking if why the tabset and tab are not the same with the default tab component on the lightning app builder. When I tried to create an aura component, and viewed in Salesforce Mobile App, then the UI will not change to vertical tab.

Tried to tweak it in css but no luck. :(

I want to show like this: enter image description here

Improve this question

1 Answer 1

Reset to default
0

You need to detect the current device type and change the variant of the tab component in Aura to Vertical.

To detect the device type use $Browser global value provider:-

$Browser The $Browser global value provider returns information about the hardware and operating system of the browser accessing the application.

<aura:component>
    {!$Browser.isTablet}
    {!$Browser.isPhone}
    {!$Browser.isAndroid}
    {!$Browser.formFactor}
</aura:component>

To apply vertical variant:-

<aura:component>
    <lightning:tabset variant="vertical">
        <lightning:tab label="Item One">
            Content in Tab One
        </lightning:tab>
        <lightning:tab label="Item Two">
            Content in Tab Two
        </lightning:tab>
        <lightning:tab label="Item Three">
            Content in Tab Three
        </lightning:tab>
        <lightning:tab label="Item Four">
            Content in Tab Four
        </lightning:tab>
        <lightning:tab label="Item Five">
            Content in Tab Five
        </lightning:tab>
        <lightning:tab label="Item Six">
            Content in Tab Six
        </lightning:tab>
    </lightning:tabset>
</aura:component>

enter image description here

Improve this answer
4
  • I added the screenshot of my goal.
    – Jeff Lrzn
    Aug 3, 2021 at 4:33
  • Tab similar to lightning app builder component
    – Jeff Lrzn
    Aug 3, 2021 at 4:33
  • When I used the vertical variant, it didn't flex/stretch the UI in mobile app
    – Jeff Lrzn
    Aug 3, 2021 at 4:34
  • Why don't you use accordion with multiple section open equals true in mobile?
    – sanket kumar
    Aug 3, 2021 at 4:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .