@progress/kendo-angular-navigation 19.1.2-develop.4 → 19.1.2-develop.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/actionsheet/actionsheet.component.d.ts +18 -17
- package/actionsheet/models/actionsheet-action-layout.d.ts +15 -13
- package/actionsheet/models/actionsheet-action.d.ts +9 -30
- package/actionsheet/models/actionsheet-item.interface.d.ts +13 -18
- package/actionsheet/models/animation.d.ts +4 -2
- package/actionsheet/models/group.d.ts +6 -0
- package/actionsheet/models/item-click.event.d.ts +5 -3
- package/actionsheet/templates/actionsheet-template.d.ts +10 -1
- package/actionsheet/templates/content-template.directive.d.ts +10 -1
- package/actionsheet/templates/footer-template.directive.d.ts +10 -1
- package/actionsheet/templates/header-template.directive.d.ts +10 -1
- package/actionsheet/templates/item-template.directive.d.ts +10 -1
- package/actionsheet.module.d.ts +5 -18
- package/appbar/appbar-section.component.d.ts +9 -13
- package/appbar/appbar-spacer.component.d.ts +13 -21
- package/appbar/appbar.component.d.ts +19 -25
- package/appbar/models/position-mode.d.ts +5 -6
- package/appbar/models/position.d.ts +3 -8
- package/appbar/models/theme-color.d.ts +6 -7
- package/appbar.module.d.ts +5 -18
- package/bottomnavigation/bottomnavigation.component.d.ts +17 -31
- package/bottomnavigation/events/select-event.d.ts +5 -5
- package/bottomnavigation/templates/item-template.directive.d.ts +11 -3
- package/bottomnavigation/types/bottomnavigation-fill.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-item-flow.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-item.d.ts +11 -10
- package/bottomnavigation/types/bottomnavigation-position-mode.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-theme-color.d.ts +12 -12
- package/bottomnavigation.module.d.ts +6 -18
- package/breadcrumb/breadcrumb.component.d.ts +14 -19
- package/breadcrumb/models/breadcrumb-item.interface.d.ts +10 -11
- package/breadcrumb/models/breadcrumb-size.d.ts +1 -2
- package/breadcrumb/models/collapse-mode.d.ts +5 -3
- package/breadcrumb/template-directives/item-template.directive.d.ts +12 -1
- package/breadcrumb.module.d.ts +6 -18
- package/directives.d.ts +94 -5
- package/esm2022/actionsheet/actionsheet.component.mjs +18 -17
- package/esm2022/actionsheet/models/item-click.event.mjs +5 -3
- package/esm2022/actionsheet/templates/actionsheet-template.mjs +10 -1
- package/esm2022/actionsheet/templates/content-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/footer-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/header-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/item-template.directive.mjs +10 -1
- package/esm2022/actionsheet.module.mjs +5 -18
- package/esm2022/appbar/appbar-section.component.mjs +9 -13
- package/esm2022/appbar/appbar-spacer.component.mjs +13 -21
- package/esm2022/appbar/appbar.component.mjs +19 -25
- package/esm2022/appbar.module.mjs +5 -18
- package/esm2022/bottomnavigation/bottomnavigation.component.mjs +17 -31
- package/esm2022/bottomnavigation/events/select-event.mjs +5 -5
- package/esm2022/bottomnavigation/templates/item-template.directive.mjs +11 -3
- package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs +12 -12
- package/esm2022/bottomnavigation.module.mjs +6 -18
- package/esm2022/breadcrumb/breadcrumb.component.mjs +14 -19
- package/esm2022/breadcrumb/template-directives/item-template.directive.mjs +12 -1
- package/esm2022/breadcrumb.module.mjs +6 -18
- package/esm2022/directives.mjs +94 -5
- package/esm2022/navigation.module.mjs +6 -18
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-navigation.mjs +297 -240
- package/navigation.module.d.ts +6 -18
- package/package.json +7 -7
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* ([see example](slug:positioning_appbar#toc-position-mode)).
|
|
6
|
+
* Represents the available position modes of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
|
|
8
7
|
*
|
|
9
|
-
*
|
|
10
|
-
* * `static
|
|
11
|
-
* * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
|
|
12
|
-
* * `fixed`—Positions the AppBar relative to the viewport.
|
|
8
|
+
* The possible values are:
|
|
9
|
+
* * `static`—Positions the AppBar according to the normal flow of the page.
|
|
10
|
+
* * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between the static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
|
|
11
|
+
* * `fixed`—Positions the AppBar relative to the viewport. The component always stays in the same place even if the page is scrolled.
|
|
13
12
|
*/
|
|
14
13
|
export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
|
|
@@ -3,17 +3,12 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the position options of the AppBar
|
|
7
7
|
* ([see example]({% slug positioning_appbar %}#toc-position)).
|
|
8
8
|
*
|
|
9
9
|
* * The possible values are:
|
|
10
|
-
* * `top
|
|
11
|
-
*
|
|
12
|
-
* The position property applies CSS `top: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow` to the bottom of the AppBar.
|
|
13
|
-
*
|
|
14
|
-
* * `bottom`—Positions the AppBar at the bottom of the content.
|
|
15
|
-
* Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
|
|
16
|
-
* The position property applies CSS `bottom: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow ` to the top of the AppBar.
|
|
10
|
+
* * `top`—Places the AppBar at the top of the content. This setting requires rendering the AppBar before the main page content. In [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode), this value applies a `top: 0` CSS style and adds a `box-shadow` to the bottom of the AppBar.
|
|
11
|
+
* * `bottom`—Places the AppBar at the bottom of the content. This setting requires rendering the AppBar after the main page content. In [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode), this value applies a `bottom: 0` CSS style and adds a `box-shadow` to the top of the AppBar.
|
|
17
12
|
*
|
|
18
13
|
*/
|
|
19
14
|
export type AppBarPosition = 'top' | 'bottom';
|
|
@@ -3,16 +3,15 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the possible theme colors of the AppBar
|
|
7
7
|
* ([see example](slug:themecolor_appbar)).
|
|
8
|
-
* The theme color will be applied as background color
|
|
9
|
-
*
|
|
8
|
+
* The theme color will be applied as a background color to the component.
|
|
10
9
|
*
|
|
11
10
|
* * The possible values are:
|
|
12
|
-
* * `light
|
|
13
|
-
* * `dark`—Applies coloring based on dark theme color.
|
|
14
|
-
* * `inherit`&mdash
|
|
15
|
-
* * `primary`—
|
|
11
|
+
* * `light`—Applies coloring based on the light theme color.
|
|
12
|
+
* * `dark`—Applies coloring based on the dark theme color.
|
|
13
|
+
* * `inherit`&mdash Applies inherited coloring value.
|
|
14
|
+
* * `primary`—Applies primary coloring value.
|
|
16
15
|
*
|
|
17
16
|
*/
|
|
18
17
|
export type AppBarThemeColor = 'inherit' | 'light' | 'dark' | 'primary';
|
package/appbar.module.d.ts
CHANGED
|
@@ -7,35 +7,22 @@ import * as i1 from "./appbar/appbar.component";
|
|
|
7
7
|
import * as i2 from "./appbar/appbar-section.component";
|
|
8
8
|
import * as i3 from "./appbar/appbar-spacer.component";
|
|
9
9
|
/**
|
|
10
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
10
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
11
11
|
* definition for the AppBar component.
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
|
-
*
|
|
15
|
-
* ```ts-no-run
|
|
16
|
-
* // Import the AppBar module
|
|
14
|
+
* ```typescript
|
|
17
15
|
* import { AppBarModule } from '@progress/kendo-angular-navigation';
|
|
18
|
-
*
|
|
19
|
-
* // The browser platform with a compiler
|
|
20
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
21
16
|
* import { BrowserModule } from '@angular/platform-browser';
|
|
22
|
-
*
|
|
23
17
|
* import { NgModule } from '@angular/core';
|
|
24
|
-
*
|
|
25
|
-
* // Import the app component
|
|
26
18
|
* import { AppComponent } from './app.component';
|
|
27
19
|
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* imports: [BrowserModule, AppBarModule], // import AppBar module
|
|
20
|
+
* @NgModule({
|
|
21
|
+
* declarations: [AppComponent],
|
|
22
|
+
* imports: [BrowserModule, AppBarModule],
|
|
32
23
|
* bootstrap: [AppComponent]
|
|
33
24
|
* })
|
|
34
25
|
* export class AppModule {}
|
|
35
|
-
*
|
|
36
|
-
* // Compile and launch the module
|
|
37
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
38
|
-
*
|
|
39
26
|
* ```
|
|
40
27
|
*/
|
|
41
28
|
export declare class AppBarModule {
|
|
@@ -14,9 +14,11 @@ import * as i0 from "@angular/core";
|
|
|
14
14
|
/**
|
|
15
15
|
* Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
|
|
16
16
|
*
|
|
17
|
+
* Use the BottomNavigation component to let users quickly switch between primary views in your app.
|
|
18
|
+
*
|
|
17
19
|
* @example
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
+
* ```typescript
|
|
21
|
+
* @Component({
|
|
20
22
|
* selector: 'my-app',
|
|
21
23
|
* template: `
|
|
22
24
|
* <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
|
|
@@ -27,7 +29,7 @@ import * as i0 from "@angular/core";
|
|
|
27
29
|
* { text: 'Inbox', icon: 'envelop', selected: true },
|
|
28
30
|
* { text: 'Calendar', icon: 'calendar'},
|
|
29
31
|
* { text: 'Profile', icon: 'user'}
|
|
30
|
-
* ]
|
|
32
|
+
* ];
|
|
31
33
|
* }
|
|
32
34
|
* ```
|
|
33
35
|
*/
|
|
@@ -38,67 +40,51 @@ export declare class BottomNavigationComponent implements OnInit, AfterViewInit,
|
|
|
38
40
|
private changeDetector;
|
|
39
41
|
private renderer;
|
|
40
42
|
/**
|
|
41
|
-
*
|
|
43
|
+
* Provides the collection of items rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
|
|
42
44
|
*/
|
|
43
45
|
items: any[];
|
|
44
46
|
/**
|
|
45
|
-
*
|
|
47
|
+
* Shows a top border on the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
46
48
|
*
|
|
47
49
|
* @default false
|
|
48
50
|
*/
|
|
49
51
|
border: boolean;
|
|
50
52
|
/**
|
|
51
|
-
* Disables the
|
|
53
|
+
* Disables the entire BottomNavigation.
|
|
52
54
|
*
|
|
53
55
|
* @default false
|
|
54
56
|
*/
|
|
55
57
|
disabled: boolean;
|
|
56
58
|
/**
|
|
57
|
-
*
|
|
59
|
+
* Sets the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
58
60
|
*
|
|
59
|
-
*
|
|
60
|
-
* * (Default) `flat`
|
|
61
|
-
* * `solid`
|
|
61
|
+
* @default 'flat'
|
|
62
62
|
*/
|
|
63
63
|
set fill(fill: BottomNavigationFill);
|
|
64
64
|
get fill(): BottomNavigationFill;
|
|
65
65
|
/**
|
|
66
|
-
*
|
|
66
|
+
* Controls how the icon and text label are positioned in the BottomNavigation items.
|
|
67
67
|
*
|
|
68
|
-
*
|
|
69
|
-
* * (Default) `vertical` - Renders the text below the icon.
|
|
70
|
-
* * `horizontal` - Renders the icon and the text on the same line.
|
|
68
|
+
* @default 'vertical'
|
|
71
69
|
*/
|
|
72
70
|
set itemFlow(itemFlow: BottomNavigationItemFlow);
|
|
73
71
|
get itemFlow(): BottomNavigationItemFlow;
|
|
74
72
|
/**
|
|
75
|
-
*
|
|
73
|
+
* Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
|
|
76
74
|
*
|
|
77
|
-
*
|
|
78
|
-
* * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
|
|
79
|
-
* * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
|
|
75
|
+
* @default 'fixed'
|
|
80
76
|
*/
|
|
81
77
|
set positionMode(positionMode: BottomNavigationPositionMode);
|
|
82
78
|
get positionMode(): BottomNavigationPositionMode;
|
|
83
79
|
/**
|
|
84
|
-
*
|
|
80
|
+
* Sets the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
85
81
|
*
|
|
86
|
-
*
|
|
87
|
-
* * (Default) `primary` - Applies coloring based on the primary theme color.
|
|
88
|
-
* * `secondary` - Applies coloring based on the secondary theme color.
|
|
89
|
-
* * `tertiary` - Applies coloring based on the tertiary theme color.
|
|
90
|
-
* * `info` - Applies coloring based on the info theme color.
|
|
91
|
-
* * `success` - Applies coloring based on the success theme color.
|
|
92
|
-
* * `warning` - Applies coloring based on the warning theme color.
|
|
93
|
-
* * `error` - Applies coloring based on the error theme color.
|
|
94
|
-
* * `dark` - Applies coloring based on the dark theme color.
|
|
95
|
-
* * `light` - Applies coloring based on the light theme color.
|
|
96
|
-
* * `inverse` - Applies coloring based on the inverted theme color.
|
|
82
|
+
* @default 'primary'
|
|
97
83
|
*/
|
|
98
84
|
set themeColor(themeColor: BottomNavigationThemeColor);
|
|
99
85
|
get themeColor(): BottomNavigationThemeColor;
|
|
100
86
|
/**
|
|
101
|
-
* Fires
|
|
87
|
+
* Fires when a user selects an item. This event is preventable.
|
|
102
88
|
*/
|
|
103
89
|
select: EventEmitter<BottomNavigationSelectEvent>;
|
|
104
90
|
/**
|
|
@@ -5,23 +5,23 @@
|
|
|
5
5
|
import { PreventableEvent } from '../../common/preventable-event';
|
|
6
6
|
import { BottomNavigationComponent } from '../bottomnavigation.component';
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Provides the arguments for the `select` event of the BottomNavigation.
|
|
9
9
|
*/
|
|
10
10
|
export declare class BottomNavigationSelectEvent extends PreventableEvent {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Represents the index of the selected item in the `items` collection.
|
|
13
13
|
*/
|
|
14
14
|
index: number;
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* Represents the selected BottomNavigation item.
|
|
17
17
|
*/
|
|
18
18
|
item: any;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* Provides the DOM event that triggered the selection.
|
|
21
21
|
*/
|
|
22
22
|
originalEvent: any;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Provides a reference to the BottomNavigation instance that triggered the event.
|
|
25
25
|
*/
|
|
26
26
|
sender: BottomNavigationComponent;
|
|
27
27
|
/**
|
|
@@ -5,9 +5,17 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents a template that defines the
|
|
9
|
-
* To define the template, nest an `<ng-template>` tag
|
|
10
|
-
*
|
|
8
|
+
* Represents a template that defines the content of the BottomNavigation items. Use this directive to customize the appearance of each navigation item.
|
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <kendo-bottomnavigation [items]="items">
|
|
14
|
+
* <ng-template kendoBottomNavigationItemTemplate let-item="item">
|
|
15
|
+
* <span>{{ item.text }}</span>
|
|
16
|
+
* </ng-template>
|
|
17
|
+
* </kendo-bottomnavigation>
|
|
18
|
+
* ```
|
|
11
19
|
*/
|
|
12
20
|
export declare class BottomNavigationItemTemplateDirective {
|
|
13
21
|
templateRef: TemplateRef<any>;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the possible options for the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
7
7
|
*
|
|
8
8
|
* The possible values are:
|
|
9
|
-
* *
|
|
10
|
-
* * `solid
|
|
9
|
+
* * `flat`—Sets the BottomNavigation fill style to a flat, borderless appearance.
|
|
10
|
+
* * `solid`—Sets the BottomNavigation fill style to a solid, filled background.
|
|
11
11
|
*/
|
|
12
12
|
export type BottomNavigationFill = 'flat' | 'solid';
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the possible options to control how the icon and text label are positioned in the BottomNavigation items.
|
|
7
7
|
*
|
|
8
8
|
* The possible values are:
|
|
9
|
-
* *
|
|
10
|
-
* * `horizontal
|
|
9
|
+
* * `vertical`—Renders the text below the icon.
|
|
10
|
+
* * `horizontal`—Renders the icon and the text on the same line.
|
|
11
11
|
*/
|
|
12
12
|
export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
|
|
@@ -4,46 +4,47 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Describes the structure of a BottomNavigation item ([see example](slug:items_bottomnavigation)).
|
|
8
8
|
*/
|
|
9
9
|
export interface BottomNavigationItem {
|
|
10
10
|
/**
|
|
11
11
|
* Disables the BottomNavigation item.
|
|
12
|
+
*
|
|
13
|
+
* @default false
|
|
12
14
|
*/
|
|
13
15
|
disabled?: boolean;
|
|
14
16
|
/**
|
|
15
|
-
* Defines the name of an existing icon in a Kendo UI theme.
|
|
17
|
+
* Defines the name of an existing [font icon](slug:icon_list) in a Kendo UI theme.
|
|
16
18
|
*/
|
|
17
19
|
icon?: string;
|
|
18
20
|
/**
|
|
19
|
-
*
|
|
21
|
+
* Applies a CSS class or multiple classes separated by spaces to a span element inside the item. Allows the usage of custom icons.
|
|
20
22
|
*/
|
|
21
23
|
iconClass?: string;
|
|
22
24
|
/**
|
|
23
|
-
*
|
|
25
|
+
* Sets an [`SVGIcon`](slug:api_icons_svgicon) to render within the BottomNavigation item.
|
|
24
26
|
*/
|
|
25
27
|
svgIcon?: SVGIcon;
|
|
26
28
|
/**
|
|
27
|
-
* Specifies
|
|
29
|
+
* Specifies whether the BottomNavigation item is selected.
|
|
28
30
|
*/
|
|
29
31
|
selected?: boolean;
|
|
30
32
|
/**
|
|
31
|
-
* Sets the
|
|
33
|
+
* Sets the `tabindex` attribute of the BottomNavigation item.
|
|
32
34
|
*
|
|
33
35
|
* @default 0
|
|
34
|
-
*
|
|
35
36
|
*/
|
|
36
37
|
tabIndex?: number;
|
|
37
38
|
/**
|
|
38
|
-
*
|
|
39
|
+
* Sets the text content of the BottomNavigation item.
|
|
39
40
|
*/
|
|
40
41
|
text?: string;
|
|
41
42
|
/**
|
|
42
|
-
*
|
|
43
|
+
* Applies CSS classes to the item element of the BottomNavigation. Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
43
44
|
*/
|
|
44
45
|
cssClass?: any;
|
|
45
46
|
/**
|
|
46
|
-
*
|
|
47
|
+
* Applies CSS styles to the item element of the BottomNavigation. Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
47
48
|
*/
|
|
48
49
|
cssStyle?: any;
|
|
49
50
|
}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the options to control the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
|
|
7
7
|
*
|
|
8
8
|
* The possible values are:
|
|
9
|
-
* *
|
|
10
|
-
* * `sticky
|
|
9
|
+
* * `fixed`—Positions the BottomNavigation at the bottom of the viewport, regardless of the page scroll position.
|
|
10
|
+
* * `sticky`—Positions the BottomNavigation at the end of the scrollable container.
|
|
11
11
|
*/
|
|
12
12
|
export type BottomNavigationPositionMode = 'fixed' | 'sticky';
|
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the possible theme colors of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
7
7
|
*
|
|
8
|
-
*
|
|
9
|
-
* *
|
|
10
|
-
* * `secondary
|
|
11
|
-
* * `tertiary
|
|
12
|
-
* * `info
|
|
13
|
-
* * `success
|
|
14
|
-
* * `warning
|
|
15
|
-
* * `error
|
|
16
|
-
* * `dark
|
|
17
|
-
* * `light
|
|
18
|
-
* * `inverse
|
|
8
|
+
* The possible values are:
|
|
9
|
+
* * `primary`—Applies coloring based on the primary theme color.
|
|
10
|
+
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
11
|
+
* * `tertiary`—Applies coloring based on the tertiary theme color.
|
|
12
|
+
* * `info`—Applies coloring based on the info theme color.
|
|
13
|
+
* * `success`—Applies coloring based on the success theme color.
|
|
14
|
+
* * `warning`—Applies coloring based on the warning theme color.
|
|
15
|
+
* * `error`—Applies coloring based on the error theme color.
|
|
16
|
+
* * `dark`—Applies coloring based on the dark theme color.
|
|
17
|
+
* * `light`—Applies coloring based on the light theme color.
|
|
18
|
+
* * `inverse`—Applies coloring based on the inverted theme color.
|
|
19
19
|
*/
|
|
20
20
|
export type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
|
|
@@ -6,34 +6,22 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
import * as i1 from "./bottomnavigation/bottomnavigation.component";
|
|
7
7
|
import * as i2 from "./bottomnavigation/templates/item-template.directive";
|
|
8
8
|
/**
|
|
9
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
9
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
10
10
|
* definition for the BottomNavigation component.
|
|
11
|
-
* @example
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
15
14
|
* import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
|
|
16
|
-
*
|
|
17
|
-
* // The browser platform with a compiler
|
|
18
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
19
15
|
* import { BrowserModule } from '@angular/platform-browser';
|
|
20
|
-
*
|
|
21
16
|
* import { NgModule } from '@angular/core';
|
|
22
|
-
*
|
|
23
|
-
* // Import the app component
|
|
24
17
|
* import { AppComponent } from './app.component';
|
|
25
18
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* imports: [BrowserModule, BottomNavigationModule], // import BottomNavigation module
|
|
19
|
+
* @NgModule({
|
|
20
|
+
* declarations: [AppComponent],
|
|
21
|
+
* imports: [BrowserModule, BottomNavigationModule],
|
|
30
22
|
* bootstrap: [AppComponent]
|
|
31
23
|
* })
|
|
32
24
|
* export class AppModule {}
|
|
33
|
-
*
|
|
34
|
-
* // Compile and launch the module
|
|
35
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
36
|
-
*
|
|
37
25
|
* ```
|
|
38
26
|
*/
|
|
39
27
|
export declare class BottomNavigationModule {
|
|
@@ -14,11 +14,14 @@ import { SVGIcon } from '@progress/kendo-angular-icons';
|
|
|
14
14
|
import { BreadcrumbSize } from './models/breadcrumb-size';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
/**
|
|
17
|
-
* Represents the [Kendo UI Breadcrumb component for Angular](
|
|
17
|
+
* Represents the [Kendo UI Breadcrumb component for Angular](slug:overview_breadcrumb).
|
|
18
|
+
*
|
|
19
|
+
* Use the Breadcrumb component to allow users to navigate through a hierarchical structure. The component automatically handles overflow
|
|
20
|
+
* scenarios and supports customizable separators, templates, and collapse modes.
|
|
18
21
|
*
|
|
19
22
|
* @example
|
|
20
|
-
* ```
|
|
21
|
-
*
|
|
23
|
+
* ```typescript
|
|
24
|
+
* @Component({
|
|
22
25
|
* selector: 'my-app',
|
|
23
26
|
* template: `
|
|
24
27
|
* <kendo-breadcrumb
|
|
@@ -49,12 +52,12 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
|
|
|
49
52
|
private zone;
|
|
50
53
|
private renderer;
|
|
51
54
|
/**
|
|
52
|
-
*
|
|
55
|
+
* Configures the collection of items that will be rendered in the Breadcrumb.
|
|
53
56
|
*/
|
|
54
57
|
set items(items: any[]);
|
|
55
58
|
get items(): any[];
|
|
56
59
|
/**
|
|
57
|
-
*
|
|
60
|
+
* Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme to be rendered as a separator.
|
|
58
61
|
*/
|
|
59
62
|
separatorIcon: string;
|
|
60
63
|
/**
|
|
@@ -62,30 +65,22 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
|
|
|
62
65
|
*/
|
|
63
66
|
separatorSVGIcon: SVGIcon;
|
|
64
67
|
/**
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
* The possible values are:
|
|
68
|
-
* - `auto` (default)—items are automatically collapsed based on the width of the Breadcrumb.
|
|
69
|
-
* - `wrap`—items are wrapped on multiple rows.
|
|
70
|
-
* - `none`—all items are expanded on the same row.
|
|
68
|
+
* Controls the collapse mode of the Breadcrumb.
|
|
69
|
+
* For more information and example, refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
|
|
71
70
|
*
|
|
72
|
-
*
|
|
71
|
+
* @default `auto`
|
|
73
72
|
*/
|
|
74
73
|
set collapseMode(mode: BreadCrumbCollapseMode);
|
|
75
74
|
get collapseMode(): BreadCrumbCollapseMode;
|
|
76
75
|
/**
|
|
77
|
-
*
|
|
76
|
+
* Determines the padding of all Breadcrumb elements.
|
|
78
77
|
*
|
|
79
|
-
*
|
|
80
|
-
* * `small`
|
|
81
|
-
* * `medium` (default)
|
|
82
|
-
* * `large`
|
|
83
|
-
* * `none`
|
|
78
|
+
* @default `medium`
|
|
84
79
|
*/
|
|
85
80
|
set size(size: BreadcrumbSize);
|
|
86
81
|
get size(): BreadcrumbSize;
|
|
87
82
|
/**
|
|
88
|
-
* Fires when a Breadcrumb item
|
|
83
|
+
* Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.
|
|
89
84
|
*/
|
|
90
85
|
itemClick: EventEmitter<BreadCrumbItem>;
|
|
91
86
|
/**
|
|
@@ -19,38 +19,37 @@ export interface BreadCrumbItemModel {
|
|
|
19
19
|
data: BreadCrumbItem;
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* Represents an interface that defines the structure of individual Breadcrumb items.
|
|
23
23
|
*/
|
|
24
24
|
export interface BreadCrumbItem {
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Sets the text content for the item. If not provided, the numeric item index appears by default.
|
|
27
27
|
*/
|
|
28
28
|
text?: string;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Provides a title for the item ([see example]({% slug overview_breadcrumb %})). The value appears as a `title` attribute on the element.
|
|
31
31
|
*/
|
|
32
32
|
title?: string;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* Determines if the item is disabled ([see example]({% slug item_appearance_breadcrumb %})#toc-disabled-items). The value appears as an `aria-disabled` attribute on the element.
|
|
35
|
+
*
|
|
36
|
+
* @default false
|
|
35
37
|
*/
|
|
36
38
|
disabled?: boolean;
|
|
37
39
|
/**
|
|
38
|
-
*
|
|
39
|
-
* The icon is rendered inside the item by a `span.k-icon element`.
|
|
40
|
+
* Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)). The icon appears inside the item in a `span.k-icon` element.
|
|
40
41
|
*/
|
|
41
42
|
icon?: string;
|
|
42
43
|
/**
|
|
43
|
-
*
|
|
44
|
+
* Sets an [`SVGIcon`](slug:api_icons_svgicon) to display inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-svg-icons)).
|
|
44
45
|
*/
|
|
45
46
|
svgIcon?: SVGIcon;
|
|
46
47
|
/**
|
|
47
|
-
*
|
|
48
|
-
* Allows the usage of custom icons.
|
|
48
|
+
* Applies one or more CSS classes to a `span` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)). Use this to show custom icons.
|
|
49
49
|
*/
|
|
50
50
|
iconClass?: string;
|
|
51
51
|
/**
|
|
52
|
-
*
|
|
53
|
-
* The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
|
|
52
|
+
* Provides a URL for an `img` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-item-images)). The URL can be relative or absolute. If relative, it is resolved against the web page URL.
|
|
54
53
|
*/
|
|
55
54
|
imageUrl?: string;
|
|
56
55
|
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Represents the possible size options of the Breadcrumb.
|
|
7
|
-
* @default `medium`
|
|
6
|
+
* Represents the possible size options that control the padding of the Breadcrumb elements.
|
|
8
7
|
*/
|
|
9
8
|
export type BreadcrumbSize = 'small' | 'medium' | 'large' | 'none';
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Defines the collapse mode of the Breadcrumb. This type provides settings to control how the breadcrumb handles overflow scenarios when there is not
|
|
7
|
+
* enough space to display all items.
|
|
8
|
+
*
|
|
7
9
|
* The available values are:
|
|
8
|
-
* - `auto
|
|
10
|
+
* - `auto`—Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
|
|
9
11
|
* - `wrap`—Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
|
|
10
|
-
* - `none`—All items are expanded on the same row. This scenario is useful when
|
|
12
|
+
* - `none`—All items are expanded on the same row. This scenario is useful when you need to scroll the Breadcrumb.
|
|
11
13
|
*
|
|
12
14
|
* For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
|
|
13
15
|
*/
|
|
@@ -5,10 +5,21 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents a template that defines the content of a Breadcrumb item.
|
|
8
|
+
* Represents a template that defines the content of a Breadcrumb item. This directive allows you to customize how each Breadcrumb item appears by providing
|
|
9
|
+
* your own template. You can access the item data and customize the display with icons, styling, or additional content beyond the default text representation.
|
|
10
|
+
*
|
|
9
11
|
* To define the template, nest an `<ng-template>` tag with the `kendoBreadCrumbItemTemplate` directive inside the `<kendo-breadcrumb>` tag.
|
|
10
12
|
*
|
|
11
13
|
* For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-breadcrumb [items]="items">
|
|
18
|
+
* <ng-template kendoBreadCrumbItemTemplate let-item="item">
|
|
19
|
+
* <span>{{ item.text }}</span>
|
|
20
|
+
* </ng-template>
|
|
21
|
+
* </kendo-breadcrumb>
|
|
22
|
+
* ```
|
|
12
23
|
*/
|
|
13
24
|
export declare class BreadCrumbItemTemplateDirective {
|
|
14
25
|
templateRef: TemplateRef<any>;
|