Noveo-components NPM

nv-alert

Properties

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

Built with StencilJS

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 \\| ButtonColors.primary \\| ButtonColors.secondary \\| 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 \\| ButtonSizes.md \\| ButtonSizes.responsiveContainer \\| ButtonSizes.responsiveText \\| ButtonSizes.sm \\| ButtonSizes.xl \\| ButtonSizes.xs \\| ButtonSizes.xxl`	`ButtonSizes.responsiveText`

Built with StencilJS

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`	`''`
`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

Built with StencilJS

nv-dropdown-container

Dependencies

Used by

nv-select

Graph

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

Built with StencilJS

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`
`publicPath`	`public-path`	The custom path to `assets` dir on a server. Should be used with `name` attribute to make up a full path like this: `/${publicPath}assets/icons/${iconName}.svg`	`string`	`''`
`size`	`size`	The size of the icon. Available options are: `sm`, `md`, and `lg`.	`IconSizes.LG \\| IconSizes.MD \\| IconSizes.SM`	`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-select

Graph

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

Built with StencilJS

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`
`disabled`	`disabled`	If input is disabled or not	`boolean`	`false`
`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`	`''`
`required`	`required`	Whenever input is required or not	`boolean`	`false`
`type`	`type`	Type attribute for the input	`string`	`'text'`
`value`	`value`	Value for the input	`string`	`''`

Events

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

Built with StencilJS

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`	`''`

Dependencies

Used by

Graph

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

Built with StencilJS

nv-radio-group

Properties

Property	Attribute	Description	Type	Default
`column`	`column`	switch flex-direction (row \| 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

Built with StencilJS

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`	`''`
`items`	--	initial data	`Item[]`	`[]`
`label`	`label`	large text over select	`string`	`''`
`placeholder`	`placeholder`	placeholder	`string`	`''`
`type`	`type`	style option (primary, checkbox, multi)	`SelectTypes.checkbox \\| SelectTypes.multi \\| SelectTypes.primary`	`SelectTypes.primary`
`value`	`value`	initial value	`string \\| string[]`	`null`

Events

Event	Description	Type
`change`	onChange event returns selected values	`CustomEvent<string \\| string[]>`

Dependencies

Depends on

Graph

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

Built with StencilJS

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

Built with StencilJS

nv-tabs

Properties

Property	Attribute	Description	Type	Default
`active`	`active`	id of the active tab	`string`	`defaultActive`
`type`	`type`	style option (primary, secondary, table)	`TabTypes.primary \\| TabTypes.secondary \\| TabTypes.table`	`TabTypes.primary`

Events

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

Dependencies

Used by

Graph

graph TD;
  nv-tab-example --> nv-tabs
  nv-table-example --> nv-tabs
  style nv-tabs fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

nv-table

Properties

Property	Attribute	Description	Type	Default
`type`	`type`		`TabTypes.primary \\| TabTypes.secondary \\| TabTypes.table`	`TabTypes.table`

Dependencies

Depends on

Graph

graph TD;
  nv-table-example --> nv-table
  nv-table-example --> nv-table-head
  nv-table-example --> nv-table-cell
  nv-table-example --> nv-table-body
  nv-table-example --> nv-table-row
  nv-table-example --> nv-tabs
  nv-table-example --> nv-tab
  nv-table-example --> nv-tab-content
  nv-table-example --> nv-tab-pane
  style nv-table-example fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

nv-tooltip

Properties

Property	Attribute	Description	Type	Default
`boundary`	`boundary`	The element that should act as boundaries for the tooltip.	`TooltipBoundaries.SCROLLPARENT \\| TooltipBoundaries.VIEWPORT \\| TooltipBoundaries.WINDOW`	`TooltipBoundaries.VIEWPORT`
`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`	`undefined`
`placement`	`placement`	The tooltip placement relative to the target	`TooltipPlacements.AUTO \\| TooltipPlacements.AUTOEND \\| TooltipPlacements.AUTOSTART \\| TooltipPlacements.BOTTOM \\| TooltipPlacements.BOTTOMEND \\| TooltipPlacements.BOTTOMSTART \\| TooltipPlacements.LEFT \\| TooltipPlacements.LEFTEND \\| TooltipPlacements.LEFTSTART \\| TooltipPlacements.RIGHT \\| TooltipPlacements.RIGHTEND \\| TooltipPlacements.RIGHTSTART \\| TooltipPlacements.TOP \\| TooltipPlacements.TOPEND \\| TooltipPlacements.TOPSTART`	`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`