@springbuck/flesh
Version:
Concept UI for Springbuck Apps.
1,104 lines (994 loc) • 90.8 kB
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/oceania.css">
<title>Flesh UI</title>
</head>
</head>
<body>
<div class="">
<!-- Header -->
<nav class="navbar navbar-light bg-info d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img src="../assets/flesh.png" width="30" height="30" class="d-inline-block align-top" alt="">
Flesh UI
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">oceania</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../../african/html/index.html">african</a>
<a class="dropdown-item" href="../../asian/html/index.html">asian</a>
<a class="dropdown-item" href="../../american/html/index.html">american</a>
<a class="dropdown-item" href="../../european/html/index.html">european</a>
<a class="dropdown-item" href="../../oceania/html/index.html">oceania</a>
<a class="dropdown-item" href="../../default/html/index.html">default</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="container row p-5 mx-5">
<div class="col-4">
<ul class="nav flex-column">
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#accordion-link">Accordion</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#action-link">Action</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#breadcrumbs-link">Breadcrumbs</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#card-link">Card</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#collector-link">Collector</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#docket-link">Docket</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#form-link">Form</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#list-link">List</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#modal-link">Modal</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#navigator-link">Navigator</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#notif-link">Notif</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#slider-link">Slider</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#story-link">Story</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#table-link">Table</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#tabs-link">Tabs</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#toolbar-link">Toolbar</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#tree-link">Tree</a>
</li>
<li class="nav-item d-flex justify-content-center">
<a class="nav-link" href="#wizard-link">Wizard</a>
</li>
</ul>
</div>
<div class="col-8">
<div class="component" id="accordion-link">
<h2 class="title">Accordion</h2>
<p class="desc blockquote">accordion view</p>
<div class="sample">
<ul class="nav nav-tabs" id="accordionTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="accordion-view-tab" data-toggle="tab"
href="#accordion-view" role="tab"
aria-controls="accordion-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="accordion-html-tab" data-toggle="tab"
href="#accordion-html" role="tab"
aria-controls="accordion-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="accordion-laravel-tab" data-toggle="tab"
href="#accordion-laravel" role="tab"
aria-controls="accordion-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="accordion-angular-tab" data-toggle="tab"
href="#accordion-angular" role="tab"
aria-controls="accordion-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="accordion-data-tab" data-toggle="tab"
href="#accordion-data" role="tab"
aria-controls="accordion-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="accordionTabContent">
<div class="tab-pane fade show active p-3"
id="accordion-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="accordion-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="accordion-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::accordion', ...accordionData)
</div>
</div>
<div class="tab-pane fade p-3" id="accordion-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-accordion [accordion] = 'accordionData'></wg-accordion>
</div>
</div>
<div class="tab-pane fade p-3" id="accordion-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="action-link">
<h2 class="title">Action</h2>
<p class="desc blockquote">actions view</p>
<div class="sample">
<ul class="nav nav-tabs" id="actionTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="action-view-tab" data-toggle="tab"
href="#action-view" role="tab"
aria-controls="action-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="action-html-tab" data-toggle="tab"
href="#action-html" role="tab"
aria-controls="action-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="action-laravel-tab" data-toggle="tab"
href="#action-laravel" role="tab"
aria-controls="action-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="action-angular-tab" data-toggle="tab"
href="#action-angular" role="tab"
aria-controls="action-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="action-data-tab" data-toggle="tab"
href="#action-data" role="tab"
aria-controls="action-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="actionTabContent">
<div class="tab-pane fade show active p-3"
id="action-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="action-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="action-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::action', ...actionData)
</div>
</div>
<div class="tab-pane fade p-3" id="action-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-action [action] = 'actionData'></wg-action>
</div>
</div>
<div class="tab-pane fade p-3" id="action-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"actionOne":"click me","actionTwo":"click me"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="breadcrumbs-link">
<h2 class="title">Breadcrumbs</h2>
<p class="desc blockquote">breadcrumbs view</p>
<div class="sample">
<ul class="nav nav-tabs" id="breadcrumbsTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="breadcrumbs-view-tab" data-toggle="tab"
href="#breadcrumbs-view" role="tab"
aria-controls="breadcrumbs-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="breadcrumbs-html-tab" data-toggle="tab"
href="#breadcrumbs-html" role="tab"
aria-controls="breadcrumbs-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="breadcrumbs-laravel-tab" data-toggle="tab"
href="#breadcrumbs-laravel" role="tab"
aria-controls="breadcrumbs-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="breadcrumbs-angular-tab" data-toggle="tab"
href="#breadcrumbs-angular" role="tab"
aria-controls="breadcrumbs-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="breadcrumbs-data-tab" data-toggle="tab"
href="#breadcrumbs-data" role="tab"
aria-controls="breadcrumbs-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="breadcrumbsTabContent">
<div class="tab-pane fade show active p-3"
id="breadcrumbs-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="breadcrumbs-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
<a href="index.html"><img src="images/logo.png" alt=""> click me </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="breadcrumbs-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::breadcrumbs', ...breadcrumbsData)
</div>
</div>
<div class="tab-pane fade p-3" id="breadcrumbs-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-breadcrumbs [breadcrumbs] = 'breadcrumbsData'></wg-breadcrumbs>
</div>
</div>
<div class="tab-pane fade p-3" id="breadcrumbs-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"actionOne":"click me","actionTwo":"click me","actionThree":"click me"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="card-link">
<h2 class="title">Card</h2>
<p class="desc blockquote">card view</p>
<div class="sample">
<ul class="nav nav-tabs" id="cardTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="card-view-tab" data-toggle="tab"
href="#card-view" role="tab"
aria-controls="card-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="card-html-tab" data-toggle="tab"
href="#card-html" role="tab"
aria-controls="card-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="card-laravel-tab" data-toggle="tab"
href="#card-laravel" role="tab"
aria-controls="card-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="card-angular-tab" data-toggle="tab"
href="#card-angular" role="tab"
aria-controls="card-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="card-data-tab" data-toggle="tab"
href="#card-data" role="tab"
aria-controls="card-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="cardTabContent">
<div class="tab-pane fade show active p-3"
id="card-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="card-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="card-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::card', ...cardData)
</div>
</div>
<div class="tab-pane fade p-3" id="card-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-card [card] = 'cardData'></wg-card>
</div>
</div>
<div class="tab-pane fade p-3" id="card-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="collector-link">
<h2 class="title">Collector</h2>
<p class="desc blockquote">collector view</p>
<div class="sample">
<ul class="nav nav-tabs" id="collectorTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="collector-view-tab" data-toggle="tab"
href="#collector-view" role="tab"
aria-controls="collector-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="collector-html-tab" data-toggle="tab"
href="#collector-html" role="tab"
aria-controls="collector-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="collector-laravel-tab" data-toggle="tab"
href="#collector-laravel" role="tab"
aria-controls="collector-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="collector-angular-tab" data-toggle="tab"
href="#collector-angular" role="tab"
aria-controls="collector-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="collector-data-tab" data-toggle="tab"
href="#collector-data" role="tab"
aria-controls="collector-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="collectorTabContent">
<div class="tab-pane fade show active p-3"
id="collector-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="collector-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="collector-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::collector', ...collectorData)
</div>
</div>
<div class="tab-pane fade p-3" id="collector-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-collector [collector] = 'collectorData'></wg-collector>
</div>
</div>
<div class="tab-pane fade p-3" id="collector-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="docket-link">
<h2 class="title">Docket</h2>
<p class="desc blockquote">docket view</p>
<div class="sample">
<ul class="nav nav-tabs" id="docketTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="docket-view-tab" data-toggle="tab"
href="#docket-view" role="tab"
aria-controls="docket-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="docket-html-tab" data-toggle="tab"
href="#docket-html" role="tab"
aria-controls="docket-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="docket-laravel-tab" data-toggle="tab"
href="#docket-laravel" role="tab"
aria-controls="docket-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="docket-angular-tab" data-toggle="tab"
href="#docket-angular" role="tab"
aria-controls="docket-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="docket-data-tab" data-toggle="tab"
href="#docket-data" role="tab"
aria-controls="docket-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="docketTabContent">
<div class="tab-pane fade show active p-3"
id="docket-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="docket-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="docket-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::docket', ...docketData)
</div>
</div>
<div class="tab-pane fade p-3" id="docket-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-docket [docket] = 'docketData'></wg-docket>
</div>
</div>
<div class="tab-pane fade p-3" id="docket-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="form-link">
<h2 class="title">Form</h2>
<p class="desc blockquote">form view</p>
<div class="sample">
<ul class="nav nav-tabs" id="formTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="form-view-tab" data-toggle="tab"
href="#form-view" role="tab"
aria-controls="form-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="form-html-tab" data-toggle="tab"
href="#form-html" role="tab"
aria-controls="form-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="form-laravel-tab" data-toggle="tab"
href="#form-laravel" role="tab"
aria-controls="form-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="form-angular-tab" data-toggle="tab"
href="#form-angular" role="tab"
aria-controls="form-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="form-data-tab" data-toggle="tab"
href="#form-data" role="tab"
aria-controls="form-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="formTabContent">
<div class="tab-pane fade show active p-3"
id="form-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="form-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="form-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::form', ...formData)
</div>
</div>
<div class="tab-pane fade p-3" id="form-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-form [form] = 'formData'></wg-form>
</div>
</div>
<div class="tab-pane fade p-3" id="form-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="list-link">
<h2 class="title">List</h2>
<p class="desc blockquote">list view</p>
<div class="sample">
<ul class="nav nav-tabs" id="listTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="list-view-tab" data-toggle="tab"
href="#list-view" role="tab"
aria-controls="list-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="list-html-tab" data-toggle="tab"
href="#list-html" role="tab"
aria-controls="list-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="list-laravel-tab" data-toggle="tab"
href="#list-laravel" role="tab"
aria-controls="list-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="list-angular-tab" data-toggle="tab"
href="#list-angular" role="tab"
aria-controls="list-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="list-data-tab" data-toggle="tab"
href="#list-data" role="tab"
aria-controls="list-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="listTabContent">
<div class="tab-pane fade show active p-3"
id="list-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="list-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="list-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::list', ...listData)
</div>
</div>
<div class="tab-pane fade p-3" id="list-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-list [list] = 'listData'></wg-list>
</div>
</div>
<div class="tab-pane fade p-3" id="list-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"}
</div>
</div>
</div>
</div>
</div>
<div class="component" id="modal-link">
<h2 class="title">Modal</h2>
<p class="desc blockquote">modal view</p>
<div class="sample">
<ul class="nav nav-tabs" id="modalTab" role="tablist">
<li class="nav-item">
<a class="nav-link active "
id="modal-view-tab" data-toggle="tab"
href="#modal-view" role="tab"
aria-controls="modal-view" aria-selected="true">
View
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="modal-html-tab" data-toggle="tab"
href="#modal-html" role="tab"
aria-controls="modal-html" aria-selected="true">
Html
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="modal-laravel-tab" data-toggle="tab"
href="#modal-laravel" role="tab"
aria-controls="modal-laravel" aria-selected="true">
Laravel
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="modal-angular-tab" data-toggle="tab"
href="#modal-angular" role="tab"
aria-controls="modal-angular" aria-selected="true">
Angular
</a>
</li>
<li class="nav-item">
<a class="nav-link "
id="modal-data-tab" data-toggle="tab"
href="#modal-data" role="tab"
aria-controls="modal-data" aria-selected="true">
Data
</a>
</li>
</ul>
<div class="tab-content" id="modalTabContent">
<div class="tab-pane fade show active p-3"
id="modal-view" role="tabpanel" aria-labelledby="view-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="modal-html" role="tabpanel" aria-labelledby="html-tab">
<div class="bg-light p-2">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="dir-ho-tl">
<ul>
<li>
<a href="index.html"><img src="images/logo.png" alt=""> world </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade p-3" id="modal-laravel" role="tabpanel" aria-labelledby="laravel-tab">
<div class="bg-light p-2">
@include('webgets::modal', ...modalData)
</div>
</div>
<div class="tab-pane fade p-3" id="modal-angular" role="tabpanel" aria-labelledby="angular-tab">
<div class="bg-light p-2">
<wg-modal [modal] = 'modalData'></wg-modal>
</div>
</div>
<div class="tab-pane fade p-3" id="modal-data" role="tabpanel" aria-labelledby="data-tab">
<div class="bg-light p-2">
{"hello":"world"