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.
- Install copy-webpack-plugin:
yarn add copy-webpack-plugin --dev
or
npm install copy-webpack-plugin --save-dev
- 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
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
Depends on
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
Depends on
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
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
Depends on
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 |
|
string |
'_' |
error |
error |
red text under the element, makes the label red |
string |
'' |
format |
format |
format string (date-fns) for the input |
string |
'dd-MM-yyyy' |
hideAfterChange |
hide-after-change |
Close dropdown picker after change date |
boolean |
true |
label |
label |
large text over element |
string |
'' |
placeholder |
placeholder |
|
string |
'DD.MM.YYYY' |
range |
range |
Allow the selection of date range |
boolean |
false |
value |
-- |
initial value |
Date or Date[] |
this.range ? [new Date(), addDays(new Date(), 1)] : new Date() |
Events
Event |
Description |
Type |
change |
|
CustomEvent<any> |
Slots
Slot |
Description |
"icon" |
content for input slot |
Dependencies
Depends on
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-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 |
description |
description |
text between label and element |
string |
'' |
digitPlaceholder |
digit-placeholder |
character instead of numbers |
string |
'_' |
error |
error |
red text under the element, makes the label red |
string |
'' |
format |
format |
format string (date-fns) for the input |
string |
'dd-MM-yyyy' |
label |
label |
large text over element |
string |
'' |
localeState |
-- |
current locale received from provider |
ProviderState |
undefined |
placeholder |
placeholder |
input placeholder |
string |
'' |
value |
-- |
initial value |
Date |
null |
Events
Event |
Description |
Type |
blur |
|
CustomEvent<any> |
change |
|
CustomEvent<any> |
Slots
Slot |
Description |
"icon" |
content for input slot |
Dependencies
Used by
Depends on
Graph
graph TD;
nv-date-input --> nv-label
nv-date-input --> nv-input
nv-date-input --> context-consumer
nv-date-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 |
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 |
-- |
initial value |
Date or Date[] |
null |
Events
Event |
Description |
Type |
change |
onChange event returns ISO format string or array for range mode |
CustomEvent<Date or Date[]> |
Dependencies
Used by
Depends on
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
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
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
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
Depends on
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-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
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
Graph
graph TD;
nv-date-input --> nv-input
nv-search --> nv-input
nv-select --> nv-input
nv-text-field --> nv-input
nv-time-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
Graph
graph TD;
nv-checkbox --> nv-label
nv-color-field --> nv-label
nv-date-field --> nv-label
nv-date-input --> 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
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
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 |
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
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
Depends on
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
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
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