[go: nahoru, domu]

Skip to content
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
Closed

Implementing a tabbed UI component #4771

senthilp opened this issue Aug 30, 2016 · 17 comments

Comments

@senthilp
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

I definitely think we should just add amp-tabs.

@senthilp
Copy link
Author

@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
Copy link
Contributor

@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
Copy link
Author
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
Copy link
Author
senthilp commented Oct 6, 2016

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

@ericlindley-g
Copy link
Contributor

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
Copy link
Contributor

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

@chenshay is starting to take a look at this.

@joshcp
Copy link
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
Copy link
Contributor

@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
Copy link
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
Copy link
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
Copy link
Contributor

/cc @abeck000

@aghassemi
Copy link
Contributor

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

@rudygalfi
Copy link
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.

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