How to add class or inline styles in Blazor component?

Rikam Palkar 61 Reputation points
2022-05-02T12:57:54.73+00:00

This is interesting one,
I have a single parent and 4 child components. I want to place these 4 child components as per their X and Y coordinates, meaning as per CSS, every child will have something like this.

position:absolute;
left: 390px;
top: 120px;

For now I can achieve the placement by setting the style in parent.

        <div class="divStyle1">
             <UserDefinedChildComponent></UserDefinedChildComponent>
        </div>
        <div class="divStyle2">
            <UserDefinedChildComponent></UserDefinedChildComponent>
        </div>
        <div class="divStyle3">
            <UserDefinedChildComponent></UserDefinedChildComponent>
        </div>
        <div class="divStyle4">
            <UserDefinedChildComponent></UserDefinedChildComponent>
        </div>
}


<style>
    .divStyle1 {  
    position:absolute;
    left: 258px;
    top: 120px;
  }
    .divStyle2 {  
    position:absolute;
    left: 390px;
    top: 120px;
  }
    .divStyle3 {  
    position:absolute;
    left: 258px;
    top: 170px;
  }
    .divStyle4 {  
    position:absolute;
    left: 390px;
    top: 170px;
  }
</style>

I want to set style without wrapping <UserDefinedChildComponent> inside a <div>

Hope I was clear with my doubt.

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,496 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,096 Reputation points Microsoft Vendor
    2022-05-03T01:59:57.163+00:00

    Hi @Rikam Palkar ,

    I want to set style without wrapping <UserDefinedChildComponent> inside a <div>

    You can try to add the div in the UserDefinedChildComponent component, then add a parameter to set the class style. Refer the following sample:

    1. According to the button style, create a CustomAttributes model:
      public class CustomAttributes  
      {  
          public string Width { get; set; }  
          public string  Height { get; set; }  
          public string X { get; set; }  
          public string Y { get; set; }  
          public string FontSize { get; set; }  
      }  
      
    2. The UserDefinedChildComponent component like this:
      @using BlazorWebAssembly.Models  
      <div class="@CustomClass">  
          <button class="buttonStyle">OK</button>      
      </div>  
       <style>  
         .buttonStyle {    
           position:absolute;  
           width: @Properties.Width;  
           height: @Properties.Height;  
           left: @Properties.X;  
           top: @Properties.Y;  
           font-size: @Properties.FontSize;  
         }  
        .divStyle1 {    
           position:absolute;  
           left: 258px;  
           top: 120px;  
         }  
           .divStyle2 {    
           position:absolute;  
           left: 390px;  
           top: 120px;  
         }  
           .divStyle3 {    
           position:absolute;  
           left: 258px;  
           top: 170px;  
         }  
           .divStyle4 {    
           position:absolute;  
           left: 390px;  
           top: 170px;  
         }  
       </style>   
      @code {  
          [Parameter]  
          public string CustomClass { get; set; }         
          [Parameter]  
          public CustomAttributes Properties { get; set; } = new () { Width = "200px", Height = "50px", FontSize = "15px", X = "100px", Y = "50px" };  
      
       }  
      
    3. In the main page, use the following code to add child components:
      <div class="container">      
          <UserDefinedChildComponent CustomClass ="divStyle1" ></UserDefinedChildComponent>   
          <UserDefinedChildComponent CustomClass ="divStyle2" ></UserDefinedChildComponent>    
          <UserDefinedChildComponent CustomClass ="divStyle3" ></UserDefinedChildComponent>    
          <UserDefinedChildComponent CustomClass ="divStyle4" ></UserDefinedChildComponent>          
      </div>  
      
      The result like this:

    198394-image.png


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful