Install the SiemensIXBlazor
package from the NuGet package manager.
dotnet add package SiemensIXBlazor
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>
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);
}
}
- 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 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 Header (since v0.3.3)
- Date Picker
- Date Time Picker
- 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
- 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
<BasicNavigation ApplicationName="Application name">
<placeholder-logo slot="logo"></placeholder-logo>
<NavigationMenu Id="nav-menu-1">
<NavigationMenuItem>Item 1</NavigationMenuItem>
<NavigationMenuItem>Item 2</NavigationMenuItem>
</NavigationMenu>
</BasicNavigation>
<NavigationMenu Id="nav-menu-1">
<NavigationMenuItem Home="true" TabIcon="home"> Home </NavigationMenuItem>
<NavigationMenuItem TabIcon="globe"> Normal Tab </NavigationMenuItem>
<NavigationMenuItem TabIcon="star" disabled> Disabled tab </NavigationMenuItem>
<NavigationMenuItem TabIcon="star"> With other icon </NavigationMenuItem>
<NavigationMenuItem TabIcon="globe" Style="display: none">
Should not be visible
</NavigationMenuItem>
</NavigationMenu>
@* Category *@
<BasicNavigation>
<NavigationMenu>
<NavigationMenuItem Home="true" Icon="home">Home</NavigationMenuItem>
<NavigationMenuItem Icon="globe">Normal Tab</NavigationMenuItem>
<NavigationMenuCategory Label="Top level Category" Icon="rocket">
<NavigationMenuItem Icon="globe">Nested Tab</NavigationMenuItem>
<NavigationMenuItem Icon="globe">Nested Tab</NavigationMenuItem>
</NavigationMenuCategory>
</NavigationMenu>
</BasicNavigation>
@* Avatar *@
<NavigationMenu Id="nav-menu-1">
<NavigationMenuAvatar Id="nav-avatar-menu-1" Image="https://ui-avatars.com/api/?name=John+Doe">
<NavigationMenuAvatarItem Id="nav-avatar-item-1" Label="Option 1"></NavigationMenuAvatarItem>
</NavigationMenuAvatar>
<NavigationMenuItem Home="true" TabIcon="home"> Home </NavigationMenuItem>
<NavigationMenuItem TabIcon="globe"> Normal Tab </NavigationMenuItem>
<NavigationMenuItem TabIcon="star" Disabled="true"> Disabled tab </NavigationMenuItem>
<NavigationMenuItem TabIcon="star"> With other icon </NavigationMenuItem>
<NavigationMenuItem TabIcon="globe" Style="display: none">
Should not be visible
</NavigationMenuItem>
</NavigationMenu>
<BasicNavigation>
<placeholder-logo slot="logo"></placeholder-logo>
<NavigationMenu Id="nav-menu-1">
<AboutMenu @ref="aboutMenuElement">
<AboutMenuItem Label="Tab 1">Content 1</AboutMenuItem>
<AboutMenuItem Label="Tab 2">Content 2</AboutMenuItem>
</AboutMenu>
</NavigationMenu>
</BasicNavigation>
AboutMenu aboutMenuElement;
aboutMenuElement.ToggleAbout(true);
<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);
<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>
<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>
This component is currently in preview version.
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
Image="https://ui-avatars.com/api/?name=John+Doe">
</Avatar>
<Blind
Label="Test Blind"
Id="blind1"
CollapsedChangedEvent="(value) => BlindEventHandler(value)">
Test content
</Blind>
<Breadcrumb Id="breadcrumb-1"
Class="editor-breadcrumb"
ItemClicked="(label) => ClickedOnBreadcrumb(label)">
<BreadcrumbItem Label="Item 1"></BreadcrumbItem>
<BreadcrumbItem Label="Item 2"></BreadcrumbItem>
</Breadcrumb>
<Button>Test Button</Button>
<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>
<PushCard Icon="rocket"
Notification="3"
Heading="Heading content"
SubHeading="Subheading"
Variant="PushCardVariant.notification"></PushCard>
<ActionCard
Icon="refresh"
Heading="Scan for new devices"
SubHeading="Secondary text"
Variant="PushCardVariant.notification"
></ActionCard>
<IconButton Icon="info"></IconButton>
<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 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);
<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 Icon="print"
Label="Chip with icon"
Id="chip1"
Closable="true"
ClosedEvent="@ChipClosedEventHandler">
</Chip>
<ContentHeader Id="content-header-1" HasBackButton="true"
HeaderTitle="Content title"
HeaderSubTitle="Subtitle"
BackButtonClickedEvent="ContentHeaderBackButtonClicked">
Test
</ContentHeader>
<DatePicker From="2023/02/01"
To="2023/02/15"
Id="timepicker1"
DateChangeEvent="(date) => DateChangeEventTest(date)">
</DatePicker>
<DateTimePicker
DateChangeEvent="(date) => DateChangeEventTest(date)"
From="2023/02/01"
To="2023/02/15"
Id="datetimepicker1"
TimeChangeEvent="(date) => DateChangeEventTest(date)">
</DateTimePicker>
<Divider></Divider>
<Button ClickEvent="DrawerButtonClicked">Drawer Button</Button>
<Drawer @ref="drawer1" Id="drawer1">
<span>Some content of drawer</span>
</Drawer>
Drawer drawer1;
protected override void OnAfterRender(bool firstRender)
{
if(firstRender)
{
drawer1.FullHeight = true;
drawer1.CloseOnClickOutside = true;
}
}
private void DrawerButtonClicked()
{
drawer1.Show = !drawer1.Show;
}
<DropdownButton Label="Dropdown" Variant="Primary" Icon="checkboxes">
<DropdownItem Label="Item 1" Value="1"></DropdownItem>
<DropdownItem Label="Item 2" Value="2"></DropdownItem>
<DropdownItem Label="Item 3" Value="3"></DropdownItem>
</DropdownButton>
<Button Id="triggerId">Open</Button>
<Dropdown Trigger="triggerId">
<DropdownItem Label="Item 1"></DropdownItem>
<DropdownItem Label="Item 2"></DropdownItem>
<DropdownItem Label="Item 3"></DropdownItem>
</Dropdown>
<EmptyState
Header="No elements available"
SubHeader="Create an element first"
Icon="add"
Action="Create element"
></EmptyState>
<EventList>
<EventListItem Id="event-list-item-1" Label="Item 1" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
<EventListItem Id="event-list-item-2" Label="Item 2" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
<EventListItem Id="event-list-item-3" Label="Item 3" ItemCLickEvent="(label) => DropdownButtonClicked(label)"></EventListItem>
</EventList>
<ExpandingSearch Id="exp-search"
ValueChangedEvent="(value) => SearchValueChanged(value)">
</ExpandingSearch>
<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 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>
<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>
<form class="needs-validation m-2">
<input
class="form-control"
defaultValue="Some example text"
placeholder="Enter text here"
type="text"
/>
</form>
<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>
<KeyValue Label="Label">
<input
class="form-control"
placeholder="Enter text here"
type="text"
slot="custom-value"
/>
</KeyValue>
<KPI Label="Motor speed" Value="Nominal"></KPI>
<LayoutGrid>
<Row>
<Col><ix-typography format="display">1</ix-typography></Col>
<Col><ix-typography format="display">2</ix-typography></Col>
<Col><ix-typography format="display">3</ix-typography></Col>
<Col><ix-typography format="display">4</ix-typography></Col>
<Col><ix-typography format="display">5</ix-typography></Col>
<Col><ix-typography format="display">6</ix-typography></Col>
</Row>
</LayoutGrid>
<LinkButton Url="https://ix.siemens.io/">Siemens IX</LinkButton>
<MessageBar ClosedChangeEvent="MessageboxClosed" Id="messagebar1" Type="MessageBarType.Danger">
<div class="d-flex align-items-center justify-content-between">
Message text <ix-button>Action</ix-button>
</div>
</MessageBar>
<div class="@modalClass" style="display:@modalDisplay">
<div class="modal-header">
Message headline
<IconButton
Ghost="true"
Icon="close"
Class="dismiss-modal"
ClickEvent="() => CloseModal()"
></IconButton>
</div>
<div class="modal-body">Message text lorem ipsum</div>
<div class="modal-footer">
<Button Outline="true"
Class="dismiss-modal"
ClickEvent="() => CloseModal()">
Cancel
</Button>
<Button ClickEvent="() => CloseModal()"
Class="close-modal">
OK
</Button>
</div>
</div>
string modalClass = "";
string modalDisplay = "none;";
private void OpenModal()
{
modalDisplay = "block;";
modalClass = "show";
}
private void CloseModal()
{
modalDisplay = "none;";
modalClass = "";
}
<Pagination Id="pagination-1"
Advanced="true"
Count="100"
ItemCountChangedEvent="PaginationItemCountChanged"
PageSelectedEvent="PaginationPageSelected">
</Pagination>
<Pill Variant="PillVariant.custom" Color="white" Background="purple">
Label
</Pill>
<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 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>
<SplitButton Id="split-button-1"
Label="Split Button"
SplitIcon="chevron-down-small"
ButtonClickedEvent="SplitButtonClicked">
</SplitButton>
<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;
}
<textarea class="form-control" placeholder="Enter text here"></textarea>
<Tile Size="TileSize.Medium" Class="mr-1">
<div slot="header">Tile header</div>
<div class="text-l">92.8 °C</div>
</Tile>
<TimePicker></TimePicker>
<Toast @ref="toast"></Toast>
private Toast toast;
ToastConfig config = new ToastConfig()
{
Message = "Test message",
Type = "info"
}
toast.ShowToast("test message", "info");
<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>
<div style="padding: 4rem">
<Button DataTooltip="myTooltip">Hover me</Button>
<ix-tooltip for="[data-tooltip='myTooltip']">
Some example content
</ix-tooltip>
</div>
<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 Id="file-upload-test"
FileChangedEvent="(data) => FileChanged(data)">
</Upload>
<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>
<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>
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
.