Componente que aplica parâmetros padrão a outro componente

Question

Estou usando o Blazorise, que fornece vários componentes de base, como <Button>vários parâmetros. Eu gostaria de criar um componente simples que renderizaria um <Button>com um ou dois parâmetros embutidos em código (como Color="Colors.Primary")e, em seguida, passaria o restante dos parâmetros para o <Button>.

Isso é o que eu gostaria de poder escrever:

<PrimaryButton Outline>Text</Button>

Eu gostaria de conseguir isso sem ter que definir manualmente todos os parâmetros disponíveis em <Button>em PrimaryButton.razor. Eu tenho procurado uma maneira de fazer isso há algum tempo, mas não consigo encontrar nada. É mesmo possível?

Já tentei herdar Buttone escrever, <Button @attributes="@Attributes" Color="Colors.Primary">mas os parâmetros implícitos foram descartados.

Answer 1

Acho que você ainda precisa passá-los como parâmetros, adicionando-os ao seu componente personalizado. Por exemplo, você pode fazer um botão com Colore Outlinedefinir, mas passar o 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; }
}

Você pode então usar esse novo componente como

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

Answer 2

Você pode usar "Atributo Splatting" para este

suponha que seu componente básico esteja 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; }
}

E você deseja preencher previamente Param1, então cria um novo MyComponent

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

Agora, você pode usar MyComponent no lugar de BaseComponent, e se você não fornecer um valor para Param1, ele será predefinido (literalmente esse valor neste caso)

Portanto, esta marcação:

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

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

<MyComponent Param2="component"/>

Produz esta saída:

Componente Base

Param1 = base Param2 = componente

Componente Base

Param1 = meu Param2 = componente

Componente Base

Param1 = predefinido Param2 = componente

Veja uma amostra ao vivo no BlazorRepl: https://blazorrepl.com/repl/QEvucNFB408fLIXd18