Knowledge Drop

Tabbed Dashboard using Liquid HTML

  • 15 June 2021
  • 0 replies
  • 76 views

Userlevel 3

Last tested: Mar 1, 2021

 

#This would go in a text tile on your dashboard

#This html lets you break up larger dashboards while keeping content in one place, from your end user's perspective

#The end user sees a set of clickable 'tabs' for your dashboard

<hr>

<div type="button" class="btn btn-primary btn-lg btn-block">Text goes here</div>

<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>

#Add as many new <a href ... lines as you like for more tabs!

 

A nicer example:

#This would go in a text tile on your dashboard

#This html lets you break up larger dashboards while keeping content in one place, from your end user's perspective

#The end user sees a set of clickable 'tabs' for your dashboard

<hr>

<div class="vis-single-value">

<div class="btn-group btn-group-sm">

<a type="button" class="btn btn-primary btn-lg btn-block">Text goes here</a>

<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>

#Add as many new <a href ... lines as you like for more tabs!

</div>

</div>

 

 

image.png

Even better example, works on dashboard-next:

<div style="border-bottom: solid 1px #4285F4;">

<nav style="font-size: 18px; padding: 5px 10px 0 10px; height: 60px">

<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid">

Button Text</a>

<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid2</a>

<a style="padding: 5px 15px; border-top: solid 1px #4285F4; border-left: solid 1px #4285F4; border-right: solid 1px #4285F4; border-radius: 5px 5px 0 0; float: left; line-height: 40px; font-weight: bold; background-color: #eaf1fe;" href="#">Button Text2</a>

</nav>

</div>

 

 

This content is subject to limited support.                

 

 


0 replies

Be the first to reply!

Reply