Skip to content

Commit 4642865

Browse files
wesleycolewesleycole
committed
adding all of the content for the tab component
1 parent b807e03 commit 4642865

14 files changed

+446
-7
lines changed

‎_component/tabs/component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="Tabs">
2+
3+
<nav class="Tabs-nav">
4+
<a href="#" class="Tabs-link is-active">Tab 1</a>
5+
<a href="#" class="Tabs-link">Tab 2</a>
6+
</nav><!-- //.Tabs-nav -->
7+
8+
<div class="Tab is-active">
9+
Tab 1 Content
10+
</div><!-- //.Tab -->
11+
12+
<div class="Tab">
13+
Tab 2 Content
14+
</div><!-- //.Tab -->
15+
16+
</div><!-- //.Tabs -->

‎_component/tabs/component.php

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
$nav_count = 0;
3+
$tab_count = 0;
4+
?>
5+
<?php if ( have_rows( 'tabs' ) ): ?>
6+
7+
<div class="Tabs">
8+
9+
<?php while( have_rows( 'tabs' ) ): the_row(); ?>
10+
<nav class="Tabs-nav">
11+
<a href="#" class="Tabs-link <?php echo ( $nav_count == 0 ? 'is-active': '' ); ?>"><?php the_sub_field( 'tab_title' ); ?></a>
12+
</nav><!-- //.Tabs-nav -->
13+
<?php $nav_count++; ?>
14+
<?php endwhile; ?>
15+
16+
<?php while( have_rows( 'tabs' ) ): the_row(); ?>
17+
<div class="Tab <?php echo ( $tab_count == 0 ? 'is-active': '' ); ?>">
18+
<?php the_sub_field( 'tab_content' ); ?>
19+
</div><!-- //.Tab -->
20+
<?php $tab_count++; ?>
21+
<?php endwhile; ?>
22+
23+
</div><!-- //.Tabs -->
24+
25+
<?php endif; ?>

‎_component/tabs/component.twig

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% raw %}<div class="Tabs">
2+
3+
<nav class="Tabs-nav">
4+
5+
{% for tab in post.get_field( 'tabs' ) %}
6+
<a href="#" class="Tabs-link {{ (loop.first) ? 'is-active' : '' }}">{{tab.tab_title}}</a>
7+
{% endfor %}
8+
9+
</nav><!-- //.Tabs-nav -->
10+
11+
{% for tab in post.get_field( 'tabs' ) %}
12+
<div class="Tab {{ (loop.first) ? 'is-active' : '' }}">
13+
{{tab.tab_content}}
14+
</div><!-- //.Tab -->
15+
{% endfor %}
16+
17+
</div><!-- //.Tabs -->{% endraw %}

‎_component/tabs/css/component.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Tabs-link {
2+
background: #f9f9f9;
3+
color: #ccc;
4+
display: inline-block;
5+
padding: 10px 15px;
6+
text-decoration: none;
7+
transition: all 0.3s ease-in-out;
8+
9+
&:hover,
10+
&.is-active {
11+
background: #eee;
12+
color: #222;
13+
}
14+
}
15+
16+
.Tab {
17+
border: 2px solid #eee;
18+
display: none;
19+
padding: 30px 15px;
20+
21+
&.is-active {
22+
display: block;
23+
}
24+
}

‎_component/tabs/example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
<nav class="Tabs-nav">
1212
<a href="#" class="Tabs-link is-active">Tab 1</a>
1313
<a href="#" class="Tabs-link">Tab 2</a>
14-
</nav>
14+
</nav><!-- //.Tabs-nav -->
1515
<div class="Tab is-active">
1616
Tab 1 Content
17-
</div>
17+
</div><!-- //.Tab -->
1818
<div class="Tab">
1919
Tab 2 Content
20-
</div>
20+
</div><!-- //.Tab -->
2121
</div><!-- //.Tabs -->
2222

2323
<script src="js/component.js"></script>

‎_component/tabs/index.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,39 @@ category: ui
77
iframe_height: medium
88
---
99

10-
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
10+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
11+
12+
## Advanced Custom Fields
13+
If working with ACF, you will want to utilize the following fields:
14+
15+
**Repeater Field: `tabs`**
16+
17+
Fields:
18+
* Text: `tab_title`
19+
* WYSIWYG: `tab_content`
20+
21+
## Markup
22+
23+
{% include partials/tabs.md %}
24+
25+
## Styles
26+
27+
### CSS
28+
```css
29+
{% include_relative css/component.css %}
30+
```
31+
32+
### Sass
33+
```scss
34+
{% include_relative css/component.scss %}
35+
```
36+
37+
## Javascript
38+
### Plugin
39+
```js
40+
{% include_relative js/component.js %}
41+
```
42+
### Usage
43+
```js
44+
{% include_relative js/component-usage.js %}
45+
```

‎_component/tabs/js/component.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@
2525
// If we don't have tabs, jump out
2626
if (!tabs) return;
2727

28+
// Click handler function to go to tab on click
2829
function tabClickHandler(link, index) {
2930
link.addEventListener('click', function(e) {
3031
e.preventDefault();
3132
goToTab(index);
3233
});
3334
}
3435

36+
// Add appropriate classes based on the current index
3537
function goToTab(index) {
3638
if (index !== activeIndex && index >= 0 && index <= tabLinks.length) {
3739
tabLinks[activeIndex].classList.remove('is-active');
@@ -54,6 +56,7 @@
5456

5557
}
5658

59+
// Loop through the links and set the clickhandler
5760
Array.prototype.map.call(tabLinks, function(value, index) {
5861
var link = value;
5962
tabClickHandler(link, index);
@@ -64,6 +67,7 @@
6467
}
6568
});
6669

70+
// Loop through containers and add appropriate attributes
6771
Array.prototype.map.call(tabContainers, function(value, index) {
6872
var content = value;
6973

‎_site/component/tabs/component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="Tabs">
2+
3+
<nav class="Tabs-nav">
4+
<a href="#" class="Tabs-link is-active">Tab 1</a>
5+
<a href="#" class="Tabs-link">Tab 2</a>
6+
</nav><!-- //.Tabs-nav -->
7+
8+
<div class="Tab is-active">
9+
Tab 1 Content
10+
</div><!-- //.Tab -->
11+
12+
<div class="Tab">
13+
Tab 2 Content
14+
</div><!-- //.Tab -->
15+
16+
</div><!-- //.Tabs -->

‎_site/component/tabs/component.php

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
$nav_count = 0;
3+
$tab_count = 0;
4+
?>
5+
<?php if ( have_rows( 'tabs' ) ): ?>
6+
7+
<div class="Tabs">
8+
9+
<?php while( have_rows( 'tabs' ) ): the_row(); ?>
10+
<nav class="Tabs-nav">
11+
<a href="#" class="Tabs-link <?php echo ( $nav_count == 0 ? 'is-active': '' ); ?>"><?php the_sub_field( 'tab_title' ); ?></a>
12+
</nav><!-- //.Tabs-nav -->
13+
<?php $nav_count++; ?>
14+
<?php endwhile; ?>
15+
16+
<?php while( have_rows( 'tabs' ) ): the_row(); ?>
17+
<div class="Tab <?php echo ( $tab_count == 0 ? 'is-active': '' ); ?>">
18+
<?php the_sub_field( 'tab_content' ); ?>
19+
</div><!-- //.Tab -->
20+
<?php $tab_count++; ?>
21+
<?php endwhile; ?>
22+
23+
</div><!-- //.Tabs -->
24+
25+
<?php endif; ?>

‎_site/component/tabs/component.twig

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% raw %}<div class="Tabs">
2+
3+
<nav class="Tabs-nav">
4+
5+
{% for tab in post.get_field( 'tabs' ) %}
6+
<a href="#" class="Tabs-link {{ (loop.first) ? 'is-active' : '' }}">{{tab.tab_title}}</a>
7+
{% endfor %}
8+
9+
</nav><!-- //.Tabs-nav -->
10+
11+
{% for tab in post.get_field( 'tabs' ) %}
12+
<div class="Tab {{ (loop.first) ? 'is-active' : '' }}">
13+
{{tab.tab_content}}
14+
</div><!-- //.Tab -->
15+
{% endfor %}
16+
17+
</div><!-- //.Tabs -->{% endraw %}

‎_site/component/tabs/css/component.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Tabs-link {
2+
background: #f9f9f9;
3+
color: #ccc;
4+
display: inline-block;
5+
padding: 10px 15px;
6+
text-decoration: none;
7+
transition: all 0.3s ease-in-out;
8+
9+
&:hover,
10+
&.is-active {
11+
background: #eee;
12+
color: #222;
13+
}
14+
}
15+
16+
.Tab {
17+
border: 2px solid #eee;
18+
display: none;
19+
padding: 30px 15px;
20+
21+
&.is-active {
22+
display: block;
23+
}
24+
}

‎_site/component/tabs/example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
<nav class="Tabs-nav">
1212
<a href="#" class="Tabs-link is-active">Tab 1</a>
1313
<a href="#" class="Tabs-link">Tab 2</a>
14-
</nav>
14+
</nav><!-- //.Tabs-nav -->
1515
<div class="Tab is-active">
1616
Tab 1 Content
17-
</div>
17+
</div><!-- //.Tab -->
1818
<div class="Tab">
1919
Tab 2 Content
20-
</div>
20+
</div><!-- //.Tab -->
2121
</div><!-- //.Tabs -->
2222

2323
<script src="js/component.js"></script>

0 commit comments

Comments
 (0)