BaseComponent

AddClass(DomClass.TextColor("orange-500"))

AddStyle(DomStyle.TextColor("#F00"))

@inherits Nova.Components.NVBaseComponent;

<div @attributes=@Attributes(_componentClass, new string [] {"Color"})>
...
</div>

@code {
  private string _componentClass = "my-new-component";
  
  [Parameter]
  public bool Small { get; set; }
  
  [Parameter]
  public bool Loading { get; set; }

  public override async Task SetParametersAsync(ParameterView parameters) {
    await base.SetParametersAsync(parameters);
    
    // Loading Parameter

    AddClass(DomClass.Loading(Loading, _componentClass));
    
    // Small Parameter
 
    AddClass(DomClass.Small(Small, _componentClass));
    
    // Manage Color Parameter
    
    string[] colorTint = ColorUtils.GetColorTint(Color?.ToLower() ?? "orange-500");
    
    if (String.IsNullOrEmpty(TextColor)) {
      AddClass(DomClass.TextColor(colorTint[0], 600)); // always the darkest (600) for text color
    }
    
    if (String.IsNullOrEmpty(BackgroundColor)) {
      AddClass(DomClass.BackgroundColor(colorTint[0], 100)); // always the lightest (100) for background
    }
    
      
  }
}

<NVButton ActiveEffect="@ActiveEffect.UP"> </NVButton>

<NVBlock Tag="img" Alt="Alternate text"></NVBlock>

<NVBlock BackgroundColor="orange-500"></NVBlock>

<NVBlock BackgroundColor="#FF0000"></NVBlock>

<NVButton ActiveBackgroundColor="orange-500"> </NVButton>

<NVBlock HoverBackgroundColor="orange-500"></NVBlock>

<NVBlock BorderColor="orange-500"></NVBlock>

<NVButton BorderColor="#FF0000"> </NVButton>

<NVBlock ActiveBorderColor="orange-500"></NVBlock>

<NVBlock HoverBorderColor="orange-500"></NVBlock>

<NVBlock BorderRadius="sm"></NVBlock>

<NVBlock BorderRadius="t-sm"></NVBlock>

<NVBlock BorderRadius="tl-sm br-sm"></NVBlock>

<NVBlock BorderRadius="base"></NVBlock>

<NVBlock BorderRadius="2px"></NVBlock>

<NVBlock BorderRadius="2px 4px">

<NVBlock BorderRadius="4px . . ."></NVBlock>

<NVBlock BorderRadius=". . . 4px"></NVBlock>

<NVBlock BorderWidth="0 ."></NVBlock>

<NVBlock BorderWidth="0 1 2"></NVBlock>

<NVBlock BorderWidth="1 2 4 8"></NVBlock>

<NVBlock BorderWidth="1 2 . 8"></NVBlock>

<NVBlock Bottom="0"></NVBlock>

<NVBlock>
  <NVBlock Class="child-content"></NVBlock>
</NVBlock>

<NVBlock ChildMargin="1 . ."></NVBlock>

<NVBlock ChildMargin="1"></NVBlock>

<NVBlock ChildMargin="1 2"></NVBlock>

<NVBlock ChildMargin="1 2 3"></NVBlock>

<NVBlock ChildMargin="1 2 3 4"></NVBlock>

<NVBlock ChildPadding="1 . ."></NVBlock>

<NVBlock ChildPadding="1"></NVBlock>

<NVBlock ChildPadding="1 2"></NVBlock>

<NVBlock ChildPadding="1 2 3"></NVBlock>

<NVBlock ChildPadding="1 2 3 4"></NVBlock>

<NVBlock Class="sample"></NVBlock>

<NVBlock CMB="1"></NVBlock>

<NVBlock CML="1"></NVBlock>

<NVBlock CMR="1"></NVBlock>

<NVBlock CMT="1"></NVBlock>

<NVBlock CMX="1"></NVBlock>

<NVBlock CMY="1"></NVBlock>

<NVButton Color="orange-500"> </NVButton>

<NVButton Color="#F00"> </NVButton>

<NVBlock ColSize="2"></NVBlock>

<NVBlock Content="@Content.START"></NVBlock>

<NVBlock Content="@Content.END"></NVBlock>

<NVBlock CPB="1">
  <div>Child with padding bottom of 4px</div>
  <div>Child with padding bottom of 4px</div>
</NVBlock>

<NVBlock CPL="1">
  <div>Child with padding left of 4px</div>
  <div>Child with padding left of 4px</div>
</NVBlock>

<NVBlock CPR="1">
  <div>Child with padding right of 4px</div>
  <div>Child with padding right of 4px</div>
</NVBlock>

<NVBlock CPT="1">
  <div>Child with padding top of 4px</div>
  <div>Child with padding top of 4px</div>
</NVBlock>

<NVBlock CPX="1">
  <div>Child with padding left and right of 4px</div>
  <div>Child with padding left and right of 4px</div>
</NVBlock>

<NVBlock CPY="1">
  <div>Child with padding top and bottom of 4px</div>
  <div>Child with padding top and bottom of 4px</div>
</NVBlock>

<NVBlock DicClass="@(new Dictionary<string, bool>() {
  {"border", true},
  {"border-gray-200", true},
  {"app-sidebar-close", false},
)"></NVBlock

<NVBlock Direction="@Direction.ROW"></NVBlock>

<NVBlock Direction="@Direction.COLUMN_REVERSE"></NVBlock>

<NVButton Disabled> </NVButton>

<NVBlock Tag="input" Disabled></NVBlock>

<NVBlock Disabled></NVBlock>

<NVBlock Display="@Display.HIDDEN"></NVBlock>

<NVBlock Display="@Display.BLOCK"></NVBlock>

<NVBlock Display="@Display.INLINE"></NVBlock>

<NVBlock FontSize="16px"></NVBlock>

<NVBlock FontWeight="@FontWeight.NORMAL"></NVBlock>

<NVBlock FontWeight="@FontWeight.MEDIUM"></NVBlock>

<NVBlock FontWeight="FontWeight.BOLD"></NVBlock>

<NVBlock GCMB="1"></NVBlock>

<NVBlock GCML="1"></NVBlock>

<NVBlock GCMR="1"></NVBlock>

<NVBlock GCMT="1"></NVBlock>

<NVBlock GCMX="1"></NVBlock>

<NVBlock GCMY="1"></NVBlock>

<NVBlock GCPB="1">
  <div>
    <div>Grand Child with padding bottom of 4px</div>
    <div>Grand Child with padding bottom of 4px</div>
  </div>
</NVBlock>

<NVBlock GCPL="1">
  <div>
    <div>Grand Child with padding left of 4px</div>
    <div>Grand Child with padding left of 4px</div>
  </div>
</NVBlock>

<NVBlock GCPR="1">
  <div>
    <div>Grand Child with padding right of 4px</div>
    <div>Grand Child with padding right of 4px</div>
  </div>
</NVBlock>

<NVBlock GCPT="1">
  <div>
    <div>Grand Child with padding top of 4px</div>
    <div>Grand Child with padding top of 4px</div>
  </div>
</NVBlock>

<NVBlock GCPX="1">
  <div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
    <div>
      Grand Child with padding left and right of 4px
    </div>
  </div>
</NVBlock>

<NVBlock GCPY="1">
  <div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
    <div>
      Grand Child with padding top and bottom of 4px
    </div>
  </div>
</NVBlock>

<NVBlock GrandChildMargin="1 . ."></NVBlock>

<NVBlock GrandChildMargin="1"></NVBlock>

<NVBlock GrandChildMargin="1 2"></NVBlock>

<NVBlock GrandChildMargin="1 2 3"></NVBlock>

<NVBlock GrandChildMargin="1 2 3 4"></NVBlock>

<NVBlock GrandChildPadding="1 . ."></NVBlock>

<NVBlock GrandChildPadding="1"></NVBlock>

<NVBlock GrandChildPadding="1 2"></NVBlock>

<NVBlock GrandChildPadding="1 2 3"></NVBlock>

<NVBlock GrandChildPadding="1 2 3 4"></NVBlock>

<NVBlock Grow="0"></NVBlock>

<NVBlock Grow="1"></NVBlock>

<NVBlock GutterX="2"></NVBlock>

<NVBlock GutterY="2"></NVBlock>

<NVBlock Height="100px"></NVBlock>

<NVBlock Height="50%"></NVBlock>

<NVBlock Height="50vh"></NVBlock>

<NVBlock HFull></NVBlock>

<NVBlock Color="orange-500" Hover></NVBlock>

<NVBlock Tag="a" Href="https://google.com"></NVBlock>

<NVBlock Href="https://google.com"></NVBlock>

<NVBlock Id="sample"></NVBlock>

<NVBlock IsActive></NVBlock>

<NVBlock IsSelected></NVBlock>

<NVBlock Items="@Items.START"></NVBlock>

<NVBlock Items="@Items.END"></NVBlock>

<NVBlock Justify="@Justify.START"></NVBlock>

<NVBlock Justify="@Justify.END"></NVBlock>

<NVBlock JustifySelf="@JustifySelf.START"></NVBlock>

<NVBlock JustifySelf="@JustifySelf.END"></NVBlock>

<NVBlock Left="0"></NVBlock>

<NVBlock LinearGradient="to bottom, red 20%, blue 70%">

<NVBlock Margin="1 . ."></NVBlock>

<NVBlock Margin="1"></NVBlock>

<NVBlock Margin="1 2"></NVBlock>

<NVBlock Margin="1 2 3"></NVBlock>

<NVBlock Margin="1 2 3 4"></NVBlock>

<NVBlock Margin="1px . ."></NVBlock>

<NVBlock Margin="1px">

<NVBlock Margin="1px 2px"></NVBlock>

<NVBlock Margin="1px 2px 3px"></NVBlock>

<NVBlock Margin="1px 2px 3px 4px"></NVBlock>

<NVBlock MaxHeight="100px"></NVBlock>

<NVBlock MaxHeight="50%"></NVBlock>

<NVBlock MaxHeight="50vh"></NVBlock>

<NVBlock MaxWidth="100px"></NVBlock>

<NVBlock MaxWidth="50%"></NVBlock>

<NVBlock MaxWidth="50vw"></NVBlock>

<NVBlock MB="1"></NVBlock>

<NVBlock MinHeight="100px"></NVBlock>

<NVBlock MinHeight="50%"></NVBlock>

<NVBlock MinHeight="50vh"></NVBlock>

<NVBlock MinWidth="100px"></NVBlock>

<NVBlock MinWidth="50%"></NVBlock>

<NVBlock MinWidth="50vw"></NVBlock>

<NVBlock ML="1"></NVBlock>

<NVBlock MR="1"></NVBlock>

<NVBlock MT="1"></NVBlock>

<NVBlock MX="1"></NVBlock>

<NVBlock MY="1"></NVBlock>

<NVBlock Tag="input" OnBlur="OnBlur"></NVBlock>

<NVBlock Tag="input" OnChange="@OnChange"></NVBlock>

<NVBlock OnClick="@OnClick"></NVBlock>

<NVBlock Tag="input" OnFocus="@OnFocus"></NVBlock>

<NVBlock Tag="input" OnInput="@OnInput"></NVBlock>

<NVBlock Tag="input" OnKeyDown="@OnKeyDown"></NVBlock>

<NVBlock Tag="input" OnKeyPress="@OnKeyPress"></NVBlock>

<NVBlock Tag="input" OnKeyUp="@OnKeyUp">

<NVBlock OnMouseDown="@OnMouseDown"></NVBlock>

<NVBlock OnMouseEnter="@OnMouseEnter"></NVBlock>

<NVBlock OnMouseLeave="@OnMouseLeave"></NVBlock>

<NVBlock OnMouseMove="@OnMouseMove"></NVBlock>

<NVBlock OnMouseOut="@OnMouseOut"></NVBlock>

<NVBlock OnMouseOver="@OnMouseOver"></NVBlock>

<NVBlock OnMouseUp="@OnMouseUp"></NVBlock>

<NVBlock Opacity="0"></NVBlock>

<NVBlock Overflow="@Overflow.AUTO"></NVBlock>

<NVBlock Overflow="@($"Overflow.HIDDEN Overflow.AUTO")">

<NVBlock Pad="1"></NVBlock>

<NVBlock Pad="1"></NVBlock>

<NVBlock Padding="1 . ."></NVBlock>

<NVBlock Padding="1"></NVBlock>

<NVBlock Padding="1 2"></NVBlock>

<NVBlock Padding="1 2 3"></NVBlock>

<NVBlock Padding="1 2 3 4"></NVBlock>

<NVBlock Padding="1px . ."></NVBlock>

<NVBlock Padding="1px">

<NVBlock Padding="1em 2px">

<NVBlock Padding="1% 2em 3px">

<NVBlock Padding="1px 2px 3px 4px">

<NVBlock PB="1"></NVBlock>

<NVBlock PL="1"></NVBlock>

<NVBlock Position="@Position.RELATIVE"></NVBlock>

<NVBlock Position="@Position.ABSOLUTE"></NVBlock>

<NVBlock PR="1"></NVBlock>

<NVButton PreventDefault="onclick" OnClick="@OnClick">button </NVButton>

<NVFieldText PreventDefault="onkeydown onkeyup" OnKeyDown="@OnKeyDown" OnKeyUp="@OnKeyUp" />

<NVBlock PT="1"></NVBlock>

<NVBlock PX="1"></NVBlock>

<NVBlock PY="1"></NVBlock>

<NVBlock Right="0"></NVBlock>

<NVBlock Row>

<NVBlock Self="@Self.AUTO"></NVBlock>

<NVBlock Self="@Self.START"></NVBlock>

<NVBlock SetRef="@OnSetRef"></NVBlock>
...  
void OnSetRef(ElementReference r)
{
  // DO SOMETHING WITH THE ELEMENT REFERENCE
}

<ParentComponent ChildRef="ForwardRef">
  <NVBlock SetRef="@OnSetRef"></NVBlock>
</ParentComponent>
...  
public ForwardRef ForwardRef { get; set; } = new ForwardRef();

void OnSetRef(ElementReference r)
{
  // use a ForwardRef when another 
  // component need it 
  
  ForwardRef.Current = r;
}

<NVBlock Shrink="0"></NVBlock>

<NVBlock Shrink="1"></NVBlock>