Amphtml: Implementing a tabbed UI component

[senthilp]

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

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]

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]

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]

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 )

[dvoytenko]

I definitely think we should just add amp-tabs.

[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]

@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]

@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]

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

[ericlindley-g]

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]

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

@chenshay is starting to take a look at this.

[joshcp]

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

Thanks @rudygalfi and @chenshay

[ericlindley-g]

@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]

@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]

@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.

[ericlindley-g]

/cc @abeck000

[aghassemi]

Closing for https://github.com/ampproject/amp-by-example/issues/559
We can do this now without a new component using amp-selector. Sample code to follow on amp-by-example

[rudygalfi]

One thing to keep in mind is if there is still any value in having a dedicated component even if this is technically possible by using other components (amp-selector in this case). We can evaluate based on the sample implementation.