Quick Gist example for tabset

settings.css

/** Add Tab support **/
nav { 
	margin:10px 0px;
}
nav ul {
	display: flex;
	margin:0px;
	padding:0px;
	border-bottom:solid 1px #5B5E61;
}
nav ul li {
	list-style: none;
	flex:1;
	text-align: center;
	color:rgba(255,255,255,0.6);
	transition: box-shadow 0.3s;
	cursor: pointer;
	min-height: 32px;
}

nav ul li.active {
	color:#fff;
	box-shadow: inset 0px -2px 0px 0px rgb(255 255 255);
	font-weight: bold;
}

nav ul li:hover {
	color:#fff;
	box-shadow: inset 0px -2px 0px 0px rgb(255 255 255);
}

article { 
	display: none;
}

article.active {
	display: block;
}
/** xAdd Tab support **/

settings.html

<!-- Nav tabset -->
<nav>
  <ul>
    <li class="active" data-bind="css: { active: (activeTab() === 'settings')}, click: () => {updateTab('settings')}">Custom</li>
    <li data-bind="css: { active: (activeTab() === 'advanced')}, click: () => {updateTab('advanced')}">Advanced</li>
  </ul>
</nav>
<!-- xNav tabset -->

settings.js.html

<script>
/**
* updateHeight
* auto update settings panel height
**/
function updateHeight() {
  console.log('[updateHeight]')
  var body = document.body,
    html = document.documentElement;

  if (SitesSDK.setHeight) {
    SitesSDK.setHeight(Math.max(
      body.scrollHeight,
      body.offsetHeight,
      html.clientHeight,
      html.scrollHeight,
      html.offsetHeight));
  } else {
    /*
    //Doesn't work with settings 
    SitesSDK.setProperty('height', Math.max(
      body.scrollHeight,
      body.offsetHeight,
      html.clientHeight,
      html.scrollHeight,
      html.offsetHeight));*/

    //get height of window and parent iframe
    const updateHeight = `${Math.max(body.offsetHeight)}px`;
    const settingsIframe = window.parent.document.querySelector('iframe.scs-component-settings');

    //update heights
    settingsIframe.height = updateHeight;
    settingsIframe.parentElement.style.maxHeight = updateHeight;
  }
}

// define the viewModel object
var SettingsViewModel = function () {
	/**
	 * updateTab
	 * Tggles display of tab and content panel
	 **/
	self.updateTab = function(tab) {
		console.log('[updateTab]',tab);

		//activate selected tab
		self.activeTab(tab); 
		updateHeight();
	}
};
</script>