ux-tabs #83

manuel-guilbault · 2017-06-29T09:35:56Z

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

General Todo

For Material design:

For iOS design:

basic style

manuel-guilbault · 2017-06-29T09:47:35Z

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

linked to aurelia#83

* feat(ux-tabs): create ux-tabs and ux-tab elements linked to #83 * refactor(ux-tabs): Refactor how ux-tabs selection transition is animated

xenoterracide · 2020-02-22T04:08:17Z

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

bigopon · 2020-02-22T10:09:46Z

nagging @ben-girardet 😏

ben-girardet · 2020-02-22T19:37:47Z

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

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)
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 · 2020-02-23T03:19:24Z

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 · 2020-02-24T21:57:32Z

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 · 2020-06-15T01:08:58Z

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 · 2020-06-15T01:53:37Z

@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 ux-tabs #83 (comment)):

<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 · 2020-06-15T02:09:20Z

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 · 2020-06-15T04:24:54Z

@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 · 2020-06-15T04:38:57Z

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 · 2020-06-15T05:39:40Z

@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 · 2020-06-15T05:55:31Z

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 · 2020-06-15T21:59:15Z

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 · 2020-06-16T00:01:58Z

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 · 2020-06-17T08:51:04Z

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 · 2020-06-25T04:51:40Z

@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 · 2020-06-25T23:24:03Z

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 · 2020-06-25T23:43:26Z

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

stuartbale · 2020-06-25T23:48:46Z

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

stuartbale · 2020-07-03T04:31:23Z

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.

manuel-guilbault added a commit to manuel-guilbault/aurelia-ux that referenced this issue Jun 29, 2017

feat(ux-tabs): create ux-tabs and ux-tab elements

17c2992

linked to aurelia#83

manuel-guilbault mentioned this issue Jun 29, 2017

feat(ux-tabs): create ux-tabs and ux-tab elements #84

Merged

EisenbergEffect added the feature label Jul 2, 2017

manuel-guilbault added a commit to manuel-guilbault/aurelia-ux that referenced this issue Jul 24, 2017

feat(ux-tabs): create ux-tabs and ux-tab elements

bf0d1d6

linked to aurelia#83

manuel-guilbault added a commit to manuel-guilbault/aurelia-ux that referenced this issue Jul 28, 2017

feat(ux-tabs): create ux-tabs and ux-tab elements

48e4b90

linked to aurelia#83

serifine pushed a commit that referenced this issue Aug 1, 2017

feat(ux-tabs): create ux-tabs and ux-tab elements (#84)

e1fa8c6

* feat(ux-tabs): create ux-tabs and ux-tab elements linked to #83 * refactor(ux-tabs): Refactor how ux-tabs selection transition is animated

serifine closed this as completed Sep 1, 2017

serifine reopened this Oct 6, 2017

serifine added new component and removed feature labels Oct 6, 2017

serifine added the help wanted label Nov 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ux-tabs #83

ux-tabs #83

manuel-guilbault commented Jun 29, 2017 •

edited by serifine

Loading

manuel-guilbault commented Jun 29, 2017 •

edited

Loading

xenoterracide commented Feb 22, 2020 •

edited

Loading

bigopon commented Feb 22, 2020

ben-girardet commented Feb 22, 2020

xenoterracide commented Feb 23, 2020 •

edited

Loading

ben-girardet commented Feb 24, 2020

stuartbale commented Jun 15, 2020

bigopon commented Jun 15, 2020

stuartbale commented Jun 15, 2020

zewa666 commented Jun 15, 2020

stuartbale commented Jun 15, 2020 •

edited

Loading

bigopon commented Jun 15, 2020

ben-girardet commented Jun 15, 2020

stuartbale commented Jun 15, 2020 •

edited

Loading

stuartbale commented Jun 16, 2020

zewa666 commented Jun 17, 2020

stuartbale commented Jun 25, 2020

stuartbale commented Jun 25, 2020 •

edited

Loading

MaximBalaganskiy commented Jun 25, 2020

stuartbale commented Jun 25, 2020

stuartbale commented Jul 3, 2020 •

edited

Loading

ux-tabs #83

ux-tabs #83

Comments

manuel-guilbault commented Jun 29, 2017 • edited by serifine Loading

General Todo

manuel-guilbault commented Jun 29, 2017 • edited Loading

xenoterracide commented Feb 22, 2020 • edited Loading

bigopon commented Feb 22, 2020

ben-girardet commented Feb 22, 2020

xenoterracide commented Feb 23, 2020 • edited Loading

ben-girardet commented Feb 24, 2020

stuartbale commented Jun 15, 2020

bigopon commented Jun 15, 2020

stuartbale commented Jun 15, 2020

zewa666 commented Jun 15, 2020

stuartbale commented Jun 15, 2020 • edited Loading

bigopon commented Jun 15, 2020

ben-girardet commented Jun 15, 2020

stuartbale commented Jun 15, 2020 • edited Loading

stuartbale commented Jun 16, 2020

zewa666 commented Jun 17, 2020

stuartbale commented Jun 25, 2020

stuartbale commented Jun 25, 2020 • edited Loading

MaximBalaganskiy commented Jun 25, 2020

stuartbale commented Jun 25, 2020

stuartbale commented Jul 3, 2020 • edited Loading

manuel-guilbault commented Jun 29, 2017 •

edited by serifine

Loading

manuel-guilbault commented Jun 29, 2017 •

edited

Loading

xenoterracide commented Feb 22, 2020 •

edited

Loading

xenoterracide commented Feb 23, 2020 •

edited

Loading

stuartbale commented Jun 15, 2020 •

edited

Loading

stuartbale commented Jun 15, 2020 •

edited

Loading

stuartbale commented Jun 25, 2020 •

edited

Loading

stuartbale commented Jul 3, 2020 •

edited

Loading