@nebular/theme
- Version 14.0.2
- Published
- 10.3 MB
- 1 dependency
- MIT license
Install
npm i @nebular/theme
yarn add @nebular/theme
pnpm add @nebular/theme
Overview
@nebular/theme
Index
Variables
- BUILT_IN_THEMES
- CORPORATE_THEME
- COSMIC_THEME
- DARK_THEME
- DEFAULT_MEDIA_BREAKPOINTS
- DEFAULT_THEME
- MONTHS_IN_COLUMN
- MONTHS_IN_VIEW
- NB_BUILT_IN_JS_THEMES
- NB_BUTTON_GROUP
- NB_COALESCED_STYLE_SCHEDULER
- NB_DATE_ADAPTER
- NB_DATE_SERVICE_OPTIONS
- NB_DEFAULT_ROW_LEVEL
- NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG
- NB_DIALOG_CONFIG
- NB_DOCUMENT
- NB_JS_THEMES
- NB_LAYOUT_DIRECTION
- NB_MEDIA_BREAKPOINTS
- NB_ROW_DOUBLE_CLICK_DELAY
- NB_SELECT_INJECTION_TOKEN
- NB_SORT_HEADER_COLUMN_DEF
- NB_STEPPER
- NB_TABLE_PROVIDERS
- NB_TABLE_TEMPLATE
- NB_THEME_OPTIONS
- NB_TIME_PICKER_CONFIG
- NB_TOASTR_CONFIG
- NB_TREE_GRID
- NB_VIEW_REPEATER_STRATEGY
- NB_WINDOW
- NB_WINDOW_CONFIG
- NB_WINDOW_CONTENT
- NB_WINDOW_CONTEXT
- NB_WINDOW_DEFAULT_BUTTONS_CONFIG
Functions
Classes
NbAlertComponent
- accent
- additionalClasses
- basic
- basicAccent
- basicOutline
- closable
- close
- control
- controlAccent
- controlOutline
- danger
- dangerAccent
- dangerOutline
- giant
- info
- infoAccent
- infoOutline
- large
- medium
- ngAcceptInputType_closable
- onClose()
- outline
- ɵcmp
- ɵfac
- primary
- primaryAccent
- primaryOutline
- size
- small
- status
- statusService
- success
- successAccent
- successOutline
- tiny
- warning
- warningAccent
- warningOutline
NbAutocompleteDirective
- activeDescendantKeyManagerFactory
- ariaActiveDescendant
- ariaAutocomplete
- ariaExpanded
- ariaOwns
- attachToOverlay()
- autocomplete
- bottom
- cd
- checkOverlayVisibility()
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- customOverlayHost
- destroy$
- getActiveItem()
- getContainer()
- getDisplayValue()
- handleBlur()
- handleInput()
- handleInputValueUpdate()
- handleKeydown()
- hasPopup
- hide()
- hostRef
- initOverlay()
- isClosed
- isOpen
- keyManager
- ngAfterViewInit()
- ngOnDestroy()
- overlay
- overlayOffset
- overlayRef
- ɵdir
- ɵfac
- positionBuilder
- positionStrategy
- registerOnChange()
- registerOnTouched()
- renderer
- role
- scrollStrategy
- setActiveItem()
- setDisabledState()
- setHostInputValue()
- setupAutocomplete()
- shouldShow()
- show()
- subscribeOnOptionClick()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- top
- triggerStrategy
- triggerStrategyBuilder
- writeValue()
NbBaseCalendarComponent
- activeViewMode
- boundingMonth
- date
- dateChange
- dateService
- dayCellComponent
- filter
- firstDayOfWeek
- large
- max
- min
- monthCellComponent
- navigateNext()
- navigatePrev()
- nextMonth()
- nextYear()
- nextYears()
- ngAcceptInputType_activeViewMode
- ngAcceptInputType_showWeekNumber
- ngAcceptInputType_size
- ngOnInit()
- onChangeViewMode()
- ɵcmp
- ɵfac
- prevMonth()
- prevYear()
- prevYears()
- setViewMode()
- setVisibleDate()
- showNavigation
- showWeekNumber
- size
- ViewMode
- visibleDate
- weekNumberSymbol
- yearCellComponent
- yearModelService
NbBasePicker
- adjustment
- attach()
- blur
- blur$
- boundingMonth
- cfr
- checkFormat()
- container
- createOverlay()
- createPositionStrategy()
- createTriggerStrategy()
- dateService
- dateServiceOptions
- dayCellComponent
- destroy$
- filter
- firstDayOfWeek
- format
- formatChanged$
- getValidatorConfig()
- hide()
- hideOnSelect
- hostRef
- init
- init$
- instantiatePicker()
- isShown
- max
- min
- monthCellComponent
- onChange$
- openDatepicker()
- overlay
- overlayOffset
- patchWithInputs()
- picker
- pickerClass
- pickerRef
- pickerValueChange
- positionBuilder
- positionStrategy
- queue
- ref
- shouldHide()
- show()
- showNavigation
- showWeekNumber
- size
- startView
- subscribeOnPositionChange()
- subscribeOnTriggers()
- subscribeOnValueChange()
- triggerStrategy
- triggerStrategyBuilder
- valueChange
- visibleDate
- weekNumberSymbol
- writeQueue()
- yearCellComponent
NbBasePickerComponent
- adjustment
- boundingMonth
- dayCellComponent
- filter
- firstDayOfWeek
- format
- hideOnSelect
- max
- min
- monthCellComponent
- ngAcceptInputType_adjustment
- ngAcceptInputType_showWeekNumber
- ngAcceptInputType_size
- ngAcceptInputType_startView
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- overlayOffset
- ɵcmp
- ɵfac
- pickerClass
- pickerValueChange
- showNavigation
- showWeekNumber
- size
- startView
- value
- visibleDate
- weekNumberSymbol
- writeQueue()
- yearCellComponent
NbButton
- additionalClasses
- appearance
- cd
- disabled
- filled
- fullWidth
- ghost
- giant
- hostElement
- iconElement
- iconLeft
- iconRight
- icons
- isIconExist()
- large
- medium
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_ghost
- ngAcceptInputType_outline
- ngAfterContentChecked()
- ngAfterViewInit()
- nodes
- outline
- ɵdir
- ɵfac
- rectangle
- renderer
- round
- semiRound
- shape
- size
- small
- status
- statusService
- tabbable
- tabIndex
- tiny
- updateProperties()
- zone
NbButtonGroupComponent
- additionalClasses
- appearance
- buttons
- buttonsChange$
- cd
- destroy$
- disabled
- emitCurrentValue()
- filled
- ghost
- lastEmittedValue
- listenButtonPressedState()
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_ghost
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngOnChanges()
- outline
- ɵcmp
- ɵfac
- role
- shape
- size
- status
- statusService
- syncButtonsProperties()
- valueChange
NbCalendarWithTimeComponent
- applyButtonText
- calendarTimeModelService
- cd
- currentTimeButtonText
- dateService
- isLarge()
- ngAfterViewInit()
- ngOnInit()
- onDateValueChange()
- onTimeChange()
- ɵcmp
- ɵfac
- portalOutlet
- saveCurrentTime()
- saveValue()
- showAmPmLabel
- showCurrentTimeButton
- showSeconds()
- singleColumn
- step
- timeFormat
- timepicker
- title
- twelveHoursFormat
- visibleDate
- withSeconds
NbChatComponent
- additionalClasses
- basic
- chatForm
- control
- danger
- giant
- info
- large
- medium
- messages
- ngAcceptInputType_scrollBottom
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- noMessagesPlaceholder
- ɵcmp
- ɵfac
- primary
- scrollable
- scrollBottom
- scrollListBottom()
- size
- small
- status
- statusService
- success
- tiny
- title
- titleTemplate
- updateFormStatus()
- updateView()
- warning
NbChatFormComponent
- buttonIcon
- buttonTitle
- cd
- domSanitizer
- dropFilePlaceholder
- dropFiles
- droppedFiles
- fileOver
- getButtonStatus()
- getHighlightStatus()
- getInputStatus()
- imgDropTypes
- inputFocus
- inputHover
- message
- messagePlaceholder
- onDragLeave()
- onDragOver()
- onDrop()
- onInputChange
- onModelChange()
- ɵcmp
- ɵfac
- removeFile()
- send
- sendMessage()
- setStatus()
- showButton
- status
NbCheckboxComponent
- additionalClasses
- basic
- checked
- checkedChange
- control
- danger
- disabled
- indeterminate
- info
- ngAcceptInputType_checked
- ngAcceptInputType_disabled
- ngAcceptInputType_indeterminate
- ngAfterViewInit()
- onChange
- onTouched
- ɵcmp
- ɵfac
- primary
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- setTouched()
- status
- success
- updateValueAndIndeterminate()
- warning
- writeValue()
NbDatepickerDirective
- changeDetector
- chooseDatepickerAdapter()
- datepickerAdapter
- datepickerAdapters
- dateService
- destroy$
- document
- filterValidator()
- handleInputChange()
- hidePicker()
- hostRef
- input
- inputValue
- isDatepickerReady
- maxValidator()
- minValidator()
- ngOnDestroy()
- noDatepickerAdapterProvided()
- onChange
- onTouched
- ɵdir
- ɵfac
- parseInputValue()
- parseValidator()
- picker
- pickerInputsChangedSubscription
- queue
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- setupPicker()
- subscribeOnInputChange()
- validate()
- validator
- writeInput()
- writePicker()
- writeValue()
NbDateService
- addDay()
- addHours()
- addMinutes()
- addMonth()
- addYear()
- clone()
- compareDates()
- createDate()
- DAYS_IN_WEEK
- format()
- getDate()
- getDateFormat()
- getDayOfWeek()
- getDayOfWeekNames()
- getDayPeriod()
- getFirstDayOfWeek()
- getHours()
- getId()
- getLocaleTimeFormat()
- getMilliseconds()
- getMinutes()
- getMonth()
- getMonthEnd()
- getMonthName()
- getMonthNameByIndex()
- getMonthStart()
- getNumberOfDaysInMonth()
- getSeconds()
- getTwelveHoursFormat()
- getTwelveHoursFormatWithSeconds()
- getTwentyFourHoursFormat()
- getTwentyFourHoursFormatWithSeconds()
- getWeekNumber()
- getYear()
- getYearEnd()
- getYearStart()
- HOURS_IN_DAY_PERIOD
- isBetween()
- isSameDay()
- isSameDaySafe()
- isSameHour()
- isSameHourAndMinute()
- isSameMinute()
- isSameMonth()
- isSameMonthSafe()
- isSameYear()
- isSameYearSafe()
- isValidDateString()
- isValidTimeString()
- locale
- parse()
- setHours()
- setLocale()
- setMilliseconds()
- setMinutes()
- setSeconds()
- today()
- valueOf()
NbDateTimePickerComponent
- applyButtonText
- buildTimeFormat()
- calendarWithTimeModelService
- currentTimeButtonText
- dateTimeChange
- ngAcceptInputType_showAmPmLabel
- ngAcceptInputType_singleColumn
- ngAcceptInputType_twelveHoursFormat
- ngAcceptInputType_withSeconds
- ngOnInit()
- ɵcmp
- ɵfac
- patchWithInputs()
- pickerClass
- pickerValueChange
- showAmPmLabel
- showCurrentTimeButton
- singleColumn
- step
- title
- twelveHoursFormat
- value
- withSeconds
- writeQueue()
NbDynamicOverlay
- componentFactoryResolver
- componentType
- container
- content
- context
- create()
- createContainerContext()
- createOverlay()
- destroy$
- disabled
- dispose()
- disposeOverlayRef()
- getContainer()
- hasOverlayInContainer()
- hide()
- isAttached
- isShown
- isShown$
- lastAppliedPosition
- overlay
- overlayConfig
- overlayContainer
- overlayDestroy$
- ɵfac
- ɵprov
- positionStrategy
- positionStrategyChange$
- ref
- renderContainer()
- setComponent()
- setContent()
- setContentAndContext()
- setContext()
- setDisabled()
- setOverlayConfig()
- setPositionStrategy()
- show()
- toggle()
- updateContext()
- updatePosition()
- updatePositionWhenStable()
- zone
NbDynamicOverlayHandler
- adjustment()
- build()
- changes
- clearChanges()
- componentType()
- connect()
- content()
- context()
- createPositionStrategy()
- destroy()
- destroy$
- disabled()
- disconnect()
- dynamicOverlay
- host()
- isAdjustmentUpdated()
- isComponentTypeUpdated()
- isComponentTypeUpdateRequired()
- isContainerRerenderRequired()
- isContentUpdated()
- isContextUpdated()
- isDisabledUpdated()
- isHostUpdated()
- isOffsetUpdated()
- isOverlayConfigUpdated()
- isPositionStrategyUpdateRequired()
- isPositionUpdated()
- isTriggerStrategyUpdateRequired()
- isTriggerUpdated()
- offset()
- overlayConfig()
- ɵfac
- ɵprov
- position()
- positionStrategy
- rebuild()
- subscribeOnDirectionChange()
- subscribeOnTriggers()
- trigger()
- triggerStrategy
NbFormFieldComponent
- cd
- destroy$
- elementRef
- formControl
- formControlConfig
- formControlState$
- formFieldClasses
- getAddonClasses()
- getFormControlConfig()
- isStatesEqual()
- ngAfterContentChecked()
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnDestroy()
- ɵcmp
- ɵfac
- prefix
- prefixClasses$
- renderer
- shouldShowPrefix()
- shouldShowSuffix()
- subscribeToAddonChange()
- subscribeToFormControlStateChange()
- suffix
- suffixClasses$
- zone
NbInputDirective
- additionalClasses
- basic
- control
- danger
- destroy$
- disabled$
- elementRef
- fieldSize
- focused$
- focusMonitor
- fullWidth
- fullWidth$
- giant
- info
- large
- medium
- ngAcceptInputType_fullWidth
- ngAfterViewInit()
- ngDoCheck()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- ɵdir
- ɵfac
- primary
- rectangle
- renderer
- round
- semiRound
- shape
- size$
- small
- status
- status$
- statusService
- success
- tiny
- warning
- zone
NbLayoutComponent
- afterViewInit$
- blockScroll()
- centerValue
- document
- elementRef
- getDimensions()
- getScrollPosition()
- isScrollBlocked
- layoutContainerRef
- layoutDirectionService
- layoutPaddingOldValue
- ngAcceptInputType_center
- ngAcceptInputType_restoreScrollTop
- ngAcceptInputType_windowMode
- ngAcceptInputType_withScroll
- ngAfterViewInit()
- ngOnDestroy()
- onResize()
- onScroll()
- overlayContainer
- ɵcmp
- ɵfac
- platformId
- registerAsOverlayContainer()
- renderer
- restoreScrollTopValue
- rulerService
- scrollableContainerOverflowOldValue
- scrollableContainerRef
- scrollBlockClass
- scrollService
- scrollTop
- spinnerService
- themeService
- unregisterAsOverlayContainer()
- veryTopRef
- window
- windowModeValue
- withScrollValue
- withSubheader
NbNativeDateService
- addDay()
- addHours()
- addMinutes()
- addMonth()
- addYear()
- clone()
- compareDates()
- createDate()
- datePipe
- format()
- getDate()
- getDateFormat()
- getDayOfWeek()
- getDayOfWeekNames()
- getFirstDayOfWeek()
- getHours()
- getId()
- getLocaleTimeFormat()
- getMilliseconds()
- getMinutes()
- getMonth()
- getMonthEnd()
- getMonthName()
- getMonthNameByIndex()
- getMonthStart()
- getNumberOfDaysInMonth()
- getSeconds()
- getTwelveHoursFormat()
- getWeekNumber()
- getYear()
- getYearEnd()
- getYearStart()
- isSameDay()
- isSameMonth()
- isSameYear()
- isValidDateString()
- isValidTimeString()
- ɵfac
- ɵprov
- parse()
- setHours()
- setLocale()
- setMilliseconds()
- setMinutes()
- setSeconds()
- today()
- valueOf()
NbOptionComponent
- activeClass
- alive
- cd
- click
- click$
- content
- deselect()
- disabled
- disabledAttribute
- disabledByGroup
- elementRef
- focus()
- getLabel()
- hidden
- id
- multiple
- ngAcceptInputType_disabled
- ngAfterViewInit()
- ngOnDestroy()
- onClick()
- ɵcmp
- ɵfac
- parent
- renderer
- select()
- selected
- selectedClass
- selectionChange
- setActiveStyles()
- setDisabledByGroupState()
- setInactiveStyles()
- setSelection()
- tabindex
- value
- withCheckbox
- zone
NbPopoverDirective
- adjustment
- configureDynamicOverlay()
- content
- context
- destroy$
- disabled
- dynamicOverlay
- dynamicOverlayHandler
- hide()
- hostRef
- isShown
- nbPopoverShowStateChange
- ngAcceptInputType_adjustment
- ngAcceptInputType_position
- ngAcceptInputType_trigger
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- offset
- overlayConfig
- ɵdir
- ɵfac
- popoverClass
- popoverComponent
- position
- rebuild()
- show()
- toggle()
- trigger
NbRadioGroupComponent
- destroy$
- disabled
- document
- hostElement
- name
- ngAcceptInputType_disabled
- ngAfterContentInit()
- ngOnDestroy()
- onChange
- onTouched
- ɵcmp
- ɵfac
- platformId
- propagateValue()
- radios
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- status
- subscribeOnRadiosBlur()
- subscribeOnRadiosValueChange()
- updateAndMarkForCheckRadios()
- updateAndSubscribeToRadios()
- updateDisabled()
- updateNames()
- updateStatus()
- updateValueFromCheckedOption()
- updateValues()
- value
- valueChange
- writeValue()
NbSearchFieldComponent
- close
- columnCurtain
- curtain
- emitClose()
- emitSearchInput()
- focusInput()
- hint
- inputElement
- modalDrop
- modalHalf
- modalMove
- modalZoomin
- ngAfterViewInit()
- ngOnChanges()
- ɵcmp
- ɵfac
- placeholder
- rotateLayout
- search
- searchInput
- show
- showClass
- submitSearch()
- type
- TYPE_COLUMN_CURTAIN
- TYPE_CURTAIN
- TYPE_MODAL_DROP
- TYPE_MODAL_HALF
- TYPE_MODAL_MOVE
- TYPE_MODAL_ZOOMIN
- TYPE_ROTATE_LAYOUT
NbSelectComponent
- additionalClasses
- alive
- appearance
- attachToOverlay()
- basic
- button
- canSelectValue()
- cd
- compareWith
- control
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- customLabel
- danger
- destroy$
- disabled
- disabled$
- document
- emitSelected()
- filled
- focused$
- focusKeyManagerFactoryService
- focusMonitor
- fullWidth
- fullWidth$
- getContainer()
- giant
- handleMultipleSelect()
- handleOptionClick()
- handleSingleSelect()
- hero
- hide()
- hostRef
- hostWidth
- info
- isClickedWithinComponent()
- isHidden
- isOpen
- keyManager
- large
- medium
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_hero
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- onChange
- onTouched
- options
- optionsListClass
- optionsOverlayOffset
- optionsPanelClass
- optionsWidth
- outline
- overlay
- overlayPosition
- ɵcmp
- ɵfac
- placeholder
- portal
- positionBuilder
- positionStrategy
- primary
- queue
- rectangle
- ref
- registerOnChange()
- registerOnTouched()
- renderer
- reset()
- round
- scrollStrategy
- selectButtonClasses
- selected
- selectedChange
- selectionModel
- selectionView
- selectOption()
- selectValue()
- semiRound
- setActiveOption()
- setDisabledState()
- setSelection()
- shape
- shouldShow()
- show()
- size
- size$
- small
- status
- status$
- statusService
- subscribeOnButtonFocus()
- subscribeOnOptionClick()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- success
- tiny
- triggerStrategy
- triggerStrategyBuilder
- trySetTouched()
- warning
- writeValue()
- zone
NbSelectWithAutocompleteComponent
- activeDescendantKeyManager
- activeDescendantKeyManagerFactoryService
- additionalClasses
- alive
- appearance
- attachToOverlay()
- basic
- button
- canSelectValue()
- cd
- compareWith
- control
- createKeyManager()
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- currentKeyManager
- customLabel
- danger
- destroy$
- disabled
- disabled$
- document
- emitSelected()
- filled
- focusButton()
- focused$
- focusKeyManager
- focusKeyManagerFactoryService
- focusMonitor
- fullWidth
- fullWidth$
- getContainer()
- giant
- handleMultipleSelect()
- handleOptionClick()
- handleSingleSelect()
- hero
- hide()
- hostRef
- hostWidth
- info
- isClickedWithinComponent()
- isHidden
- isOpen
- isOptionHidden()
- isOptionsAutocompleteAllowed
- isOptionsAutocompleteInputShown
- large
- lastShownButtonWidth
- medium
- multiple
- ngAcceptInputType_disabled
- ngAcceptInputType_filled
- ngAcceptInputType_fullWidth
- ngAcceptInputType_hero
- ngAcceptInputType_multiple
- ngAcceptInputType_outline
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- onAutocompleteInputChange()
- onChange
- onTouched
- options
- optionsAutocompleteInput
- optionsAutocompleteInputChange
- optionsListClass
- optionsOverlayOffset
- optionsPanelClass
- optionsWidth
- outline
- overlay
- overlayPosition
- ɵcmp
- ɵfac
- placeholder
- portal
- positionBuilder
- positionStrategy$
- primary
- queue
- rectangle
- ref
- registerOnChange()
- registerOnTouched()
- renderer
- reset()
- resetAutocompleteInput()
- round
- scrollStrategy
- selectButtonClasses
- selectClose
- selected
- selectedChange
- selectionModel
- selectionView
- selectOpen
- selectOption()
- selectValue()
- semiRound
- setActiveOption()
- setDisabledState()
- setSelection()
- shape
- shouldShow()
- show()
- size
- size$
- small
- status
- status$
- statusService
- subscribeOnButtonFocus()
- subscribeOnOptionClick()
- subscribeOnOptionsAutocompleteChange()
- subscribeOnOverlayKeys()
- subscribeOnPositionChange()
- subscribeOnTriggers()
- success
- tiny
- triggerStrategy
- triggerStrategyBuilder
- trySetTouched()
- updateCurrentKeyManager()
- updatePositionStrategy()
- warning
- withOptionsAutocomplete
- writeValue()
- zone
NbSidebarComponent
- collapse()
- collapsed
- collapsedBreakpoints
- compact()
- compacted
- compactedBreakpoints
- containerFixedValue
- destroy$
- endValue
- expand()
- expanded
- fixedValue
- getMenuLink()
- leftValue
- ngAcceptInputType_containerFixed
- ngAcceptInputType_end
- ngAcceptInputType_fixed
- ngAcceptInputType_left
- ngAcceptInputType_responsive
- ngAcceptInputType_right
- ngAcceptInputType_start
- ngOnDestroy()
- ngOnInit()
- onClick()
- ɵcmp
- ɵfac
- responsive
- responsiveState
- responsiveStateChange
- responsiveValueChange$
- rightValue
- startValue
- state
- stateChange
- subscribeToMediaQueryChange()
- tag
- toggle()
- updateState()
NbTabComponent
- active
- activeValue
- badgeDot
- badgePosition
- badgeStatus
- badgeText
- disabled
- disabledValue
- init
- ngAcceptInputType_active
- ngAcceptInputType_badgeDot
- ngAcceptInputType_disabled
- ngAcceptInputType_lazyLoad
- ngAcceptInputType_responsive
- ɵcmp
- ɵfac
- responsive
- responsiveValue
- route
- tabContentDirective
- tabIcon
- tabId
- tabTitle
- tabTitleDirective
NbTagComponent
- additionalClasses
- appearance
- basic
- cd
- control
- danger
- destroy$
- filled
- giant
- info
- large
- medium
- ngAcceptInputType_removable
- ngAcceptInputType_selected
- ngAfterViewInit()
- ngOnDestroy()
- outline
- ɵcmp
- ɵfac
- primary
- removable
- remove
- renderer
- role
- selected
- selectedChange
- setActiveStyles()
- setInactiveStyles()
- size
- small
- status
- statusService
- success
- text
- tiny
- warning
- zone
NbTagListComponent
- activeDescendantKeyManagerFactory
- activeTagId
- autocompleteDirective
- cd
- destroy$
- directionService
- focused
- focusInput()
- focusInputIfActive()
- focusMonitor
- hostElement
- initKeyManager()
- isBackspaceOrDelete()
- keyDown$
- keyManager
- listenActiveTagChange()
- listenInputKeyDown()
- listenListKeyDown()
- listenNoTags()
- listenTagClick()
- listenTagDestroy()
- listenTagRemove()
- listenToLayoutDirectionChange()
- multiple
- ngAcceptInputType_multiple
- ngAfterContentInit()
- ngAfterViewInit()
- ngOnDestroy()
- ngOnInit()
- onFocusChange()
- ɵcmp
- ɵfac
- renderer
- role
- setAutocompleteCustomHost()
- size
- statusService
- tabIndex
- tagClick$
- tagInput
- tagRemove
- tags
- toggleTag()
- zone
NbTimePickerComponent
- ampmText
- applyButtonText
- attach()
- blur
- blur$
- buildColumnOptions()
- buildTimeFormat()
- calendarTimeModelService
- cd
- changeDayPeriod()
- computedTimeFormat
- config
- currentTimeButtonText
- date
- dateService
- dayPeriodColumnOptions
- fullTimeOptions
- generateHours()
- generateMinutesOrSeconds()
- getFullTimeString()
- hostRef
- hoursColumnOptions
- hoursText
- initFromConfig()
- isAM
- isFirefox()
- isSelectedDayPeriod()
- isSelectedFullTimeValue()
- isSelectedHour()
- isSelectedMinute()
- isSelectedSecond()
- minutesColumnOptions
- minutesText
- ngAcceptInputType_showAmPmLabel
- ngAcceptInputType_singleColumn
- ngAcceptInputType_twelveHoursFormat
- ngAcceptInputType_withSeconds
- ngOnChanges()
- onSelectTime
- ɵcmp
- ɵfac
- platformService
- portal
- saveValue()
- secondsColumnOptions
- secondsText
- selectFullTime()
- setCurrentTime()
- setHost()
- setHour()
- setMinute()
- setSecond()
- setupTimeFormat()
- showAmPmLabel
- showFooter
- showSeconds()
- singleColumn
- step
- timeFormat
- timepickerFormatChange$
- trackByDayPeriod()
- trackBySingleColumnValue()
- trackByTimeValues()
- twelveHoursFormat
- updateValue()
- withSeconds
NbTimePickerDirective
- attachToOverlay()
- calendarTimeModelService
- cd
- createOverlay()
- createPositionStrategy()
- createScrollStrategy()
- createTriggerStrategy()
- dateService
- destroy$
- document
- getContainer()
- handleInputChange()
- hide()
- hostRef
- initOverlay()
- input
- inputValue
- isClosed
- isOpen
- lastInputValue
- ngAfterViewInit()
- onChange
- onTouched
- overlay
- overlayOffset
- overlayRef
- ɵdir
- ɵfac
- parseNativeDateString()
- pickerInputsChangedSubscription
- placeholder
- positionBuilder
- positionStrategy
- registerOnChange()
- registerOnTouched()
- renderer
- setDisabledState()
- setupTimepicker()
- show()
- subscribeOnApplyClick()
- subscribeOnInputChange()
- subscribeOnTriggers()
- subscribeToBlur()
- timepicker
- triggerStrategy
- triggerStrategyBuilder
- updateValue()
- writeValue()
NbToggleComponent
- additionalClasses
- basic
- checked
- checkedChange
- checkState()
- control
- danger
- disabled
- info
- labelEnd
- labelLeft
- labelPosition
- labelRight
- labelStart
- ngAcceptInputType_checked
- ngAcceptInputType_disabled
- ngAfterViewInit()
- ngOnDestroy()
- ngOnInit()
- onChange
- onInputClick()
- onTouched
- ɵcmp
- ɵfac
- primary
- registerOnChange()
- registerOnTouched()
- setDisabledState()
- status
- statusService
- success
- updateValue()
- warning
- writeValue()
NbTooltipDirective
- adjustment
- configureDynamicOverlay()
- content
- context
- destroy$
- disabled
- dynamicOverlay
- dynamicOverlayHandler
- hide()
- hostRef
- isShown
- nbTooltipShowStateChange
- ngAcceptInputType_adjustment
- ngAcceptInputType_position
- ngAfterViewInit()
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- offset
- overlayConfig
- ɵdir
- ɵfac
- position
- rebuild()
- show()
- toggle()
- tooltipClass
- tooltipComponent
- trigger
NbWindowComponent
- attachComponent()
- attachTemplate()
- cfr
- close()
- config
- content
- context
- elementRef
- focusTrap
- focusTrapFactory
- fullScreen()
- isFullScreen
- maximize()
- maximized
- maximizeOrFullScreen()
- minimize()
- minimized
- ngAfterViewChecked()
- ngOnDestroy()
- ngOnInit()
- overlayContainer
- ɵcmp
- ɵfac
- renderer
- showClose
- showFullScreen
- showMaximize
- showMinimize
- windowRef
Interfaces
Enums
Type Aliases
- NbAdjustmentValues
- NbBadgeLogicalPosition
- NbBadgePhysicalPosition
- NbBadgePosition
- NbButtonAppearance
- NbButtonProperties
- NbButtonToggleAppearance
- NbCalendarSizeValues
- NbCalendarViewModeValues
- NbChatMessageFile
- NbChildrenGetter
- NbComponentOrCustomStatus
- NbComponentShape
- NbComponentSize
- NbComponentStatus
- NbComponentType
- NbConnectedOverlayPositionChange
- NbConnectedPosition
- NbConnectionPositionPair
- NbDataGetter
- NbDuplicateToastBehaviour
- NbExpandedGetter
- NbFocusableOption
- NbFormControlAddon
- NbGlobalPosition
- NbOverlayConfig
- NbOverlayContent
- NbOverlayRef
- NbPortal
- NbPositionStrategy
- NbPositionValues
- NbScrollStrategies
- NbScrollStrategy
- NbSearchType
- NbSelectAppearance
- NbSelectCompareFunction
- NbSidebarResponsiveState
- NbSidebarState
- NbSortDirectionValues
- NbStepperOrientation
- NbTagAppearance
- NbTriggerValues
Variables
variable BUILT_IN_THEMES
const BUILT_IN_THEMES: NbJSThemeOptions[];
variable CORPORATE_THEME
const CORPORATE_THEME: NbJSThemeOptions;
variable COSMIC_THEME
const COSMIC_THEME: NbJSThemeOptions;
variable DARK_THEME
const DARK_THEME: NbJSThemeOptions;
variable DEFAULT_MEDIA_BREAKPOINTS
const DEFAULT_MEDIA_BREAKPOINTS: { name: string; width: number }[];
variable DEFAULT_THEME
const DEFAULT_THEME: NbJSThemeOptions;
variable MONTHS_IN_COLUMN
const MONTHS_IN_COLUMN: number;
variable MONTHS_IN_VIEW
const MONTHS_IN_VIEW: number;
variable NB_BUILT_IN_JS_THEMES
const NB_BUILT_IN_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
variable NB_BUTTON_GROUP
const NB_BUTTON_GROUP: InjectionToken<NbButtonGroupComponent>;
variable NB_COALESCED_STYLE_SCHEDULER
const NB_COALESCED_STYLE_SCHEDULER: any;
variable NB_DATE_ADAPTER
const NB_DATE_ADAPTER: InjectionToken<NbDatepickerAdapter<any>>;
variable NB_DATE_SERVICE_OPTIONS
const NB_DATE_SERVICE_OPTIONS: InjectionToken<unknown>;
variable NB_DEFAULT_ROW_LEVEL
const NB_DEFAULT_ROW_LEVEL: number;
variable NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG
const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig;
variable NB_DIALOG_CONFIG
const NB_DIALOG_CONFIG: InjectionToken<NbDialogConfig<any>>;
variable NB_DOCUMENT
const NB_DOCUMENT: InjectionToken<Document>;
variable NB_JS_THEMES
const NB_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
variable NB_LAYOUT_DIRECTION
const NB_LAYOUT_DIRECTION: InjectionToken<NbLayoutDirection>;
Layout direction setting injection token.
variable NB_MEDIA_BREAKPOINTS
const NB_MEDIA_BREAKPOINTS: InjectionToken<NbMediaBreakpoint[]>;
variable NB_ROW_DOUBLE_CLICK_DELAY
const NB_ROW_DOUBLE_CLICK_DELAY: number;
variable NB_SELECT_INJECTION_TOKEN
const NB_SELECT_INJECTION_TOKEN: InjectionToken<unknown>;
variable NB_SORT_HEADER_COLUMN_DEF
const NB_SORT_HEADER_COLUMN_DEF: InjectionToken<unknown>;
variable NB_STEPPER
const NB_STEPPER: InjectionToken<unknown>;
variable NB_TABLE_PROVIDERS
const NB_TABLE_PROVIDERS: Provider[];
variable NB_TABLE_TEMPLATE
const NB_TABLE_TEMPLATE: string;
variable NB_THEME_OPTIONS
const NB_THEME_OPTIONS: InjectionToken<NbThemeOptions>;
variable NB_TIME_PICKER_CONFIG
const NB_TIME_PICKER_CONFIG: InjectionToken<unknown>;
variable NB_TOASTR_CONFIG
const NB_TOASTR_CONFIG: InjectionToken<NbToastrConfig>;
variable NB_TREE_GRID
const NB_TREE_GRID: InjectionToken<unknown>;
variable NB_VIEW_REPEATER_STRATEGY
const NB_VIEW_REPEATER_STRATEGY: any;
variable NB_WINDOW
const NB_WINDOW: InjectionToken<Window>;
We're providing browser apis with tokens to improve testing capabilities.
variable NB_WINDOW_CONFIG
const NB_WINDOW_CONFIG: InjectionToken<NbWindowConfig>;
variable NB_WINDOW_CONTENT
const NB_WINDOW_CONTENT: InjectionToken<any>;
variable NB_WINDOW_CONTEXT
const NB_WINDOW_CONTEXT: InjectionToken<Object>;
variable NB_WINDOW_DEFAULT_BUTTONS_CONFIG
const NB_WINDOW_DEFAULT_BUTTONS_CONFIG: NbWindowControlButtonsConfig;
Functions
function createContainer
createContainer: <T>( ref: OverlayRef, container: ComponentType<T>, context: Object, componentFactoryResolver?: ComponentFactoryResolver) => ComponentRef<T>;
function nbSelectFormFieldControlConfigFactory
nbSelectFormFieldControlConfigFactory: () => NbFormFieldControlConfig;
function patch
patch: <T>( container: ComponentRef<T>, containerContext: Object) => ComponentRef<T>;
function windowFactory
windowFactory: (platformId: Object) => Window | undefined;
Classes
class NbA11yModule
class NbA11yModule {}
class NbAccordionComponent
class NbAccordionComponent {}
An accordion allows to toggle the display of sections of content
Basic example @stacked-example(Showcase, accordion/accordion-showcase.component)
<nb-accordion><nb-accordion-item><nb-accordion-item-header>Product Details</nb-accordion-item-header><nb-accordion-item-body>Item Content</nb-accordion-item-body></nb-accordion-item></nb-accordion>### Installation
Import
NbAccordionModule
to your feature module.@NgModule({imports: [// ...NbAccordionModule,],})export class PageModule { }### Usage
With
multi
mode accordion can have multiple items expanded: @stacked-example(Multiple expanded items, accordion/accordion-multi.component)NbAccordionItemComponent
has several methods, for example it is possible to trigger item click/toggle: @stacked-example(Expand API, accordion/accordion-toggle.component)accordion-border-radius: accordion-padding: accordion-shadow: accordion-header-text-color: accordion-header-text-font-family: accordion-header-text-font-size: accordion-header-text-font-weight: accordion-header-text-line-height: accordion-header-disabled-text-color: accordion-header-border-color: accordion-header-border-style: accordion-header-border-width: accordion-item-background-color: accordion-item-text-color: accordion-item-text-font-family: accordion-item-text-font-size: accordion-item-text-font-weight: accordion-item-text-line-height:
property multi
multi: boolean;
Allow multiple items to be expanded at the same time. {boolean}
property ngAcceptInputType_multi
static ngAcceptInputType_multi: NbBooleanInput;
property openCloseItems
openCloseItems: Subject<boolean>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionComponent, 'nb-accordion', never, { multi: { alias: 'multi'; required: false } }, {}, never, ['nb-accordion-item'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionComponent, never>;
method closeAll
closeAll: () => void;
Closes all enabled accordion items.
method openAll
openAll: () => void;
Opens all enabled accordion items.
class NbAccordionItemBodyComponent
class NbAccordionItemBodyComponent implements OnInit, OnDestroy {}
Component intended to be used within
<nb-accordion-item>
component
constructor
constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemBodyComponent, 'nb-accordion-item-body', never, {}, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemBodyComponent, [{ host: true }, null]>;
property state
readonly state: string;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
class NbAccordionItemComponent
class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {}
Component intended to be used within
<nb-accordion>
component
constructor
constructor(accordion: NbAccordionComponent, cd: ChangeDetectorRef);
property accordionItemInvalidate
accordionItemInvalidate: Subject<boolean>;
property collapsed
collapsed: boolean;
Item is collapse (
true
by default) {boolean}
property collapsedChange
collapsedChange: EventEmitter<boolean>;
Emits whenever the expanded state of the accordion changes. Primarily used to facilitate two-way binding.
property disabled
disabled: boolean;
Item is disabled and cannot be opened. {boolean}
property expanded
expanded: boolean;
Item is expanded (
false
by default) {boolean}
property ngAcceptInputType_collapsed
static ngAcceptInputType_collapsed: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ngAcceptInputType_expanded
static ngAcceptInputType_expanded: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemComponent, 'nb-accordion-item', never, { collapsed: { alias: 'collapsed'; required: false }; expanded: { alias: 'expanded'; required: false }; disabled: { alias: 'disabled'; required: false }; }, { collapsedChange: 'collapsedChange' }, never, ['nb-accordion-item-header', 'nb-accordion-item-body'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemComponent, [{ host: true }, null]>;
method close
close: () => void;
Collapse the item.
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method open
open: () => void;
Open the item.
method toggle
toggle: () => void;
Open/close the item
class NbAccordionItemHeaderComponent
class NbAccordionItemHeaderComponent implements OnInit, OnDestroy {}
Component intended to be used within
<nb-accordion-item>
component
constructor
constructor(accordionItem: NbAccordionItemComponent, cd: ChangeDetectorRef);
property disabled
readonly disabled: boolean;
property expanded
readonly expanded: boolean;
property isCollapsed
readonly isCollapsed: boolean;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAccordionItemHeaderComponent, 'nb-accordion-item-header', never, {}, {}, never, ['nb-accordion-item-title', 'nb-accordion-item-description', '*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< NbAccordionItemHeaderComponent, [{ host: true }, null]>;
property state
readonly state: string;
property tabbable
readonly tabbable: string;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method toggle
toggle: () => void;
class NbAccordionModule
class NbAccordionModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAccordionModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbAccordionModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbAccordionModule, [ typeof i1.NbAccordionComponent, typeof i2.NbAccordionItemComponent, typeof i3.NbAccordionItemHeaderComponent, typeof i4.NbAccordionItemBodyComponent ], [any, typeof i6.NbIconModule], [ typeof i1.NbAccordionComponent, typeof i2.NbAccordionItemComponent, typeof i3.NbAccordionItemHeaderComponent, typeof i4.NbAccordionItemBodyComponent ]>;
class NbActionComponent
class NbActionComponent {}
Action item, display a link with an icon, or any other content provided instead.
property badgeDot
badgeDot: boolean;
Use badge dot mode boolean
property badgePosition
badgePosition: NbBadgePosition;
Badge position. Can be set to any class or to one of predefined positions: 'top left', 'top right', 'bottom left', 'bottom right', 'top start', 'top end', 'bottom start', 'bottom end' string
property badgeStatus
badgeStatus: string;
Badge status (adds specific styles): 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
Parameter val
property badgeText
badgeText: string;
Badge text to display string
property disabled
disabled: boolean;
Visually disables the item boolean
property href
href: string;
Regular HREF link @type: string
property icon
icon: string | NbIconConfig;
Icon name or config object {string | NbIconConfig}
property link
link: string;
Router link to use string
property ngAcceptInputType_badgeDot
static ngAcceptInputType_badgeDot: NbBooleanInput;
property ngAcceptInputType_disabled
static ngAcceptInputType_disabled: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbActionComponent, 'nb-action', never, { link: { alias: 'link'; required: false }; href: { alias: 'href'; required: false }; title: { alias: 'title'; required: false }; icon: { alias: 'icon'; required: false }; disabled: { alias: 'disabled'; required: false }; badgeDot: { alias: 'badgeDot'; required: false }; badgeText: { alias: 'badgeText'; required: false }; badgeStatus: { alias: 'badgeStatus'; required: false }; badgePosition: { alias: 'badgePosition'; required: false }; }, {}, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionComponent, never>;
property title
title: string;
Optional title for mouseover string
class NbActionsComponent
class NbActionsComponent {}
Shows a horizontal list of actions, available in multiple sizes. Aligns items vertically.
@stacked-example(Showcase, action/action-showcase.component)
Basic actions setup:
<nb-actions size="small"><nb-action icon="nb-search"></nb-action><nb-action icon="nb-power-circled"></nb-action><nb-action icon="nb-person"></nb-action></nb-actions>### Installation
Import
NbActionsModule
to your feature module.@NgModule({imports: [// ...NbActionsModule,],})export class PageModule { }### Usage
Multiple sizes example: @stacked-example(Multiple Sizes, action/action-sizes.component)
It is also possible to specify a
badge
value:@stacked-example(Action Badge, action/action-badge.component)
and we can set it to full a width of a parent component @stacked-example(Full Width, action/action-width.component)
Action dot mode @stacked-example(Action badge in dot mode, action/action-dot-mode.component)
actions-background-color: actions-divider-color: actions-divider-style: actions-divider-width: actions-icon-color: actions-text-color: actions-text-font-family: actions-text-font-weight: actions-text-line-height: actions-disabled-icon-color: actions-disabled-text-color: actions-tiny-height: actions-tiny-icon-height: actions-tiny-padding: actions-tiny-text-font-size: actions-small-height: actions-small-icon-height: actions-small-padding: actions-small-text-font-size: actions-medium-height: actions-medium-icon-height: actions-medium-padding: actions-medium-text-font-size: actions-large-height: actions-large-icon-height: actions-large-padding: actions-large-text-font-size: actions-giant-height: actions-giant-icon-height: actions-giant-padding: actions-giant-text-font-size:
property fullWidth
fullWidth: boolean;
Component will fill full width of the container
property giant
readonly giant: boolean;
property large
readonly large: boolean;
property medium
readonly medium: boolean;
property ngAcceptInputType_fullWidth
static ngAcceptInputType_fullWidth: NbBooleanInput;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbActionsComponent, 'nb-actions', never, { size: { alias: 'size'; required: false }; fullWidth: { alias: 'fullWidth'; required: false }; }, {}, never, ['nb-action'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsComponent, never>;
property size
size: NbComponentSize;
Size of the component: 'tiny', 'small' (default), 'medium', 'large', 'giant'
property small
readonly small: boolean;
property tiny
readonly tiny: boolean;
class NbActionsModule
class NbActionsModule {}
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbActionsModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<NbActionsModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< NbActionsModule, [typeof i1.NbActionComponent, typeof i1.NbActionsComponent], [typeof i2.NbSharedModule, typeof i3.NbBadgeModule, typeof i4.NbIconModule], [typeof i1.NbActionComponent, typeof i1.NbActionsComponent]>;
class NbAdjustableConnectedPositionStrategy
class NbAdjustableConnectedPositionStrategy extends NbFlexibleConnectedPositionStrategy implements NbPositionStrategy {}
The main idea of the adjustable connected strategy is to provide predefined set of positions for your overlay. You have to provide adjustment and appropriate strategy will be chosen in runtime.
property appliedPositions
protected appliedPositions: { key: NbPosition; connectedPosition: ConnectedPosition;}[];
property positionChange
readonly positionChange: Observable<NbPosition>;
method adjustment
adjustment: (adjustment: NbAdjustment) => this;
method apply
apply: () => void;
method applyPositions
protected applyPositions: () => void;
method attach
attach: (overlayRef: OverlayRef) => void;
method createPositions
protected createPositions: () => NbPosition[];
method direction
direction: (direction: NbLayoutDirection) => this;
method mapToLogicalPosition
protected mapToLogicalPosition: (position: NbPosition) => NbPosition;
method offset
offset: (offset: number) => this;
method persistChosenPositions
protected persistChosenPositions: (positions: NbPosition[]) => void;
method position
position: (position: NbPosition) => this;
method reorderPreferredPositions
protected reorderPreferredPositions: (positions: NbPosition[]) => NbPosition[];
class NbAlertComponent
class NbAlertComponent {}
Alert component.
Basic alert example: @stacked-example(Showcase, alert/alert-showcase.component)
Alert configuration:
<nb-alert status="success">You have been successfully authenticated!</nb-alert>### Installation
Import
NbAlertModule
to your feature module.@NgModule({imports: [// ...NbAlertModule,],})export class PageModule { }### Usage
Alert could additionally have a
close
button whenclosable
property is set:<nb-alert status="success" closable (close)="onClose()">You have been successfully authenticated!</nb-alert>Colored alerts could be simply configured by providing a
status
property: @stacked-example(Alert status, alert/alert-colors.component)It is also possible to assign an
accent
property for a slight alert highlight as well as combine it withstatus
: @stacked-example(Alert accent, alert/alert-accents.component)And
outline
property: @stacked-example(Outline Alert, alert/alert-outline.component)@additional-example(Multiple Sizes, alert/alert-sizes.component)
alert-border-radius: alert-bottom-margin: alert-padding: alert-scrollbar-color: alert-scrollbar-background-color: alert-scrollbar-width: alert-shadow: alert-text-font-family: alert-text-font-size: alert-text-font-weight: alert-text-line-height: alert-closable-start-padding: alert-tiny-height: alert-small-height: alert-medium-height: alert-medium-padding: alert-large-height: alert-giant-height: alert-basic-background-color: alert-basic-text-color: alert-primary-background-color: alert-primary-text-color: alert-success-background-color: alert-success-text-color: alert-info-background-color: alert-info-text-color: alert-warning-background-color: alert-warning-text-color: alert-danger-background-color: alert-danger-text-color: alert-control-background-color: alert-control-text-color: alert-accent-basic-color: alert-accent-primary-color: alert-accent-info-color: alert-accent-success-color: alert-accent-warning-color: alert-accent-danger-color: alert-accent-control-color: alert-outline-width: alert-outline-basic-color: alert-outline-primary-color: alert-outline-info-color: alert-outline-success-color: alert-outline-warning-color: alert-outline-danger-color: alert-outline-control-color:
constructor
constructor(statusService: NbStatusService);
property accent
accent: '' | NbComponentStatus;
Alert accent (color of the top border):
basic
,primary
,success
,info
,warning
,danger
,control
. Unset by default.
property additionalClasses
readonly additionalClasses: string[];
property basic
readonly basic: boolean;
property basicAccent
readonly basicAccent: boolean;
property basicOutline
readonly basicOutline: boolean;
property closable
closable: boolean;
Shows
close
icon
property close
close: EventEmitter<any>;
Emits when chip is removed EventEmitter
property control
readonly control: boolean;
property controlAccent
readonly controlAccent: boolean;
property controlOutline
readonly controlOutline: boolean;
property danger
readonly danger: boolean;
property dangerAccent
readonly dangerAccent: boolean;
property dangerOutline
readonly dangerOutline: boolean;
property giant
readonly giant: boolean;
property info
readonly info: boolean;
property infoAccent
readonly infoAccent: boolean;
property infoOutline
readonly infoOutline: boolean;
property large
readonly large: boolean;
property medium
readonly medium: boolean;
property ngAcceptInputType_closable
static ngAcceptInputType_closable: NbBooleanInput;
property outline
outline: '' | NbComponentStatus;
Alert outline (color of the border):
basic
,primary
,success
,info
,warning
,danger
,control
. Unset by default.
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< NbAlertComponent, 'nb-alert', never, { size: { alias: 'size'; required: false }; status: { alias: 'status'; required: false }; accent: { alias: 'accent'; required: false }; outline: { alias: 'outline'; required: false }; closable: { alias: 'closable'; required: false }; }, { close: 'close' }, never, ['*'], false, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<NbAlertComponent, never>;
property primary
readonly primary: boolean;
property primaryAccent
readonly primaryAccent: boolean;
property primaryOutline
readonly primaryOutline: boolean;
property size
size: '' | NbComponentSize;