Skip to content

Commit b18af82

Browse files
kdinevkdinev
committed
feat(multiple entry points): creating entry point for bottom-nav
1 parent f32af88 commit b18af82

File tree

96 files changed

+4737
-4593
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+4737
-4593
lines changed

‎projects/igniteui-angular-i18n/tsconfig.build.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
"paths": {
1515
"igniteui-angular": [
1616
"../../dist/igniteui-angular/"
17+
],
18+
"igniteui-angular/*": [
19+
"../../dist/igniteui-angular/*"
1720
]
1821
}
1922
}

‎projects/igniteui-angular/accordion/README.md‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,68 @@
1-
# accordion
21

3-
Part of Ignite UI for Angular.
2+
# IgxAccordion
3+
4+
5+
**IgxAccordion** is a container-based component that contains a collection of collapsible **IgxExpansionPanels**.
6+
7+
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/accordion)
8+
9+
# Usage
10+
11+
```html
12+
<igx-accordion>
13+
<igx-expansion-panel *ngFor="let panel of panels">
14+
...
15+
</igx-expansion-panel>
16+
</igx-accordion>
17+
```
18+
19+
# API Summary
20+
The following tables summarize the **igx-accordion** accessors, inputs, outputs and methods.
21+
22+
### Accessors
23+
The following accessors are available in the **igx-accordion** component:
24+
| Name | Type | Description |
25+
| :--- | :--- | :--- |
26+
| `panels` | `IgxExpansionPanelComponent[]` | All IgxExpansionPanel children of the accordion |
27+
28+
### Inputs
29+
The following inputs are available in the **igx-accordion** component:
30+
31+
| Name | Type | Description |
32+
| :--- | :--- | :--- |
33+
| `id` | `string` | The id of the accordion. |
34+
| `animationSettings` | `AnimationSettings` | Animation settings that override all single animations passed to underlying panels |
35+
| `singleBranchExpand` | `boolean` | How the accordion handles panel expansion. |
36+
37+
### Outputs
38+
The following outputs are available in the **igx-accordion** component:
39+
40+
| Name | Cancelable | Description | Parameters
41+
| :--- | :--- | :--- | :--- |
42+
| `panelExpanded` | `false` | Emitted when the panel is collapsed | `IAccordionEventArgs` |
43+
| `panelCollapsing` | `true` | Emitted when the panel begins collapsing | `IAccordionCancelableEventArgs` |
44+
| `panelCollapsed` | `false` | Emitted when the panel is expanded | `IAccordionEventArgs` |
45+
| `panelExpanding` | `true` | Emitted when the panel begins expanding | `IAccordionCancelableEventArgs` |
46+
47+
48+
### Methods
49+
The following methods are available in the **igx-accordion** component:
50+
51+
| Name | Signature | Description |
52+
| :--- | :--- | :--- |
53+
| `collapseAll` | `(event?: Event ): void` | Collapse all expanded expansion panels |
54+
| `expandAll` | `(event?: Event ): void` | Expands all collapsed expansion panels when singleBranchExpand === false |
55+
56+
## Keyboard Navigation
57+
|Keys |Description|
58+
|---------------|-----------|
59+
| Tab | Moves the focus to the first(if the focus is before accordeon)/next panel. |
60+
| Shift + Tab | Moves the focus to the last(if the focus is after accordeon)/previous panel. |
61+
| Arrow Down | Move the focus to the panel below. |
62+
| Arrow Up | Move the focus to the panel above. |
63+
| Alt + Arrow Down | Expand the focused panel in the accordion. |
64+
| Alt + Arrow Up | Collapse the focused panel in the accordion. |
65+
| Shift + Alt + Arrow Down | Expand all panels when this is enabled. |
66+
| Shift + Alt + Arrow Up | Collapse all panels whichever panel is focused. |
67+
| Home | Navigates to the first panel in the accordion. |
68+
| End | Navigates to the last panel in the accordion. |

‎projects/igniteui-angular/accordion/src/accordion/README.md‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎projects/igniteui-angular/action-strip/README.md‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,78 @@
1-
# action-strip
1+
# igx-action-strip
22

3-
Part of Ignite UI for Angular.
3+
The **igx-action-strip** provides a template area for one or more actions.
4+
In its simplest form the Action Strip is an overlay of any container and shows additional content over that container.
5+
A walk-through of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action_strip.html)
6+
7+
# Usage
8+
The Action Strip can be initialized in any HTML element that can contain elements. This parent element should be with a relative position as the action strip is trying to overlay it. Interactions with the parent and its content are available while the action strip is shown.
9+
```html
10+
<igx-action-strip #actionstrip>
11+
<igx-icon (click)="doSomeAction()"></igx-icon>
12+
</igx-action-strip>
13+
```
14+
15+
# Grid Action Components
16+
Action strip provides functionality and UI for IgxGrid. All that can be utilized with grid action components. These components inherit `IgxGridActionsBaseDirective` and when creating a custom grid action component, this component should also inherit `IgxGridActionsBaseDirective`.
17+
18+
```html
19+
<igx-action-strip #actionstrip>
20+
<igx-grid-editing-actions [grid]="grid1"></igx-grid-editing-actions>
21+
<igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
22+
</igx-action-strip>
23+
```
24+
25+
# IgxActionStripMenuItem
26+
27+
The Action Strip can show items as menu. This is achieved with `igxActionStripMenuItem` directive applied to its content. Action strip will render three-dot button that toggles a drop down. And the content will be those items that are marked with `igxActionStripMenuItem` directive.
28+
29+
```html
30+
<igx-action-strip #actionStrip1>
31+
<span *IgxActionStripMenuItem>Copy</span>
32+
<span *IgxActionStripMenuItem>Paste</span>
33+
<span *IgxActionStripMenuItem>Edit</span>
34+
</igx-action-strip>
35+
```
36+
# API Summary
37+
38+
## Inputs
39+
`IgxActionStripComponent`
40+
41+
| Name | Description | Type | Default value |
42+
|-----------------|---------------------------------------------------|-----------------------------|---------------|
43+
| hidden | An @Input property that sets the visibility of the Action Strip. | boolean | `false` |
44+
| context | Sets the context of an action strip. The context should be an instance of a @Component, that has element property. This element will be the placeholder of the action strip. | any | |
45+
46+
`IgxGridActionsBaseDirective` ( `IgxGridPinningActionsComponent`, `IgxGridEditingActionsComponent`)
47+
48+
| Name | Description | Type | Default value |
49+
|-----------------|---------------------------------------------------|-----------------------------|---------------|
50+
| grid | Set an instance of the grid for which to display the actions. | any | |
51+
| context | Sets the context of an action strip. The context is expected to be grid cell or grid row | any | |
52+
53+
## Outputs
54+
|Name|Description|Cancelable|Parameters|
55+
|--|--|--|--|
56+
| onMenuOpening | Emitted before the menu is opened | true | |
57+
| onMenuOpened | Emitted after the menu is opened | false | |
58+
59+
## Methods
60+
61+
`IgxActionStripComponent`
62+
63+
| Name | Description | Return type | Parameters |
64+
|----------|----------------------------|---------------------------------------------------|----------------------|
65+
| show | Showing the Action Strip and appending it the specified context element. | void | context |
66+
| hide | Hiding the Action Strip and removing it from its current context element. | void | |
67+
68+
`IgxGridPinningActionsComponent`
69+
| Name | Description | Return type | Parameters |
70+
|----------|----------------------------|---------------------------------------------------|----------------------|
71+
| pin | Pin the row according to the context. | void | |
72+
| unpin | Unpin the row according to the context. | void | |
73+
74+
`IgxGridPinningActionsComponent`
75+
| Name | Description | Return type | Parameters |
76+
|----------|----------------------------|---------------------------------------------------|----------------------|
77+
| startEdit | Enter row or cell edit mode depending the grid `rowEdibable` option | void | |
78+
| deleteRow | Delete a row according to the context | void | |

‎projects/igniteui-angular/action-strip/src/action-strip/README.md‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎projects/igniteui-angular/avatar/README.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,38 @@
1-
# avatar
1+
# igx-avatar
22

3-
Part of Ignite UI for Angular.
3+
The **igx-avatar** component allows you to add images or initials as avatars in your application.
4+
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar.html)
5+
6+
# Usage
7+
```html
8+
<igx-avatar shape="rounded" icon="person" bgColor="#0375be" data-init="SS">
9+
</igx-avatar>
10+
```
11+
12+
# API Summary
13+
| Name | Type | Description |
14+
|:----------|:-------------:|:------|
15+
| `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
16+
| `src` | string | Set the image source of the avatar. |
17+
| `initials` | string | Set the initials of the avatar. |
18+
| `icon` | string | Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initials and image avatars. |
19+
| `bgColor` | string | Set the background color of initials or icon avatars. |
20+
| `color` | string | Set the color of initials or icon avatars. (optional) |
21+
| `shape` | boolean | Set the shape of the avatar to rounded. The default shape is square. |
22+
| `size` | string | Set the size of the avatar to either small, medium, or large. |
23+
24+
*You can also set all igx-avatar properties programmatically.
25+
26+
# Examples
27+
28+
Using `igx-avatar` tag to include it into your app.
29+
```html
30+
<igx-avatar icon="person" bgColor="#0375be" data-init="SS">
31+
</igx-avatar>
32+
```
33+
34+
Using `TypeScript` to modify and existing igx-avatar instance.
35+
```typescript
36+
avatarInstance.srcImage('https://unsplash.it/60/60?image=55');
37+
avatarInstance.size('small');
38+
```

‎projects/igniteui-angular/avatar/src/avatar/README.md‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)