Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting Started with Blazor RadioButton Component

    4 Nov 20254 minutes to read

    This section explains how to include theBlazor RadioButton component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.

    To get started quickly with the RadioButton component in Blazor, watch the following video or explore the RadioButton getting-started sample onGitHub.

    Prerequisites

    Create a new Blazor App in Visual Studio

    Create aBlazor WebAssembly App using Visual Studio viaMicrosoft templates or theSyncfusion® Blazor Extension.

    Install Syncfusion® Blazor Buttons and Themes NuGet in the App

    To add theBlazor RadioButton component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and installSyncfusion.Blazor.Buttons andSyncfusion.Blazor.Themes. Alternatively, run the following Package Manager commands:

    Install-PackageSyncfusion.Blazor.Buttons-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

    NOTE

    Syncfusion® Blazor components are available onnuget.org. Refer to theNuGet packages topic for the list of available packages and component details.

    Prerequisites

    Create a new Blazor App in Visual Studio Code

    Create aBlazor WebAssembly App using Visual Studio Code viaMicrosoft templates or theSyncfusion® Blazor Extension.

    Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`).

    dotnetnewblazorwasm-oBlazorAppcdBlazorApp

    Install Syncfusion® Blazor Buttons and Themes NuGet in the App

    • PressCtrl+` to open the integrated terminal in Visual Studio Code.
    • Ensure you are in the project root directory where the.csproj file is located.
    • Run the following commands to installSyncfusion.Blazor.Buttons andSyncfusion.Blazor.Themes, and restore packages.
    dotnetaddpackageSyncfusion.Blazor.Buttons-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

    NOTE

    Syncfusion® Blazor components are available onnuget.org. Refer to theNuGet packages topic for the list of available packages and component details.

    Register Syncfusion® Blazor Service

    Open~/_Imports.razor and import theSyncfusion.Blazor andSyncfusion.Blazor.Buttons namespaces.

    @using Syncfusion.Blazor@using Syncfusion.Blazor.Buttons

    Now, register the Syncfusion® Blazor service in~/Program.cs of the Blazor WebAssembly app.

    usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....

    Add stylesheet

    The theme stylesheet is provided viaStatic Web Assets. Include the stylesheet reference in the<head> section of~/index.html.

    <head>    ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/></head>

    NOTE

    ReviewBlazor Themes for options to reference themes (Static Web Assets,CDN, andCRG). Ensure the theme stylesheet is loaded before any custom styles.

    Add Blazor RadioButton component

    Add the Syncfusion® Blazor RadioButton component in~/Pages/Index.razor.

    <SfRadioButtonLabel="Option 1"Name="options"Value="card"@bind-Checked="stringChecked"></SfRadioButton><SfRadioButtonLabel="Option 2"Name="options"Value="cash"@bind-Checked="stringChecked"></SfRadioButton>@code {    private string stringChecked = "cash";}
    • PressCtrl+F5 (Windows) or⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor RadioButton component in the default web browser.
    Blazor RadioButton Component

    See Also

    NOTE

    Explore theBlazor Radio Button example that demonstrates rendering and configuration of the Radio Button.

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp