Introduction
In version 2 of our design system, Base was a foundational component used primarily to apply styling via attributes. Instead of manually writing css, developers could specify properties—such as background color, padding, or margin—directly on any component. These properties were then translated into the corresponding CSS classes behind the scenes, ensuring a standardized and consistent style across the application.
Why It’s Discontinued
With the transition to version 3, we have fully adopted Tailwind CSS, which offers a comprehensive set of utility classes for styling. Because Tailwind covers much of the same ground as Base did, having a dedicated component to map attributes to CSS is no longer necessary. By applying Tailwind classes directly in markup, developers gain more immediate control over styling while keeping the component layer simpler and more flexible.
Additionally, our design system has grown beyond its initial .NET focus to accommodate a broader range of web technologies. Removing Base aligns with this framework-agnostic philosophy and helps streamline the overall codebase.
Tailwind Plugin for Autocompletion
If you benefited from the convenience of attribute autocompletion, consider installing a Tailwind CSS plugin for your IDE. These plugins provide IntelliSense for utility classes (including additional utilities from Nova), making it easier to discover and apply the correct styling without memorizing every Tailwind class.
Example of Version 2 vs. Version 3
Below are some examples showing how Base attributes in version 2 compare to Tailwind & Nova utility classes in version 3.
Version 2 (using Base attributes)
<NVBlock BorderRadius="sm"></NVBlock>
<NVAlert BorderRadius="sm"></NVAlert>
razor
Version 3 (using Tailwind classes)
<div class="rounded-sm"></div>
<NvAlert class="rounded-sm"></NvAlert>
razor
In version 2, setting BorderRadius="sm" on <NVBlock> or <NVAlert> automatically applied the rounded-sm class. In version 3, you simply write the desired utility class (rounded-sm) in your markup.
Version 2 (using Base attributes)
<NvBlock borderRadius="sm"></NvBlock>
<NvAlert borderRadius="sm"></NvAlert>
tsx
Version 3 (using Tailwind classes)
<div className="rounded-sm"></div>
<NvAlert className="rounded-sm"></NvAlert>
tsx
In version 2, setting borderRadius="sm" on <NvBlock> or <NvAlert> applied the rounded-sm class. In version 3, you simply write the desired utility class (rounded-sm) in your markup.
Version 2 (using Base attributes)
<nv-block [borderRadius]="sm"></nv-block>
<nv-alert [borderRadius]="sm"></nv-block>
html
Version 3 (using Tailwind classes)
<div class="rounded-sm"></div>
<nv-alert class="rounded-sm"></nv-alert>
html
In version 2, setting [borderRadius]="sm" on <nv-block> or <nv-alert> applied the rounded-sm class. In version 3, you simply write the desired utility class (rounded-sm) in your markup.
Version 2 (using Base attributes)
<nv-block border-radius="sm"></nv-block>
<nv-alert border-radius="sm"></nv-block>
html
Version 3 (using Tailwind classes)
<div class="rounded-sm"></div>
<nv-alert class="rounded-sm"></nv-alert>
html
In version 2, setting border-radius="sm" on <nv-block> or <nv-alert> applied the rounded-sm class. In version 3, you simply write the desired utility class (rounded-sm) in your markup.
Migration Guide
AddClass
Class names are passed directly to the components or html tags.
Version 2
AddClass(DomClass.TextColor("orange-500"))
cs
Version 3
<NvComponent class="text-orange-500" />
razor
AddStyle
Inline styles are passed directly to the components or html tags.
Version 2
AddStyle(DomStyle.TextColor("#F00"))
cs
Version 3
<NvComponent style="color: #f00" />
razor
ActiveEffect
This has been removed and should no longer be used. Refer to the tailwind documentation for the desired effect.
Version 2
<NVButton ActiveEffect="@ActiveEffect.UP"> </NVButton>
razor
Version 3
Removed, use tailwind utils for various effects
<NvButton class="shadow-lg" />
razor
Alt
Add the alt attribute directly as a native html attribute. Will work on native html elements, or any nova component.
Version 2
<NVBlock Tag="img" Alt="Alternate text"></NVBlock>
razor
Version 3
<img alt="Alternate text" />
razor
BackgroundColor
Use tailwind’s background-color utility classes or style attributes directly.
Version 2
<NVBlock BackgroundColor="orange-500"></NVBlock>
<NVAlert BackgroundColor="orange-500"></NVAlert>
<NVBlock BackgroundColor="#FF0000"></NVBlock>
<NvAlert BackgroundColor="#FF0000"></NvAlert>
razor
Version 3
<div class="bg-orange-500"></div>
<NvAlert class="bg-orange-500"></NvAlert>
<div style="color: #FF0000"></div>
<NvAlert style="color: #FF0000"></NvAlert>
razor
Version 2
<NvBlock backgroundColor="orange-500"></NvBlock>
<NvAlert backgroundColor="orange-500"></NvAlert>
<NvBlock backgroundColor="#FF0000"></NvBlock>
<NvAlert backgroundColor="#FF0000"></NvAlert>
tsx
Version 3
<div className="bg-orange-500"></div>
<NvAlert className="bg-orange-500"></NvAlert>
<div style={{ color: "#FF0000" }}></div>
<NvAlert style={{ color: "#FF0000" }}></NvAlert>
tsx
Version 2
<nv-block [backgroundColor]="orange-500"></nv-block>
<nv-alert [backgroundColor]="orange-500"></nv-block>
<nv-block [backgroundColor]="#FF0000"></nv-block>
<nv-alert [backgroundColor]="#FF0000"></nv-block>
html
Version 3
<div class="bg-orange-500"></div>
<nv-alert class="bg-orange-500"></nv-alert>
<div style="color: #FF0000"></div>
<nv-alert style="color: #FF0000"></nv-alert>
html
Version 2
<nv-block background-color="orange-500"></nv-block>
<nv-alert background-color="orange-500"></nv-block>
<nv-block background-color="#FF0000"></nv-block>
<nv-alert background-color="#FF0000"></nv-block>
html
Version 3
<div class="bg-orange-500"></div>
<nv-alert class="bg-orange-500"></nv-alert>
<div style="color: #FF0000"></div>
<nv-alert style="color: #FF0000"></nv-alert>
html
ActiveBackgroundColor
Use the tailwind’s active modifier with background-color utility classes directly.
Version 2
<NVButton ActiveBackgroundColor="orange-500"></NVButton>
razor
Version 3
<NvButton class="active:bg-orange-500"></NvButton>
razor
Version 2
<NvButton activeBackgroundColor="orange-500"></NvButton>
tsx
Version 3
<NvButton className="active:bg-orange-500"></NvButton>
tsx
Version 2
<nv-button [activeBackgroundColor]="orange-500"></nv-button>
html
Version 3
<nv-button class="active:bg-orange-500"></nv-button>
html
Version 2
<nv-button active-background-color="orange-500"></nv-button>
html
Version 3
<nv-button class="active:bg-orange-500"></nv-button>
html
HoverBackgroundColor
Use the tailwind’s hover modifier with background-color utility classes directly.
Version 2
<NVButton HoverBackgroundColor="orange-500"></NVButton>
razor
Version 3
<NvButton class="hover:bg-orange-500"></NvButton>
razor
Version 2
<NvButton hoverBackgroundColor="orange-500"></NvButton>
tsx
Version 3
<NvButton className="hover:bg-orange-500"></NvButton>
tsx
Version 2
<nv-button [hoverBackgroundColor]="orange-500"></nv-button>
html
Version 3
<nv-button class="hover:bg-orange-500"></nv-button>
html
Version 2
<nv-button hover-background-color="orange-500"></nv-button>
html
Version 3
<nv-button class="hover:bg-orange-500"></nv-button>
html
BorderColor
Use tailwind’s border-color utility classes or style attributes directly.
Version 2
<NVBlock BorderColor="orange-500"></NVBlock>
<NVBlock BorderColor="#FF0000"></NVBlock>
razor
Version 3
<div class="border-orange-500"></div>
<div style="border-color:#FF0000;"></div>
razor
Version 2
<NvBlock borderColor="orange-500"></NvBlock>
<NvBlock borderColor="#FF0000"></NvBlock>
tsx
Version 3
<div className="border-orange-500"></div>
<div style={{ borderColor: "#FF0000" }}></div>
tsx
Version 2
<nv-block [borderColor]="orange-500"></nv-block>
<nv-block [borderColor]="#FF0000"></nv-block>
html
Version 3
<div class="border-orange-500"></div>
<div style="border-color: #FF0000"></div>
html
Version 2
<nv-block border-color="orange-500"></nv-block>
<nv-block border-color="#FF0000"></nv-block>
html
Version 3
<div class="border-orange-500"></div>
<div style="border-color: #FF0000"></div>
html
ActiveBorderColor
Use the tailwind’s active modifier with border-color utility classes directly.
Version 2
<NVBlock ActiveBorderColor="orange-500"></NVBlock>
razor
Version 3
<div class="active:border-orange-500"></div>
razor
Version 2
<NvBlock activeBorderColor="orange-500"></NvBlock>
tsx
Version 3
<div className="active:border-orange-500"></div>
tsx
Version 2
<nv-block [activeBorderColor]="orange-500"></nv-block>
html
Version 3
<div class="active:border-orange-500"></div>
html
Version 2
<nv-block active-border-color="orange-500"></nv-block>
html
Version 3
<div class="active:border-orange-500"></div>
html
HoverBorderColor
Use the tailwind’s hover-modifier with border-color utility classes directly.
Version 2
<NVBlock HoverBorderColor="orange-500"></NVBlock>
razor
Version 3
<div class="hover:border-orange-500"></div>
razor
Version 2
<NvBlock hoverBorderColor="orange-500"></NvBlock>
tsx
Version 3
<div className="hover:border-orange-500"></div>
tsx
Version 2
<nv-block [hoverBorderColor]="orange-500"></nv-block>
html
Version 3
<div class="hover:border-orange-500"></div>
html
Version 2
<nv-block hover-border-color="orange-500"></nv-block>
html
Version 3
<div class="hover:border-orange-500"></div>
html
BorderRadius
Use tailwind’s border-radius utility classes directly.
Version 2
<NVBlock BorderRadius="sm"></NVBlock>
razor
Version 3
<div class="rounded-sm"></div>
razor
Version 2
<NvBlock borderRadius="sm"></NvBlock>
tsx
Version 3
<div className="rounded-sm"></div>
tsx
Version 2
<nv-block [borderRadius]="sm"></nv-block>
html
Version 3
<div class="rounded-sm"></div>
html
Version 2
<nv-block border-radius="sm"></nv-block>
html
Version 3
<div class="rounded-sm"></div>
html
BorderWidth
Use tailwind’s border-width utility classes directly.
Version 2
<NVBlock BorderWidth="1 2 4 8"></NVBlock>
razor
Version 3
<div class="border-t border-r-2 border-b-4 border-l-8"></div>
razor
Version 2
<NvBlock borderWidth="1 2 4 8"></NvBlock>
tsx
Version 3
<div className="border-t border-r-2 border-b-4 border-l-8"></div>
tsx
Version 2
<nv-block [borderWidth]="1 2 4 8"></nv-block>
html
Version 3
<div class="border-t border-r-2 border-b-4 border-l-8"></div>
html
Version 2
<nv-block border-width="1 2 4 8"></nv-block>
html
Version 3
<div class="border-t border-r-2 border-b-4 border-l-8"></div>
html
Bottom
Use tailwind’s placement utility classes directly.
Version 2
<NVBlock Bottom="0"></NVBlock>
razor
Version 3
<div class="bottom-0"></div>
razor
Version 2
<NvBlock bottom="0"></NvBlock>
tsx
Version 3
<div className="bottom-0"></div>
tsx
Version 2
<nv-block [bottom]="0"></nv-block>
html
Version 3
<div class="bottom-0"></div>
html
Version 2
<nv-block bottom="0"></nv-block>
html
Version 3
<div class="bottom-0"></div>
html
ChildContent
Every Component allows child and slot components, no changes necessary.
ChildMargin
Removed, use flexbox and tailwind’s spacing utility classes.
Version 2
<NVBlock ChildMargin="1 2"></NVBlock>
razor
Version 3
<div class="flex space-y-1 space-x-2"></div>
razor
Version 2
<NvBlock childMargin="1 2"></NvBlock>
tsx
Version 3
<div className="flex space-y-1 space-x-2"></div>
tsx
Version 2
<nv-block [childMargin]="1 2"></nv-block>
html
Version 3
<div class="flex space-y-1 space-x-2"></div>
html
Version 2
<nv-block child-margin="1 2"></nv-block>
html
Version 3
<div class="flex space-y-1 space-x-2"></div>
html
ChildPadding
Removed, use flexbox and tailwind’s spacing utility classes, see ChildMargin for alternative, or add padding classes to the children directly.
Class
Use the native html class tag directly.
Version 2
<NVAlert Class="sample" />
cs
Version 3
<NvAlert class="sample" />
razor
CM
Removed, see ChildMargin for alternative.
CMB
Removed, see ChildMargin for alternative.
CML
Removed, see ChildMargin for alternative.
CMR
Removed, see ChildMargin for alternative.
CMT
Removed, see ChildMargin for alternative.
CMX
Removed, see ChildMargin for alternative.
CMY
Removed, see ChildMargin for alternative.
Color
Contextual colors are now defined via descriptive props such as emphasis or feedback. Please refer to the documentation of the individual components. If you want to directly set text color, use tailwind’s color utility classes.
Version 2
<NVButton Color="orange-500"></NVButton>
razor
Version 3
<NVButton Emphasis="high"></NVButton>
razor
Version 2
<NvButton color="orange-500"></NvButton>
tsx
Version 3
<NvButton emphasis="high"></NvButton>
tsx
Version 2
<nv-button [color]="orange-500"></nv-button>
html
Version 3
<nv-button [emphasis]="high"></nv-button>
html
Version 2
<nv-button color="orange-500"></nv-button>
html
Version 3
<nv-button emphasis="high"></nv-button>
html
ColSize
ColSize has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
Content
Use tailwind’s justify utility classes directly.
Version 2
<NVBlock Content="@Content.START"></NVBlock>
<NVBlock Content="@Content.END"></NVBlock>
razor
Version 3
<div class="justify-start"></div>
<div class="justify-end"></div>
razor
Version 2
<NvBlock content="start"></NvBlock>
<NvBlock content="end"></NvBlock>
tsx
Version 3
<div className="justify-start"></div>
<div className="justify-end"></div>
tsx
Version 2
<nv-block [content]="start"></nv-block>
<nv-block [content]="end"></nv-block>
html
Version 3
<div class="justify-start"></div>
<div class="justify-end"></div>
html
Version 2
<nv-block content="start"></nv-block>
<nv-block content="end"></nv-block>
html
Version 3
<div class="justify-start"></div>
<div class="justify-end"></div>
html
CP
Removed, see ChildPadding for details.
CPB
Removed, see ChildPadding for details.
CPL
Removed, see ChildPadding for details.
CPR
Removed, see ChildPadding for details.
CPT
Removed, see ChildPadding for details.
CPX
Removed, see ChildPadding for details.
CPY
Removed, see ChildPadding for details.
DicClass
Use the @class directive directly.
Version 2
<NVBlock DicClass="@(new Dictionary<string, bool>() {
{"border", true},
{"border-gray-200", true},
{"app-sidebar-close", false},
)"></NVBlock>
razor
Version 3
<div @class=(@{
return new Dictionary<string, bool>
{
{ "border", true },
{ "border-gray-200", true },
{ "app-sidebar-close", false }
}
.Where(kvp => kvp.Value)
.Select(kvp => kvp.Key);
})>
</div>
razor
Direction
Use tailwind’s flex-direction utility classes directly.
Version 2
<NVBlock Content="@Direction.ROW"></NVBlock>
razor
Version 3
<div class="flex-row"></div>
razor
Version 2
<NvBlock direction="row"></NvBlock>
tsx
Version 3
<div className="flex-row"></div>
tsx
Version 2
<NvBlock direction="row"></NvBlock>
vue
Version 3
<div class="flex-row"></div>
vue
Version 2
<nv-block [direction]="row"></nv-block>
html
Version 3
<div class="flex-row"></div>
html
Version 2
<nv-block direction="row"></nv-block>
html
Version 3
<div class="flex-row"></div>
html
Disabled
Refer to the component or native html documentation for disabled attributes.
Version 2
<NVButton Disabled></NVButton>
<NVBlock Tag="input" Disabled></NVBlock>
razor
Version 3
<NvButton Disabled></NvButton>
<input disabled />
razor
Display
Use tailwind’s display utility classes directly.
Version 2
<NVBlock Display="@Display.HIDDEN"></NVBlock>
razor
Version 3
<div class="hidden"></div>
razor
Version 2
<NvBlock direction="row"></NvBlock>
tsx
Version 3
<div className="flex-row"></div>
tsx
Version 2
<nv-block [direction]="row"></nv-block>
html
Version 3
<div class="flex-row"></div>
html
Version 2
<nv-block direction="row"></nv-block>
html
Version 3
<div class="flex-row"></div>
html
FontSize
Use tailwind’s font-size utility classes directly.
Version 2
<NVBlock FontSize="16px"></NVBlock>
razor
Version 3
<div class="text-base"></div>
razor
Version 2
<NvBlock fontSize="16px"></NvBlock>
tsx
Version 3
<div className="text-base"></div>
tsx
Version 2
<nv-block [fontSize]="16px"></nv-block>
html
Version 3
<div class="text-base"></div>
html
Version 2
<nv-block font-size="16px"></nv-block>
html
Version 3
<div class="text-base"></div>
html
FontWeight
Use tailwind’s font-weight utility classes directly.
Version 2
<NVBlock FontWeight="@FontWeight.NORMAL"></NVBlock>
razor
Version 3
<div class="font-normal"></div>
razor
Version 2
<NvBlock fontWeight="normal"></NvBlock>
tsx
Version 3
<div className="font-normal"></div>
tsx
Version 2
<nv-block [fontWeight]="normal"></nv-block>
html
Version 3
<div class="font-normal"></div>
html
Version 2
<nv-block font-weight="normal"></nv-block>
html
Version 3
<div class="font-normal"></div>
html
GCM
Removed, see GrandChildMargin for details.
GCMB
Removed, see GrandChildMargin for details.
GCML
Removed, see GrandChildMargin for details.
GCMR
Removed, see GrandChildMargin for details.
GCMT
Removed, see GrandChildMargin for details.
GCMX
Removed, see GrandChildMargin for details.
GCMY
Removed, see GrandChildMargin for details.
GCP
Removed, see GrandChildPadding for details.
GCPB
Removed, see GrandChildPadding for details.
GCPL
Removed, see GrandChildPadding for details.
GCPR
Removed, see GrandChildPadding for details.
GCPT
Removed, see GrandChildPadding for details.
GCPX
Removed, see GrandChildPadding for details.
GCPY
Removed, see GrandChildPadding for details.
GrandChildMargin
Not supported, use CSS or Tailwind spacing utilities (gap-*, space-*, m-*) instead.
GrandChildPadding
Not supported, use CSS or Tailwind spacing utilities (gap-*, space-*, m-*) instead.
Grow
Use tailwind’s flex-grow utility classes directly.
Version 2
<NVBlock Grow="1"></NVBlock>
razor
Version 3
<div class="grow"></div>
razor
Version 2
<NvBlock grow="1"></NvBlock>
tsx
Version 3
<div className="grow"></div>
tsx
Version 2
<nv-block [grow]="1"></nv-block>
html
Version 3
<div class="grow"></div>
html
Version 2
<nv-block grow="1"></nv-block>
html
Version 3
<div class="grow"></div>
html
GutterX
Use tailwind’s gap utility classes directly.
Version 2
<NVBlock GutterX="2"></NVBlock>
razor
Version 3
<div class="gap-x-2"></div>
razor
Version 2
<NvBlock gutterX="2"></NvBlock>
tsx
Version 3
<div className="gap-x-2"></div>
tsx
Version 2
<nv-block [gutterX]="2"></nv-block>
html
Version 3
<div class="gap-x-2"></div>
html
Version 2
<nv-block gutter-x="2"></nv-block>
html
Version 3
<div class="gap-x-2"></div>
html
GutterY
Use tailwind’s gap utility classes directly.
Version 2
<NVBlock GutterY="2"></NVBlock>
razor
Version 3
<div class="gap-y-2"></div>
razor
Version 2
<NvBlock gutterY="2"></NvBlock>
tsx
Version 3
<div className="gap-y-2"></div>
tsx
Version 2
<nv-block [gutterY]="2"></nv-block>
html
Version 3
<div class="gap-y-2"></div>
html
Version 2
<nv-block gutter-y="2"></nv-block>
html
Version 3
<div class="gap-y-2"></div>
html
Height
Use tailwind’s height utility classes directly.
Version 2
<NVBlock Height="100px"></NVBlock>
razor
Version 3
<div class="h-[100px]"></div>
razor
Version 2
<NvBlock height="100px"></NvBlock>
tsx
Version 3
<div className="h-[100px]"></div>
tsx
Version 2
<nv-block [height]="100px"></nv-block>
html
Version 3
<div class="h-[100px]"></div>
html
Version 2
<nv-block height="100px"></nv-block>
html
Version 3
<div class="h-[100px]"></div>
html
HFull
Use tailwind’s height utility classes directly.
Version 2
<NVBlock HFull></NVBlock>
razor
Version 3
<div class="h-full"></div>
razor
Version 2
<NvBlock hFull></NvBlock>
tsx
Version 3
<div className="h-full"></div>
tsx
Version 2
<nv-block hFull></nv-block>
html
Version 3
<div class="h-full"></div>
html
Version 2
<nv-block h-full></nv-block>
html
Version 3
<div class="h-full"></div>
html
Hover
Removed, rely on the components for default styles. You can use the hover modifier from tailwind for customized approaches.
Href
Add the href directly as a native html attribute. Will work on native html elements, or any nova component.
Version 2
<NVBlock Tag="a" Href="https://google.com"></NVBlock>
razor
Version 3
<a href="http://a-url.com"></a>
razor
Id
Add the id directly as a native html attribute. Will work on native html elements, or any nova component.
Version 2
<NVBlock Id="sample"></NVBlock>
razor
Version 3
<div id="sample"></div>
razor
IsActive
Removed, rely on the components for active styles. You can use the active modifier from tailwind for customized approaches.
IsSelected
Removed, rely on the components for selected styles.
Items
Use tailwind’s align-items utility classes directly.
Version 2
<NVBlock Items="@Items.START"></NVBlock>
razor
Version 3
<div class="items-start"></div>
razor
Version 2
<NvBlock items="start"></NvBlock>
tsx
Version 3
<div className="items-start"></div>
tsx
Version 2
<nv-block [items]="start"></nv-block>
html
Version 3
<div class="itmes-start"></div>
html
Version 2
<nv-block items="start"></nv-block>
html
Version 3
<div class="itmes-start"></div>
html
Justify
Use tailwind’s justify-content utility classes directly.
Version 2
<NVBlock Justify="@Justify.START"></NVBlock>
razor
Version 3
<div class="justify-start"></div>
razor
Version 2
<NvBlock justify="start"></NvBlock>
tsx
Version 3
<div className="justify-start"></div>
tsx
Version 2
<nv-block [justify]="start"></nv-block>
html
Version 3
<div class="justify-start"></div>
html
Version 2
<nv-block justify="start"></nv-block>
html
Version 3
<div class="justify-start"></div>
html
JustifySelf
Use tailwind’s justify-self utility classes directly.
Version 2
<NVBlock JustifySelf="@JustifySelf.START"></NVBlock>
razor
Version 3
<div class="justify-self-start"></div>
razor
Version 2
<NvBlock justifySelf="start"></NvBlock>
tsx
Version 3
<div className="justify-self-start"></div>
tsx
Version 2
<nv-block [justifySelf]="start"></nv-block>
html
Version 3
<div class="justify-self-start"></div>
html
Version 2
<nv-block justify-self="start"></nv-block>
html
Version 3
<div class="justify-self-start"></div>
html
Left
Use tailwind’s layout utility classes directly.
Version 2
<NVBlock Left="0"></NVBlock>
razor
Version 3
<div class="left-[0]"></div>
razor
Version 2
<NvBlock left="0"></NvBlock>
tsx
Version 3
<div className="left-[0]"></div>
tsx
Version 2
<nv-block [left]="0"></nv-block>
html
Version 3
<div class="left-[0]"></div>
html
Version 2
<nv-block left="0"></nv-block>
html
Version 3
<div class="left-[0]"></div>
html
LG
Removed, use tailwind’s media queries instead.
LinearGradient
Use tailwind’s linear gradient utility classes directly.
Version 2
<NVBlock LinearGradient="to bottom, red 20%, blue 70%">
razor
Version 3
<div class="bg-linear-to-r from-red-500 to-blue-500"></div>
razor
Version 2
<NvBlock linearGradient="to bottom, red 20%, blue 70%"></NvBlock>
tsx
Version 3
<div className="bg-linear-to-r from-red-500 to-blue-500"></div>
tsx
Version 2
<nv-block [linearGradient]="to bottom, red 20%, blue 70%"></nv-block>
html
Version 3
<div class="bg-linear-to-r from-red-500 to-blue-500"></div>
html
Version 2
<nv-block linear-gradient="to bottom, red 20%, blue 70%"></nv-block>
html
Version 3
<div class="bg-linear-to-r from-red-500 to-blue-500"></div>
html
M
See Margin
Margin
Use tailwind’s margin utility classes directly.
Version 2
<NVBlock Margin="1 . ."></NVBlock>
razor
Version 3
<div class="mt-1"></div>
razor
Version 2
<NvBlock margin="1 . ."></NvBlock>
tsx
Version 3
<div className="mt-1"></div>
tsx
Version 2
<nv-block [margin]="1 . ."></nv-block>
html
Version 3
<div class="mt-1"></div>
html
Version 2
<nv-block margin="1 . ."></nv-block>
html
Version 3
<div class="mt-1"></div>
html
MaxHeight
Use tailwind’s max-height utility classes directly.
Version 2
<NVBlock MaxHeight="100%"></NVBlock>
razor
Version 3
<div class="max-h-full"></div>
razor
Version 2
<NvBlock maxHeight="100%"></NvBlock>
tsx
Version 3
<div className="max-h-full"></div>
tsx
Version 2
<nv-block [maxHeight]="100%"></nv-block>
html
Version 3
<div class="max-h-full"></div>
html
Version 2
<nv-block max-height="100%"></nv-block>
html
Version 3
<div class="max-h-full"></div>
html
MaxWidth
Use tailwind’s max-width utility classes directly.
Version 2
<NVBlock MaxWidth="100%"></NVBlock>
razor
Version 3
<div class="max-w-full"></div>
razor
Version 2
<NvBlock maxWidth="100%"></NvBlock>
tsx
Version 3
<div className="max-w-full"></div>
tsx
Version 2
<nv-block [maxWidth]="100%"></nv-block>
html
Version 3
<div class="max-w-full"></div>
html
Version 2
<nv-block max-width="100%"></nv-block>
html
Version 3
<div class="max-w-full"></div>
html
MB
See Margin
MD
Removed, use tailwind’s media queries instead.
MinHeight
Use tailwind’s min-height utility classes directly.
Version 2
<NVBlock MinHeight="auto"></NVBlock>
razor
Version 3
<div class="min-h-auto"></div>
razor
Version 2
<NvBlock minHeight="auto"></NvBlock>
tsx
Version 3
<div className="min-h-auto"></div>
tsx
Version 2
<nv-block [minHeight]="auto"></nv-block>
html
Version 3
<div class="min-h-auto"></div>
html
Version 2
<nv-block min-height="auto"></nv-block>
html
Version 3
<div class="min-h-auto"></div>
html
MinWidth
Use tailwind’s min-width utility classes directly.
Version 2
<NVBlock MinWidth="auto"></NVBlock>
razor
Version 3
<div class="min-w-auto"></div>
razor
Version 2
<NvBlock minWidth="auto"></NvBlock>
tsx
Version 3
<div className="min-w-auto"></div>
tsx
Version 2
<nv-block [minWidth]="auto"></nv-block>
html
Version 3
<div class="min-w-auto"></div>
html
Version 2
<nv-block min-width="auto"></nv-block>
html
Version 3
<div class="min-w-auto"></div>
html
ML
See Margin
MR
See Margin
MT
See Margin
MX
See Margin
MY
See Margin
OnBlur
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnBlur="OnBlur"></NVBlock>
razor
Version 3
<input @onblur="OnBlur" />
razor
OnChange
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnChange="OnChange"></NVBlock>
razor
Version 3
<input @onchange="OnChange" />
razor
OnClick
Use native event bindings from your framework.
Version 2
<NVButton OnClick="OnClick"></NVButton>
razor
Version 3
<NvButton @onclick="OnClick"></NvButton>
razor
OnFocus
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnFocus="OnFocus"></NVBlock>
razor
Version 3
<input @onfocus="OnFocus" />
razor
OnInput
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnInput="OnInput"></NVBlock>
razor
Version 3
<input @oninput="OnInput" />
razor
OnKeyDown
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnKeyDown="OnKeyDown"></NVBlock>
razor
Version 3
<input @onkeydown="OnKeyDown" />
razor
OnKeyPress
Removed, use @onkeydown
OnKeyUp
Use native event bindings from your framework.
Version 2
<NVBlock Tag="input" OnKeyUp="OnKeyUp"></NVBlock>
razor
Version 3
<input @onkeyup="OnKeyUp" />
razor
OnMouseDown
Use native event bindings from your framework.
Version 2
<NVButton OnMouseDown="OnMouseDown"></NVButton>
razor
Version 3
<NvButton @onmousedown="OnMouseDown"></NvButton>
razor
OnMouseEnter
Use native event bindings from your framework.
Version 2
<NVButton OnMouseEnter="OnMouseEnter"></NVButton>
razor
Version 3
<NvButton @onmouseenter="OnMouseEnter"></NvButton>
razor
OnMouseMove
Use native event bindings from your framework.
Version 2
<NVButton OnMouseMove="OnMouseMove"></NVButton>
razor
Version 3
<NvButton @onmousemove="OnMouseMove"></NvButton>
razor
OnMouseOut
Use native event bindings from your framework.
Version 2
<NVButton OnMouseOut="OnMouseOut"></NVButton>
razor
Version 3
<NvButton @onmouseout="OnMouseOut"></NvButton>
razor
OnMouseOver
Use native event bindings from your framework.
Version 2
<NVButton OnMouseOver="OnMouseOver"></NVButton>
razor
Version 3
<NvButton @onmouseover="OnMouseOver"></NvButton>
razor
OnMouseUp
Use native event bindings from your framework.
Version 2
<NVButton OnMouseUp="OnMouseUp"></NVButton>
razor
Version 3
<NvButton @onmouseup="OnMouseUp"></NvButton>
razor
Opacity
Use tailwind’s opacity utility classes directly.
Version 2
<NVBlock Opacity="0"></NVBlock>
razor
Version 3
<div class="opacity-0"></div>
razor
Version 2
<NvBlock opacity="0"></NvBlock>
tsx
Version 3
<div className="opacity-0"></div>
tsx
Version 2
<nv-block [opacity]="0"></nv-block>
html
Version 3
<div class="opacity-0"></div>
html
Version 2
<nv-block opacity="0"></nv-block>
html
Version 3
<div class="opacity-0"></div>
html
Overflow
Use tailwind’s opacity utility classes directly.
Version 2
<NVBlock Overflow="@Overflow.AUTO"></NVBlock>
razor
Version 3
<div class="overflow-auto"></div>
razor
Version 2
<NvBlock overflow="auto"></NvBlock>
tsx
Version 3
<div className="overflow-auto"></div>
tsx
Version 2
<nv-block [overflow]="auto"></nv-block>
html
Version 3
<div class="overflow-auto"></div>
html
Version 2
<nv-block overflow="auto"></nv-block>
html
Version 3
<div class="overflow-auto"></div>
html
P
See Padding
Pad
Not supported, use CSS or Tailwind spacing utilities (gap-*, space-*, m-*) instead.
Padding
Use tailwind’s padding utility classes directly.
Version 2
<NVBlock Padding="1 . ."></NVBlock>
razor
Version 3
<div class="pt-1"></div>
razor
Version 2
<NvBlock padding="1 . ."></NvBlock>
tsx
Version 3
<div className="pt-1"></div>
tsx
Version 2
<nv-block [padding]="1 . ."></nv-block>
html
Version 3
<div class="pt-1"></div>
html
Version 2
<nv-block padding="1 . ."></nv-block>
html
Version 3
<div class="pt-1"></div>
html
PB
See Padding
PL
See Padding
Position
Use tailwind’s position utility classes directly.
Version 2
<NVBlock Position="@Position.RELATIVE"></NVBlock>
razor
Version 3
<div class="relative"></div>
razor
Version 2
<NvBlock position="relative"></NvBlock>
tsx
Version 3
<div className="relative"></div>
tsx
Version 2
<nv-block [position]="relative"></nv-block>
html
Version 3
<div class="relative"></div>
html
Version 2
<nv-block position="relative"></nv-block>
html
Version 3
<div class="relative"></div>
html
PR
See Padding
PreventDefault
Use native event bindings from your framework.
Version 2
<NVButton PreventDefault="onclick" OnClick="OnClick"></NVButton>
razor
Version 3
<NvButton @onclick:preventDefault="true" @onclick="OnClick"></NvButton>
razor
PT
See Padding
PX
See Padding
PY
See Padding
Right
Use tailwind’s layout utility classes directly.
Version 2
<NVBlock Right="0"></NVBlock>
razor
Version 3
<div class="right-[0]"></div>
razor
Version 2
<NvBlock right="0"></NvBlock>
tsx
Version 3
<div className="right-[0]"></div>
tsx
Version 2
<nv-block [right]="0"></nv-block>
html
Version 3
<div class="right-[0]"></div>
html
Version 2
<nv-block right="0"></nv-block>
html
Version 3
<div class="right-[0]"></div>
html
Row
Row has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
Self
Use tailwind’s align-self utility classes directly.
Version 2
<NVBlock Self="@Self.AUTO"></NVBlock>
razor
Version 3
<div class="self-auto"></div>
razor
Version 2
<NvBlock self="auto"></NvBlock>
tsx
Version 3
<div className="self-auto"></div>
tsx
Version 2
<nv-block [self]="auto"></nv-block>
html
Version 3
<div class="self-auto"></div>
html
Version 2
<nv-block self="auto"></nv-block>
html
Version 3
<div class="self-auto"></div>
html
SetRef
Use native ref bindings from your framework.
Version 2
<NVBlock SetRef="@OnSetRef"></NVBlock>
...
void OnSetRef(ElementReference r)
{
// DO SOMETHING WITH THE ELEMENT REFERENCE
}
razor
Version 3
<div @ref="blockRef"></div>
@code {
private ElementReference blockRef;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
OnSetRef(blockRef);
}
}
void OnSetRef(ElementReference r)
{
// DO SOMETHING WITH THE ELEMENT REFERENCE
Console.WriteLine($"ElementReference acquired: {r}");
}
}
razor
Shrink
Use tailwind’s flex-shrink utility classes directly.
Version 2
<NVBlock Shrink="0"></NVBlock>
razor
Version 3
<div class="shrink-0"></div>
razor
Version 2
<NvBlock shrink="auto"></NvBlock>
tsx
Version 3
<div className="shrink-0"></div>
tsx
Version 2
<nv-block [shrink]="0"></nv-block>
html
Version 3
<div class="shrink-0"></div>
html
Version 2
<nv-block shrink="0"></nv-block>
html
Version 3
<div class="shrink-0"></div>
html
SM
Removed, use tailwind’s media queries instead.
Src
Add the src attribute directly as a native html attribute. Will work on native html elements, or any nova component.
Version 2
<NVBlock Tag="img" Src="http://hanami.be/img/logo.gif"></NVBlock>
razor
Version 3
<img src="http://hanami.be/img/logo.gif" />
razor
Stack
Stack has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StackFlex
StackFlex has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StackItemFlex
StackItemFlex has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StackItemLead
StackItemLead has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StackItemTail
StackItemTail has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StackVertical
StackVertical has been removed, use flex-box and grid utility classes instead for a more modern layout. Alternatively, use the deprecated components nv-stack and nv-row for a similar approach.
StopPropagation
Use native event bindings from your framework.
Version 2
<NVButton StopPropagation="onclick" OnClick="OnClick"></NVButton>
razor
Version 3
<NvButton @onclick:stopPropagation="true" @onclick="OnClick"></NvButton>
razor
Style
Use the native html style tag directly.
Version 2
<NVAlert Style="font-weight:bold;" />
cs
Version 3
<NvAlert style="font-weight:bold;" />
razor
Tag
Use the tag directly.
Version 2
<NVBlock Tag="a"></NVBlock>
cs
Version 3
<a></a>
razor
Target
Use the native html attribute directly.
Version 2
<NVBlock Tag="a" Target="_target"></NVBlock>
cs
Version 3
<a target="_blank"></a>
razor
TextAlign
Use tailwind’s text-align utility classes directly.
Version 2
<NVBlock TextAlign="@TextAlign.CENTER"></NVBlock>
razor
Version 3
<div class="text-center"></div>
razor
Version 2
<NvBlock textAlign="center"></NvBlock>
tsx
Version 3
<div className="text-center"></div>
tsx
Version 2
<nv-block [textAlign]="center"></nv-block>
html
Version 3
<div class="text-center"></div>
html
Version 2
<nv-block text-align="center"></nv-block>
html
Version 3
<div class="text-center"></div>
html
TextColor
Use tailwind’s text-color utility classes directly.
Version 2
<NVBlock TextColor="orange-500"></NVBlock>
razor
Version 3
<div class="text-orange-500"></div>
razor
Version 2
<NvBlock textColor="orange-500"></NvBlock>
tsx
Version 3
<div className="text-orange-500"></div>
tsx
Version 2
<nv-block [textColor]="orange-500"></nv-block>
html
Version 3
<div class="text-orange-500"></div>
html
Version 2
<nv-block text-color="orange-500"></nv-block>
html
Version 3
<div class="text-orange-500"></div>
html
ActiveTextColor
Use the tailwind’s active modifier with text-color utility classes directly.
Version 2
<NVBlock ActiveTextColor="orange-500"></NVBlock>
razor
Version 3
<div class="active:text-orange-500"></div>
razor
Version 2
<NvBlock activeTextColor="orange-500"></NvBlock>
tsx
Version 3
<div className="active:text-orange-500"></div>
tsx
Version 2
<nv-block [activeTextColor]="orange-500"></nv-block>
html
Version 3
<div class="active:text-orange-500"></div>
html
Version 2
<nv-block active-text-color="orange-500"></nv-block>
html
Version 3
<div class="active:text-orange-500"></div>
html
HoverTextColor
Use the tailwind’s hover modifier with text-color utility classes directly.
Version 2
<NVBlock HoverTextColor="orange-500"></NVBlock>
razor
Version 3
<div class="hover:text-orange-500"></div>
razor
Version 2
<NvBlock hoverTextColor="orange-500"></NvBlock>
tsx
Version 3
<div className="hover:text-orange-500"></div>
tsx
Version 2
<nv-block [hoverTextColor]="orange-500"></nv-block>
html
Version 3
<div class="hover:text-orange-500"></div>
html
Version 2
<nv-block hover-text-color="orange-500"></nv-block>
html
Version 3
<div class="hover:text-orange-500"></div>
html
TextSize
Use tailwind’s font-size utility classes directly.
Version 2
<NVBlock TextSize="@TextSize.SM"></NVBlock>
razor
Version 3
<div class="text-sm"></div>
razor
Version 2
<NvBlock textSize="sm"></NvBlock>
tsx
Version 3
<div className="text-sm"></div>
tsx
Version 2
<nv-block [textSize]="sm"></nv-block>
html
Version 3
<div class="text-sm"></div>
html
Version 2
<nv-block text-size="sm"></nv-block>
html
Version 3
<div class="text-sm"></div>
html
Title
Use the native html attribute directly.
Version 2
<NVBlock Tag="a" Title="title"></NVBlock>
cs
Version 3
<a title="title"></a>
razor
Top
Use tailwind’s layout utility classes directly.
Version 2
<NVBlock Top="0"></NVBlock>
razor
Version 3
<div class="top-[0]"></div>
razor
Version 2
<NvBlock top="0"></NvBlock>
tsx
Version 3
<div className="top-[0]"></div>
tsx
Version 2
<nv-block [top]="0"></nv-block>
html
Version 3
<div class="top-[0]"></div>
html
Version 2
<nv-block top="0"></nv-block>
html
Version 3
<div class="top-[0]"></div>
html
VerticalAlign
Use tailwind’s vertical-align utility classes directly.
Version 2
<NVBlock VerticalAlign="@VerticalAlign.BASELINE"></NVBlock>
razor
Version 3
<div class="align-baseline"></div>
razor
Version 2
<NvBlock verticalAlign="baseline"></NvBlock>
tsx
Version 3
<div className="align-baseline"></div>
tsx
Version 2
<nv-block [verticalAlign]="baseline"></nv-block>
html
Version 3
<div class="align-baseline"></div>
html
Version 2
<nv-block vertical-align="baseline"></nv-block>
html
Version 3
<div class="align-baseline"></div>
html
WFull
Use tailwind’s width utility classes directly.
Version 2
<NVBlock WFull></NVBlock>
razor
Version 3
<div class="w-full"></div>
razor
Version 2
<NvBlock wFull></NvBlock>
tsx
Version 3
<div className="w-full"></div>
tsx
Version 2
<nv-block wFull></nv-block>
html
Version 3
<div class="w-full"></div>
html
Version 2
<nv-block w-full></nv-block>
html
Version 3
<div class="w-full"></div>
html
WhiteSpace
Use tailwind’s white-space utility classes directly.
Version 2
<NVBlock WhiteSpace="@WhiteSpace.NOWRAP"></NVBlock>
razor
Version 3
<div class="whitespace-nowrap"></div>
razor
Version 2
<NvBlock whiteSpace="nowrap"></NvBlock>
tsx
Version 3
<div className="whitespace-nowrap"></div>
tsx
Version 2
<nv-block [whiteSpace]="nowrap"></nv-block>
html
Version 3
<div class="whitespace-nowrap"></div>
html
Version 2
<nv-block whiteSpace="nowrap"></nv-block>
html
Version 3
<div class="whitespace-nowrap"></div>
html
Width
Use tailwind’s width utility classes directly.
Version 2
<NVBlock Width="100px"></NVBlock>
razor
Version 3
<div class="w-[100px]"></div>
razor
Version 2
<NvBlock width="100px"></NvBlock>
tsx
Version 3
<div className="w-[100px]"></div>
tsx
Version 2
<nv-block [width]="100px"></nv-block>
html
Version 3
<div class="w-[100px]"></div>
html
Version 2
<nv-block width="100px"></nv-block>
html
Version 3
<div class="w-[100px]"></div>
html
Wrap
Use tailwind’s flex-wrap utility classes directly.
Version 2
<NVBlock Wrap="@Wrap.WRAP"></NVBlock>
razor
Version 3
<div class="flex-wrap"></div>
razor
Version 2
<NvBlock wrap="wrap"></NvBlock>
tsx
Version 3
<div className="flex-wrap"></div>
tsx
Version 2
<nv-block [wrap]="wrap"></nv-block>
html
Version 3
<div class="flex-wrap"></div>
html
Version 2
<nv-block wrap="wrap"></nv-block>
html
Version 3
<div class="flex-wrap"></div>
html
XL
Removed, use tailwind’s media queries instead.
XL2
Removed, use tailwind’s media queries instead.
ZIndex
Use tailwind’s z-index utility classes directly.
Version 2
<NVBlock ZIndex="0"></NVBlock>
razor
Version 3
<div class="z-0"></div>
razor
Version 2
<NvBlock zIndex="0"></NvBlock>
tsx
Version 3
<div className="z-0"></div>
tsx
Version 2
<nv-block [zIndex]="0"></nv-block>
html
Version 3
<div class="z-0"></div>
html
Version 2
<nv-block z-index="0"></nv-block>
html
Version 3
<div class="z-0"></div>
html