truly-ui/demo/src/app/app.component.html

Web Components for Desktop Applications.

<div class="wrapper">

  <header class="main-header">

    <!-- Logo -->
    <a routerLink="" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini">TL</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg" style="font-family: 'Dimitri Swank'; font-size: 1.2em; letter-spacing: .15em;"><b>TRULY</b> UI</span>
    </a>

    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <span href="#" style="color: #fff" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </span>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!--The Menus!-->
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header" style="color: #fff">WELCOME</li>
        <li><a href="#" routerLink="home" routerLinkActive="active"><i class="fa ion-home"></i> <span>Home</span></a></li>
        <li><a href="#" routerLink="gettingstarted" routerLinkActive="active"><i class="fa ion-play"></i> <span>Getting Started</span></a></li>
        <!--<li class="treeview">
          <a href="#">
            <i class="fa ion-ios-list"></i>
            <span>Tutorials</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="input" routerLinkActive="active"><i class="fa fa-circle-o"></i> 1. Intruduction</a></li>
            <li><a href="#" routerLink="input" routerLinkActive="active"><i class="fa fa-circle-o"></i> 2. Utilizando Datatables</a></li>
            <li><a href="#" routerLink="input" routerLinkActive="active"><i class="fa fa-circle-o"></i> 3. Utilizando Modal Form</a></li>
            <li><a href="#" routerLink="input" routerLinkActive="active"><i class="fa fa-circle-o"></i> 4. Trabalhando com Tabulação</a></li>
          </ul>
        </li>-->
        <li class="header" style="color: #fff">COMPONENTS</li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-terminal"></i>
            <span>Input</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="input" routerLinkActive="active"><i class="fa fa-circle-o"></i> InputText</a></li>
            <li><a href="#" routerLink="inputmask" routerLinkActive="active"><i class="fa fa-circle-o"></i> InputMask</a></li>
            <li><a href="#" routerLink="checkbox" routerLinkActive="active"><i class="fa fa-circle-o"></i> CheckBox</a></li>
            <li><a href="#" routerLink="radiobutton" routerLinkActive="active"><i class="fa fa-circle-o"></i> RadioButton</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-minus-square"></i>
            <span>Button</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="button" routerLinkActive="active"><i class="fa fa-circle-o"></i> Button</a></li>
            <li><a href="#" routerLink="buttongroup" routerLinkActive="active"><i class="fa fa-circle-o"></i> Button Group</a></li>
            <li><a href="#" routerLink="splitbutton" routerLinkActive="active"><i class="fa fa-circle-o"></i> SplitButton</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa ion-ios-browsers"></i>
            <span>Panels</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="panelgroup" routerLinkActive="active"><i class="fa fa-circle-o"></i> PanelGroup</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-window-maximize"></i>
            <span>Overlay</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="modal" routerLinkActive="active"><i class="fa fa-circle-o"></i> Modal</a></li>
            <li><a href="#" routerLink="form" routerLinkActive="active"><i class="fa fa-circle-o"></i> Form</a></li>
            <li><a href="#" routerLink="dialog" routerLinkActive="active"><i class="fa fa-circle-o"></i> Dialog</a></li>
            <li><a href="#" routerLink="tooltip" routerLinkActive="active"><i class="fa fa-circle-o"></i> Tooltip</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa ion-android-list"></i>
            <span>Lists</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="listbox" routerLinkActive="active"><i class="fa fa-circle-o"></i> ListBox </a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-caret-square-o-down"></i>
            <span>Dropdown</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="autocomplete" routerLinkActive="active"><i class="fa fa-circle-o"></i> AutoComplete</a></li>
            <li><a href="#" routerLink="dropdownlist" routerLinkActive="active"><i class="fa fa-circle-o"></i> Dropdown List</a></li>
            <li><a href="#" routerLink="multiselect" routerLinkActive="active"><i class="fa fa-circle-o"></i> MultiSelect</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-list-alt"></i>
            <span>DataTable</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#" routerLink="datatable" routerLinkActive="active"><i class="fa fa-circle-o"></i> Datatable</a></li>
            <li><a href="#" routerLink="datatable/scrollable" routerLinkActive="active"><i class="fa fa-circle-o"></i> Scrollable</a></li>
            <li><a href="#" routerLink="datatable/lazy" routerLinkActive="active"><i class="fa fa-circle-o"></i> Lazy</a></li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
      <router-outlet></router-outlet>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <footer class="main-footer text-center">
    <strong><a class="link-copy" href="http://temainfo.com.br">Temainfo Software</a>&nbsp;&nbsp;Copyright &copy; 2017</strong> All rights
    reserved.
  </footer>
</div>