Componente que aplica parámetros predeterminados a otro componente

Question

Estoy usando Blazorise, que proporciona múltiples componentes base como <Button>, con múltiples parámetros. Me gustaría crear un componente simple que represente un <Button>con uno o dos parámetros codificados (como Color="Colors.Primary")y luego pasar el resto de los parámetros al archivo <Button>.

Esto es lo que me gustaría poder escribir:

<PrimaryButton Outline>Text</Button>

Me gustaría lograr esto sin tener que configurar manualmente todos los parámetros disponibles <Button>en PrimaryButton.razor. He estado buscando una forma de hacer esto durante algún tiempo, pero no encuentro nada. ¿Es siquiera posible?

Ya intenté heredar Buttony escribir, <Button @attributes="@Attributes" Color="Colors.Primary">pero los parámetros implícitos se descartan.

Answer 1

Creo que aún tiene que pasarlos como parámetros agregándolos a su componente personalizado. Por ejemplo, podría hacer un botón con Colory Outlineestablecer pero pasar el Blockparámetro.

/* PrimaryButton.razor */
<Button Color="Color.Primary" Outline="true" Block="@Block">@ChildContent</Button>

@code {
  [Parameter] public bool Block { get; set;}
  [Parameter] public RenderFragment ChildContent { get; set; }
}

A continuación, puede utilizar ese nuevo componente como

<PrimaryButton Block="true">Some Text</PrimaryButton>

Answer 2

Puede utilizar "Atributo Splatting" para este

suponga que su Componente Base está definido

<h1>Base Component</h1>
<div>Param1 = @Param1</div>
<div>Param2 = @Param2</div>
@code
{
    [Parameter] public string Param1 { get; set; }
    [Parameter] public string Param2 { get; set; }
}

Y desea rellenar previamente Param1, por lo que crea un nuevo MyComponent

<BaseComponent Param1="predefined" @attributes=Attributes/>
@code
{
  [Parameter(CaptureUnmatchedValues=true)] 
  public Dictionary<string,object> Attributes { get; set; }       
}

Ahora, puede usar MyComponent en lugar de BaseComponent, y si no proporciona un valor para Param1, estará predefinido (literalmente ese valor en este caso)

Entonces este marcado:

<BaseComponent Param1="base" Param2="component"/>

<MyComponent Param1="my" Param2="component"/>

<MyComponent Param2="component"/>

Produce esta salida:

Componente base

Param1 = base Param2 = componente

Componente base

Param1 = mi Param2 = componente

Componente base

Param1 = predefinido Param2 = componente

Vea una muestra en vivo en BlazorRepl: https://blazorrepl.com/repl/QEvucNFB408fLIXd18