Home Original page

GitHub - siemens/ix-blazor: Siemens IX library for Blazor

Siemens IX for Blazor

Installation

Install the Siemens.IX.Blazor package from the NuGet package manager.

.NET CLI

dotnet add package Siemens.IX.Blazor

Package Manager

NuGet\Install-Package Siemens.IX.Blazor

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>

    <!--Deprecated after v0.4.0-->
    <link
      rel="stylesheet"
      href="_content/Siemens.IX.Blazor/css/siemens-ix/ix-icons.css"
    />

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

Caution

If you want to use this library with a Blazor Web App, you need to set the render mode to InteractiveServer. You can find more information at here.

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>
  <Menu Id="nav-menu-1">
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
  </Menu>
</BasicNavigation>

Menu

<Menu Id="nav-menu-1">
  <MenuItem Home="true" TabIcon="home"> Home </MenuItem>
  <MenuItem TabIcon="globe"> Normal Tab </MenuItem>
  <MenuItem TabIcon="star" disabled> Disabled tab </MenuItem>
  <MenuItem TabIcon="star"> With other icon </MenuItem>
  <MenuItem TabIcon="globe" Style="display: none">
    Should not be visible
  </MenuItem>
</Menu>
@* Menu Category *@
<BasicNavigation>
  <Menu>
    <MenuItem Home="true" Icon="home">Home</MenuItem>
    <MenuItem Icon="globe">Normal Tab</MenuItem>
    <MenuCategory Label="Top level Category" Icon="rocket">
      <MenuItem Icon="globe">Nested Tab</MenuItem>
      <MenuItem Icon="globe">Nested Tab</MenuItem>
    </MenuCategory>
  </Menu>
</BasicNavigation>
@* Menu Avatar *@
<Menu Id="nav-menu-1">
  <MenuAvatar Id="nav-avatar-menu-1" Image="https://ui-avatars.com/api/?name=John+Doe">
    <MenuAvatarItem Id="nav-avatar-item-1" Label="Option 1"></MenuAvatarItem>
  </MenuAvatar>
  <MenuItem Home="true" TabIcon="home"> Home </MenuItem>
  <MenuItem TabIcon="globe"> Normal Tab </MenuItem>
  <MenuItem TabIcon="star" Disabled="true"> Disabled tab </MenuItem>
  <MenuItem TabIcon="star"> With other icon </MenuItem>
  <MenuItem TabIcon="globe" Style="display: none">
    Should not be visible
  </MenuItem>
</Menu>

About and Legal

<BasicNavigation>
  <placeholder-logo slot="logo"></placeholder-logo>
  <Menu Id="nav-menu-1">
    <MenuAbout @ref="menuAboutElement">
      <MenuAboutItem Label="Tab 1">Content 1</MenuAboutItem>
      <MenuAboutItem Label="Tab 2">Content 2</MenuAboutItem>
    </MenuAbout>
  </Menu>
</BasicNavigation>
MenuAbout menuAboutElement;

menuAboutElement.ToggleAbout(true);

Menu Settings

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

menuAboutElement.ToggleSettings(true);

Map Navigation

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

Map Navigation Overlay

<MapNavigationOverlay  Id="overlay"></MapNavigationOverlay>

Popover News

<BasicNavigation>
  <placeholder-logo slot="logo"></placeholder-logo>
  <Menu Id="nav-menu-1">
    <MenuAbout>
      <MenuAboutItem Label="Example"> </MenuAboutItem>
    </MenuAbout>
    <MenuAboutNews Label="Test" Show="true" AboutItemLabel="Example">
      Test
    </MenuAboutNews>
  </Menu>
</BasicNavigation>

AGGrid Preview

This component is currently in preview version.

Installation

Add necessary css files into the index.html file.

<!-- Include the core CSS, this is needed by the grid -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"
/>

<!-- Include the theme CSS, only need to import the theme you are going to use -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"
/>

<link
  rel="stylesheet"
  href="_content/Siemens.IX.Blazor/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

<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.outline"></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.outline"></PushCard>

Action Card

<ActionCard
      Icon="refresh"
      Heading="Scan for new devices"
      SubHeading="Secondary text"
      Variant="PushCardVariant.filled"
></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"
      TooltipText="Tooltip Text"
      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

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

Dropdown Button

<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>

Dropdown

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

Dropdown Header

<Button Id="triggerId">Open</Button>
<Dropdown Trigger="triggerId">
  <DropdownHeader Label="Category"></DropdownHeader>
  <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>

Expanding search

<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>

Link Button

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

Message bar

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

Modal

<div class="@modalClass" style="display:@modalDisplay">
    <div class="modal-header">
        Message headline
        <IconButton
            Icon="close"
            Class="dismiss-modal"
            ClickEvent="() => CloseModal()"
        ></IconButton>
    </div>
    <div class="modal-body">Message text lorem ipsum</div>
    <div class="modal-footer">
        <Button 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" PillColor="white" Background="purple" TooltipText="Tooltip Text">
    Label
</Pill>

Progress Indicator

<ProgressIndicator Value="75"
                   Label="Processing data..."
                   HelperText="Please wait while we process your request"
                   Size="@ProgressIndicatorSize.lg"
                   Status="@ProgressIndicatorStatus.info" />

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>

Slider

<Slider Id="slider-demo" Min="0" Max="50" Step="5" Value="0" Marker="[0, 10, 20, 30, 40, 50]">
    <span slot="label-start">0</span>
    <span slot="label-end">50</span>
</Slider>

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 Id="timePicker1"
            Class="my-time-picker"
            HourInterval="1"
            MinuteInterval="15"
            SecondInterval="30"
            HideHeader="false"
            Corners="DatePickerCorners.Rounded">
</TimePicker>

Toast

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

ToastConfig config = new ToastConfig()
{
    Message = "Test message",
    Position = ToastPosition.BottomRight,
    Type = "info"
};

await toast.ShowToast(config);

ToastConfig configWithAction = new ToastConfig()
{
    Title = "Changes applied",
    Message = "<div>Your settings were saved successfully.</div>",
    Action = "<ix-button variant=\"tertiary\" icon=\"undo\">Undo</ix-button>",
    Type = "success",
    AutoClose = true,
    AutoCloseDelay = 5000
};

await toast.ShowToast(configWithAction);

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

Tooltip

<Button class="any-class" aria-describedby="tooltip-1">
    Save
</Button>
<Tooltip Id="tooltip-1" For=".any-class">
    When you click, all changes will be saved
</Tooltip>

Validation Tooltip - Form Validation

<form class="needs-validation" novalidate @onsubmit="()=>{}">
	<ValidationTooltip Message="Cannot be empty!" Placement="ValidationTooltipPlacement.Top">
		<label for="validationCustom01">Name</label>
		<input id="validationCustom01" value="" required />
	</ValidationTooltip>
	<Button Type="ButtonType.Submit">Submit</Button>
</form>

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",
        Icon = "star"
    },
    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;

Typography

<Typography Format="TypographyFormat.Label" TextColor="TypographyColor.Std" TextDecoration="TextDecoration.None">Label, Std, None</Typography>
<Typography Bold="true" Format="TypographyFormat.Code_Lg" TextColor="TypographyColor.Contrast" TextDecoration="TextDecoration.Line_Through">Bold, Code_Lg, Contrast, Line_Through</Typography>

Upload

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

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" variant="Secondary">
    Button
</ix-button>

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

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

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

📝 License

Copyright © 2025 Siemens AG.

Siemens Third-Party Software Disclosure Document

This project is MIT licensed.