• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Traditional Scrollable Tabs

Contributor ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

I have been trying to get this interaction workng and  I cannot get past the active/disabled states to work accross all tabs, I am trying to recreate the trational tab interface in aterial design as shouwn on this page inder "Interactive Demo" the scrollable example:

 

https://material.io/components/tabs

 

Is there a tutorial I can follow that explains it?

 

Views

309

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

No need for the fancy micro interactions of the indicator and the background

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

Nevermind, I figured it out on my own. Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 17, 2023 Oct 17, 2023

Copy link to clipboard

Copied

Would you mind sharing how you solved this?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 17, 2023 Oct 17, 2023

Copy link to clipboard

Copied

@juliejacob My brain is not young anymore and I cannot remember the reference. Perhaps if oyu explain a little what you are trying to do I can shed some light? Thanks.

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 17, 2023 Oct 17, 2023

Copy link to clipboard

Copied

Since XD does not support component to component communication, I suspect that the author had one component that included everything; the tabs and the tab content. Or they may have created a collection of artboards for each tab and the flow from each of the possible previous tabs. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 18, 2023 Oct 18, 2023

Copy link to clipboard

Copied

LATEST

Hello, I see @Syeds already resolved it but since I came across the topic, thought @juliejacob and other designers might benefit from the solution, as @Chris W. Griffith pointed out, component to component interactions are not possible, the easiest way of creating a similar structure/prototype is using non-components for inner parts and making the whole thing a component, I had made a tutorial about it (including a link to XD file): https://www.youtube.com/watch?v=MWr4xgvQx18 recently made a similar one for Figma: https://youtu.be/Jv7tCg484C8?si=MbpEIUHJ510H5QwL (I know, also shameless plug but still can be helpful for some people :)) Happy designing!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines