Asdasdasddsadsadas NPM

Noveo Web Components

Web Components was designed by Noveo UI Kit and builded on Stencil

Documentation was written on Storybook: http://components.noveogroup.com

If you want to run storybook locally then you can use serve

cd storybook-static
serve

How to use

If you want to use this components on React application then you should use special components for React: http://example.com

Because React support web-components only for 71%: https://custom-elements-everywhere.com/libraries/react/results/results.html

Installation

By npm:

npm install @noveo/web-components --save

Or by yarn:

yarn add @noveo/web-components

Usage

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

defineCustomElements(window);

If you want to support Edge and IE11:

import { applyPolyfills, defineCustomElements } from '@noveo/web-components/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>

Components

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`

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`

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

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

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

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

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

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

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

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

nv-icon
nv-checkbox
nv-label
nv-dropdown
nv-dropdown-button
nv-dropdown-container

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

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

nv-table

Properties

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

Dependencies

Depends on

nv-table
nv-table-head
nv-table-cell
nv-table-body
nv-table-row
nv-tabs
nv-tab
nv-tab-content
nv-tab-pane

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

nv-table-body

Dependencies

Used by

nv-table-example

Graph

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

nv-table-cell

Properties

Property	Attribute	Description	Type	Default
`align`	`align`		`TableCellAlignments.center \\| TableCellAlignments.left \\| TableCellAlignments.right`	`TableCellAlignments.left`
`splitters`	`splitters`		`TableSplitters.all \\| TableSplitters.horizontal \\| TableSplitters.none \\| TableSplitters.partial \\| TableSplitters.vertical`	`TableSplitters.all`

Dependencies

Used by

nv-table-example

Graph

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

nv-table-head

Dependencies

Used by

nv-table-example

Graph

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

nv-table-row

Properties

Property	Attribute	Description	Type	Default
`color`	`color`		`TableRowColors.danger \\| TableRowColors.default \\| TableRowColors.success`	`TableRowColors.default`
`splitters`	`splitters`		`TableSplitters.all \\| TableSplitters.horizontal \\| TableSplitters.none \\| TableSplitters.partial \\| TableSplitters.vertical`	`undefined`

Dependencies

Used by

nv-table-example

Graph

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

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`

@everything-registry/sub-chunk-1169 @zalastax/nolb-asd

4 years ago

4 years ago

4 years ago

4 years ago