Skip to content

Instantly share code, notes, and snippets.

@Stephanevg

Stephanevg/tabs.ps1

Created July 3, 2019 08:25
Show Gist options
  • Save Stephanevg/7c7b5975f110d61133bfc74b4ddb7e13 to your computer and use it in GitHub Desktop.
Save Stephanevg/7c7b5975f110d61133bfc74b4ddb7e13 to your computer and use it in GitHub Desktop.
Download ZIP
create tabs with PSHTML and bootstrap
Raw
tabs.ps1
<#
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class
with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
</div>
</div>
</body>
</html>
<!--
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
-->
#>
#Import-MOdule C:\Users\taavast3\OneDrive\Repo\Projects\OpenSource\PSHTML\PSHTML\PSHTML.psd1
$html = html {
head {
Write-PSHTMLAsset -Name Bootstrap -Type Style
Write-PSHTMLAsset -Name Jquery
write-pshtmlAsset -Name BootStrap -Type Script
}
Body {
div -Class "Jumbotron bg-dark text-white"{
"Main header"
}
div -class "container"{
nav -Content {
div -Class "nav nav-tabs" -Id "nav-tab" -Attributes @{'role'='tablist'} -Content {
a -Class "nav-item nav-link active" -id "nav-home-tab" -href "#nav-home" -Attributes @{"aria-controls"="nav-home";'data-toggle'='tab';"aria-selected"='true';'role'='tag'} -Content "Home"
a -Class "nav-item nav-link" -id "nav-failed-tab" -href "#nav-failed" -Attributes @{'data-toggle'='tab';"aria-selected"='true';'role'='tag'} -Content "Failed updates"
a -Class "nav-item nav-link" -id "nav-hisotry-tab" -href "#nav-history" -Attributes @{'data-toggle'='tab';"aria-selected"='true';'role'='tag'} -Content "Hisotrical updates"
}
}
div -Content {
div -Class "tab-pane fade show active" -id "nav-home" -Attributes @{"role"="tabpanel";"aria-labelledby"="nav-home-tab"} -Content {
"This is home page"
}
div -Class "tab-pane fade" -id "nav-failed" -Attributes @{"role"="tabpanel";"aria-labelledby"="nav-failed-tab"} -Content {
"This is failed updates"
}
div -Class "tab-pane fade" -id "nav-history" -Attributes @{"role"="tabpanel";"aria-labelledby"="nav-history-tab"} -Content {
"This is historical updates"
}
} -Class "tab-content" -Id "nav-tabcontent"
}
}
}
$File = ".\nav.html"
out-file -inputobject $html -filePath $File -encoding utf8
start $File
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment