Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check: Add Group Name parameter #5372

Merged
merged 8 commits into from
Mar 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions Documentation/Blazorise.Docs/Models/Snippets.generated.cs
Original file line number Diff line number Diff line change
Expand Up @@ -1557,6 +1557,13 @@ void OnRememberMeChanged( bool value )
}
}";

public const string CheckWithNameExample = @"<Check TValue=""bool"" Name=""@name"">Check me out</Check>
<Check TValue=""bool"" Name=""@name"">Check me out too!</Check>

@code{
string name = ""CheckMeOut"";
}";

public const string AutoCloseExample = @"<Alert @bind-Visible=""@visible"">
I can be closed!
<CloseButton AutoClose=""true"" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
<DocsPageSectionSource Code="CheckExample" />
</DocsPageSection>

<DocsPageSection>
<DocsPageSectionHeader Title="With name">
This example showcases two Blazorise checkboxes linked to the same identifier, <Strong>CheckMeOut</Strong>. Both checkboxes contribute to the same data field upon submission when included in a form. This setup is ideal for grouping related choices under one name but requires careful data handling to distinguish between the choices on the server side.
</DocsPageSectionHeader>
<DocsPageSectionContent Outlined>
<CheckWithNameExample />
</DocsPageSectionContent>
<DocsPageSectionSource Code="CheckWithNameExample" />
</DocsPageSection>

<DocsPageSubtitle>
Usage
</DocsPageSubtitle>
Expand Down Expand Up @@ -73,4 +83,7 @@
<DocsAttributesItem Name="Cursor" Type="Cursor" Default="Default">
Defines the mouse cursor based on the behavior by the current CSS framework.
</DocsAttributesItem>
<DocsAttributesItem Name="Name" Type="Cursor" Default="Default">
Defines the name attribute of a checkbox. The name attribute is used to identify form data after it has been submitted to the server, or to reference form data using JavaScript on the client side.
</DocsAttributesItem>
</DocsAttributes>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Check</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bool</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>name</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Check me out<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Check</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Check</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bool</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>name</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Check me out too!<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Check</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code{
<span class="keyword">string</span> name = <span class="string">&quot;CheckMeOut&quot;</span>;
}
</pre></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@namespace Blazorise.Docs.Docs.Examples

<Check TValue="bool" Name="@name">Check me out</Check>
<Check TValue="bool" Name="@name">Check me out too!</Check>

@code{
string name = "CheckMeOut";
}
2 changes: 1 addition & 1 deletion Source/Blazorise.AntDesign/Components/Check.razor
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@inherits Blazorise.Check<TValue>
<label class="@WrapperClassNames">
<span class="@CheckboxClassNames">
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<span class="@InnerClassNames"></span>
</span>
<span>
Expand Down
2 changes: 1 addition & 1 deletion Source/Blazorise.Bootstrap/Components/Check.razor
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@typeparam TValue
@inherits Blazorise.Check<TValue>
<Control Role="ControlRole.Check" Inline="@Inline">
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
@Feedback
</Control>
2 changes: 1 addition & 1 deletion Source/Blazorise.Bootstrap5/Components/Check.razor
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@typeparam TValue
@inherits Blazorise.Check<TValue>
<Control Role="ControlRole.Check" Inline="@Inline">
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
@Feedback
</Control>
4 changes: 2 additions & 2 deletions Source/Blazorise.Bulma/Components/Check.razor
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
@if ( ParentIsFieldBody )
{
<div class="field">
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
@Feedback
</div>
}
else
{
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
@Feedback
}
2 changes: 1 addition & 1 deletion Source/Blazorise.FluentUI2/Components/Check.razor
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ else

private RenderFragment InputElement => __builder =>
{
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<div aria-hidden="true" class="fui-Checkbox__indicator">
<svg fill="currentColor" class="fui-Checkbox__icon" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path></svg>
</div>
Expand Down
2 changes: 1 addition & 1 deletion Source/Blazorise.Tailwind/Components/Check.razor
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@typeparam TValue
@inherits Blazorise.Check<TValue>
<Control Role="ControlRole.Check" Inline="@Inline">
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@Checked" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
@if ( ChildContent is not null )
{
<Label Type="LabelType.Check" For="@ElementId" Style="@Style" Cursor="@Cursor">@ChildContent</Label>
Expand Down
2 changes: 1 addition & 1 deletion Source/Blazorise/Components/Check/Check.razor
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@namespace Blazorise
@typeparam TValue
@inherits BaseCheckComponent<TValue>
<input @ref="@ElementRef" id="@ElementId" type="checkbox" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
<input @ref="@ElementRef" id="@ElementId" type="checkbox" name="@Name" class="@ClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" checked="@CurrentValue" tabindex="@TabIndex" @onchange="@OnChangeHandler" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" @attributes="@Attributes" />
@ChildContent
@Feedback
11 changes: 9 additions & 2 deletions Source/Blazorise/Components/Check/Check.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,15 @@ protected override void BuildClasses( ClassBuilder builder )
/// <summary>
/// The indeterminate property can help you to achieve a 'check all' effect.
/// </summary>
[Parameter]
public bool? Indeterminate { get; set; }
[Parameter] public bool? Indeterminate { get; set; }

/// <summary>
/// Defines the name attribute of a checkbox.
/// </summary>
/// <remarks>
/// The name attribute is used to identify form data after it has been submitted to the server, or to reference form data using JavaScript on the client side.
/// </remarks>
[Parameter] public string Name { get; set; }

#endregion
}
Loading