what2watch/scss/plugins/tabs/readme.md
2023-09-21 17:43:18 -07:00

61 lines
1.5 KiB
Markdown

## Tabs
> Original: http://jsfiddle.net/franciscop/wwfby2y8/
A simple tab system inspired by [Components CSS Tabs](https://www.felipefialho.com/css-components/#component-tab).
```html
<div class="tabs three">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Forest</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Lake</label>
<input id='tab-3' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-3">Balloon</label>
<div class="row">
<div>
<img src="img/forest.jpg">
</div>
<div>
<img src="img/lake.jpg">
</div>
<div>
<img src="img/balloon.jpg">
</div>
</div>
</div>
```
### Gallery example
Create a gallery super-easy with thumbnails as tabs:
```html
<div class="tabs four">
<input id="tabC-1" type='radio' name='tabGroupC' checked >
<input id="tabC-2" type='radio' name='tabGroupC'>
<input id="tabC-3" type='radio' name='tabGroupC'>
<input id="tabC-4" type='radio' name='tabGroupC'>
<div class='row'>
<div>
<img src="img/forest.jpg">
</div>
<div>
<img src="img/lake.jpg">
</div>
<div>
<img src="img/halong.jpg">
</div>
<div>
<img src="img/balloon.jpg">
</div>
</div>
<label for="tabC-1"><img src="img/forest.jpg"></label>
<label for="tabC-2"><img src="img/lake.jpg"></label>
<label for="tabC-3"><img src="img/halong.jpg"></label>
<label for="tabC-4"><img src="img/balloon.jpg"></label>
</div>
```