<commit_before>---
layout: page
title: Tabs
---

<div class="demo-container no-overflow">
	<rg-tabs></rg-tabs>

	<h2>Use</h2>

	<h3>
		HTML
	</h3>

	<pre><code class="html">&lt;rg-tabs>&lt;/rg-tabs></code></pre>

	<h3>
		JavaScript
	</h3>

	<pre><code class="javascript">var tags = riot.mount('rg-tabs', {
  tabs: {
  type: 'default|brand|info|success|warning|error',
  tabs: [{
    heading: 'Tab one',
    text: 'This is tab one'
  }, {
    heading: 'Tab two',
    text: 'This is tab two',
    active: true
  }, {
    heading: 'Disabled tab',
    text: 'This is disabled tab',
    disabled: true
  }, {
    heading: 'Tab three',
    include: 'tab.html'
  }]
  }
})
tags[0].on('open', function (tab) { console.log('open', tab) })
       .on('loading', function (tab) { console.log('loading', tab) })
       .on('loaded', function (tab) { console.log('loaded', tab) })</code></pre>
</div>

<script>
	var tags = riot.mount('rg-tabs', {
		tabs: {
			type: 'brand',
			tabs: [{
				heading: 'Tab one',
				text: 'This is tab one',
				type: 'warning'
			}, {
				heading: 'Tab two',
				text: 'This is tab two',
				active: true
			}, {
				heading: 'Disabled tab',
				text: 'This is disabled tab',
				disabled: true
			}, {
				heading: 'Tab three',
				type: 'success',
				include: 'tab.html'
			}]
		}
	})
</script><commit_msg>Changed to colours to match Blaze 2<commit_after>---
layout: page
title: Tabs
---

<div class="demo-container no-overflow">
	<rg-tabs></rg-tabs>

	<h2>Use</h2>

	<h3>
		HTML
	</h3>

	<pre><code class="html">&lt;rg-tabs>&lt;/rg-tabs></code></pre>

	<h3>
		JavaScript
	</h3>

	<pre><code class="javascript">var tags = riot.mount('rg-tabs', {
  tabs: {
  type: 'default|brand|info|success|warning|error',
  tabs: [{
    heading: 'Tab one',
    text: 'This is tab one'
  }, {
    heading: 'Tab two',
    text: 'This is tab two',
    active: true
  }, {
    heading: 'Disabled tab',
    text: 'This is disabled tab',
    disabled: true
  }, {
    heading: 'Tab three',
    include: 'tab.html'
  }]
  }
})
tags[0].on('open', function (tab) { console.log('open', tab) })
       .on('loading', function (tab) { console.log('loading', tab) })
       .on('loaded', function (tab) { console.log('loaded', tab) })</code></pre>
</div>

<script>
	var tags = riot.mount('rg-tabs', {
		tabs: {
			type: 'success',
			tabs: [{
				heading: 'Tab one',
				text: 'This is tab one'
			}, {
				heading: 'Tab two',
				text: 'This is tab two',
				active: true
			}, {
				heading: 'Disabled tab',
				text: 'This is disabled tab',
				disabled: true
			}, {
				heading: 'Tab three',
				include: 'tab.html'
			}]
		}
	})
</script>
{'fraction_non_alphanumeric': 0.20454545454545456, 'fraction_numerical': 0.005681818181818182, 'mean_word_length': 2.810966810966811, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5962308', 'n_tokens_mistral': 1096, 'n_tokens_neox': 974, 'n_words': 245}