Skip to content

Support multiple tab components - #207

Merged
rhyneav merged 1 commit into
papercss:masterfrom
Bajena:patch-1
Aug 1, 2020
Merged

rhyneav merged 1 commit into
papercss:masterfrom
Bajena:patch-1

Conversation

@Bajena

@Bajena Bajena commented Jul 30, 2020 •

Copy link
Copy Markdown
Contributor

Hi, first of all thank you for your cool framework. I really have fun working with it :)

Brief description

I'm building an app for building flashcard sets in which I decided to use tabs component for switching between different languages. However I've noticed that current version assumes that there'll only be a single tab component on the page.

I overcame it in my project by changing = (attribute equals) selector to $= (attribute ends with) selector.
This allows me to generate different tab IDs for different flashcards, like this:

<% tab_name = "tabs_#{word.id}" %>
<% tab1_id = "#{tab_name}_tab1" %>
<% tab2_id = "#{tab_name}_tab2" %>

<div class="xs-12 sm-6 md-4 lg-3 col align-top flashcard-column">
  <div class="card">
    <div class="card-body">
      <div class="row tabs">
        <input id="<%= tab1_id %>" type="radio" name="<%= tab_name %>" checked>
        <label for="<%= tab1_id %>">Question</label>

        <input id="<%= tab2_id %>" type="radio" name="<%= tab_name %>">
        <label for="<%= tab2_id %>">Answer</label>

        <div id="<%= tab_name %>_content1" class="content">
          <h4 class="card-title flashcard-title"><%= word.question %></h4>
          <% if word.question_example %>
            <p class="card-text flashcard-example"><%= word.question_example %></p>
          <% end %>
        </div>
        <div id="<%= tab_name %>_content2" class="content">
          <h4 class="card-title flashcard-title"><%= word.answer %></h4>
          <% if word.answer_example %>
            <p class="card-text flashcard-example"><%= word.answer_example %></p>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

Hope someone finds it useful

...

Developer Certificate of Origin

Sample pictures

image

Further details

Here's a selector compatibility page: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Hi, first of all thank you for your cool framework. I really have fun working with it :)

I'm building an app for building flashcard sets in which I decided to use tabs component for switching between different languages. However I've noticed that current version assumes that there'll only be a single tab component on the page.

I overcame it in my project by changing `=` (attribute equals) selector to `$=` (attribute ends with) selector. 
This allows me to generate different tab IDs for different flashcards, like this:
```ruby
<% tab_name = "tabs_#{word.id}" %>
<% tab1_id = "#{tab_name}_tab1" %>
<% tab2_id = "#{tab_name}_tab2" %>

<div class="xs-12 sm-6 md-4 lg-3 col align-top flashcard-column">
  <div class="card">
    <div class="card-body">
      <div class="row tabs">
        <input id="<%= tab1_id %>" type="radio" name="<%= tab_name %>" checked>
        <label for="<%= tab1_id %>">Question</label>

        <input id="<%= tab2_id %>" type="radio" name="<%= tab_name %>">
        <label for="<%= tab2_id %>">Answer</label>

        <div id="<%= tab_name %>_content1" class="content">
          <h4 class="card-title flashcard-title"><%= word.question %></h4>
          <% if word.question_example %>
            <p class="card-text flashcard-example"><%= word.question_example %></p>
          <% end %>
        </div>
        <div id="<%= tab_name %>_content2" class="content">
          <h4 class="card-title flashcard-title"><%= word.answer %></h4>
          <% if word.answer_example %>
            <p class="card-text flashcard-example"><%= word.answer_example %></p>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
```

Here's a video to present how it works after the change:
https://www.loom.com/share/6de1e443314f44f49c7b91e9b5875c93

Hope someone finds it useful
@rhyneav
rhyneav self-requested a review July 30, 2020 20:34

@rhyneav rhyneav left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! I'll get it merged in. And please send me a link when you've shipped your app, I'd love to see it.

@rhyneav
rhyneav merged commit 837c432 into papercss:master Aug 1, 2020
@Bajena

Bajena commented Oct 17, 2020

Copy link
Copy Markdown
Contributor Author

@rhyneav I've shipped an initial version! It can be found at https://flashcard-genius.com. Thanks again for your great library :)

@rhyneav

rhyneav commented Oct 17, 2020

Copy link
Copy Markdown
Member

That's awesome, well done! Congrats on shipping!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants