Implementing a tabbed UI component #4771

Open
senthilp opened this Issue Aug 30, 2016 · 14 comments
@senthilp

Is there a way to achieve tabbed UI with the current set of AMP components? We have UI like below

image

The content for all the tabs are already available in the initial markup. In non-AMP scenario we will just use JS to hide/show the tabs. How should we do it for AMP? One option is to do a full page refresh when users click on a tab, the resulting page will have the corresponding tab opened. Is there a way to do it without a full page refresh?

@ericlindley-g ericlindley-g self-assigned this Aug 30, 2016
@ericlindley-g ericlindley-g added this to the Next milestone Aug 30, 2016
@ericlindley-g
Collaborator

Thanks @senthilp!

@aghassemi @dvoytenko

Some thoughts on a couple possible ways to go with this:

On one hand, it's almost like an amp-accordion but with multiple headers to toggle between body content (and may lend itself toward markup like this, as a standalone component).

On the other, it functions a little bit like a radio button, with a lasting state change based on click (and may either lend itself to an underlying implementation like this, or a more general approach built on this mechanic).

@ericlindley-g
Collaborator

I should add that at this time I'm not aware of a way to do this in AMP without a full-page refresh

@aghassemi
Member

Currently not possible AFAIK. However tabs are essentially an accordion with grouping functionality where only one item in the group is ever expanded.

Short term, we can consider adding grouping functionality to <amp-accordion> and authors can play with CSS to make the accordion look like tabs. Grouping functionality would be useful for <amp-accordion> anyway.

Long term, it may make sense to have a separate <amp-tabs> components ( which can use <amp-accordion> in its implementation )

@aghassemi aghassemi self-assigned this Aug 30, 2016
@dvoytenko
Collaborator

I definitely think we should just add amp-tabs.

@aghassemi aghassemi added the Starter label Sep 7, 2016
@senthilp

@dvoytenko @rudygalfi Is the decision made to create a new component amp-tabs or for now to enhance amp-accordion? Also has any work started on this or assigned to a particular release?

@ericlindley-g
Collaborator

@senthilp At this point, the most likely path is a new amp-tabs component. We've done some initial exploration for this approach, but it hasn't been assigned to a particular release yet.

@senthilp
senthilp commented Oct 4, 2016

@ericlindley-g is there a documentation on how to create a new component in AMP? We have made changes to an existing component but not created a new one. We want to evaluate the effort involved in creating amp-tabs and see if we can contribute.

@senthilp
senthilp commented Oct 6, 2016

We found the doc Building an AMP Extension. Will evaluate and update back.

@ericlindley-g
Collaborator

Hi @senthilp — I just wanted to follow up to make sure you have everything you need to evaluate an approach. We're happy to talk through some of our thoughts on this as needed.

@rudygalfi
Contributor

Hi @senthilp - I wanted to ask if you have any updates on this?

@chenshay is starting to take a look at this.

@chenshay chenshay was assigned by aghassemi Jan 3, 2017
@joshcp
joshcp commented Jan 10, 2017

Glad to see amp-tabs continue moving forward! Can I help in any way?

Thanks @rudygalfi and @chenshay

@ericlindley-g
Collaborator

@joshcp If you have any additional examples, use-cases, or needs for the feature to share, it can help guide the plan for what to support. Thanks!

@jalajc
jalajc commented Jan 13, 2017

@ericlindley-g,
ONE of the WAY, I have included this is combining amp-list-> the new feature of nested navigation to fetch data into tabs. Somehow it worked clean on pure css Tabs thing I have created.
However some learning:

  1. Possibility of automatic tabs creation based on number of objects in tab json file pulled through amp-list. Currently I specify 4 tabs manually and fill the tabs template manually. This template mapping can be absorbed within amp-tabs logic.
  2. With pure css approach(and no JavaScript) Creating tabs, and configuring css is absolutely declarative in a way that if you have to create 4 tabs, you declare four tabs(radio or checkbox) then four aria divs and define css to what happens when you click tab one (display of one of the aria div, and hiding of rest).
    Well through some config parameter in amp-tabs it can hide all that repeatative stuff. Say 'tabs-count'=4, along with other ui config such as tab=fixed width/response, active tab color, etc...
@joshcp
joshcp commented Jan 18, 2017

@ericlindley-g @chenshay it would be great to have broad support for different types of content. For example, the ability to include a form for submitting product reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment