jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
77 lines • 2.25 kB
HTML
<div style='width: 300px;' id='jqxWidget'>
<jqxNavigationBar [theme]="'material'" #jqxNavigationBar
[expandedIndexes]="[2, 3]"
[expandMode]="'multiple'"
[width]="300">
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='https://www.jqwidgets.com/angular/images/mailIcon.png' />
</div>
<div style='margin-left: 4px; float: left;'>
Mail
</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Contacts</a></li>
<li><a href='#'>Mails</a></li>
<li><a href='#'>Notes</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='https://www.jqwidgets.com/angular/images/contactsIcon.png' />
</div>
<div style='margin-left: 4px; float: left;'>
Contacts
</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Business Cards</a></li>
<li><a href='#'>Address Cards</a></li>
<li><a href='#'>Detailed Address Cards</a></li>
<li><a href='#'>Phone List</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='https://www.jqwidgets.com/angular/images/tasksIcon.png' />
</div>
<div style='margin-left: 4px; float: left;'>
Tasks
</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Simple List</a></li>
<li><a href='#'>Detailed List</a></li>
<li><a href='#'>Active Tasks</a></li>
<li><a href='#'>Phone List</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='https://www.jqwidgets.com/angular/images/notesIcon.png' />
</div>
<div style='margin-left: 4px; float: left;'>
Notes
</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Icons</a></li>
<li><a href='#'>Notes List</a></li>
<li><a href='#'>Last Seven Days</a></li>
</ul>
</div>
</jqxNavigationBar>
</div>