Skip to content

Commit 3c9f6fa

Browse files
authored
Update README.md
1 parent 2df2701 commit 3c9f6fa

File tree

1 file changed

+163
-2
lines changed

1 file changed

+163
-2
lines changed

components/navigations/README.md

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,164 @@
1-
# Angular Component
1+
# ej2-angular-navigations
22

3-
Angular content
3+
![ej2-angular-navigations](https://ej2.syncfusion.com/products/images/navigations/readMe.gif)
4+
5+
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
6+
7+
> A free [community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
8+
9+
## Setup
10+
11+
To install `Navigations` and its dependent packages, use the following command.
12+
13+
```sh
14+
npm install @syncfusion/ej2-angular-navigations
15+
```
16+
17+
## Components included
18+
19+
Following list of components are available in the package
20+
21+
* Accordion - Vertically collapsible content panel that displays one or more panels at a time within the available space.
22+
23+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/accordion/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=accordion)
24+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/accordion?utm_source=npm&utm_campaign=accordion)
25+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=accordion#/material/accordion/default.html)
26+
* [Product Page](https://www.syncfusion.com/angular-ui-components/accordion)
27+
28+
* ContextMenu - Graphical user interface that appears on the user right click/touch hold action. It has the support to provide nested level menu items.
29+
30+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started?lang=typescript&utm_source=npm&utm_campaign=context-menu)
31+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/context-menu?utm_source=npm&utm_campaign=context-menu)
32+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=contextmenu#/material/context-menu/default)
33+
* [Product Page](https://www.syncfusion.com/angular-ui-components/context-menu)
34+
35+
* Sidebar - Expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.
36+
37+
* [Getting started](https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=sidebar)
38+
* [API references](https://ej2.syncfusion.com/angular/documentation/api/sidebar?utm_source=npm&utm_campaign=sidebar)
39+
* [View online demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sidebar#/material/sidebar/default)
40+
* [Product page](https://www.syncfusion.com/angular-ui-components/sidebar?utm_source=npm&utm_campaign=ej2-angular-navigations)
41+
42+
* Tab - Content panel to show multiple contents in a specific space, one at a time.
43+
44+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/tab/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=tab)
45+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/tab?utm_source=npm&utm_campaign=tab)
46+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=tab#/material/tab/default.html)
47+
* [Product Page](https://www.syncfusion.com/angular-ui-components/tabs)
48+
49+
* Toolbar - Displays a group of command buttons arranged horizontally.
50+
51+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/toolbar/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=toolbar)
52+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/toolbar?utm_source=npm&utm_campaign=toolbar)
53+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=toolbar#/material/toolbar/default.html)
54+
* [Product Page](https://www.syncfusion.com/angular-ui-components/toolbar)
55+
56+
* TreeView - Represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more.
57+
58+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/treeview/getting-started.html?utm_source=npm&utm_campaign=treeview)
59+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/treeview?utm_source=npm&utm_campaign=treeview)
60+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=treeview#/material/treeview/default)
61+
* [Product Page](https://www.syncfusion.com/angular-ui-components/treeview)
62+
63+
* Menu - Graphical user interface that serves as navigation header for your application or site. It has the support to provide nested level menu items that can be populated from a data source such as an array of JavaScript objects.
64+
65+
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/menu/getting-started?lang=typescript&utm_source=npm&utm_campaign=menu)
66+
* [API References](https://ej2.syncfusion.com/angular/documentation/api/menu?utm_source=npm&utm_campaign=menu)
67+
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=menu#/material/menu/default)
68+
* [Product Page](https://www.syncfusion.com/angular-ui-components/menu)
69+
70+
## Supported Frameworks
71+
72+
`Navigation` component is also offered in following list of frameworks.
73+
74+
1. [JavaScript](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/navigations?utm_source=npm&utm_campaign=navigation)
75+
2. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/navigations?utm_source=npm&utm_campaign=navigation)
76+
3. [VueJS](https://github.com/syncfusion/ej2-vue-ui-components/tree/master/components/navigations?utm_source=npm&utm_campaign=navigation)
77+
4. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/accordion)
78+
5. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/accordion)
79+
6. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/accordion)
80+
81+
## Use-case samples / Showcase samples
82+
83+
Sidebar component is used in the following samples.
84+
85+
* Expanse tracker ([Source](https://github.com/syncfusion/ej2-showcase-angular-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/?utm_source=npm&utm_campaign=sidebar#/dashboard))
86+
* Web mail ([Source](https://github.com/syncfusion/ej2-showcase-angular-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/angular/webmail/?utm_source=npm&utm_campaign=sidebar))
87+
88+
## Key Features
89+
90+
### Accordion
91+
92+
1. **Rendering** - Can be rendered based on the items collection and HTML elements.
93+
2. **Expand Mode** - Supports to define single or multiple expand mode for Accordion panels.
94+
3. **RTL Support** - Supports right-to-left alignment.
95+
4. **Accessibility** - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.
96+
97+
### ContextMenu
98+
99+
1. **Separator** - Supports menu items grouping by using the Separator.
100+
2. **Icons and Navigations** - Supports items to have Icons and Navigation URL's.
101+
3. **Template and Multilevel Nesting** - Supports template and multilevel nesting in ContextMenu.
102+
4. **Accessibility** - Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.
103+
104+
### Toolbar
105+
106+
1. **Scrollable** - Scrollable display mode displays Toolbar commands in a single line with horizontal scrolling enabled when the commands overflow available space.
107+
2. **Popup** - Popup display mode displays commands in the popup when the commands overflow available space.
108+
3. **Template Support** - The Toolbar component can also be rendered based on the given HTML element aside from item based collection rendering.
109+
4. **Keyboard Support** - By default, the Toolbar allows interaction with commands by using keyboard shortcuts.
110+
5. **RTL Support** - The Toolbar supports right-to-left alignment.
111+
6. **Accessibility** - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
112+
113+
### Tab
114+
115+
1. **Rendering** - Can be rendered based on the items collection and HTML elements.
116+
2. **Adaptive** - Supports responsive rendering with scrollable Tabs and popup menu.
117+
3. **Customization** - Provides customization support for header with icons and orientation.
118+
4. **Animation** - Supports animation effects for moving previous/next contents of Tab.
119+
5. **Accessibility** - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Tab headers by using keyboard shortcuts.
120+
121+
### Sidebar
122+
123+
1. **Target** - The sidebar can be initialized in any HTML element other than the body element.
124+
2. **Types** - Provides complete control over the appearance of the sidebar component. The different types of the sidebar control give flexibility to view or hide the content (primary/secondary) over/above the main content by pushing, sliding, or overlaying it.
125+
3. **Left or right positions** - The sidebar control can be positioned to the left or right side of the main content area. This option allows placement of two sidebars in a page, at the left and right, to show primary content and secondary content, simultaneously.
126+
4. **Docking** - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
127+
5. **Auto close** - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
128+
129+
### TreeView
130+
131+
1. **Data Binding** - Binds the TreeView component with an array of JavaScript objects or DataManager.
132+
2. **CheckBox** - Allows you to select more than one node in TreeView without affecting the UI appearance.
133+
3. **Drag and Drop** - Allows you to drag and drop any node in TreeView.
134+
4. **Multi Selection** - Allows you to select more than one node in TreeView.
135+
5. **Node Editing** - Allows you to change the text of a node in TreeView.
136+
6. **Sorting** - Allows display of the TreeView nodes in an ascending or a descending order.
137+
7. **Template** - Allows you to customize the nodes in TreeView.
138+
8. **Accessibility** - Provides built-in accessibility support that helps to access all the TreeView component features through the keyboard, on-screen readers, or other assistive technology devices.
139+
140+
### Menu
141+
142+
1. **Rendering** - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
143+
2. **Separator** - Supports menu items grouping by using the Separator.
144+
3. **Icons and Navigations** - Supports items to have Icons and Navigation URL's.
145+
4. **Template and Multilevel Nesting** - Supports template and multilevel nesting in Menu.
146+
5. **Accessibility** - Provided with built-in accessibility support that helps to access all the Menu component features through the keyboard, screen readers, or other assistive technology devices.
147+
148+
## Support
149+
150+
Product support is available for through following mediums.
151+
152+
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=navigation) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=navigation).
153+
* New [GitHub issue](https://github.com/syncfusion/ej2-angular-ui-components/issues/new).
154+
* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=navigation) with tag `syncfusion` and `ej2`.
155+
156+
## License
157+
158+
Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license?utm_source=npm&utm_campaign=navigation).
159+
160+
## Changelog
161+
162+
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/navigations/CHANGELOG.md?utm_source=npm&utm_campaign=navigation)
163+
164+
© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

0 commit comments

Comments
 (0)