glossary.component.html

<!--
The template defines the view of the component - what is actually rendered.
In NativeScript applications the template is defined with XML using NativeScript UI elements.
It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same.
So you can still use template expressions, bindings, templates as well as all the built-in directives.
-->

<!--
The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
http://docs.nativescript.org/ui/action-bar
-->
<ActionBar title="App Islan - Glossário" class="action-bar"> </ActionBar>

<!--
The GridLayout arranges its child elements in a table structure of rows and columns.
A cell can contain multiple child elements, they can span over multiple rows and columns, 
and even overlap each other. The GridLayout has one column and one row by default.
You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.

These components make use of several CSS class names that are part of the NativeScript
core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
class names available for styling your app at https://docs.nativescript.org/ui/theme.
-->
<DockLayout class="page">
	<label dock="top" text="Glossary" class="header"></label>
	<FlexboxLayout dock="bottom" class="footer"><ns-menu [active]="active"></ns-menu></FlexboxLayout>
	<ListView [items]="items" class="list-group" height="100%" dock="left">
		<ng-template let-item="item">
			<Label
				[nsRouterLink]="['/glossary/item/id', item.id]"
				[text]="item.name + '\n' + item.translate"
				textWrap="true"
				class="list-group-item"
			></Label>
		</ng-template>
	</ListView>
</DockLayout>