❤
npm
Sign UpSign In

asdasdasddsadsadas
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-alpha.4 • Public • Published

Noveo Logo

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

Depends on

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

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

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

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

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

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

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

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

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

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

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

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i asdasdasddsadsadas

Weekly Downloads

4

Version

0.0.1-alpha.4

License

MIT

Unpacked Size

24.3 MB

Total Files

759

Last publish

Collaborators

  • noobikz0r
Try on RunKit
Report malware