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

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>

    <!--Deprecated after v0.4.0-->
    <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 (since 0.4.8)
Application Header (since 0.4.8)
Basic Navigation
Navigation Menu
About and Legal
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
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>
  <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>

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>

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

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

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

This project is MIT licensed.

Name		Name	Last commit message	Last commit date
Latest commit History 303 Commits
.github		.github
SiemensIXBlazor.Tests		SiemensIXBlazor.Tests
SiemensIXBlazor		SiemensIXBlazor
.gitattributes		.gitattributes
.gitignore		.gitignore
.gitmessage		.gitmessage
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
MAINTAINERS.md		MAINTAINERS.md
MenuSettingsItemTests.cs		MenuSettingsItemTests.cs
README.md		README.md
SECURITY.md		SECURITY.md
SUPPORT.md		SUPPORT.md
SiemensIXBlazor.sln		SiemensIXBlazor.sln
SiemensIXBlazor.sln.licenseheader		SiemensIXBlazor.sln.licenseheader

License

siemens/ix-blazor

Folders and files

Latest commit

History

Repository files navigation

Siemens IX for Blazor

Installation

.NET CLI

Package Manager

Theme Switching

Supported Components

Application

Application Header

Basic Navigation

Navigation Menu

About and Legal

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

Tree

Upload

Form validation

Workflow

Usage

📝 License

About

Topics