| 1 | /**
|
| 2 | * @license
|
| 3 | * Copyright Akveo. All Rights Reserved.
|
| 4 | * Licensed under the MIT License. See License.txt in the project root for license information.
|
| 5 | */
|
| 6 | import { NbBooleanInput } from '../helpers';
|
| 7 | import { NbComponentSize } from '../component-size';
|
| 8 | import { NbComponentOrCustomStatus } from '../component-status';
|
| 9 | import { NbBadgePosition } from '../badge/badge.component';
|
| 10 | import { NbIconConfig } from '../icon/icon.component';
|
| 11 | /**
|
| 12 | * Action item, display a link with an icon, or any other content provided instead.
|
| 13 | */
|
| 14 | export declare class NbActionComponent {
|
| 15 | /**
|
| 16 | * Router link to use
|
| 17 | * @type string
|
| 18 | */
|
| 19 | link: string;
|
| 20 | /**
|
| 21 | * Regular HREF link
|
| 22 | * @type: string
|
| 23 | */
|
| 24 | href: string;
|
| 25 | /**
|
| 26 | * Optional title for mouseover
|
| 27 | * @type string
|
| 28 | */
|
| 29 | title: string;
|
| 30 | /**
|
| 31 | * Icon name or config object
|
| 32 | * @type {string | NbIconConfig}
|
| 33 | */
|
| 34 | icon: string | NbIconConfig;
|
| 35 | /**
|
| 36 | * Visually disables the item
|
| 37 | * @type boolean
|
| 38 | */
|
| 39 | get disabled(): boolean;
|
| 40 | set disabled(value: boolean);
|
| 41 | protected _disabled: boolean;
|
| 42 | static ngAcceptInputType_disabled: NbBooleanInput;
|
| 43 | /**
|
| 44 | * Use badge dot mode
|
| 45 | * @type boolean
|
| 46 | */
|
| 47 | get badgeDot(): boolean;
|
| 48 | set badgeDot(value: boolean);
|
| 49 | protected _badgeDot: boolean;
|
| 50 | static ngAcceptInputType_badgeDot: NbBooleanInput;
|
| 51 | /**
|
| 52 | * Badge text to display
|
| 53 | * @type string
|
| 54 | */
|
| 55 | badgeText: string;
|
| 56 | /**
|
| 57 | * Badge status (adds specific styles):
|
| 58 | * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
|
| 59 | * @param {string} val
|
| 60 | */
|
| 61 | badgeStatus: NbComponentOrCustomStatus;
|
| 62 | /**
|
| 63 | * Badge position.
|
| 64 | * Can be set to any class or to one of predefined positions:
|
| 65 | * 'top left', 'top right', 'bottom left', 'bottom right',
|
| 66 | * 'top start', 'top end', 'bottom start', 'bottom end'
|
| 67 | * @type string
|
| 68 | */
|
| 69 | badgePosition: NbBadgePosition;
|
| 70 | }
|
| 71 | /**
|
| 72 | * Shows a horizontal list of actions, available in multiple sizes.
|
| 73 | * Aligns items vertically.
|
| 74 | *
|
| 75 | * @stacked-example(Showcase, action/action-showcase.component)
|
| 76 | *
|
| 77 | * Basic actions setup:
|
| 78 | * ```html
|
| 79 | * <nb-actions size="small">
|
| 80 | * <nb-action icon="nb-search"></nb-action>
|
| 81 | * <nb-action icon="nb-power-circled"></nb-action>
|
| 82 | * <nb-action icon="nb-person"></nb-action>
|
| 83 | * </nb-actions>
|
| 84 | * ```
|
| 85 | * ### Installation
|
| 86 | *
|
| 87 | * Import `NbActionsModule` to your feature module.
|
| 88 | * ```ts
|
| 89 | * @NgModule({
|
| 90 | * imports: [
|
| 91 | * // ...
|
| 92 | * NbActionsModule,
|
| 93 | * ],
|
| 94 | * })
|
| 95 | * export class PageModule { }
|
| 96 | * ```
|
| 97 | * ### Usage
|
| 98 | *
|
| 99 | * Multiple sizes example:
|
| 100 | * @stacked-example(Multiple Sizes, action/action-sizes.component)
|
| 101 | *
|
| 102 | * It is also possible to specify a `badge` value:
|
| 103 | *
|
| 104 | * @stacked-example(Action Badge, action/action-badge.component)
|
| 105 | *
|
| 106 | * and we can set it to full a width of a parent component
|
| 107 | * @stacked-example(Full Width, action/action-width.component)
|
| 108 | *
|
| 109 | * Action dot mode
|
| 110 | * @stacked-example(Action badge in dot mode, action/action-dot-mode.component)
|
| 111 | *
|
| 112 | * @styles
|
| 113 | *
|
| 114 | * actions-background-color:
|
| 115 | * actions-divider-color:
|
| 116 | * actions-divider-style:
|
| 117 | * actions-divider-width:
|
| 118 | * actions-icon-color:
|
| 119 | * actions-text-color:
|
| 120 | * actions-text-font-family:
|
| 121 | * actions-text-font-weight:
|
| 122 | * actions-text-line-height:
|
| 123 | * actions-disabled-icon-color:
|
| 124 | * actions-disabled-text-color:
|
| 125 | * actions-tiny-height:
|
| 126 | * actions-tiny-icon-height:
|
| 127 | * actions-tiny-padding:
|
| 128 | * actions-tiny-text-font-size:
|
| 129 | * actions-small-height:
|
| 130 | * actions-small-icon-height:
|
| 131 | * actions-small-padding:
|
| 132 | * actions-small-text-font-size:
|
| 133 | * actions-medium-height:
|
| 134 | * actions-medium-icon-height:
|
| 135 | * actions-medium-padding:
|
| 136 | * actions-medium-text-font-size:
|
| 137 | * actions-large-height:
|
| 138 | * actions-large-icon-height:
|
| 139 | * actions-large-padding:
|
| 140 | * actions-large-text-font-size:
|
| 141 | * actions-giant-height:
|
| 142 | * actions-giant-icon-height:
|
| 143 | * actions-giant-padding:
|
| 144 | * actions-giant-text-font-size:
|
| 145 | */
|
| 146 | export declare class NbActionsComponent {
|
| 147 | /**
|
| 148 | * Size of the component: 'tiny', 'small' (default), 'medium', 'large', 'giant'
|
| 149 | */
|
| 150 | get size(): NbComponentSize;
|
| 151 | set size(value: NbComponentSize);
|
| 152 | protected _size: NbComponentSize;
|
| 153 | /**
|
| 154 | * Component will fill full width of the container
|
| 155 | */
|
| 156 | get fullWidth(): boolean;
|
| 157 | set fullWidth(value: boolean);
|
| 158 | protected _fullWidth: boolean;
|
| 159 | static ngAcceptInputType_fullWidth: NbBooleanInput;
|
| 160 | get tiny(): boolean;
|
| 161 | get small(): boolean;
|
| 162 | get medium(): boolean;
|
| 163 | get large(): boolean;
|
| 164 | get giant(): boolean;
|
| 165 | }
|