Siemens.IX.Blazor 0.5.1

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Siemens.IX.Blazor --version 0.5.1                

                    
                

            
NuGet\Install-Package Siemens.IX.Blazor -Version 0.5.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Siemens.IX.Blazor" Version="0.5.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Siemens.IX.Blazor --version 0.5.1                

                    
                

            
#r "nuget: Siemens.IX.Blazor, 0.5.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Siemens.IX.Blazor as a Cake Addin
#addin nuget:?package=Siemens.IX.Blazor&version=0.5.1

// Install Siemens.IX.Blazor as a Cake Tool
#tool nuget:?package=Siemens.IX.Blazor&version=0.5.1

Siemens IX for Blazor

Installation

Install the SiemensIXBlazor package from the NuGet package manager.

.NET CLI

dotnet add package SiemensIXBlazor

Package Manager

NuGet\Install-Package SiemensIXBlazor

Add required CSS and Javascript packages into the index.html file.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor App</title>

    
    <link
      rel="stylesheet"
      href="_content/SiemensIXBlazor/css/siemens-ix/ix-icons.css"
    />

    <link
      rel="stylesheet"
      href="_content/SiemensIXBlazor/css/siemens-ix/siemens-ix.css"
    />
  </head>
  <body>
    ...
    <script src="_content/SiemensIXBlazor/js/siemens-ix/index.bundle.js"></script>
  </body>
</html>

Theme Switching

Since v0.3.9

Add Theme component to the page that you want to manipulate the theme.

<Theme @ref="themeProvider"></Theme>

<Button ClickEvent="SetDarkTheme">Set Dark Theme</Button>
<Button ClickEvent="ToggleTheme">Toggle Theme</Button>
<Button ClickEvent="ToggleSystemTheme">Toggle System Theme</Button>

Then use this methods to change theme.

public partial class Index
{
    Theme themeProvider; 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await themeProvider.SetTheme("theme-classic-light");
        }
            
    }

    private async Task ToggleTheme()
    {
        await themeProvider.ToggleTheme();
    }

    private async Task SetDarkTheme()
    {
        await themeProvider.SetTheme("theme-classic-dark");
    }

    private async Task ToggleSystemTheme()
    {
        await themeProvider.ToggleSystemTheme(true);
    }
}

Supported Components

Application

<Application @ref="_app">
    <ApplicationHeader Name="My Application">
        <placeholder-logo slot="logo"></placeholder-logo>
    </ApplicationHeader>
    <Menu>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
    </Menu>

    <ix-content>
        <ContentHeader
            Slot="header"
            HeaderTitle="My Content Page"
        >
        </ContentHeader>
    </ix-content>
</Application>

Application _app;

// Set the app switch config when the component is rendered. 
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        AppSwitchConfig config = new()
        {
            CurrentAppId = "1",
            Apps = 
            [
                new App()
                {
                    Id = "App1",
                    Name = "App 1",
                    Description = "Awesome app",
                    Url = "app1",
                    Target = "_self",
                    IconSrc = "..."
                }
            ]
        }

        _app.AppSwitchConfig = config;
    }
}

Application Header

<ApplicationHeader Name="My Application">
    <placeholder-logo slot="logo"></placeholder-logo>
</ApplicationHeader>

Basic Navigation

<BasicNavigation ApplicationName="Application name">
  <placeholder-logo slot="logo"></placeholder-logo>
  <NavigationMenu Id="nav-menu-1">
    <NavigationMenuItem>Item 1</NavigationMenuItem>
    <NavigationMenuItem>Item 2</NavigationMenuItem>
  </NavigationMenu>
</BasicNavigation>

<NavigationMenu Id="nav-menu-1">
  <NavigationMenuItem Home="true" TabIcon="home"> Home </NavigationMenuItem>
  <NavigationMenuItem TabIcon="globe"> Normal Tab </NavigationMenuItem>
  <NavigationMenuItem TabIcon="star" disabled> Disabled tab </NavigationMenuItem>
  <NavigationMenuItem TabIcon="star"> With other icon </NavigationMenuItem>
  <NavigationMenuItem TabIcon="globe" Style="display: none">
    Should not be visible
  </NavigationMenuItem>
</NavigationMenu>

@* Category *@
<BasicNavigation>
  <NavigationMenu>
    <NavigationMenuItem Home="true" Icon="home">Home</NavigationMenuItem>
    <NavigationMenuItem Icon="globe">Normal Tab</NavigationMenuItem>
    <NavigationMenuCategory Label="Top level Category" Icon="rocket">
      <NavigationMenuItem Icon="globe">Nested Tab</NavigationMenuItem>
      <NavigationMenuItem Icon="globe">Nested Tab</NavigationMenuItem>
    </NavigationMenuCategory>
  </NavigationMenu>
</BasicNavigation>

@* Avatar *@
<NavigationMenu Id="nav-menu-1">
  <NavigationMenuAvatar Id="nav-avatar-menu-1" Image="https://ui-avatars.com/api/?name=John+Doe">
    <NavigationMenuAvatarItem Id="nav-avatar-item-1" Label="Option 1"></NavigationMenuAvatarItem>
  </NavigationMenuAvatar>
  <NavigationMenuItem Home="true" TabIcon="home"> Home </NavigationMenuItem>
  <NavigationMenuItem TabIcon="globe"> Normal Tab </NavigationMenuItem>
  <NavigationMenuItem TabIcon="star" Disabled="true"> Disabled tab </NavigationMenuItem>
  <NavigationMenuItem TabIcon="star"> With other icon </NavigationMenuItem>
  <NavigationMenuItem TabIcon="globe" Style="display: none">
    Should not be visible
  </NavigationMenuItem>
</NavigationMenu>

<BasicNavigation>
  <placeholder-logo slot="logo"></placeholder-logo>
  <NavigationMenu Id="nav-menu-1">
    <AboutMenu @ref="aboutMenuElement">
      <AboutMenuItem Label="Tab 1">Content 1</AboutMenuItem>
      <AboutMenuItem Label="Tab 2">Content 2</AboutMenuItem>
    </AboutMenu>
  </NavigationMenu>
</BasicNavigation>

AboutMenu aboutMenuElement;

aboutMenuElement.ToggleAbout(true);

Settings

<BasicNavigation>
  <placeholder-logo slot="logo"></placeholder-logo>
  <NavigationMenu Id="nav-menu-1">
    <MenuSettings @ref="settingsMenuElement">
      <MenuSettingsItem
        Label="Example Setting 1"
      ></MenuSettingsItem>
      <MenuSettingsItem
        Label="Example Setting 2"
      ></MenuSettingsItem>
    </MenuSettings>
  </NavigationMenu>
</BasicNavigation>

SettingsMenu settingsMenuElement;

aboutMenuElement.ToggleSettings(true);

Map Navigation

<MapNavigation
  ApplicationName="Test Application"
  NavigationTitle="Some other content"
>
  <placeholder-logo slot="logo"></placeholder-logo>
  <NavigationMenu Id="nav-menu-1">
    <NavigationMenuItem>Item 1</NavigationMenuItem>
    <NavigationMenuItem>Item 2</NavigationMenuItem>
    <NavigationMenuItem>Item 3</NavigationMenuItem>
  </NavigationMenu>
  <div slot="sidebar-content">Sidebar content</div>
  <div>Content</div>
</MapNavigation>

Popover News

<BasicNavigation>
  <placeholder-logo slot="logo"></placeholder-logo>
  <NavigationMenu Id="nav-menu-1">
    <AboutMenu>
      <AboutMenuItem Label="Example"> </AboutMenuItem>
    </AboutMenu>
    <AboutMenuNews Label="Test" Show="true" AboutItemLabel="Example">
      Test
    </AboutMenuNews>
  </NavigationMenu>
</BasicNavigation>

AGGrid Preview

This component is currently in preview version.

Installation

Add necessary css files into the index.html file.


<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css" />


<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css" />

<link rel="stylesheet"
        href="_content/SiemensIXBlazor/css/siemens-ix/ix-aggrid.css" />

<AGGrid 
    @ref="agGridRef" 
    Id="grid1" 
    Class="ag-theme-alpine-dark ag-theme-ix" 
    Style="height: 150px; width: 600px">
</AGGrid>

AGGrid agGridRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        Dictionary<string, dynamic> row1 = new()
        {
            { "type", "Equipment" },
            { "status", "Normal" },
            { "hwVersion", "2.0" },
            { "checked", false }
        };

        Dictionary<string, dynamic> row2 = new()
        {
            { "type", "Positioner" },
            { "status", "Maintenance" },
            { "hwVersion", "1.0" },
            { "checked", true }
        };

        Dictionary<string, dynamic> row3 = new()
        {
            { "type", "Pressure sensor" },
            { "status", "Unknown" },
            { "hwVersion", "N/A" },
            { "checked", false }
        };


        GridOptions options = new GridOptions()
        {
            ColumnDefs = new List<ColumnDefs> 
            { 
                new ColumnDefs() 
                { 
                    Field = "type", 
                    HeaderName = "Type", 
                    Resizable = true, 
                    CheckboxSelection = true
                }, 
                new ColumnDefs() 
                {
                    Field = "status",
                    HeaderName = "Status",
                    Resizable = true,
                    Sortable = true,
                    Filter = true
                }, 
                new ColumnDefs() 
                { 
                    Field = "hwVersion",
                    HeaderName = "HW version",
                    Resizable= true
                } 
            },
            RowData = new List<Dictionary<string, dynamic>> { row1, row2, row3 },
            CheckboxSelection = true,
            RowSelection = "multiple",
            SuppressCellFocus = true
        };

        await agGridRef.CreateGrid(options);
    }
            
}

Avatar

<Avatar 
    Image="https://ui-avatars.com/api/?name=John+Doe">
</Avatar>

Blind

<Blind 
    Label="Test Blind" 
    Id="blind1" 
    CollapsedChangedEvent="(value) => BlindEventHandler(value)">
Test content
</Blind>

<Breadcrumb Id="breadcrumb-1" 
            Class="editor-breadcrumb" 
            ItemClicked="(label) => ClickedOnBreadcrumb(label)">
    <BreadcrumbItem Label="Item 1"></BreadcrumbItem>
    <BreadcrumbItem Label="Item 2"></BreadcrumbItem>
</Breadcrumb>

Button

<Button>Test Button</Button>

Card

<Card Variant="CardVariant.info">
    <ix-icon name="capacity"></ix-icon>
    <ix-typography bold>Number of components</ix-typography>
    <ix-typography>
        Item 1<br />
        Item 2<br />
        Item 3
    </ix-typography>
    <ix-typography format="h1">3</ix-typography>
</Card>

Card List

<CardList Id="carlist1" Label="Stack Layout" ShowAllCount="12" ListStyle="Enums.CardList.CardListStyle.Stack" CollapseChangedEvent="CardListCollapsedChanged" 
ShowAllClickEvent="CardListShowAllClicked" ShowMoreCardClickEvent="CardListShowMoreClicked">
    <PushCard Icon="rocket"
              Notification="3"
              Heading="Heading content"
              SubHeading="Subheading"
              Variant="PushCardVariant.notification"></PushCard>
    <PushCard Icon="bulb"
              Notification="1"
              Heading="Heading content"
              SubHeading="Subheading"
              Variant="PushCardVariant.warning"></PushCard>
    <PushCard Icon="rocket"
              Notification="3"
              Heading="Heading content"
              SubHeading="Subheading"
              Variant="PushCardVariant.success"></PushCard>
</CardList>

Push Card

<PushCard Icon="rocket"
        Notification="3"
        Heading="Heading content"
        SubHeading="Subheading"
        Variant="PushCardVariant.notification"></PushCard>

Action Card

<ActionCard
      Icon="refresh"
      Heading="Scan for new devices"
      SubHeading="Secondary text"
      Variant="PushCardVariant.notification"
></ActionCard>

Icon Button

<IconButton Icon="info"></IconButton>

Category filter

<CategoryFilter 
    @ref="categoryFilter" 
    Id="category-filter-1" 
    Placeholder="Filter by"
    RepeatCategories="false"
    FilterChangedEvent="FilterStateChanged"
    InputChangedEvent="InputStateChanged">
</CategoryFilter>

CategoryFilter categoryFilter;
Dictionary<string, Category> categoriesDict;
FilterState filterState;

protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            categoriesDict = new();
            categoriesDict.Add("ID_1", new Category()
            {
                Label = "Vendor",
                Options = new string[]
                {
                    "Apple", "MS", "Siemens"
                }
            });

            filterState = new()
            {
                Tokens = new string[]
                {
                    "Custom filter text"
                },
                Categories = new FilterStateCategory[]
                {
                    new FilterStateCategory()
                    {
                        Id = "ID_1",
                        Value = "IBM",
                        Operator = "Not Equal"
                    }
                }
            };

            categoryFilter.Categories = categoriesDict;
            categoryFilter.FilterState = filterState;
        }
    }

ECharts

<ECharts Id="chart1" @ref="chart1">
</ECharts>

ECharts chart1;

// Create the dynamic object
var dynamicObject = new Dictionary<string, object>();

// Create the tooltip object
var tooltip = new Dictionary<string, object>
{
    { "trigger", "axis" },
    { "axisPointer", new Dictionary<string, object> { { "type", "shadow" } } }
};
dynamicObject.Add("tooltip", tooltip);

// Create the legend object
dynamicObject.Add("legend", new Dictionary<string, object>());

// Create the grid object
var grid = new Dictionary<string, object>
{
    { "left", "3%" },
    { "right", "4%" },
    { "bottom", "3%" },
    { "containLabel", true }
};
dynamicObject.Add("grid", grid);

// Create the xAxis object
var xAxis = new List<Dictionary<string, object>>
{
    new Dictionary<string, object>
    {
        { "type", "category" },
        { "data", new List<string> { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" } }
    }
};
dynamicObject.Add("xAxis", xAxis);

// Create the yAxis object
var yAxis = new List<Dictionary<string, object>>
{
    new Dictionary<string, object> { { "type", "value" } }
};
dynamicObject.Add("yAxis", yAxis);

// Create the series object
var series = new List<Dictionary<string, object>>
{
    new Dictionary<string, object>
    {
        { "name", "Direct" },
        { "type", "bar" },
        { "stack", "Ad" },
        { "emphasis", new Dictionary<string, object> { { "focus", "series" } } },
        { "data", new List<int> { 320, 332, 301, 334, 390, 330, 320 } }
    },
    new Dictionary<string, object>
    {
        { "name", "Email" },
        { "type", "bar" },
        { "emphasis", new Dictionary<string, object> { { "focus", "series" } } },
        { "data", new List<int> { 120, 132, 101, 134, 90, 230, 210 } }
    },
    new Dictionary<string, object>
    {
        { "name", "Union Ads" },
        { "type", "bar" },
        { "emphasis", new Dictionary<string, object> { { "focus", "series" } } },
        { "data", new List<int> { 220, 182, 191, 234, 290, 330, 310 } }
    },
    // Add more series objects as needed
};
dynamicObject.Add("series", series);

chart1.InitialChart(object1);

Checkbox

<div style="margin-bottom: 1rem">
  <input type="checkbox" id="checkbox_01" />
  <label for="checkbox_01">Simple checkbox</label>
</div>

<div>
  <input type="checkbox" id="checkbox_02" disabled />
  <label for="checkbox_02">Disabled checkbox</label>
</div>

Chip

<Chip Icon="print" 
      Label="Chip with icon" 
      Id="chip1" 
      Closable="true" 
      ClosedEvent="@ChipClosedEventHandler">
</Chip>

##Content

<Content>
    <ContentHeader Id="myheader" HeaderTitle="My Content Page" />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
</Content>

Content Header

<ContentHeader Id="content-header-1" HasBackButton="true"
            HeaderTitle="Content title"
            HeaderSubTitle="Subtitle"
            BackButtonClickedEvent="ContentHeaderBackButtonClicked">
    Test
</ContentHeader>

Date Dropdown

<DateDropdown Id="datedropdown1" DateRangeId="last-7" Format="MM/dd/yyyy" DateRangeOptions="_dateRangeOptions" DateRangeChangeEvent="Callback"></DateDropdown>

    readonly DateDropdownOption[] _dateRangeOptions =
{
    new()
    {
        Id = "last-7",
        Label = "Last 7 days",
        From = DateTime.Today.AddDays(-7).ToString("MM/dd/yyyy"),
        To = DateTime.Today.ToString("MM/dd/yyyy")
    },
    new()
    {
        Id = "today",
        Label = "Today",
        From = DateTime.Today.ToString("MM/dd/yyyy"),
        To = DateTime.Today.ToString("MM/dd/yyyy")
    }
};

private void Callback(DateDropdownResponse selectedDateDropdown)
{
    Console.WriteLine(selectedDateDropdown.Id);
}

Date picker

<DatePicker From="2023/02/01" 
            To="2023/02/15" 
            Id="timepicker1" 
            DateChangeEvent="(date) => DateChangeEventTest(date)">
</DatePicker>

Date time picker

<DateTimePicker 
        DateChangeEvent="(date) => DateChangeEventTest(date)" 
        From="2023/02/01" 
        To="2023/02/15" 
        Id="datetimepicker1"
        TimeChangeEvent="(date) => DateChangeEventTest(date)">
</DateTimePicker>

Divider

<Divider></Divider>

Drawer

<Button ClickEvent="DrawerButtonClicked">Drawer Button</Button>
<Drawer @ref="drawer1" Id="drawer1">
    <span>Some content of drawer</span>
</Drawer>

Drawer drawer1;

protected override void OnAfterRender(bool firstRender)
{
    if(firstRender)
    {
        drawer1.FullHeight = true;
        drawer1.CloseOnClickOutside = true;
    }
}

private void DrawerButtonClicked()
{
    drawer1.Show = !drawer1.Show;
}

<DropdownButton Label="Dropdown" Variant="Primary" Icon="checkboxes">
    <DropdownItem Label="Item 1" Value="1"></DropdownItem>
    <DropdownItem Label="Item 2" Value="2"></DropdownItem>
    <DropdownItem Label="Item 3" Value="3"></DropdownItem>
</DropdownButton>

<Button Id="triggerId">Open</Button>
<Dropdown Trigger="triggerId">
  <DropdownItem Label="Item 1"></DropdownItem>
  <DropdownItem Label="Item 2"></DropdownItem>
  <DropdownItem Label="Item 3"></DropdownItem>
</Dropdown>

Empty State

<EmptyState
  Header="No elements available"
  SubHeader="Create an element first"
  Icon="add"
  Action="Create element"
></EmptyState>

Event list

<EventList>
    <EventListItem Id="event-list-item-1" Label="Item 1" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
    <EventListItem Id="event-list-item-2" Label="Item 2" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
    <EventListItem Id="event-list-item-3" Label="Item 3" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
</EventList>

<ExpandingSearch Id="exp-search" 
                 ValueChangedEvent="(value) => SearchValueChanged(value)">
</ExpandingSearch>

Flip

<FlipTile>
    <div slot="header">Flip header</div>

    <div slot="footer">
      <div>Predicted maintenance date</div>
      <div class="d-flex align-items-center">
        <ix-icon name="info" size="16"></ix-icon>2021-06-22
      </div>
    </div>

    <FlipTileContent> Example 1 </FlipTileContent>
    <FlipTileContent> Example 2 </FlipTileContent>
</FlipTile>
  • AG grid

Group

<Group Id="group1" Header="Header text" SubHeader="Subheader text">
    <GroupItem Id="groupitem1" Text="Example text 1"></GroupItem>
    <GroupItem Id="groupitem2" Text="Example text 2"></GroupItem>
    <GroupItem Id="groupitem3" Text="Example text 3" SelectedChangeEvent="GroupItemSelectedChanged"></GroupItem>
</Group>

HTML table

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Input

<form class="needs-validation m-2">
  <input
    class="form-control"
    defaultValue="Some example text"
    placeholder="Enter text here"
    type="text"
  />
</form>

Key Value List

<KeyValueList>
  <KeyValue
    Label="Label"
    LabelPosition="left"
    Value="Value"
  ></KeyValue>

  <KeyValue
    Label="Label"
    LabelPosition="left"
    Value="Value"
  ></KeyValue>

  <KeyValue
    Label="Label"
    LabelPosition="left"
    Value="Value"
  ></KeyValue>
</KeyValueList>

Key Value

<KeyValue Label="Label">
  <input
    class="form-control"
    placeholder="Enter text here"
    type="text"
    slot="custom-value"
  />
</KeyValue>

KPI

<KPI Label="Motor speed" Value="Nominal"></KPI>

Layout Grid

<LayoutGrid>
  <Row>
    <Col><ix-typography format="display">1</ix-typography></Col>
    <Col><ix-typography format="display">2</ix-typography></Col>
    <Col><ix-typography format="display">3</ix-typography></Col>
    <Col><ix-typography format="display">4</ix-typography></Col>
    <Col><ix-typography format="display">5</ix-typography></Col>
    <Col><ix-typography format="display">6</ix-typography></Col>
  </Row>
</LayoutGrid>

<LinkButton Url="https://ix.siemens.io/">Siemens IX</LinkButton>

Message bar

<MessageBar ClosedChangeEvent="MessageboxClosed" Id="messagebar1" Type="MessageBarType.Danger">
    <div class="d-flex align-items-center justify-content-between">
        Message text <ix-button>Action</ix-button>
    </div>
</MessageBar>

<div class="@modalClass" style="display:@modalDisplay">
    <div class="modal-header">
        Message headline
        <IconButton
            Ghost="true"
            Icon="close"
            Class="dismiss-modal"
            ClickEvent="() => CloseModal()"
        ></IconButton>
    </div>
    <div class="modal-body">Message text lorem ipsum</div>
    <div class="modal-footer">
        <Button Outline="true" 
                Class="dismiss-modal"
                ClickEvent="() => CloseModal()"> 
             Cancel 
        </Button>
        <Button ClickEvent="() => CloseModal()" 
                Class="close-modal">
             OK
        </Button>
    </div>
</div>

string modalClass = "";
string modalDisplay = "none;";

private void OpenModal()
{
    modalDisplay = "block;";
    modalClass = "show";
}

private void CloseModal()
{
    modalDisplay = "none;";
    modalClass = "";
}

Pagination

<Pagination Id="pagination-1" 
    Advanced="true" 
    Count="100" 
    ItemCountChangedEvent="PaginationItemCountChanged" 
    PageSelectedEvent="PaginationPageSelected">
</Pagination>

Pane

<PaneLayout Id="pane-layout"
                Variant="@PaneVariant.floating"
                Layout="full-horizontal"
                Borderless="true">
    <Pane Id="pane1" Heading="Pane Left" Slot="left" Size="33%">
        <p>This is the left pane.</p>
    </Pane>

    <Pane Id="pane2"  Heading="Pane Top" Slot="top" Size="33%">
        <p>This is the top pane.</p>
    </Pane>

    <Pane Id="pane3" Heading="Pane Right" Slot="right" Size="33%">
        <p>This is the right pane.</p>
    </Pane>

    <Pane Id="pane4" Heading="Pane Bottom" Slot="bottom" Size="33%">
        <p>This is the bottom pane.</p>
    <Pane>
</PaneLayout>

Pill

<Pill Variant="PillVariant.custom" Color="white" Background="purple">
    Label
</Pill>

Radio button

<div class="example-list">
  <input checked id="checkbox_1_1" name="group_1" type="radio" />
  <label for="checkbox_1_1"> Checked </label>

  <input id="checkbox_1_2" name="group_1" type="radio" />
  <label for="checkbox_1_2"> Normal </label>

  <input disabled id="checkbox_1_3" name="group_1" type="radio" />
  <label for="checkbox_1_3"> Disabled </label>
</div>

Select

<Select ItemSelectionChangeEvent=SelectItemSelectedChanged 
AddItemEvent="SelectItemAdded" Mode="SelectMode.Single" SelectedIndices="2" Id="select1">
    <SelectItem Id="selectItem1" Label="Item 1" Value="1"></SelectItem>
    <SelectItem Id="selectItem2" Label="Item 2" Value="2"></SelectItem>
</Select>

Spinner

<Spinner></Spinner>

Split button

<SplitButton Id="split-button-1" 
             Label="Split Button" 
             SplitIcon="chevron-down-small" 
             ButtonClickedEvent="SplitButtonClicked">
</SplitButton>

Tabs

<div class="example">
    <Tabs Id="tabs-demo">
        <ix-tab-item data-tab-id="0">Tab 1</ix-tab-item>
        <ix-tab-item data-tab-id="1">Tab 2</ix-tab-item>
        <ix-tab-item data-tab-id="2">Tab 3</ix-tab-item>
    </Tabs>
    <div data-tab-content="0" class="show">Content Tab 1</div>
    <div data-tab-content="1">Content Tab 2</div>
    <div data-tab-content="2">Content Tab 3</div>
</div>

.example {
    display: block;
    position: relative;
    width: 100%;
}

div[data-tab-content] {
    display: none;
}

div[data-tab-content].show {
    display: block;
}

Text area

<textarea class="form-control" placeholder="Enter text here"></textarea>

Tile

<Tile Size="TileSize.Medium" Class="mr-1">
    <div slot="header">Tile header</div>
    <div class="text-l">92.8 °C</div>
</Tile>

Time picker

<TimePicker></TimePicker>

Toast

<Toast @ref="toast"></Toast>

private Toast toast;

ToastConfig config = new ToastConfig()
{
    Message = "Test message",
    Type = "info"
}

toast.ShowToast("test message", "info");

Toggle Buttons

<ToggleButton>Normal</ToggleButton>
<ToggleButton Id="toggle-btn-1" Pressed="true">Pressed</ToggleButton>

<IconToggleButton Outline="true" Icon="checkboxes"></IconToggleButton>
<IconToggleButton
    Outline="true"
    Icon="checkboxes"
    Pressed="true"
></IconToggleButton>

Toggle

<Toggle></Toggle>

Tooltip

<div style="padding: 4rem">
    <Button DataTooltip="myTooltip">Hover me</Button>
    <ix-tooltip for="[data-tooltip='myTooltip']">
        Some example content
    </ix-tooltip>
</div>

Tree

<div style="height: 8rem; width: 100%">
    <Tree Id="tree-1" Root="root" ContextChangedEvent="TreeContextChangeEvent" 
    NodeClickedEvent="TreeNodeClicked" 
    NodeRemovedEvent="NodeRemoved" 
    NodeToggledEvent="TreeNodeToggled"  
    @ref="tree"></Tree>
</div>

Tree tree;

Dictionary<string, TreeNode> treeNodes = new();

treeNodes.Add("root", new TreeNode()
{
    Id = "root",
    HasChildren = true,
    Children = new List<string>(){"sample"}
});

treeNodes.Add("sample", new TreeNode()
{
    Id = "sample",
    Data = new TreeData()
    {
        Name = "Sample"  
    },
    HasChildren = true,
    Children = new List<string>(){"sample-child-1", "sample-child-2"}
});

treeNodes.Add("sample-child-1", new TreeNode()
{
    Id = "sample-child-1",
    Data = new TreeData()
    {
        Name = "Sample Child 1"
    },
    HasChildren = false,
    Children = new List<string>() {}
});

treeNodes.Add("sample-child-2", new TreeNode()
    {
        Id = "sample-child-2",
        Data = new TreeData()
        {
            Name = "Sample Child 2"
        },
        HasChildren = false,
        Children = new List<string>() { }
    });


tree.TreeModel = treeNodes;

Upload

<Upload Id="file-upload-test" 
        FileChangedEvent="(data) => FileChanged(data)">
</Upload>

Form validation

<form class="row g-3 needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4">
      <label for="validationCustom01" class="form-label">
        First name
      </label>
      <input
        type="text"
        class="form-control"
        id="validationCustom01"
        value=""
        required
      />
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <ix-validation-tooltip message="Cannot be empty!">
        <label for="validationCustom02" class="form-label">
          Last name
        </label>
        <input
          type="text"
          class="form-control"
          id="validationCustom02"
          value=""
          required
        />
      </ix-validation-tooltip>
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <label for="validationCustomUsername" class="form-label">
        Username
      </label>
      <input
        type="text"
        class="form-control"
        id="validationCustomUsername"
        aria-describedby="inputGroupPrepend"
        required
        minlength="4"
      />
      <div class="invalid-feedback">Please choose a username.</div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Workflow

<WorkflowSteps Id="wf-steps" StepSelectedEvent="(index) => WfSelectedEvent(index)">
    <WorkflowStep Status="WorkflowStatus.Done">Step 1</WorkflowStep>
    <WorkflowStep Status="WorkflowStatus.Success">Step 2</WorkflowStep>
    <WorkflowStep Status="WorkflowStatus.Open">Step 3</WorkflowStep>
    <WorkflowStep Status="WorkflowStatus.Warning">Step 4</WorkflowStep>
    <WorkflowStep Status="WorkflowStatus.Error">Step 5</WorkflowStep>
    <WorkflowStep Disabled="true">Step 6</WorkflowStep>
</WorkflowSteps>

Usage

You can follow the original documentation and use native Javascript components.

<ix-button class="m-1" outline variant="Secondary">
    Button
</ix-button>

Or you can use supported components as a native Blazor components.

<Button Class="m-1" Outline="true" Variant="Secondary">
    Button
</Button>

If you want to use native siemens-ix html elements, you have to handle events over javascript interops.

📝 License

Copyright © 2024 Siemens AG.

Siemens Third-Party Software Disclosure Document

This project is MIT licensed.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.5.1 186 8/1/2024
0.5.0 107 8/1/2024