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>

Supported Components

Basic Navigation (since v0.2.7)
Navigation Menu (since v0.2.7)
About and Legal (since v0.2.7)
Settings (since v0.2.7)
Map Navigation (since v0.2.7)
Popover News (since v0.2.7)
Blind
Breadcrumb
Button
Icon Button
Category Filter
Checkbox
Chip
Date Picker
Date Time Picker
Divider
Drawer
Dropdown Button
Dropdown
Event List
Expanding Search
Flip
Group
HTML Table
Input
KPI
Message Bar
Modal
Pagination (since v0.2.6)
Pill
Radio Button
Select
Spinner
Split Button
Tabs
Text Area
Tile
Time Picker
Toast
Toggle
Tooltip
Tree (since v0.2.9)
Upload
Form Validation
Workflow

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>

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

About and Legal

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

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>

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

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>

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>

To achieve the same behavior as in the original library (the current date is preselected) the following code can be used:

<DateTimePicker 
        DateChangeEvent="(date) => DateChangeEventTest(date)" 
        From=@DateTime.Now.ToString("yyyy/MM/dd", CultureInfo.InvariantCulture)
        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>

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>

KPI

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

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>

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;

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

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.

Files

README.md

Latest commit

History