Examples

NV

Elements

System Themes

nve-codeblock
- Default
- Flat
- Theme
- Copy
- Code
- LineNumbers
- Highlight
- Overflow
- LineWrap
nve-accordion
- Default
- Disabled
- Container
- Animated
- BehaviorExpandSingle
- CustomIconButton
- WithActions
- NestedOpenEvent
- DeprecatedSlots
- Single
- Multiple
nve-alert
- Default
- SupportStatus
- Status
- GroupDefault
- GroupStatus
- InvokerCommand
- Closable
- Actions
- Prominence
- Content
- Color
- CustomColorCombinations
nve-avatar
- Default
- Image
- Icon
- Size
- Group
- Color
nve-badge
- Default
- Status
- StatusFlat
- StatusIcon
- Support
- StatusLightTheme
- StatusDarkTheme
- Trend
- Color
- Prominence
- Flat
- Overflow
nve-breadcrumb
- Default
- WithIconButton
- WithMenu
nve-button
- Default
- GroupStates
- Interaction
- Container
- Size
- Pressed
- Selected
- Disabled
- WithIcon
- Flat
- Inline
- Link
- SelectedFlat
- LinkFlat
- NoWrap
- FormSubmit
- FormControl
- Popover
- BackgroundOverride
- ValidLinkButton
- InvalidLinkButton
- ProgressDisclosure
- ContrastColoredBackgrounds
nve-button-group
- Default
- SingleSelect
- MultiSelect
- Disabled
- Flat
- Action
- ActionSplit
- ActionSplitRounded
- Rounded
- RoundedIcon
- OrientationVertical
nve-card
- Default
- Actions
- MediaCard
- WithDivider
- DescriptionList
- WithTabs
- ContainerFull
- ContainerFlat
- Audit
- OverflowContent
nve-chat-message
- Default
- ArrowPosition
- Flat
- PrefixSuffix
- Codeblock
- TopOffset
- Color
nve-checkbox
- Default
- States
- VerticalGroup
- VerticalInlineGroup
- HorizontalGroup
- HorizontalInlineGroup
- Indeterminate
nve-color
- Default
- Datalist
- Vertical
- Horizontal
nve-combobox
- Default
- Vertical
- Horizontal
- Flat
- Select
- MultiSelect
- EmptyDefault
- Label
- LabelMultiSelect
- Overflow
- PopoverOverflow
- Reset
- Footer
- SelectAll
- DisabledOptions
- NoTags
- Form
- DynamicTypeaheadSearch
- Performance
- PerformanceSelect
- DynamicOptions
- FilterDemo
nve-copy-button
- Default
- Disabled
- Flat
- BehaviorCopy
- Size
- Hint
- Icon
- AsyncCopy
- TooltipPositionOverride
nve-date
- Default
- Datalist
- Vertical
- Horizontal
- Range
- Types
- FitText
nve-datetime
- Default
- Datalist
- Vertical
- Horizontal
nve-dialog
- Default
- InvokerCommand
- Events
- Visual
- Content
- Small
- Medium
- Large
- TextWrap
- NonClosable
- Alignment
- Position
- LegacyTrigger
- LegacyBehaviorTrigger
- ShadowRoot
- ScrollContent
- InertModal
- ContainerStyles
- MaxHeight
- LegacyDOMCreation
- CenterAlignment
nve-divider
- Default
- Emphasis
- Muted
- Vertical
- Rounded
nve-dot
- Default
- Size
- SupportStatus
- Number
- Status
nve-drawer
- Default
- Visual
- Scroll
- Events
- Small
- Large
- NonClosable
- Position
- LegacyPosition
- Inline
- InlineVisible
- LegacyInline
- LegacyBehaviorTrigger
nve-dropdown
- Default
- Menu
- Visual
- Events
- Closable
- Layout
- MultipleTriggers
- Position
- Alignment
- RadioGroup
- CheckboxGroup
- LegacyBehaviorTrigger
- Hint
- PositionFallback
nve-dropdown-group
- Default
- WithDisabledItems
- WithIcons
- WithMoreIcons
nve-dropzone
- Default
- Icon
- Form
nve-file
- Default
- Vertical
- Horizontal
nve-control
- Default
- Responsive
- Layout
- RequiredField
- NoLabelControl
- InlineControl
- Group
- DateControl
- TextareaControl
- Datalist
- Status
forms
- KitchenSink
- Vertical
- VerticalInline
- Horizontal
- HorizontalInline
- FitText
- HiddenMessageIcon
- ProminenceMuted
- LoginForm
- ErrorGroup
- SuccessGroup
- ResetForm
- LitForms
nve-grid
- Default
- Keynav
- MultiSelect
- BulkActions
- SingleSelect
- RowAction
- RowGroups
- Footer
- Pagination
- Scroll
- ScrollPosition
- FullHeight
- ColumnAction
- ColumnWidth
- Content
- ColumnFixed
- ColumnMultiFixed
- ColumnStackFixed
- ColumnDynamicFixed
- ColumnAlignCenter
- ColumnAlignEnd
- ColumnAlignStart
- DisplaySettings
- RowSort
- CSSAnchor
- RowSortInteractive
- PerformanceInfiniteScroll
- Performance
- PerformanceVirtualScroll
- Stripe
- Card
- CardTabs
- Placeholder
- Full
- Flat
- FocusTypes
- PanelDetail
- PanelGrid
- InvalidDOM
- Audit
- InvalidColumnCount
- ValidColumnCount
- SortVisibility
nve-icon
- Default
- Statuses
- Size
- Direction
- Themes
- Registration
- Alias
- Source
nve-icon-button
- Default
- Interactions
- Size
- FlatInteractions
- Pressed
- PressedFlat
- PressedInline
- Selected
- SelectedFlat
- SelectedInline
- CustomIcon
- Link
- Themes
nve-input
- Default
- Standard
- Vertical
- Horizontal
- Rounded
- FitText
- FitContent
- Flat
- SearchClear
- LabelAction
- PrefixSuffix
nve-input-group
- Default
- FilterGroupRange
nve-logo
- Default
- Size
- SlottedIcons
- Color
- LightTheme
- DarkTheme
nve-menu
- Default
- Dropdown
- Selected
- Current
- BorderBackground
- Disabled
- Icons
- Links
- Suffix
- Scroll
- Complex
- VerticalNavigationDrawer
- VerticalNavigationPanel
- ItemTooltip
- DangerStatus
nve-month
- Default
- Datalist
- Vertical
- Horizontal
nve-notification
- Default
- Actions
- CustomStatus
- Visual
- ContentWrap
- Events
- InteractiveGroup
- Status
- Alignment
- Position
- PositionGroup
- Drawer
- ShadowRoot
- LegacyBehaviorTrigger
- Layers
nve-page
- Default
- Slots
- Content
- SlotBanner
- SlotSubheader
- SlotSubheaderLarge
- SlotLeft
- SlotRight
- SlotBottom
- SlotLeftAside
- SlotRightAside
- SlotSubfooter
- SlotFooter
- InvokerCommand
- PanelExpandable
- PanelClosable
- InteractionDrawer
- InteractionPanelNavigation
- PanelTabs
- PanelHeadings
- DocumentScroll
- KitchenSink
- LayoutCardGrid
- LayoutMultiVideo
- LayoutEditor
- LayoutSteps
- Resize
- ResizeMulti
- ResizeSnap
- InteractionPanel
- PanelExpandableState
- PanelClosableState
nve-page-header
- Default
- DropdownMenu
- MenuButton
- AppLogo
- PrefixNavigation
- CenterNavigation
- SuffixNavigation
- Search
- UserDetail
nve-page-loader
- Default
- Interactive
nve-pagination
- Default
- Skippable
- Disabled
- Flat
- Inline
- DisableStep
- Forms
- NoItemsCount
- LargeValues
- DynamicItems
- DynamicStepSize
- SuffixLabel
- PageListPattern
- SkipPattern
- VerticalPattern
- CustomSelectPattern
nve-panel
- Default
- LeftSidePanel
- RightSidePanel
- ClosablePanel
- WithTrigger
- WithFullHeader
- WithFooter
nve-password
- Default
- Vertical
- Horizontal
nve-preferences-input
- Default
- Forms
- Dropdown
nve-progress-bar
- Default
- Status
- Max
- Labeled
- Indeterminate
- IndeterminateStatusColors
- IndeterminateCustomColor
- CustomHeights
nve-progress-ring
- Default
- Values
- Max
- Status
- WithText
- SlottedIcon
- Sizing
- WithButton
nve-progressive-filter-chip
- Default
- Layer
- Multiple
- TextInput
- DateRange
- Custom
- Validation
nve-pulse
- Default
- Status
- Size
- Inline
nve-radio
- Default
- VerticalGroup
- VerticalInlineGroup
- HorizontalGroup
- HorizontalInlineGroup
nve-range
- Default
- Datalist
- DatalistWithSteps
- Step
- Vertical
- Horizontal
- OrientationVertical
- OrientationVerticalDatalist
- CustomStyles
nve-resize-handle
- Default
- Vertical
- SplitHorizontal
- SplitVertical
- Form
- PreventDefault
- LineWidth
nve-search
- Default
- Inline
- Datalist
- Vertical
- Horizontal
nve-select
- Default
- CustomOptionRender
- Prefix
- Flat
- Vertical
- Horizontal
- Multiple
- MultipleDisabled
- MultipleOverflow
- Size
- Height
- FitText
- FitContent
- Placeholder
- PlaceholderMultiple
- Disabled
- ViewportOverflow
- Performance
nve-skeleton
- Default
- Effect
- Shape
- Slotted
nve-sort-button
- Default
- LightTheme
- DarkTheme
nve-sparkline
- Default
- Marks
- Status
- InlineWithText
- DataGrid
- ExplicitSize
- DefaultSize
- Interpolation
- Symbols
- FixedDataDomain
- ZeroLine
- IntervalLength
- CustomStyling
nve-star-rating
- Default
- Disabled
- HalfStar
- Toggle
nve-steps
- Default
- Condensed
- VerticalSteps
- VerticalCondensedSteps
- StatelessSteps
nve-switch
- Default
- Size
- States
- VerticalGroup
- VerticalInlineGroup
- HorizontalGroup
- HorizontalInlineGroup
nve-tabs
- Default
- BorderlessTabs
- BorderBackground
- WithDots
- VerticalTabs
- BorderlessVerticalTabs
- StatelessTabs
- Links
- OverflowTabs
- WithTooltips
nve-tag
- Default
- Closable
- Readonly
- Group
- Color
- Prominence
- OverflowSingle
- OverflowMaxWidth
nve-textarea
- Default
- Vertical
- Horizontal
- ControlValidation
- ColumnsAndRows
nve-time
- Default
- Datalist
- Vertical
- Horizontal
nve-toast
- Default
- Visual
- Status
- Prominence
- Actions
- Events
- Position
- Alignment
- LegacyBehaviorTrigger
- ShadowRoot
- BodyAnchor
nve-toggletip
- Default
- Visual
- Content
- ContentWithFooter
- ContentWithHeader
- Events
- Closable
- AlertGroup
- Position
- Alignment
- CrossShadowRootAnchorPosition
- LegacyBehaviorTrigger
nve-toolbar
- Default
- ContainerFlat
- ContainerInset
- ContainerFull
- Groups
- Vertical
- Status
- Container
nve-tooltip
- Default
- Visual
- Position
- Alignment
- Events
- Content
- DynamicTrigger
- Hint
- Status
- Wrap
- AsyncTrigger
- PositionStrategyAbsolute
- ScrollContainer
- DynamicAnchorPosition
- LegacyDynamicTrigger
- LegacyTrigger
- LegacyBehaviorTrigger
- LegacyOpenDelay
- NestedDynamic
- InterestInvokers
- OpenDelay
- LegacyPopoverTarget
nve-tree
- Default
- Border
- Selectable
- SelectableMultiple
- SelectEvent
- Highlight
- Links
- Async
- NodeContent
- DynamicTree
- VerticalNav
- Overflow
- BulkCreation
- Audit
nve-week
- Default
- Datalist
- Vertical
- Horizontal
- ExportParts
- CardToggle
- Events
- QualityCheck
- Events
- CanvasParticles
- styles
- I18nControllerDemo
- styles
- GridDemo
- styles
- ListDemo
- VerticalDemo
- LoopDemo
- Anchor
- Nested
- ProgrammaticTrigger
- Interactive
- LegacyInteractive
- Closable
- InvokerCommand
- EventBubbling
- TypeButtonDemo
- Default
- Alignment
- TouchDemo
nve-patterns
- LoginForm
- LoginPage
- NoAccess
- ContentRow
- TrainingMonitor
- ProjectBoard
- FileBrowser
- DiffView
- ReadOnly
- DataGridRetry
- EmptyData
- NoResults
- OfflineMode
- ModulePassRate
- SensorCoverageHeatmap
- InferenceLatencyHeatmap
- PathPlanningHeatmap
- JointUtilizationHeatmap
- OccupancyDetectionHeatmap
- ThermalHeatmap
- DynamicHeatmap
- ShortcutFilled
- ShortcutFlat
- ShortcutDropdown
- EventTimeline
- PlaybackControl
- PlaybackSpeedControl
- PlaybackSpeedMenuControl
- VolumeControl
- ZoomControl
- TimeScrubberControl
- VideoPlayerCard
- AudioPlayerCard
- PageLayoutVideo
- KeyValue
- Accordion
- TabbedHeader
- NotificationStack
- CollapsibleTabs
- CollapsibleToolbar
- FilterToolbar
- FilterToolbarScroll
- FilterToolbarWrap
- StandardHeaderMainPage
- TabsHeaderMainPage
- StackedMetadataHeaderMainPage
- InlineMetadataHeaderMainPage
- InlineKitchenSinkHeaderMainPage
- StackedKitchenSinkHeaderMainPage
- StandardHeaderDetailPage
- TabsHeaderDetailPage
- StackedMetadataHeaderDetailPage
- InlineMetadataHeaderDetailPage
- InlineKitchenSinkHeaderDetailPage
- StackedKitchenSinkHeaderDetailPage
- StandardHeaderViewerPage
- StandardHeaderToolbarPage
- Badge
- BadgeDetail
- Card
- Grid
nve-markdown
- Default
- KitchenSinkFromTemplate
- KitchenSinkFromSource
- FromSource
- FromTemplate
- CombinedFromTemplate
- JavaScriptDriven
- DynamicSource
- FullFeature
- CssUtility
nve-monaco-diff-editor
- Default
nve-monaco-diff-input
- Default
- WithOptionalAttributes
- ReadOnly
- Disabled
- Control
- JSONSchemaValidation
- TypeScriptValidation
nve-monaco-editor
- Default
nve-monaco-input
- Default
- WithOptionalAttributes
- ReadOnly
- Disabled
- Control
- JSONSchemaValidation
- TypeScriptValidation
nve-monaco-problems
- Default
- Empty
- CustomEmptySlot
nve-text
- Default
- Headings
- Size
- Color
- Weights
- List
- OrderedList
- UnstyledList
- NavList
- Link
- Transforms
- LineHeightRelative
- LineHeightFixed
- DescriptionList
layout responsive
- GapResponsive
- PadResponsive
- HideResponsive
- FlexDirectionResponsive
- FlexDirectionReverse
- ResponsiveGrid
- ResponsiveGridItems
- ViewportGapResponsive
- ViewportPadResponsive
- ViewportHideResponsive
- ViewportFlexDirectionResponsive
- ViewportFlexDirectionReverse
- ViewportResponsiveGrid
- ViewportResponsiveGridItems
- ResponsiveCombined
nve-layout
- Default
- LayoutGap
- HorizontalAlignLeft
- HorizontalAlignHorizontalCenter
- HorizontalAlignRight
- HorizontalAlignVerticalCenter
- HorizontalAlignCenter
- HorizontalAlignVerticalCenterAndRight
- HorizontalAlignLeftAndBottom
- HorizontalAlignHorizontalCenterAndBottom
- HorizontalAlignRightAndBottom
- HorizontalAlignSpaceAround
- HorizontalAlignSpaceBetween
- HorizontalAlignSpaceEvenly
- HorizontalAlignStretchHorizontal
- HorizontalAlignStretchVertical
- HorizontalAlignFullStretch
- HorizontalAlignWrap
- VerticalAlignTop
- VerticalAlignVerticalCenter
- VerticalAlignBottom
- VerticalAlignHorizontalCenter
- VerticalAlignCenter
- VerticalAlignCenterAndBottom
- VerticalAlignTopAndRight
- VerticalAlignCenterAndRight
- VerticalAlignBottomAndRight
- VerticalAlignSpaceAround
- VerticalAlignSpaceBetween
- VerticalAlignSpaceEvenly
- VerticalAlignStretchHorizontal
- VerticalAlignStretchVertical
- VerticalAlignFullStretch
- GapNone
- GapXxxs
- GapXxs
- GapXs
- GapSm
- GapMd
- GapLg
- GapXl
- GapXxl
- GapXxxl
- PadNone
- PadXxxs
- PadXxs
- PadXs
- PadSm
- PadMd
- PadLg
- PadXl
- PadXxl
- PadXxxl
- PadTop
- PadLeft
- PadRight
- PadBottom
- PadX
- PadY
- GridSpan2
- GridSpan6
- GridAlignTop
- GridAlignVerticalCenter
- GridAlignBottom
- GridAlignHorizontalCenter
- GridAlignCenter
- GridAlignCenterAndBottom
- GridAlignTopAndRight
- GridAlignCenterAndRight
- GridAlignBottomAndRight
- GridAlignHorizontalStretch
- GridAlignVerticalStretch
- GridAlignFullStretch
- GridVariableSpans
- Full
- Spacing
- NestedLayouts
nve-internal-patterns
- Layers
- Objects
- ReducedMotion
- ButtonInteractions
- Interactions
- ResponsiveTabs
- ResponsiveToolbar
- ResponsiveNavigation