Siemens iX Components

https://ix.siemens.io/docs/components
Admin
Siemens iX Components provides a collection of reusable components for building applications within...
Tokens:133,410
Snippets:1,600
Trust Score:4.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Vue Application Context Setup

Source: https://ix.siemens.io/docs/components/modal/code

Example of providing the `IxApplicationContext` in a Vue application using `<script setup>`. This is required for using the `showModal` function and other context-aware features.

```vue
<script setup lang="ts">
import { IxApplicationContext } from '@siemens/ix-vue';
</script>

<template>
  <IxApplicationContext>
    <!-- <App /> -->
  </IxApplicationContext>
</template>
```

--------------------------------

### Basic Textarea Example

Source: https://ix.siemens.io/docs/components/textarea/code

Demonstrates the basic usage of the Textarea component. No specific setup is required beyond including the component.

```HTML
<ix-textarea label="Label" placeholder="Placeholder"></ix-textarea>
```

--------------------------------

### Basic Spinner Example

Source: https://ix.siemens.io/docs/components/spinner/code

Demonstrates the basic usage of the spinner component. No specific setup is required beyond including the component.

```HTML
<ix-spinner></ix-spinner>
```

--------------------------------

### React Application Context Setup

Source: https://ix.siemens.io/docs/components/modal/code

Example of setting up the `IxApplicationContext` in a React application, which is recommended for using modal dialogs and other context-dependent features.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { IxApplicationContext } from '@siemens/ix-react';
// import { BrowserRouter } from 'react-router-dom';
// import App from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <IxApplicationContext>
    {/*  
      <BrowserRouter>
        <App />
      </BrowserRouter>
    */}
  </IxApplicationContext>
);
```

--------------------------------

### Basic Tile Example

Source: https://ix.siemens.io/docs/components/tile

Demonstrates the basic structure and usage of the Tile component.

```html
<ix-tile>
  <div class="content">Content goes here</div>
</ix-tile>
```

--------------------------------

### Basic KPI Example

Source: https://ix.siemens.io/docs/components/kpi

A basic example demonstrating the KPI component's default appearance and functionality.

```html
<ix-kpi></ix-kpi>
```

--------------------------------

### Install AG Grid Theme Package

Source: https://ix.siemens.io/docs/components/grid/code

Install the Siemens Industrial Experience theme package for AG Grid using npm.

```bash
npm install @siemens/ix-aggrid
```

--------------------------------

### Basic Chip Example

Source: https://ix.siemens.io/docs/components/chip/code

Demonstrates the basic usage of the Chip component with different variants and themes.

```html
<ix-chip>Brand</ix-chip>
<ix-chip variant="custom">Classic</ix-chip>
<ix-chip variant="custom" background="var(--ix-color-brand-500)" chip-color="var(--ix-color-background-light)">Brand</ix-chip>
<ix-chip variant="custom" background="var(--ix-color-neutral-100)" chip-color="var(--ix-color-text-high)">Dark</ix-chip>
```

--------------------------------

### Basic Pagination Example

Source: https://ix.siemens.io/docs/components/pagination

Demonstrates the basic usage of the pagination component. This is suitable for simple navigation needs.

```html
<ix-pagination></ix-pagination>
```

--------------------------------

### Basic Toast Example

Source: https://ix.siemens.io/docs/components/toast/code

Demonstrates the basic usage of the Toast component. This is useful for simple feedback messages.

```html
<ix-toast></ix-toast>
```

--------------------------------

### Basic Key Value List

Source: https://ix.siemens.io/docs/components/key-value-list/code

A basic example of a Key Value List component.

```html
<ix-key-value-list>
  <ix-key-value>
    <span slot="key">Brand</span>
    <span slot="value">ClassicBrand</span>
  </ix-key-value>
  <ix-key-value>
    <span slot="key">Dark</span>
    <span slot="value"></span>
  </ix-key-value>
</ix-key-value-list>
```

--------------------------------

### Basic Dropdown Example

Source: https://ix.siemens.io/docs/components/dropdown/code

A simple dropdown with a trigger and a menu. This is the most basic implementation.

```html
<ix-dropdown>
  <ix-button slot="trigger" variant="primary">Brand</ix-button>
  <ix-dropdown-item>Classic</ix-dropdown-item>
  <ix-dropdown-item>Brand</ix-dropdown-item>
  <ix-dropdown-item>Dark</ix-dropdown-item>
</ix-dropdown>
```

--------------------------------

### Basic Breadcrumb Example

Source: https://ix.siemens.io/docs/components/breadcrumb/code

Demonstrates the basic structure and usage of the breadcrumb component.

```html
<ix-breadcrumb>
  <ix-breadcrumb-item label="Brand"></ix-breadcrumb-item>
  <ix-breadcrumb-item label="Classic"></ix-breadcrumb-item>
  <ix-breadcrumb-item label="Brand"></ix-breadcrumb-item>
  <ix-breadcrumb-item label="Dark"></ix-breadcrumb-item>
</ix-breadcrumb>
```

--------------------------------

### Date Picker with Custom Week Start Day

Source: https://ix.siemens.io/docs/components/date-picker/code

Configures the starting day of the week using the `week-start-index` attribute. This example sets Monday as the first day of the week (index 1).

```HTML
<ix-date-picker week-start-index="1"></ix-date-picker>
```

--------------------------------

### Basic Card Example

Source: https://ix.siemens.io/docs/components/card/code

Demonstrates the basic structure and usage of a Card component. Available in multiple frameworks.

```html
<ix-card>
  <p>Card content</p>
</ix-card>
```

--------------------------------

### Basic Select Component

Source: https://ix.siemens.io/docs/components/select/code

Demonstrates the basic usage of the Select component. No special setup is required beyond importing the component.

```html
<ix-select>
  <ix-select-option value="1">Option 1</ix-select-option>
  <ix-select-option value="2">Option 2</ix-select-option>
  <ix-select-option value="3">Option 3</ix-select-option>
</ix-select>
```

--------------------------------

### Basic Application Header

Source: https://ix.siemens.io/docs/components/application-header/code

A basic example of the application header. This snippet shows the fundamental structure and usage.

```html
<ix-application-header>
  Brand
</ix-application-header>
```

--------------------------------

### Basic Layout Grid Example

Source: https://ix.siemens.io/docs/components/layout-grid/code

Demonstrates the fundamental structure of a layout grid. Use this for basic page layout organization.

```html
<ix-layout-grid>
  <ix-col size="4">Column 1</ix-col>
  <ix-col size="8">Column 2</ix-col>
</ix-layout-grid>
```

--------------------------------

### Push Card Example

Source: https://ix.siemens.io/docs/components/card/code

Shows a Push Card, which can display notifications or KPIs. Available in multiple frameworks.

```html
<ix-push-card
  heading="Card heading"
  subheading="Card subheading"
  icon="pencil"
  notification="1"
>
  <p>Card content</p>
</ix-push-card>
```

--------------------------------

### Outlined Chip Example

Source: https://ix.siemens.io/docs/components/chip/code

Shows a chip styled with an outline.

```html
<ix-chip outline>Outlined chip</ix-chip>
```

--------------------------------

### Basic Time Input

Source: https://ix.siemens.io/docs/components/input-time/code

Demonstrates the basic usage of the time input component. No specific setup is required beyond including the component.

```html
<ix-time-input></ix-time-input>
```

--------------------------------

### Date Range Example

Source: https://ix.siemens.io/docs/components/range-field/code

Demonstrates the basic usage of the Range Field component for selecting a date range.

```html
<ix-range-field></ix-range-field>
```

--------------------------------

### React Modal Integration

Source: https://ix.siemens.io/docs/components/modal/code

Shows how to open a modal in a React application using a provided function. This example assumes the `IxApplicationContext` is set up.

```jsx
import React from 'react';
import { showModal } from '@siemens/ix-react';

const MyComponent = () => {
  const openModal = () => {
    showModal(
      <>
        <ix-modal-header header-title="Message headline"></ix-modal-header>
        <ix-modal-content>
          <p>Message text lorem ipsum</p>
        </ix-modal-content>
        <ix-modal-footer>
          <ix-button variant="secondary" data-dialog-close>
            Cancel
          </ix-button>
          <ix-button data-dialog-close>OK</ix-button>
        </ix-modal-footer>
      </>
    );
  };

  return <button onClick={openModal}>Show modal</button>;
};

export default MyComponent;
```

--------------------------------

### KPI with Alarm State

Source: https://ix.siemens.io/docs/components/kpi

Example of a KPI component configured to display an alarm state.

```html
<ix-kpi state="alarm"></ix-kpi>
```

--------------------------------

### Dropdown with Submenu Example

Source: https://ix.siemens.io/docs/components/dropdown/code

Illustrates a dropdown containing a submenu, allowing for nested navigation or options.

```html
<ix-dropdown>
  <ix-button slot="trigger" variant="primary">Brand</ix-button>
  <ix-dropdown-item>Classic</ix-dropdown-item>
  <ix-dropdown-item>Brand</ix-dropdown-item>
  <ix-dropdown-item
    icon="chevron-right"
    submenu=""
    >Dark
    <ix-dropdown slot="submenu">
      <ix-dropdown-item>Submenu 1</ix-dropdown-item>
      <ix-dropdown-item>Submenu 2</ix-dropdown-item>
    </ix-dropdown>
  </ix-dropdown-item>
</ix-dropdown>
```

--------------------------------

### Basic Card List Usage

Source: https://ix.siemens.io/docs/components/card-list/code

Demonstrates the basic structure for a card list component. This is a foundational example for implementing the component.

```html
<ix-card-list>
  <ix-card>
    <ix-card-header>Card 1</ix-card-header>
    <ix-card-content>Content 1</ix-card-content>
  </ix-card>
  <ix-card>
    <ix-card-header>Card 2</ix-card-header>
    <ix-card-content>Content 2</ix-card-content>
  </ix-card>
</ix-card-list>
```

--------------------------------

### Handling Page Selection Event (HTML)

Source: https://ix.siemens.io/docs/components/pagination/code

Provides an example of listening for the 'pageSelected' event in plain HTML, which occurs when a new page is selected.

```HTML
<ix-pagination id="pagination-element"></ix-pagination>

<script>
  const paginationElement = document.getElementById('pagination-element');
  paginationElement.addEventListener('pageSelected', (event) => {
    console.log('Page selected:', event.detail);
  });
</script>
```

--------------------------------

### HTML Radio Component API Example

Source: https://ix.siemens.io/docs/components/radio/code

Shows the direct HTML usage of the ix-radio component, setting properties as attributes.

```HTML
<ix-radio checked label="Radio Label" name="radio-group-name" required value="radio-value"></ix-radio>
```

--------------------------------

### Large Spinner Example

Source: https://ix.siemens.io/docs/components/spinner/code

Shows how to use the large variant of the spinner component. This is useful for indicating longer running processes.

```HTML
<ix-spinner size="large"></ix-spinner>
```

--------------------------------

### Vue Radio Component API Example

Source: https://ix.siemens.io/docs/components/radio/code

Demonstrates the usage of the ix-radio component within a Vue.js application.

```Vue
<ix-radio :checked="true" :disabled="true" label="Radio Label" name="radio-group-name" :required="true" value="radio-value"></ix-radio>
```

--------------------------------

### Basic Event List

Source: https://ix.siemens.io/docs/components/event-list/code

Displays a list of elements with basic styling. No specific setup is required beyond including the component.

```html
<ix-event-list>
  <ix-event-list-item>Text 1</ix-event-list-item>
  <ix-event-list-item>Text 2</ix-event-list-item>
  <ix-event-list-item>Text 3</ix-event-list-item>
  <ix-event-list-item>Text 4</ix-event-list-item>
</ix-event-list>
```

--------------------------------

### Action Card Example

Source: https://ix.siemens.io/docs/components/card/code

Illustrates an Action Card, designed for interactive elements. Available in multiple frameworks.

```html
<ix-action-card
  heading="Card heading"
  subheading="Card subheading"
  icon="pencil"
>
  <p>Card content</p>
</ix-action-card>
```

--------------------------------

### HTML Radio Group API Example

Source: https://ix.siemens.io/docs/components/radio/code

Shows the direct HTML implementation of the ix-radio-group component, setting properties as attributes.

```HTML
<ix-radio-group direction="row" helper-text="Helper text" info-text="Info text" invalid-text="Invalid text" label="Radio Group Label" show-text-as-tooltip value="group-value" valid-text="Valid text" warning-text="Warning text"></ix-radio-group>
```

--------------------------------

### React Radio Component API Example

Source: https://ix.siemens.io/docs/components/radio/code

Illustrates how to use the ix-radio component in React, mapping properties to attributes.

```React
<ix-radio checked={true} disabled={true} label="Radio Label" name="radio-group-name" required={true} value="radio-value"></ix-radio>
```

--------------------------------

### Angular Radio Component API Example

Source: https://ix.siemens.io/docs/components/radio/code

Shows the basic structure for using the ix-radio component in Angular, including common properties.

```Angular
<ix-radio [checked]="true" [disabled]="true" [label]="'Radio Label'" [name]="'radio-group-name'" [required]="true" [value]="'radio-value'"></ix-radio>
```

--------------------------------

### KPI with Warning State and Value

Source: https://ix.siemens.io/docs/components/kpi

Example of a KPI component showing a warning state with a specific value and unit.

```html
<ix-kpi state="warning" value="100" unit="kW"></ix-kpi>
```

--------------------------------

### Vue ECharts Component Setup

Source: https://ix.siemens.io/docs/components/charts-overview/overview

This Vue.js component integrates ECharts for data visualization. It handles theme switching and chart rendering. Ensure ECharts and related modules are installed.

```vue
<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue';
import { registerTheme, resolveEChartThemeName } from '@siemens/ix-echarts';
import { themeSwitcher } from '@siemens/ix';
import VueECharts from 'vue-echarts';

import { EChartsOption } from 'echarts';

echarts.use([
  components.TooltipComponent,
  components.LegendComponent,
  components.GridComponent,
  components.MarkLineComponent,
  charts.BarChart,
  renderer.CanvasRenderer,
]);

registerTheme(echarts);

const theme = ref(resolveEChartThemeName());

const disposer = themeSwitcher.themeChanged.on(() => {
  theme.value = resolveEChartThemeName();
});

onBeforeUnmount(() => {
  disposer.dispose();
});

const options: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    icon: 'rect',
    bottom: 0,
    left: 0,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    }
  ],
  yAxis: [
    {
      type: 'value',
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      emphasis: {
        focus: 'series',
      },
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: 'Email',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Search Engine',
      type: 'bar',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      emphasis: {
        focus: 'series',
      },
      markLine: {
        lineStyle: {
          type: 'dashed',
        },
        data: [[{ type: 'min' }, { type: 'max' }]],
      },
    },
    {
      name: 'Baidu',
      type: 'bar',
      barWidth: 5,
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120],
    },
    {
      name: 'Google',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 290, 230, 220],
    },
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [60, 72, 71, 74, 190, 130, 110],
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [62, 82, 91, 84, 109, 110, 120],
    },
  ],
} as EChartsOption;
</script>

<style scoped src="./echarts.css"></style>

<template>
  <div>
    <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
  </div>
</template>
```

--------------------------------

### React Form Validation Example

Source: https://ix.siemens.io/docs/components/forms-validation/code

This snippet demonstrates a complete form with various input fields and validation rules using `react-hook-form` and Yup. It includes setup for default values, validation schema, and form submission handling.

```tsx
import './form-validation.scoped.css';  
  
import { yupResolver } from '@hookform/resolvers/yup';  
import {  
  iconBezierCurve,  
  iconLocation,  
  iconStar,  
} from '@siemens/ix-icons/icons';  
import {  
  IxButton,  
  IxCheckbox,  
  IxCheckboxGroup,  
  IxCustomField,  
  IxDateInput,  
  IxIcon,  
  IxIconButton,  
  IxLayoutAuto,  
  IxNumberInput,  
  IxRadio,  
  IxRadioGroup,  
  IxSelect,  
  IxSelectItem,  
  IxInput,  
  IxTextarea,  
  IxTypography,  
} from '@siemens/ix-react';  
import clsx from 'clsx';  
import { useLayoutEffect, useRef, useState } from 'react';  
import { Controller, useForm } from 'react-hook-form';  
import * as yup from 'yup';  
  
const validationSchema = yup.object({  
  name: yup.string().required('Name is required'),  
  'last-name': yup.string(),  
  address: yup.string(),  
  thresholdLimitA: yup  
    .number()  
    .max(5, 'The threshold must be equal or lesser than 5'),  
  thresholdLimitB: yup.number(),  
  begin: yup.string(),  
  end: yup  
    .string()  
    .test('valid-date', '2024/05/05 is not allowed to pick', (value) => {  
      return value !== '2024/05/05';  
    }),  
  comment: yup.string(),  
  agreed: yup.boolean().oneOf([true], 'You must agree to continue'),  
  'booking-option': yup.string(),  
  'travel-option': yup.string(),  
  'room-size': yup.number(),  
  email: yup.string(),  
  pin: yup.string(),  
  'confirm-pin': yup.string().oneOf([yup.ref('pin')], 'PIN does not match'),  
  upload: yup.string(),  
  'upload-path': yup.string().required('You need to upload a file'),  
});  
  
export default function FormValidation() {  
  const uploadRef = useRef<HTMLInputElement>(null);  
  
  const [showWarning, setShowWarning] = useState(true);  
  
  const {  
    register,  
    handleSubmit,  
    control,  
    formState: { errors },  
    trigger,  
    setValue,  
  } = useForm({  
    mode: 'all',  
    reValidateMode: 'onChange',  
    defaultValues: {  
      name: 'John',  
      'last-name': 'Muster',  
      address: 'John Street 14',  
      thresholdLimitA: 6,  
      thresholdLimitB: 7,  
      begin: '2024/05/05',  
      end: '2024/05/05',  
      comment: 'Some info',  
      agreed: false,  
      'booking-option': '2',  
      'travel-option': '3',  
      'room-size': 100,  
      email: '',  
      pin: '',  
      'confirm-pin': '',  
      upload: '',  
      'upload-path': '',  
    },  
    resolver: yupResolver(validationSchema),  
  });  
  
  useLayoutEffect(() => {  
    // Do instant validation after rendering  
    trigger();  
  }, [trigger]);  
  
  const onSubmit = (data: any) => {  
    console.log(data);  
  };  
  
  return (  
    <form onSubmit={handleSubmit(onSubmit)} className="form-validation-example">  
      <IxLayoutAuto>  
        <IxInput  
          label="Name"  
          {...register('name')}  
          className={clsx({ 'ix-invalid': errors.name })}  
          invalidText={errors.name?.message}  
          required  
        />  
        <IxInput label="Last Name" {...register('last-name')} />  
        <IxInput label="Address" data-colspan="2" {...register('address')}>  
          <IxIcon slot="start" name={iconLocation} size="16"></IxIcon>  
        </IxInput>  
  
        <IxRadioGroup label="Booking option">  
          {Array.from({ length: 3 }).map((_, option) => (  
            <Controller  
              key={`Option${option}`}
              control={control}
              name="booking-option"
              render={({ field }) => (
                <IxRadio
                  label={`Option ${option}`}
                  value={`${option}`}
                  checked={field.value === `${option}`}
                  onCheckedChange={() => field.onChange(`${option}`)}
                ></IxRadio>
              )}
            />
          ))}
        </IxRadioGroup>

        <IxNumberInput
          label="Preferred room size"
          className="ix-info"
          infoText="You can adjust the room size"
          {...register('room-size')}
        >
          <IxIcon slot="start" name={iconBezierCurve} size="16"></IxIcon>
          <IxTypography slot="end" color="weak" className="padding-right">
            m<sup>2</sup>
          </IxTypography>
        </IxNumberInput>

        <IxSelect
          label="Travel option"
          data-colspan="2"
          {...register('travel-option')}
        >
          <IxSelectItem value="1" label="Option 1"></IxSelectItem>
          <IxSelectItem value="2" label="Option 2"></IxSelectItem>
          <IxSelectItem value="3" label="Option 3"></IxSelectItem>
        </IxSelect>
      </IxLayoutAuto>
    </form>
  );
}

```

--------------------------------

### Pagination with Custom i18n Labels (HTML)

Source: https://ix.siemens.io/docs/components/pagination/code

Provides an example of setting custom i18n labels for 'Items', 'of', and 'Page' in plain HTML.

```HTML
<ix-pagination i18n-items="Elements" i18n-of="von" i18n-page="Seite"></ix-pagination>
```

--------------------------------

### Vue Slider Example

Source: https://ix.siemens.io/docs/components/slider/code

Example of using the slider component within a Vue application.

```typescript
import { IxSlider } from '@siemens/ix-vue';

export default {
  components: { IxSlider },
  data() {
    return {
      sliderValue: 0
    };
  },
  methods: {
    onSliderValueChange(e) {
      this.sliderValue = e.detail;
    }
  }
};
// In your template:
// <ix-slider :value="sliderValue" @valueChange="onSliderValueChange"></ix-slider>
```

--------------------------------

### React Slider Example

Source: https://ix.siemens.io/docs/components/slider/code

Example of using the slider component within a React application.

```typescript
import React, { useState } from 'react';
import { IxSlider } from '@siemens/ix-react';

function MyComponent() {
  const [sliderValue, setSliderValue] = useState(0);

  return (
    <IxSlider
      value={sliderValue}
      onValueChange={(e) => setSliderValue(e.detail)}
    />
  );
}
```

--------------------------------

### Angular Slider Example

Source: https://ix.siemens.io/docs/components/slider/code

Example of using the slider component within an Angular application.

```typescript
import { IxSliderModule } from '@siemens/ix-angular';

@NgModule({
  imports: [
    IxSliderModule
  ]
})
export class AppModule {}

// In your component:
// <ix-slider [value]="sliderValue" (valueChange)="onSliderValueChange($event)"></ix-slider>
```

--------------------------------

### Angular Radio Group API Example

Source: https://ix.siemens.io/docs/components/radio/code

Example of using the ix-radio-group component in Angular, demonstrating property bindings.

```Angular
<ix-radio-group [direction]="'row'" [helper-text]="'Helper text'" [info-text]="'Info text'" [invalid-text]="'Invalid text'" [label]="'Radio Group Label'" [show-text-as-tooltip]="true" [valid-text]="'Valid text'" [value]="'group-value'" [warning-text]="'Warning text'"></ix-radio-group>
```

--------------------------------

### Install Siemens IX ECharts Theme

Source: https://ix.siemens.io/docs/components/charts-overview/overview

Install the ECharts theme package using npm. This is the first step to integrating custom themes.

```sh
npm install --save @siemens/ix-echarts
```

--------------------------------

### Tooltip Placement Configuration

Source: https://ix.siemens.io/docs/components/tooltip/code

Demonstrates how to set the initial placement of the tooltip using the 'placement' property. The tooltip will automatically reposition if the chosen placement lacks space.

```HTML
<ix-tooltip title-content="Tooltip on the bottom" placement="bottom">Bottom Tooltip</ix-tooltip>
```

--------------------------------

### Setting Week Start Day

Source: https://ix.siemens.io/docs/components/date-dropdown/code

Defines which day of the week the calendar starts on. `0` is Sunday, `1` is Monday, according to the locale's weekday array.

```html
<ix-date-dropdown week-start-index="1"></ix-date-dropdown>
```

--------------------------------

### Chip with Centered Content

Source: https://ix.siemens.io/docs/components/chip/code

Example of a chip where the content is centered.

```html
<ix-chip center-content>Centered content</ix-chip>
```

--------------------------------

### Date Picker with Custom Format

Source: https://ix.siemens.io/docs/components/date-picker/code

Shows how to customize the date format using the `format` attribute. The example uses a format string compatible with Luxon.

```HTML
<ix-date-picker format="dd/MM/yyyy"></ix-date-picker>
```

--------------------------------

### KPI with Vertical Orientation

Source: https://ix.siemens.io/docs/components/kpi

Example of a KPI component configured for vertical orientation.

```html
<ix-kpi orientation="vertical"></ix-kpi>
```

--------------------------------

### Basic Tooltip Implementation

Source: https://ix.siemens.io/docs/components/tooltip/code

Demonstrates the basic usage of the tooltip component. This snippet shows how to apply a tooltip to an element.

```HTML
<ix-tooltip title-content="This is a tooltip">Hover over me</ix-tooltip>
```

--------------------------------

### Time Input with Validation

Source: https://ix.siemens.io/docs/components/input-time/code

Demonstrates the validation capabilities of the time input component. This example shows how to set minimum and maximum time constraints.

```html
<ix-time-input min="09:00" max="17:00"></ix-time-input>
```

--------------------------------

### Handling Blur Event

Source: https://ix.siemens.io/docs/components/toggle/code

Example of listening for the 'ixBlur' event when the toggle loses focus.

```typescript
const toggle = document.querySelector('ix-toggle');
toggle.addEventListener('ixBlur', () => {
  console.log('Toggle blurred');
});
```

--------------------------------

### KPI with Horizontal Orientation

Source: https://ix.siemens.io/docs/components/kpi

Example of a KPI component explicitly set to horizontal orientation.

```html
<ix-kpi orientation="horizontal"></ix-kpi>
```

--------------------------------

### Basic Avatar Usage

Source: https://ix.siemens.io/docs/components/avatar/code

Demonstrates the basic initialization of the Avatar component.

```html
<ix-avatar></ix-avatar>
```

--------------------------------

### Show Loading Modal (JavaScript, React, Vue)

Source: https://ix.siemens.io/docs/components/loading-modal/code

Demonstrates how to open a loading modal using the `showModalLoading` function. Ensure you import it from the core package `@siemens/ix`.

```javascript
import {
  showModalLoading
} from '@siemens/ix';

// To open the loading modal
await showModalLoading({
  message: 'Loading data...'
});

// To close the loading modal, you would typically use the context returned
// For example:
// const context = await showModalLoading({ message: 'Processing...' });
// context.end();
```

--------------------------------

### Basic Flip Component Usage

Source: https://ix.siemens.io/docs/components/flip/code

Demonstrates the basic structure of a Flip component. This snippet shows how to set up the header and content that will be revealed upon interaction.

```html
Flip header
Predicted maintenance date
2021-06-22 
Example 1  Example 2 
```

--------------------------------

### Inactive Chip Example

Source: https://ix.siemens.io/docs/components/chip/code

Demonstrates an inactive chip, which is not interactive and does not display a close button.

```html
<ix-chip inactive>Inactive chip</ix-chip>
```

--------------------------------

### Breadcrumb Item with href

Source: https://ix.siemens.io/docs/components/breadcrumb/code

Example of an `ix-breadcrumb-item` configured as a link using the `href` attribute.

```html
<ix-breadcrumb-item
  label="Breadcrumb"
  href="https://www.example.com"
  target="_blank"
  rel="noopener noreferrer"
></ix-breadcrumb-item>
```

--------------------------------

### Custom Toast Message Example

Source: https://ix.siemens.io/docs/components/toast/code

Shows how to display a toast with a custom message and an action button. Use this when more detailed feedback or user interaction is needed.

```html
<ix-toast message="This message is from template" action="Undo"></ix-toast>
```

--------------------------------

### Dropdown with Icon Example

Source: https://ix.siemens.io/docs/components/dropdown/code

Demonstrates a dropdown where the trigger element includes an icon alongside text.

```html
<ix-dropdown>
  <ix-button slot="trigger" variant="primary">
    <ix-icon name="star"></ix-icon>
    Brand
  </ix-button>
  <ix-dropdown-item>Classic</ix-dropdown-item>
  <ix-dropdown-item>Brand</ix-dropdown-item>
  <ix-dropdown-item>Dark</ix-dropdown-item>
</ix-dropdown>
```

--------------------------------

### Basic Date Time Input

Source: https://ix.siemens.io/docs/components/input-date-time/code

Demonstrates the basic usage of the Date Time input component.

```html
<ix-datetime-input></ix-datetime-input>
```

--------------------------------

### Column Sizing for Different Screen Sizes (Angular)

Source: https://ix.siemens.io/docs/components/layout-grid/code

Example of setting column sizes for different screen breakpoints using Angular. This allows for responsive column widths.

```html
<ix-col size="4" size-sm="6" size-md="8" size-lg="10">Column</ix-col>
```

--------------------------------

### Vue: Helper Text

Source: https://ix.siemens.io/docs/components/input-number/code

Provides helper text to guide the user for the number input field.

```Vue
<ix-number-input :helper-text="'Enter a number between 1 and 10'"></ix-number-input>
```

--------------------------------

### React: Helper Text

Source: https://ix.siemens.io/docs/components/input-number/code

Provides helper text to guide the user for the number input field.

```React
<ix-number-input helper-text="Enter a number between 1 and 10"></ix-number-input>
```

--------------------------------

### Angular: Helper Text

Source: https://ix.siemens.io/docs/components/input-number/code

Provides helper text to guide the user for the number input field.

```Angular
<ix-number-input [helper-text]="'Enter a number between 1 and 10'"></ix-number-input>
```

--------------------------------

### Basic Time Picker

Source: https://ix.siemens.io/docs/components/time-picker/code

Demonstrates the basic usage of the time picker component. No specific configuration is applied, using default settings.

```html
<ix-time-picker></ix-time-picker>
```

--------------------------------

### Readonly Textarea Example

Source: https://ix.siemens.io/docs/components/textarea/code

Illustrates a readonly Textarea, where the content can be viewed but not edited. Use the 'readonly' attribute.

```HTML
<ix-textarea readonly label="Readonly textarea" placeholder="Readonly placeholder" value="Readonly value"></ix-textarea>
```

--------------------------------

### Basic Blind Usage

Source: https://ix.siemens.io/docs/components/blind/code

Demonstrates the fundamental usage of the Blind component. This is the most basic implementation.

```html
<ix-blind>
  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.
</ix-blind>
```

--------------------------------

### Vue Modal Integration

Source: https://ix.siemens.io/docs/components/modal/code

Demonstrates how to open a modal in a Vue application using a provided function. This example uses JSX/TSX syntax and requires the `IxApplicationContext` to be provided.

```vue
<script setup lang="ts">
import { showModal } from '@siemens/ix-vue';

const openModal = () => {
  showModal({
    header: 'Message headline',
    content: 'Message text lorem ipsum',
    footer: {
      cancelButton: 'Cancel',
      confirmButton: 'OK'
    }
  });
};
</script>

<template>
  <button @click="openModal">Show modal</button>
</template>
```

--------------------------------

### Basic Content Header

Source: https://ix.siemens.io/docs/components/content-header/code

Demonstrates the basic usage of the Content Header component.

```HTML
<ix-content-header>
  <div slot="header">Brand</div>
  <ix-button variant="primary">Button1</ix-button>
  <ix-button variant="primary">Button2</ix-button>
  <ix-button variant="primary">Button3</ix-button>
</ix-content-header>
```

--------------------------------

### KPI with Label and Value

Source: https://ix.siemens.io/docs/components/kpi

Shows how to set a label and a numerical value for the KPI component.

```html
<ix-kpi label="Power" value="250"></ix-kpi>
```

--------------------------------

### Content Header API - back-button-click Event

Source: https://ix.siemens.io/docs/components/content-header/code

Example of handling the 'backButtonClick' event for the Content Header component.

```Angular
handleBackButtonClick() {
  console.log('Back button clicked!');
}
```

--------------------------------

### Content Header API - variant Property

Source: https://ix.siemens.io/docs/components/content-header/code

Example of setting the 'variant' property for the Content Header component.

```Angular
this.variant = "secondary";
```

--------------------------------

### Content Header API - header-title Property

Source: https://ix.siemens.io/docs/components/content-header/code

Example of setting the 'header-title' property for the Content Header component.

```Angular
this.headerTitle = "Page Title";
```

--------------------------------

### Basic Date Input

Source: https://ix.siemens.io/docs/components/input-date/code

Demonstrates the fundamental usage of the date input component.

```html
<ix-date-input></ix-date-input>
```

--------------------------------

### Pre-checked Toggle Switch

Source: https://ix.siemens.io/docs/components/toggle/code

Demonstrates how to initialize the toggle switch in a checked state.

```html
<ix-toggle checked></ix-toggle>
```

--------------------------------

### Content Header API - header-subtitle Property

Source: https://ix.siemens.io/docs/components/content-header/code

Example of setting the 'header-subtitle' property for the Content Header component.

```Angular
this.headerSubtitle = "Optional subtitle";
```

--------------------------------

### Content Header API - has-back-button Property

Source: https://ix.siemens.io/docs/components/content-header/code

Example of setting the 'has-back-button' property for the Content Header component.

```Angular
this.hasBackButton = true;
```

--------------------------------

### Chip with Leading Icon

Source: https://ix.siemens.io/docs/components/chip/code

Illustrates using a chip with a leading icon.

```html
<ix-chip icon="star">With icon</ix-chip>
```

--------------------------------

### Basic Toggle Switch

Source: https://ix.siemens.io/docs/components/toggle/code

Demonstrates the fundamental usage of the toggle switch.

```html
<ix-toggle></ix-toggle>
```
Tokens:
Raw