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 (since 0.4.8)
Application Header (since 0.4.8)
Basic Navigation
Menu
About and Legal
Menu Settings
Map Navigation
Popover News
AGGrid (Preview) (since 0.4.2)
Avatar (since v0.4.0)
Blind
Breadcrumb
Button
Card (since 0.5.0)
Card List (since v0.3.3)
Push Card (since v0.3.3)
Action Card (since v0.3.3)
Icon Button
Category Filter
ECharts (since v0.3.2)
Checkbox
Chip
Content (since 0.5.0)
Content Header (since v0.3.3)
Date Dropdown
Date Picker
Date Time Picker (since 0.5.0)
Divider
Drawer
Dropdown Button
Dropdown
Empty State (since v0.3.3)
Event List
Expanding Search
Flip
Group
HTML Table
Input
Key Value List (since v0.3.3)
Key Value (since v0.3.3)
KPI
Layout Grid (since v0.4.0)
Link Button (since v0.4.0)
Message Bar
Modal
Pane (since 0.5.0)
Pagination
Pill
Radio Button
Select
Spinner
Split Button
Tabs
Text Area
Tile
Time Picker
Toast
Toggle Buttons (since v0.4.0)
Toggle
Tooltip
Tree
Typography
Upload
Form Validation
Workflow

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

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

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>

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.Danger">
    <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
            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>

Validation Tooltip

<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"
    },
    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>

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

Siemens Third-Party Software Disclosure Document

This project is MIT licensed.

Files

README.md

Latest commit

History

README.md

File metadata and controls

Siemens IX for Blazor

Installation

.NET CLI

Package Manager

Theme Switching

Supported Components

Application

Application Header

Basic Navigation

Menu

About and Legal

Menu Settings

Map Navigation

Popover News

AGGrid Preview

Installation

Avatar

Blind

Breadcrumb

Button

Card

Card List

Push Card

Action Card

Icon Button

Category filter

ECharts

Checkbox

Chip

Content Header

Date Dropdown

Date picker

Date time picker

Divider

Drawer

Dropdown button

Dropdown

Empty State

Event list

Expanding search

Flip

Group

HTML table

Input

Key Value List

Key Value

KPI

Layout Grid

Link Button

Message bar

Modal

Pagination

Pane

Pill

Radio button

Select

Spinner

Split button

Tabs

Text area

Tile

Time picker

Toast

Toggle Buttons

Toggle

Tooltip

Validation Tooltip

Tree

Typography

Upload

Form validation

Workflow

Usage

📝 License