Componente che applica parametri predefiniti ad altri componenti

Question

Sto usando Blazorise, che fornisce più componenti di base come <Button>, con più parametri. Vorrei creare un semplice componente che renda un <Button>con uno o due parametri hard-coded (come Color="Colors.Primary")e poi passi il resto dei parametri nel file <Button>.

Questo è quello che vorrei poter scrivere:

<PrimaryButton Outline>Text</Button>

Vorrei ottenere questo risultato senza dover impostare manualmente tutti i parametri disponibili da <Button>in PrimaryButton.razor. Ho cercato un modo per farlo per un po 'di tempo ma non riesco a trovare nulla. È anche possibile?

Ho già provato a ereditare Buttone scrivere <Button @attributes="@Attributes" Color="Colors.Primary">ma i parametri impliciti vengono scartati.

Answer 1

Penso che tu debba ancora passarli come parametri aggiungendoli al tuo componente personalizzato. Ad esempio potresti fare un pulsante con Colore Outlineimpostare ma passare il Blockparametro.

/* 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; }
}

È quindi possibile utilizzare quel nuovo componente come

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

Answer 2

Puoi usare "Attribute Splatting" per questo

supponiamo che il tuo componente di base sia definito

<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 vuoi pre-popolare Param1, quindi crei un nuovo MyComponent

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

Ora puoi usare MyComponent al posto di BaseComponent e se non fornisci un valore per Param1, sarà predefinito (letteralmente quel valore in questo caso)

Quindi questo markup:

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

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

<MyComponent Param2="component"/>

Produce questo output:

Componente di base

Param1 = base Param2 = componente

Componente di base

Param1 = my Param2 = componente

Componente di base

Param1 = predefinito Param2 = componente

Guarda un esempio dal vivo su BlazorRepl: https://blazorrepl.com/repl/QEvucNFB408fLIXd18