ux-tabs

[manuel-guilbault]

Implement the ux-tabs and ux-tab components for Material and iOS design.

General Todo

For Material design:

• [ ] basic style
• [ ] transition animation
• [ ] automatic sizing
• [ ] text wrap and ellipsis
• [ ] overflow pagination
• [ ] support for drop down menus

For iOS design:

• [ ] basic style

[manuel-guilbault]

I already have a working version. It looks like this:

<ux-tabs>
  <ux-tab text="Account" icon="face"></ux-tab>
  <ux-tab text="Favorites" icon="favorite"></ux-tab>
</ux-tabs>

I also added some examples in the ux showcase app: https://github.com/manuel-guilbault/aurelia-app-ux-showcase/tree/ux-tabs

[xenoterracide]

this was reopened? so there are no tabs :'( what needs to be done to get this done?

[bigopon]

nagging @ben-girardet 😏

[ben-girardet]

Great question @xenoterracide

I joined this project recently and was also intrigued by what happened to the tabs component. I figured out from this issue that it was removed back in Oct 17 from the library due to some bugs.

What need to be done ? The library has much evolved since then, but the original work on tabs might still be of interest. Wondering if @serifine could give us some insights ?

The course of action could be to

1. trying to bring back the code of the tabs into the library today and evaluate if we can keep going from here (here is the latest code I've found from this repo)
2. continue from there or start again from scratch ?!?

Also, the fork of the original author @manuel-guilbault still exists here with demo of the tabs.

@xenoterracide did you ask by curiosity or would you be willing to help out with this component ? If yes, let's talk about how we could include you in the process

[xenoterracide]

curiousity, and potential (but not promised) willingness to help out. I'm still fairly green again at doing Web UI stuff. Currently am debating on whether I wanted to try Aurelia UX in addition to my current Bulma experiment (trying to avoid frameworks with that jquery thing). For my need Aurelia UX is missing tabs, and Bulma is missing a FAB. All that said, my help would probably depend on what needs doing, and whether I'm capable (sometimes the best way to help is to kindle the fire ;) )

[ben-girardet]

Good to hear @xenoterracide ! I'm with you trying to avoid jquery thing.

I had a look at the original tabs source code and must say that I would go for starting again from scratch.

I'm also in need of tabs in a pretty near future so I confirm that the fire is getting some flames. The cool thing is that the Aurelia codebase is a solid foundation to get a quick start. I believe we can get something working pretty quickly. Will keep you updated here.

[stuartbale]

I'm going to attempt to resurrect this as I can now spare a decent chunk of time to work on it. Anyone monitoring this issue is welcome to offer suggestions on how I should tackle this.

[bigopon]

@stuartbale nice. I think the first thing to do is to try to agree to how we would want the usage to be like. For me, I have seen 2 variations:

• Tab button text and icon are configured on a tab panel (example from @manuel-guilbault https://github.com/aurelia/ux/issues/83#issuecomment-311917884):

  <ux-tabs>
  <ux-tab text="Account" icon="face"></ux-tab>
  <ux-tab text="Favorites" icon="favorite"></ux-tab>
  </ux-tabs>

• Tab can be in free templating style, which looks like this:

  <ux-tabs>
  <ux-tab-panel>
  <ux-tab>Account <ux-icon>face</ux-icon></ux-tab>
  ... the rest of a panel content
  </ux-tab-panel>
  <ux-tab-panel>
  <ux-tab>Favourites <ux-icon>favourite</ux-icon></ux-tab>
  ... the rest of a panel content
  </ux-tab-panel>
  </ux-tabs>

I think the first one will be the easier to start with, we can change to 2nd one later if there's a demand for it.

[stuartbale]

thanks @bigopon. With the first variation, do you anticipate that the content of the tab is enclosed within the ux-tab tag? E.g.

<ux-tabs>
  <ux-tab text="First" icon="face">
    <div>
      <span>This is inside the tab and only visible when the First tab is selected.</span>
    </div>
  </ux-tab>
  <ux-tab text="Second" icon="favorite">
    <div>
      <span>This is inside the tab and only visible when the Second tab is selected.</span> 
    </div>
  </ux-tab>
</ux-tabs>

[zewa666]

@stuartbale looking at the sample from @manuel-guilbault here I don't see a slot available in ux-tab so I'd expect no children

[stuartbale]

thanks @zewa666 . Do we think that generally users would want to manage the visibility of tab content themselves (e.g. via a tab selected event) or would they prefer the tab component to do that?

[bigopon]

@stuartbale yes, otherwise I think it'd be quite confusing. Unless you have some ideas how to make it more foolproof authoring the content 👍

[ben-girardet]

thanks @stuartbale for jumping on this.

If I follow you guys correctly, the scope of this component relates to the tabs buttons but not the content. Right ? At least I don't think that a markup where tab buttons and content are linked together would be a good idea. Many times tab buttons should be placed separated from their content (eg: in a topbar).

For the tabs (buttons), maybe we can use "free style" markup and encourage the usage of <ux-button> inside the tabs. Usage of <ux-button/> would be totally optional but an easy way to make it work well quickly.

For the tabs content we can later on provide another set of custom element or custom attributes to link with buttons. This would be optional as well as I like the suggestion from @stuartbale to use events for selection. But again, to make something work quickly for a user, we can automate many things with nice components working together. This will help heaps for animations for exemple.

Markup suggestion:

<ux-tabs>
  <ux-tab id="tab-id-1">
    <!-- content inside tab is free (using slot) -->
    <!-- but we make it work super well with buttons -->
    <ux-button>Tab Button</ux-button>
  </ux-tab>
  <ux-tab id="tab-id-2">
    <ux-button>Tab Button</ux-button>
  </ux-tab>
</ux-tabs>

<!-- ... -->

<!-- Tab content components, can be done later and is optional for user -->
<ux-tabs-content>
  <ux-tab-content tab-id="tab-id-1">
     Tab content 1
  </ux-tab-content>
  <ux-tab-content tab-id="tab-id-2">
     Tab content 2
  </ux-tab-content>
</ux-tabs-content>

[stuartbale]

Wow, thank you @bigopon @ben-girardet @zewa666 for your quick feedback. I've been reviewing the existing components in the project and have started a new Tabs component. I used the Treeview component as a starting point, without realising that there is a Boilerplate which I should have used. Nevertheless, I have made a start. The design I am using is based on what is shown here: https://material.io/components/tabs#anatomy I'm also being influenced by the information shown here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role particularly for naming conventions. Which leads me to this:

<ux-tabs>
  <ux-tab id="tab-id-1" label="Home" icon="house" clicked.delegate="onClick()"></ux-tab>
  <ux-tab id="tab-id-2">
    <!-- content inside tab (using slot) will override label and icon if supplied -->
    <my-button >Orders</my-button>
  </ux-tab>
</ux-tabs>

and

<!-- Providing Tab Panels is optional. 
Panel is linked to Tab based on id. 
Panel is only made visible when a tab is selected. -->
<ux-tabs>
  <ux-tab id="tab-id-1" label="Recent" icon="phone" tab-panel-id="tab-panel-id-1"></ux-tab>
  <ux-tab id="tab-id-2" label="Favourites" icon="heart" tab-panel-id="tab-panel-id-2"></ux-tab>
  <ux-tab id="tab-id-3" label="Nearby" icon="location" tab-panel-id="tab-panel-id-3"></ux-tab>
  <ux-tab-panel id="tab-panel-id-1" >
    <div>This is the content inside the Recent tab</div>
  </ux-tab-panel>
  <ux-tab-panel id="tab-panel-id-2" >
    <div>This is the content inside the Favourites tab</div>
  </ux-tab-panel>
  <ux-tab-panel id="tab-panel-id-3" >
    <div>This is the content inside the Nearby tab</div>
  </ux-tab-panel>
</ux-tabs>

Thoughts???

[stuartbale]

And this link could be useful, so we 'align' with the Material Design Web component: https://material.io/develop/web/components/tabs/tab-bar/

[zewa666]

I definitely like the idea that label and icon are overriden if contents are provided. As for the second example the ref could be named panel-id instead of tab-panel-id. It's clear from the context that it's a tab and it would save some keystrokes.

[stuartbale]

@bigopon @zewa666 @MaximBalaganskiy - I have the beginnings of the Tabs working. Here is the html to set it up:

    <ux-tabs>
      <ux-tab id="tab-id-1" label="Schedule" icon="schedule" panel-id="panel-id-1"></ux-tab>
      <ux-tab id="tab-id-2" label="Search" icon="search" panel-id="panel-id-2"></ux-tab>
      <ux-tab-panel id="panel-id-1">
        <div>This is in the SCHEDULE panel.</div>
      </ux-tab-panel>
      <ux-tab-panel id="panel-id-2">
        <div>This is in the SEARCH panel.</div>     
      </ux-tab-panel>
    </ux-tabs>

But I am stuck trying to position the active tab panel so that it fills the container underneath the row of tabs. Currently it puts the tab panel to the right:

I'm wondering if you can offer any help on how to make it appear underneath?

Here's a link to my repo if that helps: https://github.com/stuartbale/aurelia-ux Thanks,

Stuart

[stuartbale]

OK - I think I know what is happening. The container is set up to use FlexBox, so I need to simply control each section using the appropriate flex styling. I wish I knew how to do that!

[MaximBalaganskiy]

Have you looked at the tabs example here https://aurelia.io/docs/templating/custom-elements#decorators-for-customizing-aurelia-custom-element-processing ?

[stuartbale]

Thanks @MaximBalaganskiy - that looks quite useful. I'll have a good look at that and see how I can apply it here.

[stuartbale]

For those that are following this issue, here is a gif of where I am up to with the Tabs. Sorry for the low-quality of the gif.