Nativescript: Angular HTML Snippets (vscode extension)

Updated for Nativescript v6.4.0 and Angular v9.0.0 release

This extension adds all HTML Nativescript UI Components, Layouts and Gestures snippets.

Features

• Default syntax - Plain Nativescript tag.
• Property syntax - Includes all properties from Angular Nativescript documentation.
• Complete syntax - Includes all properties, all events and documentation.
• Layout snippets
• Gesture snippets
• System Icon snippets

Description

	snippet	entered by user	output	description
default	ns-button	nsbutt	<Button></Button>	plain
property (prop)	ns-button-prop	nsbutpr	with *prop	With all properties
complete (comp)	ns-button-comp	nsbu-c	with *prop, *events, *docs	All properties, events and documentation
layout snippets	ns-dock-layout-snippet-2	nsdocnip2	snippet 2	Sample snippet from site docs.
gestures	ns-tap	nstap	(tap)=""	Gesture Snippets
setting icon	ns-icon-stop	nsicost	14	Setting Icon snippets

For complete snippet reference and more examples check this.

ns-button: In Action

Default output

<Button></Button>

Property output

<Button text=""></Button>

Complete output

<Button
  text="string"
  (tap)=""
  (loaded)=""
  (unloaded)=""
  (layoutChanged)="">
</Button>
<!--
Properties
NAME	TYPE	  DESCRIPTION
text	string	Gets or sets the label of the button.

Events
NAME	        DESCRIPTION
tap	          Emitted when the button is tapped.
loaded	      Emitted when the view is loaded.
unloaded	    Emitted when the view is unloaded.
layoutChanged	Emitted when the layout bounds of a view changes due to layout processing.
 -->

ns-dock-layout-snippet-2: In Action

<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
  <Label text="left" dock="left" backgroundColor="red"></Label>
  <Label text="top" dock="top" backgroundColor="green"></Label>
  <Label text="right" dock="right" backgroundColor="blue"></Label>
  <Label text="bottom" dock="bottom" backgroundColor="yellow"></Label>
</DockLayout>

Demo

HTML snippet ns-text-field in action; default, property (prop) and complete (comp) syntax demo.

Snippets: User Interface > Layouts

• ns-absolute-layout
• ns-dock-layout
• ns-grid-layout
• ns-stack-layout
• ns-wrap-layout
• ns-flexbox-layout

Snippets: User Interface > Components

• ns-actionbar
• ns-actionbarextension
• ns-actionitem
• ns-navigationbutton
• ns-activityindicator
• ns-button
• ns-datepicker
• ns-formattedstring
• ns-htmlview
• ns-image
• ns-label
• ns-listpicker
• ns-listview
• ns-progress
• ns-scroll-view
• ns-search-bar
• ns-segmented-bar
• ns-segmented-bar-item
• ns-slider
• ns-switch
• ns-bottom-navigation
• ns-tab-strip
• ns-tab-strip-item
• ns-tab-content-item
• ns-tabs
• ns-tab-view
• ns-tab-view-item
• ns-text-field
• ns-text-view
• ns-time-picker
• ns-web-view

Snippets: Gestures

Snippet	Output
ns-tap	(tap)=""
ns-doubleTap	(doubleTap)=""
ns-longPress	(longPress)=""
ns-swipe	(swipe)=""
ns-pan	(pan)=""
ns-pinch	(pinch)=""
ns-rotation	(rotation)=""
ns-touch	(touch)=""

Snippets: Setting Icons

Snippet	Output
ns-icon-action	9
ns-icon-undo	21

List

ICON	VALUE	ICON	VALUE
Done	0	Search	12
Cancel	1	Refresh	13
Edit	2	Stop	14
Save	3	Camera	15
Add	4	Trash	16
FlexibleSpace	5	Play	17
FixedSpace	6	Pause	18
Compose	7	Rewind	19
Reply	8	FastForward	20
Action	9	Undo	21
Organize	10	Redo	22
Bookmarks	11	PageCurl	23

Reference: https://docs.nativescript.org/angular/ui/action-bar#setting-icons

Installation

1. Install Visual Studio Code v1.30.0 or higher
2. Launch Code
3. From the command palette Ctrl+Shift+P (Windows, Linux) or Cmd+Shift+P (OSX)
4. Select Install Extensions
5. Choose Nativescript: Angular HTML Snippets by ElecTreeFrying
6. Reload Visual Studio Code

Changelog

See CHANGELOG for more information.

Contributing

• File bugs, feature requests in GitHub Issues.
• Leave a review on Visual Studio Marketplace.

Related

More extensions of mine

License

MIT