@noveo/web-components

Noveo Web Components

Web Components was designed using Noveo UI Kit and built on Stencil

Documentation is available in Storybook: http://components.noveogroup.com

To run storybook locally, use serve

cd dist/storybook-static

serve

How to use

To use web-components on React application, it is necessary to use special components for React: Noveo React Components

Because React supports web-components only for 71%: React web-components support

React

If you want to use these components with React please consider using this package instead

Vue

Add this to your main Vue file to load components and mark them safe so compiler won't complain about not knowing what these components are:

import { defineCustomElements } from '@noveo/web-components/dist/loader';
Vue.config.ignoredElements = [/nv-\w*/];

defineCustomElements(window);

Angular

Add this to your main Angular file to load components:

import { defineCustomElements } from '@noveo/web-components/dist/loader';

defineCustomElements(window);

Add this to allow Angular modules contain non-angular custom elements:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Installation

By npm:

npm install @noveo/web-components --save

Or by yarn:

yarn add @noveo/web-components

IMPORTANT! Almost all Noveo components depend on the nv-icon component to render icons, so make sure to follow the instructions for that component before using the others!

Usage

import { defineCustomElements } from '@noveo/web-components/dist/loader';

defineCustomElements(window);

To support Edge and IE11:

import {
  applyPolyfills,
  defineCustomElements
} from '@noveo/web-components/dist/loader';

applyPolyfills().then(() => defineCustomElements(window));

After defineCustomElements call all components will be available like HTML5 elements:

<nv-table>
  <nv-table-head>
    <nv-table-cell>Name</nv-table-cell>
    <nv-table-cell>Job Title</nv-table-cell>
    <nv-table-cell>Salary</nv-table-cell>
  </nv-table-head>
  <nv-table-body>
    <nv-table-row>
      <nv-table-cell>Rhianna</nv-table-cell>
      <nv-table-cell>International Program Officer</nv-table-cell>
      <nv-table-cell>$972</nv-table-cell>
    </nv-table-row>
    <nv-table-row>
      <nv-table-cell>Archibald</nv-table-cell>
      <nv-table-cell>Central Tactics Planner</nv-table-cell>
      <nv-table-cell>$852</nv-table-cell>
    </nv-table-row>
    <nv-table-row>
      <nv-table-cell>Deondre</nv-table-cell>
      <nv-table-cell>Forward Interactions Planner</nv-table-cell>
      <nv-table-cell>$274</nv-table-cell>
    </nv-table-row>
  </nv-table-body>
</nv-table>

How to add icons to the project

Assuming that you use Webpack to manage your build process.

1. Install copy-webpack-plugin:

yarn add copy-webpack-plugin --dev

or

npm install copy-webpack-plugin --save-dev

1. In your common webpack config (applied both in development and production modes), enable the plugin like so:

const CopyPlugin = require('copy-webpack-plugin');
// ...
module.exports = {
  // ...
  plugins: [
    new CopyPlugin([
      {
        from: 'node_modules/@noveo/web-components/dist/collection/assets',
        to: 'assets'
      }
    ])
  ]
};

That's it. Of course, you can replace this plugin with a similar plugin for the bundler/build tool you actually use. The idea is that the assets dir containing our standard set of icons must be copied from the @noveo/web-components module to your build root.

Components

nv-accordion

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	Whenether accordion is disabled or not	boolean	false
label	label	Label text for accordion	string	''
open	open	Whenether accordion is opened or not	boolean	false

Events

Event	Description	Type
change	Event returns current open value	CustomEvent<boolean>

Slots

Slot	Description
	content to show when open

Dependencies

Depends on

• nv-icon

Graph

graph TD;
  nv-accordion --> nv-icon
  nv-icon --> context-consumer
  style nv-accordion fill:#f9f,stroke:#333,stroke-width:4px

nv-alert

Properties

Property	Attribute	Description	Type	Default
color	color		AlertMods.DANGER or AlertMods.PRIMARY or AlertMods.SUCCESS or AlertMods.WARN	AlertMods.PRIMARY
dismiss	--		(event: MouseEvent) => void	undefined
isOpen	is-open		boolean	true
timeout	timeout		number	undefined

nv-avatar

Properties

Property	Attribute	Description	Type	Default
color	color	The color of the avatar background (for text children)	string	'#ff6c46'
height	height	The height of the avatar (in pixels)	number	52
shape	shape	The shape of the avatar (circle or square)	Shape.circle or Shape.square	Shape.circle
width	width	The width of the avatar (in pixels)	number	52

Slots

Slot	Description
	content inside

nv-button

Properties

Property	Attribute	Description	Type	Default
big	big	makes the button taller and longer	boolean	false
color	color	color option (danger, success, primary, secondary)	ButtonColors.danger or ButtonColors.primary or ButtonColors.secondary or ButtonColors.success	ButtonColors.primary
disabled	disabled	disables the button and changes styles	boolean	false
outline	outline	changes styles	boolean	false
size	size	size option (xs, sm, md, lg, xl, xxl, responsive-container, responsive-text)	ButtonSizes.lg or ButtonSizes.md or ButtonSizes.responsiveContainer or ButtonSizes.responsiveText or ButtonSizes.sm or ButtonSizes.xl or ButtonSizes.xs or ButtonSizes.xxl	ButtonSizes.responsiveText

nv-checkbox

Properties

Property	Attribute	Description	Type	Default
checked	checked	activity flag	boolean	false
description	description	text between label and checkbox	string	''
disabled	disabled	disables the checkbox and changes styles	boolean	false
dropVariant	drop-variant	changes the styles of the active state	boolean	false
error	error	red text under the checkbox, makes the label red	string	''
floatingIcon	floating-icon	Whether icon should be floated to the left (so text value nearby can wrap it)	boolean	false
label	label	large text over checkbox	string	''
name	name	name prop for input	string	''
value	value	checkbox text	string	''

Events

Event	Description	Type
change	onChange event returns isChecked	CustomEvent<boolean>

Dependencies

Used by

• nv-select

Depends on

• nv-label

Graph

graph TD;
  nv-checkbox --> nv-label
  nv-select --> nv-checkbox
  style nv-checkbox fill:#f9f,stroke:#333,stroke-width:4px

nv-chip

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	disables the chip and changes styles	boolean	false

Events

Event	Description	Type
close	onClose event(click on the cross)	CustomEvent<any>

Slots

Slot	Description
"noname"	nv-chip content

Dependencies

Used by

• nv-search
• nv-select

Depends on

• nv-icon

Graph

graph TD;
  nv-chip --> nv-icon
  nv-icon --> context-consumer
  nv-search --> nv-chip
  nv-select --> nv-chip
  style nv-chip fill:#f9f,stroke:#333,stroke-width:4px

nv-color-field

Properties

Property	Attribute	Description	Type	Default
description	description	text between label and checkbox	string	''
disabled	disabled	is color picker disabled or not	boolean	false
error	error	error message	string	''
label	label	large text over color picker	string	''
types	--	Available edit panels	Type[]	[Type.RGB, Type.HSL, Type.HSV, Type.HEX]
value	value	inital value for color-picker	string	'#d00'
withAlpha	with-alpha	if component should control alpha channel	boolean	true

Dependencies

Depends on

• nv-label
• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container
• nv-color-picker

Graph

graph TD;
  nv-color-field --> nv-label
  nv-color-field --> nv-dropdown
  nv-color-field --> nv-dropdown-button
  nv-color-field --> nv-dropdown-container
  nv-color-field --> nv-color-picker
  nv-color-picker --> nv-icon
  nv-icon --> context-consumer
  style nv-color-field fill:#f9f,stroke:#333,stroke-width:4px

nv-color-picker

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	is color picker disabled or not	boolean	false
type	type	Selected edit panel	Type.HEX or Type.HSL or Type.HSV or Type.RGB	this.types[0]
types	--	Available edit panels	Type[]	[Type.RGB, Type.HSL, Type.HSV, Type.HEX]
value	value	inital value for color-picker	string	'#d00'
withAlpha	with-alpha	if component should control alpha channel	boolean	true

Events

Event	Description	Type
change	Dispatches change event with following structure: hex - selected color in hex format color - instance of Color	CustomEvent<{ hex: string; color: any; }>

Dependencies

Used by

• nv-color-field

Depends on

• nv-icon

Graph

graph TD;
  nv-color-picker --> nv-icon
  nv-icon --> context-consumer
  nv-color-field --> nv-color-picker
  style nv-color-picker fill:#f9f,stroke:#333,stroke-width:4px

nv-date-field

Properties

Property	Attribute	Description	Type	Default
description	description	Text between label and element	string	''
digitPlaceholder	digit-placeholder	Character instead of missing digits	string	'_'
disablePastDates	disable-past-dates	Disable past dates pick in date picker	boolean	false
error	error	Red text under the element, makes the label and border red	string	''
format	format	Format string (date-fns) for the input	string	'dd-MM-yyyy'
fullwidth	fullwidth	Should the field have 100% width instead of the default width	boolean	false
hideAfterChange	hide-after-change	Close dropdown picker after change date	boolean	true
label	label	Large text over element	string	''
placeholder	placeholder	Input placeholder	string	''
range	range	Allow the selection of date range	boolean	false
value	--	Value of date field as date object, or null, or array of two elements with the corresponding values for range mode	Date or Date[]	this.range ? [new Date(), addDays(new Date(), 1)] : new Date()

Events

Event	Description	Type
change	onChange event returns a date object, or null if no value is present, or an array of two elements with the corresponding values for range mode	CustomEvent<any>

Dependencies

Depends on

• nv-dropdown
• nv-dropdown-button
• nv-date-input
• nv-icon
• nv-dropdown-container
• nv-date-picker
• nv-label

Graph

graph TD;
  nv-date-field --> nv-dropdown
  nv-date-field --> nv-dropdown-button
  nv-date-field --> nv-date-input
  nv-date-field --> nv-icon
  nv-date-field --> nv-dropdown-container
  nv-date-field --> nv-date-picker
  nv-date-field --> nv-label
  nv-date-input --> nv-input
  nv-date-input --> context-consumer
  nv-icon --> context-consumer
  nv-date-picker --> nv-icon
  nv-date-picker --> context-consumer
  style nv-date-field fill:#f9f,stroke:#333,stroke-width:4px

nv-date-input

Properties

Property	Attribute	Description	Type	Default
digitPlaceholder	digit-placeholder	Character instead of missing digits	string	'_'
disabled	disabled	If input is disabled or not	boolean	false
format	format	Format string (date-fns) for the date input, no need for time input	string	this.inputType === DateOrTimeInputType.DATE ? 'dd-MM-yyyy' : 'HH:mm'
fullwidth	fullwidth	Should the input have 100% width instead of the default width	boolean	false
inputType	input-type	Type of input	DateOrTimeInputType.DATE or DateOrTimeInputType.TIME	DateOrTimeInputType.DATE
invalid	invalid	If input is invalid or not	boolean	false
localeState	--	Current locale received from provider	ProviderState	undefined
placeholder	placeholder	Input placeholder	string	''
value	value	Value of input as date object for date input, or string in 'HH:mm' format for time input, or null	Date or string	null

Events

Event	Description	Type
blur		CustomEvent<any>
change	onChange event returns a date object for date input, or a string in 'HH:mm' format for time input, or null if no value is present	CustomEvent<any>

Slots

Slot	Description
"icon"	content for input slot

Dependencies

Used by

• nv-date-field
• nv-time-field

Depends on

• nv-input
• context-consumer

Graph

graph TD;
  nv-date-input --> nv-input
  nv-date-input --> context-consumer
  nv-date-field --> nv-date-input
  nv-time-field --> nv-date-input
  style nv-date-input fill:#f9f,stroke:#333,stroke-width:4px

nv-date-picker

Properties

Property	Attribute	Description	Type	Default
auto	auto	If date picker should automatically switch to next value in range mode	boolean	true
disablePastDates	disable-past-dates	Disable past dates pick	boolean	false
range	range	Allow the selection of date range	boolean	false
rangeState	range-state	Currently selected value in range mode Useful in cases when date picker is only allowed to select one of the dates	number	0
value	--	Value of date field as date object, or null, or array of two elements with the corresponding values for range mode	Date or Date[]	null

Events

Event	Description	Type
change	onChange event returns a date object, or null if no value is present, an array of two elements with the corresponding values for range mode	CustomEvent<Date or Date[]>

Dependencies

Used by

• nv-date-field

Depends on

• nv-icon
• context-consumer

Graph

graph TD;
  nv-date-picker --> nv-icon
  nv-date-picker --> context-consumer
  nv-icon --> context-consumer
  nv-date-field --> nv-date-picker
  style nv-date-picker fill:#f9f,stroke:#333,stroke-width:4px

nv-dropdown

Properties

Property	Attribute	Description	Type	Default
closeOutsideClickEventType	close-outside-click-event-type	event type for useOutsideClick	closeOutsideEvents.click or closeOutsideEvents.mousedown	closeOutsideEvents.click
disabled	disabled	disables the dropdown	boolean	false
full	full	For full-width dropdowns (like select, serch, etc)	boolean	false
isContainerStatic	is-container-static	sets position: static for nv-dropdown-container	boolean	false
isOpen	is-open	if the nv-dropdown-container should be visible	boolean	false
useAutoPosition	use-auto-position	the dropdown-container is rendered on top if it does not fit on the screen	boolean	false
useButtonClick	use-button-click	toggles the dropdown after dropdown-button click	boolean	true
useOutsideClick	use-outside-click	closes the dropdown after an outside click	boolean	true
width	width	width option: flexible -> width: 100%; max-content -> width: max-content;	DropdownButtonWidth.default or DropdownButtonWidth.flexible or DropdownButtonWidth.maxContent	DropdownButtonWidth.default

Events

Event	Description	Type
toggle	onToggle event returns isOpen	CustomEvent<boolean>

Dependencies

Used by

• nv-color-field
• nv-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

graph TD;
  nv-color-field --> nv-dropdown
  nv-date-field --> nv-dropdown
  nv-navbar --> nv-dropdown
  nv-navbar-item --> nv-dropdown
  nv-search --> nv-dropdown
  nv-select --> nv-dropdown
  nv-services-menu --> nv-dropdown
  nv-time-field --> nv-dropdown
  style nv-dropdown fill:#f9f,stroke:#333,stroke-width:4px

nv-dropdown-button

Events

Event	Description	Type
dropdownToggle	onDropdownToggle throws after click	CustomEvent<any>

Dependencies

Used by

• nv-color-field
• nv-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

graph TD;
  nv-color-field --> nv-dropdown-button
  nv-date-field --> nv-dropdown-button
  nv-navbar --> nv-dropdown-button
  nv-navbar-item --> nv-dropdown-button
  nv-search --> nv-dropdown-button
  nv-select --> nv-dropdown-button
  nv-services-menu --> nv-dropdown-button
  nv-time-field --> nv-dropdown-button
  style nv-dropdown-button fill:#f9f,stroke:#333,stroke-width:4px

nv-dropdown-container

Properties

Property	Attribute	Description	Type	Default
isStatic	is-static	set nv-dropdown-container position: static	boolean	false

Dependencies

Used by

• nv-color-field
• nv-date-field
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-services-menu
• nv-time-field

Graph

graph TD;
  nv-color-field --> nv-dropdown-container
  nv-date-field --> nv-dropdown-container
  nv-navbar --> nv-dropdown-container
  nv-navbar-item --> nv-dropdown-container
  nv-search --> nv-dropdown-container
  nv-select --> nv-dropdown-container
  nv-services-menu --> nv-dropdown-container
  nv-time-field --> nv-dropdown-container
  style nv-dropdown-container fill:#f9f,stroke:#333,stroke-width:4px

nv-grid

Properties

Property	Attribute	Description	Type	Default
tag	tag		string	'div'

nv-col

Properties

Property	Attribute	Description	Type	Default
alignSelfLg	align-self-lg	align-self-lg connected with .align-self-lg-{$prop} class.	string	''
alignSelfMd	align-self-md	align-self-md connected with .align-self-md-{$prop} class.	string	''
alignSelfSm	align-self-sm	align-self-sm connected with .align-self-sm-{$prop} class.	string	''
alignSelfXl	align-self-xl	align-self-xl connected with .align-self-xl-{$prop} class.	string	''
alignSelfXs	align-self-xs	align-self-xs connected with .align-self-xs-{$prop} class.	string	''
display	display	Add display-{$property} class;	string	''
lg	lg	lg connected with .col-lg-{$prop} class. For example: "lg = 6" add ".col-lg-6" class at classList.	string	''
md	md	md connected with .col-md-{$prop} class. For example: "md = 6" add ".col-md-6" class at classList.	string	''
offsetLg	offset-lg	ofset-lg connected with .ofset-lg-{$prop} class.	string	''
offsetMd	offset-md	ofset-md connected with .ofset-md-{$prop} class.	string	''
offsetSm	offset-sm	ofset-sm connected with .ofset-sm-{$prop} class.	string	''
offsetXl	offset-xl	ofset-xl connected with .ofset-xl-{$prop} class.	string	''
offsetXs	offset-xs	ofset-xs connected with .ofset-xs-{$prop} class.	string	''
orderLg	order-lg	Controls column order at lg screen resolution. Connected with order-lg-{$prop}. Also achived 'first' and 'last' property.	string	''
orderMd	order-md	Controls column order at md screen resolution. Connected with order-md-{$prop}. Also achived 'first' and 'last' property.	string	''
orderSm	order-sm	Controls column order at sm screen resolution. Connected with order-sm-{$prop}. Also achived 'first' and 'last' property.	string	''
orderXl	order-xl	Controls column order at xl screen resolution. Connected with order-xl-{$prop}. Also achived 'first' and 'last' property.	string	''
orderXs	order-xs	Controls column order at xs screen resolution. Connected with order-xs-{$prop}. Also achived 'first' and 'last' property.	string	''
sm	sm	sm connected with .col-sm-{$prop} class. For example: "sm = 6" add ".col-sm-6" class at classList. For screens 600px ...	string	''
xl	xl	xs connected with .col-xs-{$prop} class. For example: "xs = 6" add ".col-xs-6" class at classList.	string	''
xs	xs	xs connected with .col-xs-{$prop} class. For example: "xs = 6" add ".col-xs-6" class at classList. For screens < 600px.	string	''

nv-container

Properties

Property	Attribute	Description	Type	Default
fluid	fluid	Enable/disable fluid mode	boolean	false
tag	tag	HTML tag, which used as wrapper	string	'div'

nv-row

Properties

Property	Attribute	Description	Type	Default
alignContentLg	align-content-lg	alignContent-lg connected with .align-content-lg-{$prop} class.	string	''
alignContentMd	align-content-md	alignContent-md connected with .align-content-md-{$prop} class.	string	''
alignContentSm	align-content-sm	alignContent-sm connected with .align-content-sm-{$prop} class.	string	''
alignContentXl	align-content-xl	alignContent-xl connected with .align-content-xl-{$prop} class.	string	''
alignContentXs	align-content-xs	alignContent-xs connected with .align-content-xs-{$prop} class.	string	''
alignLg	align-lg	align-lg connected with .align-items-lg-{$prop} class.	string	''
alignMd	align-md	align-md connected with .align-items-md-{$prop} class.	string	''
alignSm	align-sm	align-sm} connected with .align-items-sm}-{$prop} class.	string	''
alignXl	align-xl	align-xl connected with .align-items-xl-{$prop} class.	string	''
alignXs	align-xs	align-xs connected with .align-items-xs-{$prop} class.	string	''
justifyLg	justify-lg	justify-lg connected with .justify-content-lg-{$prop} class.	string	''
justifyMd	justify-md	justify-md connected with .justify-content-md-{$prop} class.	string	''
justifySm	justify-sm	justify-sm connected with .justify-content-sm-{$prop} class.	string	''
justifyXl	justify-xl	justify-xl connected with .justify-content-xl-{$prop} class.	string	''
justifyXs	justify-xs	justify-xs connected with .justify-content-xs-{$prop} class.	string	''
noGutters	no-gutters	Set gutters = 0.	boolean	false

nv-icon

Properties

Property	Attribute	Description	Type	Default
name	name	The icon to use from the built-in set of icons. Only alpha characters and dash are allowed.	string	undefined
size	size	The size of the icon. Available options are: sm, md, lg, and xlg.	IconSizes.LG or IconSizes.MD or IconSizes.SM or IconSizes.XLG	IconSizes.SM
src	src	The exact path to an SVG file on a server. If used, it overrides the path formed by name and public-path attributes.	string	undefined

Dependencies

Used by

• nv-accordion
• nv-chip
• nv-color-picker
• nv-date-field
• nv-date-picker
• nv-list-group
• nv-navbar
• nv-navbar-item
• nv-search
• nv-select
• nv-time-field
• nv-uploader
• nv-upsloader

Depends on

• context-consumer

Graph

graph TD;
  nv-icon --> context-consumer
  nv-accordion --> nv-icon
  nv-chip --> nv-icon
  nv-color-picker --> nv-icon
  nv-date-field --> nv-icon
  nv-date-picker --> nv-icon
  nv-list-group --> nv-icon
  nv-navbar --> nv-icon
  nv-navbar-item --> nv-icon
  nv-search --> nv-icon
  nv-select --> nv-icon
  nv-time-field --> nv-icon
  nv-uploader --> nv-icon
  nv-upsloader --> nv-icon
  style nv-icon fill:#f9f,stroke:#333,stroke-width:4px

nv-icon-button

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	If button disabled	boolean	false

Dependencies

Used by

• nv-services-menu

Graph

graph TD;
  nv-services-menu --> nv-icon-button
  style nv-icon-button fill:#f9f,stroke:#333,stroke-width:4px

nv-input

Properties

Property	Attribute	Description	Type	Default
autocomplete	autocomplete	If input should provide autocomplete	string	'on'
autofocus	autofocus	If input should autofocus on mount	boolean	false
controlled	controlled	If input is controlled or not	boolean	false
defaultValue	default-value	Default value for the input	string	''
disabled	disabled	If input is disabled or not	boolean	false
flexible	flexible	makes the input stretch (use with useContainer = false)	boolean	false
inputTabIndex	input-tab-index	tabIndex of the input	number	0
invalid	invalid	If input is invalid or not	boolean	false
name	name	Name attribute for the input	string	''
placeholder	placeholder	Placeholder for the input	string	''
readonly	readonly	Whenever input is readonly or not	boolean	false
required	required	Whenever input is required or not	boolean	false
type	type	Type attribute for the input	string	'text'
uid	uid	Used for connect nv-label and nv-input as default browser "for - id" pair.	string	''
useContainer	use-container	Use styled div container	boolean	true
value	value	Value for the input	string	this.defaultValue

Events

Event	Description	Type
blur		CustomEvent<void>
change	onChange event returns current input value	CustomEvent<string>

Dependencies

Used by

• nv-date-input
• nv-search
• nv-select
• nv-text-field

Graph

graph TD;
  nv-date-input --> nv-input
  nv-search --> nv-input
  nv-select --> nv-input
  nv-text-field --> nv-input
  style nv-input fill:#f9f,stroke:#333,stroke-width:4px

nv-label

Properties

Property	Attribute	Description	Type	Default
description	description	text between label and element	string	''
error	error	red text under the element, makes the label red	string	''
label	label	large text over element	string	''
required	required	Whenever input is required or not	boolean	false
uid	uid	Used for connect nv-label and nv-input as default browser "for - id" pair.	string	''

Dependencies

Used by

• nv-checkbox
• nv-color-field
• nv-date-field
• nv-radio-group
• nv-select
• nv-switch
• nv-text-field
• nv-time-field

Graph

graph TD;
  nv-checkbox --> nv-label
  nv-color-field --> nv-label
  nv-date-field --> nv-label
  nv-radio-group --> nv-label
  nv-select --> nv-label
  nv-switch --> nv-label
  nv-text-field --> nv-label
  nv-time-field --> nv-label
  style nv-label fill:#f9f,stroke:#333,stroke-width:4px

nv-list-group

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	Disables the list and changes styles	boolean	false
flexDirection	flex-direction	Flex direction option (column, row)	FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE	FlexDirections.COLUMN
label	label	Large main text in the head of the List	string	''

Dependencies

Depends on

• nv-icon

Graph

graph TD;
  nv-list-group --> nv-icon
  nv-icon --> context-consumer
  style nv-list-group fill:#f9f,stroke:#333,stroke-width:4px

nv-list

Properties

Property	Attribute	Description	Type	Default
flexDirection	flex-direction	Flex direction option (column, row)	FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE	FlexDirections.COLUMN

nv-list-item

Properties

Property	Attribute	Description	Type	Default
disableLeftPadding	disable-left-padding	Disable left padding. You can add your own styles with css.	boolean	false
flexDirection	flex-direction	Flex direction option (column, row)	FlexDirections.COLUMN or FlexDirections.COLUMN_REVERSE or FlexDirections.ROW or FlexDirections.ROW_REVERSE	FlexDirections.COLUMN

nv-loader

nv-locale-provider

Properties

Property	Attribute	Description	Type	Default
locale	locale		Locales.EN or Locales.RU	Locales.RU

Slots

Slot	Description
	components that depend on provider state

Dependencies

Depends on

• context-consumer

Graph

graph TD;
  nv-locale-provider --> context-consumer
  style nv-locale-provider fill:#f9f,stroke:#333,stroke-width:4px

nv-modal

Properties

Property	Attribute	Description	Type	Default
bodyClass	body-class	Class to add to document.body when modal is mounted	string	'overflow'
closeOnBackdropClick	close-on-backdrop-click	If modal should close when clicking on backdrop	boolean	true
fixed	fixed	If modal is fixed or absolute	boolean	true
open	open	If modal is open or not	boolean	true
overflow	overflow	Which overflow value to use for inner container	"auto" or "hidden" or "visible"	'auto'
position	position	Position of the modal window inside container	ModalPositions.BOTTOM_CENTER or ModalPositions.BOTTOM_LEFT or ModalPositions.BOTTOM_RIGHT or ModalPositions.MIDDLE_CENTER or ModalPositions.MIDDLE_LEFT or ModalPositions.MIDDLE_RIGHT or ModalPositions.TOP_CENTER or ModalPositions.TOP_LEFT or ModalPositions.TOP_RIGHT	ModalPositions.MIDDLE_CENTER
size	size	Size of the modal window	ModalSizes.DEFAULT or ModalSizes.LG or ModalSizes.MD or ModalSizes.SM or ModalSizes.XL	ModalSizes.DEFAULT
zIndex	z-index	Custom z-index if needed	number	undefined

Events

Event	Description	Type
toggle	Toggle event returns current modal open state	CustomEvent<boolean>

Slots

Slot	Description
	content of modal window

nv-modal-actions

Slots

Slot	Description
	content inside

nv-navbar

Properties

Property	Attribute	Description	Type	Default
hidingDistance	hiding-distance	The minimum distance between the last normal item and the stand-alone item (with the is-last attribute) of the nv-navbar-main sub-component. If the distance is reached, the last normal item will be hidden within the dynamically generated More dropdown item.	number	60
isVertical	is-vertical	If the navbar should have a vertical orientation with menu items stacked on top of each other.	boolean	false
localeState	--	The current locale	ProviderState	undefined

Slots

Slot	Description
	One or more of the nv-navbar's sub-components. The normal order is: nv-navbar-start, nv-navbar-main, nv-navbar-end.

Dependencies

Depends on

• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container
• nv-icon
• nv-navbar-item
• context-consumer

Graph

graph TD;
  nv-navbar --> nv-dropdown
  nv-navbar --> nv-dropdown-button
  nv-navbar --> nv-dropdown-container
  nv-navbar --> nv-icon
  nv-navbar --> nv-navbar-item
  nv-navbar --> context-consumer
  nv-icon --> context-consumer
  nv-navbar-item --> nv-dropdown
  nv-navbar-item --> nv-dropdown-button
  nv-navbar-item --> nv-icon
  nv-navbar-item --> nv-dropdown-container
  style nv-navbar fill:#f9f,stroke:#333,stroke-width:4px

nv-navbar-end

Slots

Slot	Description
	Whatever. You only get the predefined formatting. Normally, it is used to place a clickable image and a drop-down menu for the currently logged-in user. Note: Use <a class="user-link"> along with <nv-navbar-item class="user-menu"> to get a well-formed user block with little effort.

nv-navbar-item

Properties

Property	Attribute	Description	Type	Default
arrowBefore	arrow-before	If the arrow should go before the item's title. Applies only if the isDropdown prop is true.	boolean	false
arrowTo	arrow-to	The direction of the arrow. Applies only if the isDropdown prop is true.	"bottom" or "left" or "right" or "top"	'bottom'
isActive	is-active	If special styles should be applied to the item to highlight it among the others. Normally, it will be the current page item.	boolean	false
isDropdown	is-dropdown	If the item should be used as a dropdown menu. When true, the item must have elements with slot="title" and slot="content" attributes as its children to enable the drop-down behavior.	boolean	false
isLast	is-last	If the item should stand alone in the end of the nv-navbar-main sub-component. Normally, it will be the Services menu icon.	boolean	false
noArrow	no-arrow	If the arrow should be hidden. Applies only if the isDropdown prop is true.	boolean	false

Slots

Slot	Description
	Whatever
"addon"	Anything to be placed just before the item's title.
"content"	The drop-down's content. It must be a ul element with li children elements if you want to get a well-formed list with little effort.
"title"	The item's title that usually is (but doesn't have to be) text.

Dependencies

Used by

• nv-navbar

Depends on

• nv-dropdown
• nv-dropdown-button
• nv-icon
• nv-dropdown-container

Graph

graph TD;
  nv-navbar-item --> nv-dropdown
  nv-navbar-item --> nv-dropdown-button
  nv-navbar-item --> nv-icon
  nv-navbar-item --> nv-dropdown-container
  nv-icon --> context-consumer
  nv-navbar --> nv-navbar-item
  style nv-navbar-item fill:#f9f,stroke:#333,stroke-width:4px

nv-navbar-main

Slots

Slot	Description
	One or more nv-navbar-item-s

nv-navbar-start

Slots

Slot	Description
	Whatever. You only get the predefined formatting. Normally, it is used to place a graphic or text logo representing a brand.

nv-pagination

Properties

Property	Attribute	Description	Type	Default
activeItem	active-item	The active (current) page number	number	1
ariaLabel	aria-label	The component's aria-label	string	'Pagination'
limit	limit	The number of pagination items viewable at a time.	number	7
total	total	The total number of pages	number	undefined

Events

Event	Description	Type
pageChange		CustomEvent<any>

Dependencies

Depends on

• nv-pagination-item

Graph

graph TD;
  nv-pagination --> nv-pagination-item
  style nv-pagination fill:#f9f,stroke:#333,stroke-width:4px

nv-paper

Properties

Property	Attribute	Description	Type	Default
color	color	Choose color from standart presets;	ColorTypes.FORM or ColorTypes.TRANSPARENT or ColorTypes.WHITE	ColorTypes.FORM
padding	padding	Add paddings from presetted sizes;	PaddingSizes.LG or PaddingSizes.MD or PaddingSizes.NONE or PaddingSizes.SM	PaddingSizes.NONE
shadow	shadow	Enable/disable box-shadow;	boolean	false
tag	tag	HTML - tag, which used as wrapper	string	'div'
tile	tile	Reset border-radius on container;	boolean	false

Slots

Slot	Description
"slot"	slot for the components you want to place inside nv-paper

nv-radio-group

Properties

Property	Attribute	Description	Type	Default
column	column	switch flex-direction (row or column)	boolean	true
description	description	text between label and radio-group	string	''
error	error	red text under the radio-group, makes the label red	string	''
label	label	large text over radio-group	string	''
value	value	makes an element with this value active	string	null

Events

Event	Description	Type
change	onChange event returns the value of the selected radio	CustomEvent<string>

Dependencies

Depends on

• nv-label

Graph

graph TD;
  nv-radio-group --> nv-label
  style nv-radio-group fill:#f9f,stroke:#333,stroke-width:4px

nv-radio

Properties

Property	Attribute	Description	Type	Default
checked	checked	activity flag	boolean	false
disabled	disabled	disables the radio and changes styles	boolean	false
label	label	radio text	string	''
name	name	name prop for input	any	undefined
value	value	onChange data	string	undefined

Events

Event	Description	Type
change	onChange event returns value	CustomEvent<string>

nv-search

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	disables the select and changes styles	boolean	false
isOpen	is-open	for autofocus	boolean	false
itemGroupIcon	item-group-icon	name for group-icon property of item object	string	'groupIcon'
itemGroupItems	item-group-items	name for group-items property of item object	string	'groupItems'
itemGroupText	item-group-text	name for group-text property of item object	string	'groupText'
itemGroupValue	item-group-value	name for group-value property of item object	string	'groupValue'
itemText	item-text	name for text property of item object	string	'text'
itemValue	item-value	name for value property of item object	string	'value'
items	--	initial data	any[]	[]
notFoundMessage	not-found-message	will be shown when searching if nothing is found	string	'Ничего не найдено'
placeholder	placeholder	placeholder	string	''
returnObject	return-object	return value or item object	boolean	false
type	type	style option (primary, multifilter)	SearchTypes.MULTIFILTER or SearchTypes.PRIMARY	SearchTypes.MULTIFILTER
value	--	initial value	any[]	[]

Events

Event	Description	Type
change	onChange event returns selected values	CustomEvent<any>

Dependencies

Depends on

• nv-icon
• nv-input
• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container
• nv-chip

Graph

graph TD;
  nv-search --> nv-icon
  nv-search --> nv-input
  nv-search --> nv-dropdown
  nv-search --> nv-dropdown-button
  nv-search --> nv-dropdown-container
  nv-search --> nv-chip
  nv-icon --> context-consumer
  nv-chip --> nv-icon
  style nv-search fill:#f9f,stroke:#333,stroke-width:4px

nv-select

Properties

Property	Attribute	Description	Type	Default
description	description	text between label and select	string	''
disabled	disabled	disables the select and changes styles	boolean	false
error	error	red text under the select, makes the label red	string	''
itemItems	item-items	name for items property of item object	string	'items'
itemText	item-text	name for text property of item object	string	'text'
itemValue	item-value	name for value property of item object	string	'value'
items	--	initial data	any[]	[]
label	label	large text over select	string	''
name	name	name attribute	string	''
placeholder	placeholder	placeholder	string	''
returnObject	return-object	return value or item object	boolean	false
type	type	style option (primary, checkbox, multi)	SelectTypes.checkbox or SelectTypes.multi or SelectTypes.primary	SelectTypes.primary
value	value	initial value	any	null

Events

Event	Description	Type
change	onChange event returns selected values	CustomEvent<any>
changeSearch	onChangeSearch event returns search string	CustomEvent<any>

Dependencies

Depends on

• nv-input
• nv-icon
• nv-checkbox
• nv-chip
• nv-label
• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container

Graph

graph TD;
  nv-select --> nv-input
  nv-select --> nv-icon
  nv-select --> nv-checkbox
  nv-select --> nv-chip
  nv-select --> nv-label
  nv-select --> nv-dropdown
  nv-select --> nv-dropdown-button
  nv-select --> nv-dropdown-container
  nv-icon --> context-consumer
  nv-checkbox --> nv-label
  nv-chip --> nv-icon
  style nv-select fill:#f9f,stroke:#333,stroke-width:4px

nv-services-menu

Properties

Property	Attribute	Description	Type	Default
initialNumberOfBlocks	initial-number-of-blocks	the number of blocks that will be visible initially	number	9
localeState	--	Locale received from locale provider	ProviderState	undefined
numberOfBlocks	number-of-blocks	number of services transferred will be generated the number of slots with names 'service-block-$id' $id = (0 , numberOfBlocks-1)	number	0
showAll	show-all	false - show max initialNumberOfBlocks services true - show all services	boolean	false

Slots

Slot	Description
"button"	for button
"service-block-$id"	slot for the service components you want to place inside nv-services-menu

Dependencies

Depends on

• nv-icon-button
• nv-dropdown
• nv-dropdown-button
• nv-dropdown-container
• context-consumer

Graph

graph TD;
  nv-services-menu --> nv-icon-button
  nv-services-menu --> nv-dropdown
  nv-services-menu --> nv-dropdown-button
  nv-services-menu --> nv-dropdown-container
  nv-services-menu --> context-consumer
  style nv-services-menu fill:#f9f,stroke:#333,stroke-width:4px

nv-spacer

Properties

Property	Attribute	Description	Type	Default
size	size	Number inside this props are height of this component. !IMPORTANT: You must specify the unit of measurement: px, em, rem, or another.	string	'20px'

nv-switch

Properties

Property	Attribute	Description	Type	Default
checked	checked	activity flag	boolean	false
description	description	text between label and switch	string	''
disabled	disabled	disables the switch and changes styles	boolean	false
error	error	red text under the switch, makes the label red	string	''
label	label	large text over switch	string	''
name	name	name prop for input	string	''
value	value	switch text	string	''

Events

Event	Description	Type
change	onChange event returns isChecked	CustomEvent<boolean>

Dependencies

Depends on

• nv-label

Graph

graph TD;
  nv-switch --> nv-label
  style nv-switch fill:#f9f,stroke:#333,stroke-width:4px

nv-table

Properties

Property	Attribute	Description	Type	Default
layout	layout	Which table layout to use	TableLayout.auto or TableLayout.fixed	TableLayout.auto

Slots

Slot	Description
	content inside

nv-table-body

Slots

Slot	Description
	content inside

nv-table-cell

Properties

Property	Attribute	Description	Type	Default
align	align	Text alignment for cell content Can be overwritten in child component	TableCellAlignments.center or TableCellAlignments.left or TableCellAlignments.right	TableCellAlignments.left
colSpan	col-span	how many cells to span across	number	null
color	color		TableCellColors.danger or TableCellColors.default or TableCellColors.success or TableCellColors.temp or TableCellColors.white	TableCellColors.default
rowSpan	row-span	how many rows to span across	number	null
splitters	splitters	Which splitters to use between rows and columns Can be overwritten in child component	TableSplitters.all or TableSplitters.horizontal or TableSplitters.none or TableSplitters.partial or TableSplitters.vertical	TableSplitters.all

nv-table-head

Slots

Slot	Description
	content inside

nv-table-row

Properties

Property	Attribute	Description	Type	Default
color	color		TableRowColors.danger or TableRowColors.default or TableRowColors.success or TableRowColors.temp or TableRowColors.white	TableRowColors.default
splitters	splitters		TableSplitters.all or TableSplitters.horizontal or TableSplitters.none or TableSplitters.partial or TableSplitters.vertical	undefined

nv-tabs

Properties

Property	Attribute	Description	Type	Default
active	active	id of the active tab	string	defaultActive
mode	mode	active mode allows you to switch tabs when clicked	TabMode.active or TabMode.passive	TabMode.active
type	type	style option (primary, secondary, table)	TabTypes.primary or TabTypes.secondary or TabTypes.table	TabTypes.primary

Events

Event	Description	Type
change	onChange event returns the active-tab-id of the selected tab	CustomEvent<string>

nv-tab

Properties

Property	Attribute	Description	Type	Default
activeTabId	active-tab-id	id for tab-button selecting	string	'0'
type	type	style option (primary, secondary, table)	TabTypes.primary or TabTypes.secondary or TabTypes.table	TabTypes.primary

nv-tab-content

Properties

Property	Attribute	Description	Type	Default
active	active	id of the displayed tab-pane	string	'0'

nv-tab-pane

Properties

Property	Attribute	Description	Type	Default
tabId	tab-id	id for tab selecting	string	'0'

nv-text

Properties

Property	Attribute	Description	Type	Default
bold	bold	Font-weight	BoldTypes.bold or BoldTypes.normal or BoldTypes.semi	BoldTypes.normal
italic	italic	Add italic - style for current text-type	boolean	false
nomargin	nomargin	Remove Default margins form HTML tag	boolean	false
tag	tag	HTML tag in which the text will be rendered	string	'span'
type	type	Type of style-preset	TextTypes.comment or TextTypes.component-comment or TextTypes.dropdown-selected or TextTypes.error or TextTypes.h1 or TextTypes.h2 or TextTypes.h3 or TextTypes.h3-error or TextTypes.input-placeholder or TextTypes.input-text or TextTypes.link or TextTypes.menu-item or TextTypes.menu-item-selected or TextTypes.text or TextTypes.text-btn-big or TextTypes.text-btn-small	TextTypes.text

nv-text-field

Properties

Property	Attribute	Description	Type	Default
autocomplete	autocomplete	If input should provide autocomplete	string	'on'
autofocus	autofocus	If input should autofocus on mount	boolean	false
controlled	controlled	If input is controlled or not	boolean	false
defaultValue	default-value	Default value for the input	""	undefined
description	description	text between label and element	string	''
disabled	disabled	If input is disabled or not	boolean	false
error	error	red text under the element, makes the label red	string	''
invalid	invalid	If input is invalid or not	boolean	false
label	label	large text over element	string	''
name	name	Name attribute for the input	string	''
placeholder	placeholder	Placeholder for the input	string	''
required	required	Whenever input is required or not	boolean	false
type	type	Type attribute for the input	string	'text'
uid	uid	Used for connect nv-label and nv-input as default browser "for - id" pair.	string	''
useContainer	use-container	Use styled div container	boolean	true
value	value	Value for the input	""	this.defaultValue

Dependencies

Depends on

• nv-label
• nv-input

Graph

graph TD;
  nv-text-field --> nv-label
  nv-text-field --> nv-input
  style nv-text-field fill:#f9f,stroke:#333,stroke-width:4px

nv-textarea

Properties

Property	Attribute	Description	Type	Default
autoGrow	auto-grow	If the textarea should grow in height (instead of showing the scrollbar) to accommodate new content when it is about to overflow.	boolean	true
autocapitalize	autocapitalize	The same as in the native <textarea>	string	undefined
autofocus	autofocus	The same as in the native <textarea>	boolean	false
cols	cols	The same as in the native <textarea>	number	20
disabled	disabled	The same as in the native <textarea>	boolean	undefined
form	form	The same as in the native <textarea>	string	undefined
innerId	inner-id	The value of the id attribute of the inner native <textarea> element.	string	undefined
invalid	invalid	If special styles should be applied to visually indicate the component's invalid state.	boolean	false
maxRows	max-rows	If the content reaches this number of rows, the scrollbar will show up. Applies only when the autoGrow is true.	number	undefined
maxlength	maxlength	The same as in the native <textarea>	number	undefined
minlength	minlength	The same as in the native <textarea>	number	undefined
name	name	The same as in the native <textarea>	string	undefined
noHandle	no-handle	If the native drag handle for textarea resizing should be visible.	boolean	false
placeholder	placeholder	The same as in the native <textarea>	string	undefined
readonly	readonly	The same as in the native <textarea>	boolean	undefined
required	required	The same as in the native <textarea>	boolean	undefined
rows	rows	The same as in the native <textarea>	number	2
spellcheck	spellcheck	The same as in the native <textarea>	boolean	true
value	value	The same as in the native <textarea>	string	''
wrap	wrap	The same as in the native <textarea>	string	undefined

Events

Event	Description	Type
change		CustomEvent<any>

nv-time-field

Properties

Property	Attribute	Description	Type	Default
description	description	Text between label and element	string	''
digitPlaceholder	digit-placeholder	Character instead of missing digits	string	'_'
disabled	disabled	If input is disabled or not	boolean	false
error	error	Red text under the element, makes the label red	string	''
fullwidth	fullwidth	Should the field have 100% width instead of the default width	boolean	false
label	label	Large text over element	string	''
localeState	--	Locale received from locale provider	ProviderState	undefined
placeholder	placeholder	Input placeholder	string	null
value	value	Value of time field as string in 'HH:mm' format, or null	string	null

Events

Event	Description	Type
change	onChange event returns a string in "HH:mm" format, or null if no value is present	CustomEvent<string>

Dependencies

Depends on

• nv-label
• nv-dropdown
• nv-dropdown-button
• nv-date-input
• nv-icon
• nv-dropdown-container
• nv-time-picker
• context-consumer

Graph

graph TD;
  nv-time-field --> nv-label
  nv-time-field --> nv-dropdown
  nv-time-field --> nv-dropdown-button
  nv-time-field --> nv-date-input
  nv-time-field --> nv-icon
  nv-time-field --> nv-dropdown-container
  nv-time-field --> nv-time-picker
  nv-time-field --> context-consumer
  nv-date-input --> nv-input
  nv-date-input --> context-consumer
  nv-icon --> context-consumer
  nv-time-picker --> context-consumer
  style nv-time-field fill:#f9f,stroke:#333,stroke-width:4px

nv-time-picker

Properties

Property	Attribute	Description	Type	Default
localeState	--	Locale received from locale provider	ProviderState	undefined
value	value	Value of time field as string in 'HH:mm' format, or null	string	null

Events

Event	Description	Type
change	onChange event returns value as string in 'HH:mm' format if both minutes and hours are selected	CustomEvent<string>

Dependencies

Used by

• nv-time-field

Depends on

• context-consumer

Graph

graph TD;
  nv-time-picker --> context-consumer
  nv-time-field --> nv-time-picker
  style nv-time-picker fill:#f9f,stroke:#333,stroke-width:4px

nv-title

Properties

Property	Attribute	Description	Type	Default
error	error	Used for add the .error class and change the text color to red;	boolean	false
nomargin	nomargin	Remove Default margins form Headings	boolean	false
tag	tag	Type of tag	string	'h3'
type	type	Type of style-preset	TextTypes.h1 or TextTypes.h2 or TextTypes.h3	TextTypes.h3

nv-tooltip

Properties

Property	Attribute	Description	Type	Default
boundary	boundary	The element that should act as boundaries for the tooltip.	TooltipBoundaries.DOCUMENT or TooltipBoundaries.VIEWPORT	TooltipBoundaries.VIEWPORT
dataPopperPlacement	data-popper-placement	Popper attribute. You shouldn't use it.	TooltipPlacements.AUTO or TooltipPlacements.AUTO_END or TooltipPlacements.AUTO_START or TooltipPlacements.BOTTOM or TooltipPlacements.BOTTOM_END or TooltipPlacements.BOTTOM_START or TooltipPlacements.LEFT or TooltipPlacements.LEFT_END or TooltipPlacements.LEFT_START or TooltipPlacements.RIGHT or TooltipPlacements.RIGHT_END or TooltipPlacements.RIGHT_START or TooltipPlacements.TOP or TooltipPlacements.TOP_END or TooltipPlacements.TOP_START	undefined
fadeTime	fade-time	The duration (in seconds) of the tooltip fade-out effect animation	number	0.4
flip	flip	If the tooltip should auto-flip when it starts to overlap its target element.	boolean	true
hideTriggers	hide-triggers	The space-separated events that should close the tooltip when fired on the target (eg. mouseout blur). If empty, the tooltip will never be closed from outside. FYI: You will hardly ever need this attribute, since 'opposite' events for common triggers are added automagically.	string	undefined
isOpen	is-open	If the tooltip should be visible	boolean	false
noArrow	no-arrow	If the tooltip arrow should be hidden	boolean	false
placement	placement	The tooltip placement relative to the target	TooltipPlacements.AUTO or TooltipPlacements.AUTO_END or TooltipPlacements.AUTO_START or TooltipPlacements.BOTTOM or TooltipPlacements.BOTTOM_END or TooltipPlacements.BOTTOM_START or TooltipPlacements.LEFT or TooltipPlacements.LEFT_END or TooltipPlacements.LEFT_START or TooltipPlacements.RIGHT or TooltipPlacements.RIGHT_END or TooltipPlacements.RIGHT_START or TooltipPlacements.TOP or TooltipPlacements.TOP_END or TooltipPlacements.TOP_START	TooltipPlacements.AUTO
showTriggers	show-triggers	The space-separated events that should open the tooltip when fired on the target (eg. mouseover focus). FYI: If a single click trigger is provided (without hide-triggers), another click event will also be registered on the document object to close the tooltip, for your convenience.	string	undefined
target	target	The CSS selector of the target element	string	undefined
timeout	timeout	How long in milliseconds the tooltip should stay open after the page load.	number	undefined

Slots

Slot	Description
	for nv-tooltip-content

Dependencies

Depends on

• nv-tooltip-arrow

Graph

graph TD;
  nv-tooltip --> nv-tooltip-arrow
  style nv-tooltip fill:#f9f,stroke:#333,stroke-width:4px

nv-tooltip-arrow

Properties

Property	Attribute	Description	Type	Default
placement	placement	arrow placement set from nv-tooltip	string	TooltipPlacements.AUTO

Dependencies

Used by

• nv-tooltip

Graph

graph TD;
  nv-tooltip --> nv-tooltip-arrow
  style nv-tooltip-arrow fill:#f9f,stroke:#333,stroke-width:4px

nv-tooltip-content

Slots

Slot	Description
	tooltip content

nv-uploader

Properties

Property	Attribute	Description	Type	Default
accept	accept	The comma-separated list of allowed file types. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature) and can be opted out.	string	undefined
capture	capture	The string specifying which camera to use for capture. The same as in the native <input type="file">	string	undefined
files	--	The FileList object listing every selected file. The same as in the native <input type="file">	FileList	undefined
hint	hint	The scrollable text description appearing under the file type icons when no files have yet been selected or uploaded.	string	undefined
invalid	invalid	If special styles should be applied to visually indicate the component's invalid state (ie. wrong files have been selected).	boolean	false
localImageUrls	--	The object holding names and urls of the locally selected image files.	{ [key: string]: string; }	{}
mode	mode	The mode of file presentation: file – guarantees a document icon plus a file name as a caption. image – guarantees a preview thumb (for supported image types) or a document icon (for unsuppported image types and non-image files) plus a file name as a tooltip. auto – chooses file or image mode for you depending on which file types prevail – image or non-image ones. It is the default mode suitable for most use cases.	Modes.AUTO or Modes.FILE or Modes.IMAGE	Modes.AUTO
multiple	multiple	If more than 1 file can be selected at a time. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature).	boolean	false
progress	progress	The number (percentage out of 100) that will be used as the current value for the inner upload progress bar.	number	undefined
size	size	The size of the Uploader	string	'md'
strict	strict	If strict checks against the multiple and accept attributes should be enabled. If true, the component will actually restrict the number and types of files users can select (even with the 'drag-n-drop' feature) and will set the visual invalid state as needed.	boolean	true
upload	--	If a function is provided for this prop, the additional upload icon will be shown upon file selection. A click on that icon will call the provided function.	(event: MouseEvent or KeyboardEvent, hostEl: HTMLElement) => void	undefined
uploadedFiles	--	The array of objects holding the uploaded files data: name, type, and url.	{ name?: string; type: string; url?: string; }[]	undefined

Events

Event	Description	Type
change		CustomEvent<any>
uploadCancel		CustomEvent<any>

Dependencies

Depends on

• nv-icon

Graph

graph TD;
  nv-uploader --> nv-icon
  nv-icon --> context-consumer
  style nv-uploader fill:#f9f,stroke:#333,stroke-width:4px

nv-upsloader

Properties

Property	Attribute	Description	Type	Default
accept	accept	The comma-separated list of allowed file types. Note: When strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature) and can be opted out.	string	undefined
allFiles	--	The array listing every selected file. Each file is a native File object.	File[]	[]
capture	capture	The same as in the native <input type="file">	string	undefined
fileMaxNumber	file-max-number	The maximum allowed number of files. Note: Any 'falsy' value means 'not restricted'.	number	undefined
fileMaxSize	file-max-size	The maximum allowed size (in bytes) of a single file. Note: Any 'falsy' value means 'not restricted'.	number	undefined
hint	hint	The scrollable text/html description appearing under the file type icons when no files have yet been selected or uploaded.	string	undefined
invalid	invalid	If special styles should be applied to visually indicate the component's invalid state (ie. too many files have been selected).	boolean	false
localImageUrls	--	The object holding names and urls of the locally selected image files.	{ [key: string]: string; }	{}
localeState	--	The current locale that controls all aspects of the component i18n.	ProviderState	undefined
mode	mode	The mode of file presentation: file – guarantees a document icon plus a file name as a caption. image – guarantees a preview thumb (for supported image types) or a document icon (for unsupported image types and non-image files) plus a file name as a tooltip. auto – chooses file or image mode for you depending on which file types prevail – image or non-image ones. It is suitable for most cases.	Modes.AUTO or Modes.FILE or Modes.IMAGE	Modes.AUTO
multiple	multiple	If more than 1 file can be selected at a time. Note: when strict is false, this attribute has the same behavior as in the native <input type="file">: works only for file selector dialogs (has no effect on the 'drag-n-drop' feature).	boolean	false
progress	progress	The number (percentage out of 100) that will be used as the current value for the inner upload progress bar.	number	undefined
size	size	The size of the Upsloader that also affects its shape: standard (rectangle) or smaller (square).	"md" or "sm"	'md'
strict	strict	If strict checks against the multiple, accept, file-max-size, and file-max-number attributes should be enabled. If true, the component will actually restrict the number, type, and size of files users can select (even with the 'drag-n-drop' feature) and will set the visual invalid state as needed.	boolean	true
upload	--	If a function is provided for this prop, the additional upload icon will be shown upon file selection. A click on that icon will call the provided function.	(event: MouseEvent or KeyboardEvent, hostEl: HTMLElement) => void	undefined
uploadedFiles	--	The array of objects holding the uploaded files data: name, type, and url.	CustomFile[]	undefined

Events

Event	Description	Type
change		CustomEvent<any>
uploadCancel		CustomEvent<any>

Dependencies

Depends on

• nv-icon
• context-consumer

Graph

graph TD;
  nv-upsloader --> nv-icon
  nv-upsloader --> context-consumer
  nv-icon --> context-consumer
  style nv-upsloader fill:#f9f,stroke:#333,stroke-width:4px

nv-public-path-provider

Properties

Property	Attribute	Description	Type	Default
customIcons	--		{}	{}
publicPath	public-path		string	'/assets/icons/'

Slots

Slot	Description
	components that depend on provider state

Dependencies

Depends on

• context-consumer

Graph

graph TD;
  nv-public-path-provider --> context-consumer
  style nv-public-path-provider fill:#f9f,stroke:#333,stroke-width:4px