### Basic Button Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the creation of a basic button component in Blazorise. No specific setup is required beyond including the Blazorise package.

```csharp
<Button Color="Color.Primary">Primary Button</Button>
<Button Color="Color.Secondary">Secondary Button</Button>
<Button Color="Color.Success">Success Button</Button>
<Button Color="Color.Info">Info Button</Button>
<Button Color="Color.Warning">Warning Button</Button>
<Button Color="Color.Danger">Danger Button</Button>
<Button Color="Color.Light">Light Button</Button>
<Button Color="Color.Dark">Dark Button</Button>
<Button Color="Color.Link">Link Button</Button>
```

--------------------------------

### Blazorise Addons Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Addons/Code/StaticAddonExampleCode.html

Demonstrates how to use the Addons component with Start and Body addon types. Use this to prepend text or elements to an input field.

```html
<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>@@</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextInput Placeholder="Username" />
    </Addon>
</Addons>
```

--------------------------------

### Setup OnScreenKeyboardProvider

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/OnScreenKeyboards/Code/OnScreenKeyboardProviderSetupExampleCode.html

This snippet shows the basic setup of the OnScreenKeyboardProvider within the application's root components. Ensure it's nested within ThemeProvider and Router.

```html
<ThemeProvider Theme="@theme">
    <Router AppAssembly="@typeof( App ).Assembly" />
    <OnScreenKeyboardProvider />
</ThemeProvider>
```

--------------------------------

### Blazorise DataGrid Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridMultipleGroupingExampleCode.html

Demonstrates the basic structure for a Blazorise DataGrid component. Ensure you have the necessary Blazorise packages installed and the Blazorise CSS included in your project.

```html
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive
          ShowPager
          Groupable>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable />
    <DataGridColumn Field="@nameof( Employee.Gender )" Caption="Gender" Editable Groupable Grouping />
    <DataGridColumn Field="@nameof( Employee.Childrens )" Caption="Children" Editable />
    <DataGridColumn Field="@nameof( Employee.IsActive )" Caption="Active" Editable />
</DataGrid>
```

```csharp
@code {
    [Inject] public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}
```

--------------------------------

### Blazorise Counter Page Example

Source: https://github.com/megabit/blazorise/blob/master/README.md

Demonstrates a basic counter component using Blazorise components. Requires Blazorise setup.

```razor
@page "/counter"

<Heading Size="HeadingSize.Is1">Counter</Heading>

<Paragraph>Current count: @currentCount</Paragraph>

<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
    private int currentCount;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```

--------------------------------

### Blazorise Modal Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Provides an example of how to implement a modal dialog using Blazorise. This requires managing the modal's visibility state. Ensure `Blazorise.Modal` is included.

```csharp
<Button Color="Color.Info" Clicked="@(() => showModal = true)">Show Modal</Button>

<Modal @bind-Visible="@showModal">
    <ModalHeader>
        <ModalTitle>Modal Title</ModalTitle>
        <CloseButton Clicked="@(() => showModal = false)" />
    </ModalHeader>
    <ModalBody>
        This is the content of the modal.
    </ModalBody>
    <ModalFooter>
        <Button Color="Color.Secondary" Clicked="@(() => showModal = false)">Close</Button>
        <Button Color="Color.Primary">Save Changes</Button>
    </ModalFooter>
</Modal>

@code {
    private bool showModal;
}
```

--------------------------------

### Install Toolchain and Build CSS

Source: https://github.com/megabit/blazorise/blob/master/Source/Blazorise.Tailwind/README.md

Run these commands to install the necessary npm packages and build the custom CSS for Blazorise Tailwind.

```bash
npm install
npm run build:css
```

--------------------------------

### Install dotnet-script Tool

Source: https://github.com/megabit/blazorise/blob/master/Source/Extensions/Blazorise.Icons.AntDesign/README.md

Install the global dotnet-script tool. This is a prerequisite for running C# scripts from the command line.

```bash
dotnet tool install -g dotnet-script
```

--------------------------------

### Blazorise Simple Form Example

Source: https://github.com/megabit/blazorise/blob/master/README.md

Illustrates a simple form with input and button using Blazorise components. Includes a success alert that appears after saving. Requires Blazorise setup.

```razor
@page "/profile"

<Heading Size="HeadingSize.Is3">Profile</Heading>

<TextInput @bind-Value="displayName" Placeholder="Ada Lovelace" />

<Button Color="Color.Primary" Clicked="Save">Save</Button>

<Alert Color="Color.Success" Visible="isSaved">
    Saved!
</Alert>

@code {
    private string displayName = string.Empty;
    private bool isSaved;

    private void Save()
    {
        isSaved = true;
    }
}
```

--------------------------------

### Test-Mcp.ps1: Fetch Single Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs.Mcp/README.md

Use the Test-Mcp.ps1 script to fetch a specific example's code from the Blazorise MCP server. Specify the base URL and the example code identifier.

```powershell
powershell -File .\Test-Mcp.ps1 -BaseUrl "http://localhost:12791" -ExampleCode "ButtonExample"
```

```powershell
powershell -File .\Test-Mcp.ps1 -BaseUrl "https://mcp.blazorise.com" -ExampleCode "ButtonExample"
```

--------------------------------

### Install Blazorise Fluent UI Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Fluent UI Icons package.

```csharp
Install-Package Blazorise.Icons.FluentUI
```

--------------------------------

### Form Layout Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates using `Row` and `Column` for form layout.

```csharp
<Form>
    <Row>
        <Column ColumnSize="ColumnSize.Is6">
            <Field>
                <FieldLabel>Field 1</FieldLabel>
                <TextEdit></TextEdit>
            </Field>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            <Field>
                <FieldLabel>Field 2</FieldLabel>
                <TextEdit></TextEdit>
            </Field>
        </Column>
    </Row>
</Form>
```

--------------------------------

### Textarea Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates `TextEdit` as a textarea.

```csharp
<TextEdit TextMode="TextEditMode.MultiLine" Placeholder="Textarea"></TextEdit>
```

--------------------------------

### On-Screen Keyboard Layout Examples

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/OnScreenKeyboards/Code/OnScreenKeyboardLayoutExampleCode.html

This example shows how to enable the on-screen keyboard for different input types and specify custom layouts. Ensure the 'OnScreenKeyboard' attribute is set to 'true' to activate the keyboard. For specific input types like URLs, use the 'OnScreenKeyboardLayout' attribute to define the appropriate layout.

```html
<Fields>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>Email layout</FieldLabel>
        <TextInput @bind-Value="@emailValue" Placeholder="name@example.com" Role="TextRole.Email" OnScreenKeyboard="true" />
    </Field>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>Numeric layout</FieldLabel>
        <NumericInput TValue="int?" @bind-Value="@numberValue" Placeholder="123" OnScreenKeyboard="true" />
    </Field>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>Explicit layout</FieldLabel>
        <TextInput @bind-Value="@urlValue" Placeholder="https://example.com" OnScreenKeyboard="true" OnScreenKeyboardLayout="OnScreenKeyboardLayout.Url" />
    </Field>
</Fields>

@code {
    private string emailValue;

    private int? numberValue;

    private string urlValue;
}
```

--------------------------------

### Image Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the Image component for displaying images with responsive and fluid options.

```csharp
<Image Src="logo.png" Fluid="true" Alt="Blazorise Logo" />
```

--------------------------------

### Progress Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the `Progress` component for showing loading indicators or progress bars.

```csharp
<Progress Value="60"></Progress>
<Progress Color="Color.Success" Value="90" Striped="true" Animated="true"></Progress>
```

--------------------------------

### Input Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Shows various `TextEdit` input types.

```csharp
<TextEdit Placeholder="Text input"></TextEdit>
<TextEdit InputMode="InputMode.Email" Placeholder="Email input"></TextEdit>
<TextEdit InputMode="InputMode.Numeric" Placeholder="Number input"></TextEdit>
```

--------------------------------

### Chat Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates a basic chat interface using Blazorise components. This is a conceptual example and would require backend integration for actual chat functionality.

```csharp
<Card>
    <CardHeader>Chat</CardHeader>
    <CardBody>
        <div style="height: 300px; overflow-y: scroll;">
            <!-- Chat messages here -->
        </div>
    </CardBody>
    <CardFooter>
        <InputGroup>
            <TextEdit Placeholder="Type a message..." />
            <InputGroupAppend>
                <Button Color="Color.Primary">Send</Button>
            </InputGroupAppend>
        </InputGroup>
    </CardFooter>
</Card>
```

--------------------------------

### Spinner Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates the `Spinner` component for indicating loading states.

```csharp
<Spinner Color="Color.Primary"></Spinner>
<Spinner Color="Color.Secondary" Type="SpinnerType.Grow"></Spinner>
```

--------------------------------

### Basic Blazorise DataGrid Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridCaptionExampleCode.html

Demonstrates how to set up a basic DataGrid with columns for employee data. Requires Employee model and EmployeeData service.

```html
<DataGrid TItem="Employee" Data="@employeeList" Caption="This is a caption for the DataGrid.">
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" />
</DataGrid>
```

```csharp
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}
```

--------------------------------

### Run Blazorise Documentation Server

Source: https://github.com/megabit/blazorise/blob/master/CONTRIBUTING.md

Navigate to the documentation server folder and run this command to start the development server. Your browser will open automatically.

```powershell
dotnet watch run
```

--------------------------------

### Blazorise Tooltip with Right Placement

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Tooltips/Code/TooltipPositionsExampleCode.html

This example shows how to position a tooltip to the right of the button. No special setup is required beyond the component itself.

```html
<Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Right">
    <Button Color="Color.Primary">Right tooltip</Button>
</Tooltip>
```

--------------------------------

### Column Offsets Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Shows how to use column offsets to create spacing between columns.

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is4">
            Column 1
        </Column>
        <Column ColumnSize="ColumnSize.Is4 Offset-4">
            Column 2 (Offset)
        </Column>
    </Row>
</Container>
```

--------------------------------

### Layout Grid Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Shows how to use Blazorise's layout system for creating responsive grids. Utilizes `Row` and `Column` components.

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is6">
            Column 1
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            Column 2
        </Column>
    </Row>
</Container>
```

--------------------------------

### Nested Dropdown Example in Blazorise

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Dropdowns/Code/NestedDropdownExampleCode.html

Demonstrates how to create a multi-level dropdown menu using Blazorise components. Ensure all necessary Blazorise packages are installed and configured.

```csharp
<Dropdown>
    <DropdownToggle Color="Color.Primary">Level 1</DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Item 1.1</DropdownItem>
        <Dropdown>
            <DropdownToggle>Level 2</DropdownToggle>
            <DropdownMenu>
                <DropdownItem>Item 2.1</DropdownItem>
                <DropdownItem>Item 2.2</DropdownItem>
                <Dropdown>
                    <DropdownToggle>Level 3</DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem>Item 3.1</DropdownItem>
                        <DropdownItem>Item 3.2</DropdownItem>
                        <Dropdown>
                            <DropdownToggle>Level 4</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem>Item 4.1</DropdownItem>
                                <DropdownItem>Item 4.2</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </DropdownMenu>
                </Dropdown>
            </DropdownMenu>
        </Dropdown>
    </DropdownMenu>
</Dropdown>
```

--------------------------------

### Layout Grid Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the Blazorise grid system using `Container`, `Row`, and `Column` for responsive layouts.

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is6">
            <p>Column 1 (6/12)</p>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            <p>Column 2 (6/12)</p>
        </Column>
    </Row>
    <Row>
        <Column ColumnSize="ColumnSize.Is4">
            <p>Column 1 (4/12)</p>
        </Column>
        <Column ColumnSize="ColumnSize.Is4">
            <p>Column 2 (4/12)</p>
        </Column>
        <Column ColumnSize="ColumnSize.Is4">
            <p>Column 3 (4/12)</p>
        </Column>
    </Row>
    <Row>
        <Column>
            <p>Full width column</p>
        </Column>
    </Row>
</Container>
```

--------------------------------

### Sizing Utilities Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates using sizing utilities (`w-25`, `h-50`, `mw-100`) to control the width and height of elements.

```csharp
<div class="w-25 p-3 bg-light">25% width</div>
<div class="h-50 p-3 bg-light">50% height</div>
```

--------------------------------

### Image Cropper and Preview Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Cropper/Code/CropperViewerExampleCode.html

Demonstrates how to integrate the Cropper component for image selection and CropperViewer for displaying previews. Ensure the CropperState is initialized.

```razor
<Row>
    <Column>
        <FieldLabel>
            Image Cropper
        </FieldLabel>
        <FieldBody>
            <Cropper Source="img/gallery/3.jpg" CropperState="@cropperState" />
        </FieldBody>
    </Column>
    <Column>
        <FieldLabel>
            Preview
        </FieldLabel>
        <FieldBody>
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 150px; height: 150px;" />
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 100px; height: 100px;" />
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 50px; height: 50px;" />
        </FieldBody>
    </Column>
</Row>

@code {
    private CropperState cropperState = new();
}
```

--------------------------------

### Responsive Columns Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates how to create columns that adapt to different screen sizes using Blazorise's responsive column size options (e.g., `IsSm`, `IsMd`, `IsLg`).

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is12 ColumnSize.IsMd6 ColumnSize.IsLg4">Responsive Column</Column>
        <Column ColumnSize="ColumnSize.Is12 ColumnSize.IsMd6 ColumnSize.IsLg8">Responsive Column</Column>
    </Row>
</Container>
```

--------------------------------

### Vertical Sidebar Navigation with Blazorise Bar

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Bar/Code/VerticalBarSideBarExampleCode.html

This code snippet demonstrates a complete vertical sidebar navigation setup using Blazorise. It configures the Bar component for inline vertical display, with collapse behavior for small screens and specific breakpoints for navigation toggling. It includes brand, menu start, and menu end items with nested dropdowns.

```html
<Layout Sider Style="min-height: 420px;">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 Breakpoint="Breakpoint.Desktop"
                 NavigationBreakpoint="Breakpoint.Tablet"
                 ThemeContrast="ThemeContrast.Dark"
                 MenuToggleBehavior="BarMenuToggleBehavior.AllowSingleMenu">
                <BarBrand>
                    <BarItem>
                        <BarLink To="#workspace">
                            <BarIcon IconName="IconName.LayerGroup" />
                            Ops Console
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#overview">
                                <BarIcon IconName="IconName.Dashboard" />
                                Overview
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.ChartLine" />
                                    Analytics
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#traffic">Traffic</BarDropdownItem>
                                    <BarDropdownItem To="#conversion">Conversion</BarDropdownItem>
                                    <BarDropdownItem To="#retention">Retention</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Users" />
                                    Customers
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="#all-customers">All customers</BarDropdownItem>
                                    <BarDropdownItem To="#segments">Segments</BarDropdownItem>
                                    <BarDropdownItem To="#imports">Imports</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#billing">
                                <BarIcon IconName="IconName.Receipt" />
                                Billing
                            </BarLink>
                        </BarItem>
                    </BarStart>
                    <BarEnd>
                        <BarItem>
                            <BarLink To="#settings">
                                <BarIcon IconName="IconName.Settings" />
                                Settings
                            </BarLink>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <Div Padding="Padding.Is3" Background="Background.Light" Border="Border.Is1.OnBottom">
                <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Workspace overview</Heading>
            </Div>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is3">
            <Card>
                <CardBody>
                    The vertical Bar works well as the primary navigation inside a layout sider.
                </CardBody>
            </Card>
        </LayoutContent>
    </Layout>
</Layout>
```

--------------------------------

### Select Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the `Select` component for creating dropdown lists. Use `SelectItem` for each option.

```csharp
<Select Placeholder="Select one...">
    <SelectItem Value="1">One</SelectItem>
    <SelectItem Value="2">Two</SelectItem>
    <SelectItem Value="3">Three</SelectItem>
</Select>
```

--------------------------------

### Basic Blazorise DataGrid Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridColumnChooserDisplayableExampleCode.html

Demonstrates the basic structure of a Blazorise DataGrid with columns. Use this for displaying tabular data with options for column customization.

```html
<DataGrid TItem="Employee"
          Data="Data"
          ShowColumnChooser>
    <DataGridColumns>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Name )" Caption="Name" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Displaying="false" />
    </DataGridColumns>
</DataGrid>
```

```csharp
@code {
    public IEnumerable<Employee> Data { get; set; } = new List<Employee>()
    {
        new() { Name = "John", Salary = 1000m },
        new() { Name = "Sarah", Salary = 2000m },
    };

    public class Employee
    {
        public string Name { get; set; }

        public decimal Salary { get; set; }
    }
}
```

--------------------------------

### Install Blazorise Material Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Material Icons package.

```csharp
Install-Package Blazorise.Icons.Material
```

--------------------------------

### Layout Grid Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates the grid system using `Container`, `Row`, and `Column` for responsive layouts.

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is6">
            Content 1
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            Content 2
        </Column>
    </Row>
</Container>
```

--------------------------------

### Install Blazorise Lucide Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Lucide Icons package.

```csharp
Install-Package Blazorise.Icons.Lucide
```

--------------------------------

### Install Blazorise Bootstrap Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Bootstrap Icons package.

```csharp
Install-Package Blazorise.Icons.Bootstrap
```

--------------------------------

### Column Ordering Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates how to reorder columns using Blazorise's ordering utilities (e.g., `OrderMdFirst`, `OrderMdLast`).

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is4 OrderMdFirst">First Column (Order First on Medium screens)</Column>
        <Column ColumnSize="ColumnSize.Is4">Second Column</Column>
        <Column ColumnSize="ColumnSize.Is4 OrderMdLast">Third Column (Order Last on Medium screens)</Column>
    </Row>
</Container>
```

--------------------------------

### Install Blazorise FluentValidation Package

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/FluentValidation/Code/FluentValidationNugetInstallExampleCode.html

Install the Blazorise.FluentValidation NuGet package to enable integration with FluentValidation.

```csharp
Install-Package Blazorise.FluentValidation
```

--------------------------------

### Install FluentValidation Dependency Injection Extensions

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/FluentValidation/Code/FluentValidationNugetInstallExampleCode.html

Install the FluentValidation.DependencyInjectionExtensions NuGet package for dependency injection support.

```csharp
Install-Package FluentValidation.DependencyInjectionExtensions
```

--------------------------------

### Basic Pagination Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates how to implement pagination controls using Blazorise. Pagination is used to navigate through large sets of data divided into pages.

```csharp
<Pagination PageSize="10" TotalItems="100" />
```

--------------------------------

### File Upload Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates how to implement file uploads using the `FileUpload` component. Requires handling the uploaded file data.

```csharp
<FileUpload @ref="_fileUpload" />
<Button Color="Color.Primary" @onclick="UploadFile">Upload</Button>

@code {
    private FileUpload _fileUpload;

    private async Task UploadFile()
    {
        if (_fileUpload.Files != null && _fileUpload.Files.Any())
        {
            // Handle file upload logic here
        }
    }
}
```

--------------------------------

### Install Yarn Globally

Source: https://github.com/megabit/blazorise/blob/master/Source/Blazorise/README.md

Install Yarn as a global package using npm. This is a prerequisite for building some external libraries.

```bash
npm install -g yarn
```

--------------------------------

### Install Blazorise Font Awesome Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Font Awesome Icons package.

```csharp
Install-Package Blazorise.Icons.FontAwesome
```

--------------------------------

### Blazorise DataGrid Basic Implementation

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridColumnChooserExampleCode.html

Demonstrates the basic setup of a Blazorise DataGrid with in-memory data. Includes configuration for responsiveness, column chooser, and pagination.

```razor
<DataGrid TItem="Employee"
          Data="inMemoryData"
          Responsive
          ShowColumnChooser
          PagerPosition="DataGridPagerPosition.Top"
          ShowPager
          ShowPageSizes
          ColumnDisplayingChanged="@ColumnDisplayChanged">
</DataGrid>

@code {
    [Inject] EmployeeData EmployeeData { get; set; }

    private IEnumerable<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }

    protected void ColumnDisplayChanged( ColumnDisplayChangedEventArgs<Employee> args )
    {
        Console.WriteLine( $"Column: {args.Column.Field} | Display: {args.Display}" );
    }
}
```

--------------------------------

### Responsive Columns Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates responsive column behavior using different sizes for different screen breakpoints.

```csharp
<Container>
    <Row>
        <Column ColumnSize="ColumnSize.Is12 ColumnSize.IsMedium6 ColumnSize.IsLarge4">
            Responsive Column
        </Column>
        <Column ColumnSize="ColumnSize.Is12 ColumnSize.IsMedium6 ColumnSize.IsLarge4">
            Responsive Column
        </Column>
        <Column ColumnSize="ColumnSize.Is12 ColumnSize.IsMedium12 ColumnSize.IsLarge4">
            Responsive Column
        </Column>
    </Row>
</Container>
```

--------------------------------

### Install Blazorise Ant Design Icons

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Icons/Code/IconsNugetInstallExampleCode.html

Use this command to install the Blazorise Ant Design Icons package.

```csharp
Install-Package Blazorise.Icons.AntDesign
```

--------------------------------

### Table Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Shows how to create basic HTML tables using Blazorise styling. Supports various table classes.

```csharp
<Table>
    <TableHead>
        <tr><th>Header 1</th><th>Header 2</th></tr>
    </TableHead>
    <TableBody>
        <tr><td>Data 1</td><td>Data 2</td></tr>
        <tr><td>Data 3</td><td>Data 4</td></tr>
    </TableBody>
</Table>
```

--------------------------------

### Basic FileUpload Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates the basic Blazorise FileUpload component for allowing users to upload files. Requires server-side handling for actual upload.

```csharp
<FileUpload TValue="string" />
```

--------------------------------

### Blazorise Overflow Auto Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Helpers/Utilities/Overflow/Code/OverflowExampleCode.html

Use Overflow.Auto to enable scrolling when content exceeds container dimensions. This example shows vertical scrolling.

```razor
<Div Display="Display.Flex.Row.OnDesktop">
    <Div Overflow="Overflow.Auto" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code >Overflow.Auto</code > on an element with set width and height dimensions. By design, this content will vertically scroll.
    </Div>
    <Div Overflow="Overflow.Hidden" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code >Overflow.Hidden</code > on an element with set width and height dimensions.
    </Div>
    <Div Overflow="Overflow.Visible" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code >Overflow.Visible</code > on an element with set width and height dimensions.
    </Div>
    <Div Overflow="Overflow.Scroll" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code >Overflow.Scroll</code > on an element with set width and height dimensions.
    </Div>
</Div>
```

--------------------------------

### Basic Layout Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Layouts/Code/BasicLayoutExampleCode.html

A fundamental example of the Blazorise Layout component, showcasing its header, content, and footer sections with basic styling and content.

```html
<Layout Height="Height.Px(320)"
        Border="Border.Is1.Rounded"
        TextAlignment="TextAlignment.Center">
    <LayoutHeader Background="Background.Primary"
                  TextColor="TextColor.White"
                  Padding="Padding.Is3"
                  Flex="Flex.JustifyContent.Center.AlignItems.Center">
        Sales Portal
    </LayoutHeader>
    <LayoutContent Background="Background.Light"
                   Padding="Padding.Is4">
        <Card>
            <CardBody>
                <Heading Size="HeadingSize.Is5">Quarterly pipeline</Heading>
                <Paragraph Margin="Margin.Is0">
                    Track open opportunities, team activity, and forecast changes from the main content region.
                </Paragraph>
            </CardBody>
        </Card>
    </LayoutContent>
    <LayoutFooter Background="Background.Body"
                  Border="Border.Is1.OnTop"
                  Padding="Padding.Is3">
        Updated 12 minutes ago
    </LayoutFooter>
</Layout>
```

--------------------------------

### Align Items Start with Blazorise

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Helpers/Utilities/Flex/Code/FlexAlignItemsExampleCode.html

Sets flex items to align at the start of the cross-axis. Requires Blazorise components and basic CSS styling.

```razor
<Div Flex="Flex.AlignItems.Start" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
```

--------------------------------

### Install Playwright Browser Dependencies

Source: https://github.com/megabit/blazorise/blob/master/CONTRIBUTING.md

Execute this PowerShell command from the E2E tests directory to install necessary Playwright browser dependencies for end-to-end testing.

```powershell
powershell .\bin\Debug\net10.0\playwright.ps1 install --with-deps
```

--------------------------------

### Indeterminate Checkbox Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Checks/Code/CheckIndeterminateExampleCode.html

This example shows how to create a 'select all' checkbox that can be in an indeterminate state. It uses a HashSet to manage selected items and updates the UI accordingly.

```html
<Check TValue="bool" Value="@AreAllSelected" Indeterminate="@AreSomeSelected" ValueChanged="@OnSelectAllChanged">
    Select all
</Check>

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is2" Margin="Margin.Is3.FromTop">
    @foreach ( string item in Items )
    {
        <Check TValue="bool" Value="@selectedItems.Contains( item )" ValueChanged="@(( bool value ) => OnItemChanged( item, value ))">
            @item
        </Check>
    }
</Div>
```

```csharp
@using System.Collections.Generic

@code {
    private static readonly string[] Items =
    [
        "Documentation",
        "Examples",
        "Tests"
    ];

    private readonly HashSet<string> selectedItems = new() { "Documentation" };

    private bool AreAllSelected => selectedItems.Count == Items.Length;

    private bool AreSomeSelected => selectedItems.Count > 0 && !AreAllSelected;

    private void OnSelectAllChanged( bool value )
    {
        selectedItems.Clear();

        if ( value )
        {
            foreach ( string item in Items )
            {
                selectedItems.Add( item );
            }
        }
    }

    private void OnItemChanged( string item, bool value )
    {
        if ( value )
        {
            selectedItems.Add( item );
        }
        else
        {
            selectedItems.Remove( item );
        }
    }
}
```

--------------------------------

### Progress Component Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates the `Progress` component for showing loading or progress status. Use `Value` to set the progress percentage.

```csharp
<Progress Value="50"></Progress>
<Progress Color="Color.Success" Value="75"></Progress>
<Progress Color="Color.Info" Value="100" Striped="true"></Progress>
<Progress Color="Color.Warning" Value="90" Animated="true"></Progress>
```

--------------------------------

### Dropdown Menu Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates how to create a dropdown menu with multiple options. Use `Dropdown` and `DropdownItem` components for this.

```csharp
<Dropdown>
    <DropdownToggle Color="Color.Primary">Dropdown</DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action 1</DropdownItem>
        <DropdownItem>Action 2</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Separated action</DropdownItem>
    </DropdownMenu>
</Dropdown>
```

--------------------------------

### Basic Chart Example (Line Chart)

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Illustrates how to create a basic line chart using Blazorise Charts. Charts are used for data visualization.

```csharp
<LineChart Options="@lineChartOptions" Data="@lineChartData" />

@code {
    private LineChartOptions lineChartOptions;
    private LineChartData lineChartData;
}
```

--------------------------------

### Test-Mcp.ps1: General Script Commands

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs.Mcp/README.md

Examples of using the Test-Mcp.ps1 script for various documentation retrieval tasks, including fetching examples, listing pages, and setting timeouts.

```powershell
powershell -File .\Test-Mcp.ps1 -BaseUrl "http://localhost:12791" -ExampleCode "ButtonExample"
powershell -File .\Test-Mcp.ps1 -BaseUrl "https://mcp.blazorise.com" -ExampleCode "ButtonExample"
powershell -File .\Test-Mcp.ps1 -BaseUrl "https://mcp.blazorise.com" -ListDocsPages -RoutePrefix "/docs/components/button"
powershell -File .\Test-Mcp.ps1 -BaseUrl "http://localhost:12791" -ListDocsPages -RoutePrefix "/docs"
powershell -File .\Test-Mcp.ps1 -BaseUrl "http://localhost:12791" -TimeoutSeconds 60 -ProtocolVersion "2024-11-05"
```

--------------------------------

### Basic Validation Feedback Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Validations/Code/ValidationFeedbackExampleCode.html

This example shows how to use the Feedback component with different validation status types like ValidationNone, ValidationWarning, ValidationSuccess, and ValidationError within a TextInput.

```html
<Validation Validator="@ValidateDisplayName">
    <TextInput Placeholder="Enter display name">
        <Feedback>
            <ValidationNone>Please enter a display name.</ValidationNone>
            <ValidationWarning>Short display names are allowed, but longer names are easier to recognize.</ValidationWarning>
            <ValidationSuccess>Display name looks good.</ValidationSuccess>
            <ValidationError>Display name is required.</ValidationError>
        </Feedback>
    </TextInput>
</Validation>
```

--------------------------------

### Step Navigation Control Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Steps/Code/StepNavigationAllowedExampleCode.html

This example shows how to use the NavigationAllowed parameter to conditionally prevent users from moving to the next step. It's useful for implementing validation before proceeding.

```html
<Steps @ref="stepsRef" @bind-SelectedStep="selectedStep" NavigationAllowed="NavigationAllowed">
    <Items>
        <Step Name="1">Step 1</Step>
        <Step Name="2">Step 2</Step>
        <Step Name="3">Step 3</Step>
        <Step Name="4">Step 4</Step>
    </Items>
    <Content>
        <StepPanel Name="1">
            Step 1
        </StepPanel>
        <StepPanel Name="2">
            <Field>
                <FieldLabel>Email address</FieldLabel>
                <TextInput @bind-Value="email" Placeholder="Enter email">
                    <FieldHelp>This field is required in order to proceed to the next step.</FieldHelp>
                </TextInput>
            </Field>
        </StepPanel>
        <StepPanel Name="3">
            Step 3
        </StepPanel>
        <StepPanel Name="4">
            Step 4
        </StepPanel>
    </Content>
</Steps>
<Div Flex="Flex.JustifyContent.Center">
    <Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="() => stepsRef.PreviousStep()">
        Previous
    </Button>
    <Button Color="Color.Primary" Clicked="() => stepsRef.NextStep()">
        Next
    </Button>
</Div>
```

```csharp
@code {
    private Steps stepsRef;
    private string email;
    private string selectedStep = "2";

    private Task<bool> NavigationAllowed( StepNavigationContext context )
    {
        if ( context.CurrentStepIndex == 2 && context.NextStepIndex > 2 && !ValidationRule.IsEmail( email ) )
        {
            return Task.FromResult( false );
        }

        return Task.FromResult( true );
    }
}
```

--------------------------------

### Basic Icon Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates how to display an icon using the Blazorise Icon component. Blazorise supports various icon libraries like Font Awesome.

```csharp
<Icon Name="" />
```

--------------------------------

### Blazorise Scheduler Component Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Scheduler/Code/SchedulerDraggableExampleCode.html

Basic setup of the Blazorise Scheduler component with data binding for date, data source, and selected view. Enables editing and dragging of appointments.

```razor
<Scheduler TItem="Appointment" @bind-Date="@selectedDate"
           Data="@Appointments"
           @bind-SelectedView="@selectedView"
           Editable
           Draggable>
    <SchedulerToolbar />
    <SchedulerViews>
        <SchedulerWeekView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
    </SchedulerViews>
</Scheduler>
```

--------------------------------

### Blazorise DataGrid Basic Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridColumnChooserPositionExampleCode.html

Configure a Blazorise DataGrid with data binding, responsiveness, column chooser, and pager options. Ensure EmployeeData service is injected and data is loaded in OnInitializedAsync.

```csharp
<DataGrid TItem="Employee"
          Data="inMemoryData"
          Responsive
          ShowColumnChooser
          PagerPosition="DataGridPagerPosition.Top"
          PagerOptions="new DataGridPagerOptions() { ColumnChooserPosition = PagerElementPosition.End }"
>
</DataGrid>

@code {
    [Inject] EmployeeData EmployeeData { get; set; }

    private IEnumerable<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }
}
```

--------------------------------

### SvgColumnChart Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/SvgChart/Code/SvgColumnChartExampleCode.html

This example shows a basic SvgColumnChart displaying monthly revenue and expenses. It includes configuration for title, legend, tooltip, and axes, along with defining two column series.

```html
<SvgColumnChart TItem="MonthlyRevenue"
                Items="@revenue"
                Options="@options">
    <SvgChartTitle Title='@("Monthly revenue")' Subtitle='@("Column series with grouped values")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgColumnSeries Name="Revenue" Value="@( item => item.Revenue )" Color="Color.Primary" BorderRadius="4" />
    <SvgColumnSeries Name="Expenses" Value="@( item => item.Expenses )" Color="Color.Info" BorderRadius="4" />
</SvgColumnChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlyRevenue> revenue =
    [
        new() { Month = "Jan", Revenue = 68, Expenses = 42 },
        new() { Month = "Feb", Revenue = 74, Expenses = 46 },
        new() { Month = "Mar", Revenue = 91, Expenses = 52 },
        new() { Month = "Apr", Revenue = 86, Expenses = 49 },
        new() { Month = "May", Revenue = 103, Expenses = 61 },
    ];

    private sealed class MonthlyRevenue
    {
        public string Month { get; set; }

        public double Revenue { get; set; }

        public double Expenses { get; set; }
    }
}
```

--------------------------------

### Basic Addons Implementation

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Components/Addons/Code/MultipleAddonsExampleCode.html

Demonstrates how to use the Addons component with Start, Body, and End addon types. The Body addon typically contains an input element.

```html
<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>Start</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextInput Placeholder="Placeholder" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <AddonLabel>End</AddonLabel>
    </Addon>
</Addons>
```

--------------------------------

### Blazorise Line Chart Component Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Chart/Code/ChartExampleCode.html

This snippet shows the basic setup of a Blazorise LineChart component and its associated button for redrawing the chart. It includes the component declaration and a button that triggers an asynchronous redraw operation.

```razor
<Button Color="Color.Primary" Clicked="@(async () => await HandleRedraw())">Redraw</Button>

<LineChart @ref="lineChart" TItem="double" />
```

--------------------------------

### Chart Example (Bar Chart)

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PdfViewer/Code/PdfViewerBase64ExampleCode.html

Demonstrates how to create a bar chart using Blazorise Charts. Requires the Blazorise.Charts package. Ensure you have data in the correct format.

```csharp
<BarChart Data="@_barChartData" Options="@_barChartOptions"></BarChart>

@code {
    private BarChartData _barChartData;
    private BarChartOptions _barChartOptions;

    protected override void OnInitialized()
    {
        _barChartData = new BarChartData
        {
            Labels = new List<string> { "January", "February", "March" },
            Datasets = new List<Dataset> {
                new Dataset {
                    Label = "Sales",
                    Data = new List<double> { 10, 20, 15 },
                    BackgroundColor = "rgba(75, 192, 192, 0.2)",
                    BorderColor = "rgba(75, 192, 192, 1)"
                }
            }
        };

        _barChartOptions = new BarChartOptions
        {
            Responsive = true
        };
    }
}
```

--------------------------------

### Blazorise Scheduler Component Setup

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/Scheduler/Code/SchedulerEditableExampleCode.html

This snippet shows the basic setup of the Blazorise Scheduler component, including data binding for dates, events, and selected views. It also demonstrates how to enable editing and configure toolbar and views.

```razor
<Scheduler TItem="Appointment" @bind-Date="@selectedDate"
           Data="@Appointments"
           @bind-SelectedView="@selectedView"
           Editable>
    <SchedulerToolbar />
    <SchedulerViews>
        <SchedulerWeekView StartTime="@startTime" EndTime="@endTime" WorkDayStart="@workDayStart" WorkDayEnd="@workDayEnd" />
    </SchedulerViews>
</Scheduler>
```

--------------------------------

### PivotGrid with Styling Example

Source: https://github.com/megabit/blazorise/blob/master/Documentation/Blazorise.Docs/Pages/Docs/Extensions/PivotGrid/Code/PivotGridStylingExampleCode.html

This example shows a PivotGrid configured with data, column, row, and aggregate definitions. It also includes callbacks for applying custom styles to cells, row headers, and column headers based on their values and context.

```html
<PivotGrid TItem="PivotSale"
           Data="@Sales"
           CellStyling="@OnCellStyling"
           RowHeaderStyling="@OnRowHeaderStyling"
           ColumnHeaderStyling="@OnColumnHeaderStyling"
           ShowRowTotals
           ShowColumnTotals
           ShowRowSubtotals
           Striped
           Hoverable">
    <PivotGridColumns>
        <PivotGridColumn Field="@nameof( PivotSale.City )" Caption="City" />
    </PivotGridColumns>
    <PivotGridRows>
        <PivotGridRow Field="@nameof( PivotSale.Category )" Caption="Category" />
        <PivotGridRow Field="@nameof( PivotSale.Product )" Caption="Product" />
    </PivotGridRows>
    <PivotGridAggregates>
        <PivotGridAggregate Field="@nameof( PivotSale.Amount )"
                            Caption="Amount"
                            DisplayFormat="{0:C0}"
                            DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "en-US" )" />
        <PivotGridAggregate Field="@nameof( PivotSale.Units )"
                            Caption="Units"
                            Aggregate="PivotGridAggregateFunction.Sum" />
    </PivotGridAggregates>
</PivotGrid>
```

```csharp
@code {
    private readonly List<PivotSale> Sales =
    [
        new() { City = "Berlin", Category = "Hardware", Product = "Laptops", Amount = 51200m, Units = 18 },
        new() { City = "Berlin", Category = "Software", Product = "Licenses", Amount = 94200m, Units = 205 },
        new() { City = "London", Category = "Hardware", Product = "Laptops", Amount = 127500m, Units = 34 },
        new() { City = "London", Category = "Services", Product = "Consulting", Amount = 66300m, Units = 36 },
        new() { City = "Madrid", Category = "Services", Product = "Training", Amount = 28700m, Units = 64 },
        new() { City = "Paris", Category = "Software", Product = "Subscriptions", Amount = 124500m, Units = 355 },
    ];

    private void OnCellStyling( PivotGridCellContext<PivotSale> context, PivotGridCellStyling styling )
    {
        if ( context.Aggregate.Field != nameof( PivotSale.Amount ) || context.Value is not decimal amount )
            return;

        if ( amount >= 100000m )
        {
            styling.Background = Background.Success;
            styling.TextColor = TextColor.White;
            styling.TextWeight = TextWeight.Bold;
        }
        else if ( amount <= 30000m )
        {
            styling.Background = Background.Danger;
            styling.TextColor = TextColor.White;
            styling.TextWeight = TextWeight.Bold;
        }
    }

    private void OnRowHeaderStyling( PivotGridRowHeaderContext<PivotSale> context, PivotGridCellStyling styling )
    {
        if ( context.IsGrandTotal )
        {
            styling.Background = Background.Info;
            styling.TextColor = TextColor.White;
            styling.TextWeight = TextWeight.Bold;
        }
        else if ( context.IsTotal )
        {
            styling.Background = Background.Secondary;
            styling.TextColor = TextColor.White;
            styling.TextWeight = TextWeight.Bold;
        }
    }

    private void OnColumnHeaderStyling( PivotGridColumnHeaderContext<PivotSale> context, PivotGridCellStyling styling )
    {
        if ( context.IsGrandTotal || context.IsTotal )
        {
            styling.Background = Background.Info;
            styling.TextColor = TextColor.White;
            styling.TextWeight = TextWeight.Bold;
        }
    }

    public class PivotSale
    {
        public string City { get; set; }

        public string Category { get; set; }

        public string Product { get; set; }

        public decimal Amount { get; set; }

        public int Units { get; set; }
    }
}
```