New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementing a tabbed UI component #4771

Closed
senthilp opened this Issue Aug 30, 2016 · 17 comments

Comments

@senthilp

senthilp commented Aug 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Aug 30, 2016

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

Collaborator

ericlindley-g commented Aug 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Aug 30, 2016

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

Collaborator

ericlindley-g commented Aug 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Aug 30, 2016

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 )

Member

aghassemi commented Aug 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@dvoytenko

dvoytenko Sep 7, 2016

Collaborator

I definitely think we should just add amp-tabs.

Collaborator

dvoytenko commented Sep 7, 2016

I definitely think we should just add amp-tabs.

@senthilp

This comment has been minimized.

Show comment
Hide comment
@senthilp

senthilp Sep 28, 2016

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

senthilp commented Sep 28, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Sep 28, 2016

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.

Collaborator

ericlindley-g commented Sep 28, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@senthilp

senthilp 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 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

This comment has been minimized.

Show comment
Hide comment
@senthilp

senthilp Oct 6, 2016

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

senthilp commented Oct 6, 2016

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

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Oct 13, 2016

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.

Collaborator

ericlindley-g commented Oct 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rudygalfi

rudygalfi Dec 20, 2016

Contributor

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

@chenshay is starting to take a look at this.

Contributor

rudygalfi commented Dec 20, 2016

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

@chenshay is starting to take a look at this.

@joshcp

This comment has been minimized.

Show comment
Hide comment
@joshcp

joshcp Jan 10, 2017

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

Thanks @rudygalfi and @chenshay

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Jan 10, 2017

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!

Collaborator

ericlindley-g commented Jan 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@jalajc

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

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

This comment has been minimized.

Show comment
Hide comment
@joshcp

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

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.

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Jan 23, 2017

Collaborator

/cc @abeck000

Collaborator

ericlindley-g commented Jan 23, 2017

/cc @abeck000

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jan 27, 2017

Member

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

Member

aghassemi commented Jan 27, 2017

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

@aghassemi aghassemi closed this Jan 27, 2017

@rudygalfi

This comment has been minimized.

Show comment
Hide comment
@rudygalfi

rudygalfi Jan 27, 2017

Contributor

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.

Contributor

rudygalfi commented Jan 27, 2017

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.

@aghassemi aghassemi removed this from Done in Claimed by Community Aug 16, 2017

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