Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

[Shell] Add Tab bar and auto promote tabs to nearest TabBar #6023

Merged
merged 5 commits into from
May 8, 2019

Conversation

PureWeen
Copy link
Contributor

@PureWeen PureWeen commented Apr 26, 2019

Description of Changes

If you specify Tabs without a container then they automatically get promoted to the nearest implicit TabBar.

If you specify a type as a TabBar it auto disables the Flyout Behavior when you are on that TabBar

Example 1

<Shell>
   <Tab Title="Home" Icon="home.png">
        </Tab>
   <Tab Title="Home" Icon="home.png">
        </Tab>
</Shell>

becomes

<Shell>
     <TabBar>
        <Tab Title="Home" Icon="home.png">
         </Tab>
          <Tab Title="Home" Icon="home.png">
        </Tab>
     </TabBar>
</Shell>

Example 2

<Shell>
   <Tab Title="Home" Icon="home.png">
        </Tab>
   <Tab Title="Home" Icon="home.png">
        </Tab>
<TabBar>
   <Tab Title="Home" Icon="home.png">
        </Tab>
   <Tab Title="Home" Icon="home.png">
        </Tab>
</TabBar>
   <Tab Title="Home" Icon="home.png">
        </Tab>
   <Tab Title="Home" Icon="home.png">
        </Tab>
</Shell>

becomes

<Shell>
     <TabBar>
        <Tab Title="Home" Icon="home.png">
        </Tab>
        <Tab Title="Home" Icon="home.png">
        </Tab>
     </TabBar>
     <TabBar>
        <Tab Title="Home" Icon="home.png">
        </Tab>
        <Tab Title="Home" Icon="home.png">
        </Tab>
     </TabBar>
     <TabBar>
        <Tab Title="Home" Icon="home.png">
        </Tab>
        <Tab Title="Home" Icon="home.png">
        </Tab>
     </TabBar>
</Shell>

API Changes

  • Added Tab Bar alias for ShellItem which disables the flyout by default

Visual Changes

Draft PR of being able to specify

<Shell>
   <Tab Title="Home" Icon="home.png">
            <ShellContent>
                <ContentPage></ContentPage>
            </ShellContent>
        </Tab>
        <Tab Title="Library" Icon="library.png">
            <ShellContent>
                <ContentPage></ContentPage>
            </ShellContent>
        </Tab>
        <Tab Title="Contact" Icon="contact.png">
            <ShellContent>
            <ContentPage></ContentPage>
        </ShellContent>
        </Tab>
</Shell>

to render as one page

image

@PureWeen PureWeen force-pushed the shell_highlevel_tabs branch from 1d07aa0 to fc19aef Compare May 1, 2019 23:45
@PureWeen PureWeen changed the title spike adding tabs at a higher level [Shell] Add Tab bar and auto promote tabs to nearest TabBar May 1, 2019
@PureWeen PureWeen changed the base branch from master to 4.0.0 May 1, 2019 23:48
@PureWeen PureWeen marked this pull request as ready for review May 1, 2019 23:50
@PureWeen PureWeen added the blocker Issue blocks next stable release. Prioritize fixing and reviewing this issue. label May 3, 2019
@samhouts samhouts self-assigned this May 6, 2019
@PureWeen
Copy link
Contributor Author

PureWeen commented May 7, 2019

API 28 failures are unrelated

@samhouts samhouts merged commit 18dc4ec into 4.0.0 May 8, 2019
@samhouts samhouts deleted the shell_highlevel_tabs branch May 8, 2019 23:15
@samhouts samhouts added this to the 4.0.0 milestone May 10, 2019
@samhouts samhouts added the approved Has two approvals, no pending reviews, and no changes requested label Jul 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a/shell 🐚 approved Has two approvals, no pending reviews, and no changes requested blocker Issue blocks next stable release. Prioritize fixing and reviewing this issue.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants