# Siemens iX 디자인 시스템 ## Siemens iX 디자인 시스템 인터페이스 미리보기 가상 이벤트를 필터링하고 장비 메모를 살펴본 다음, 원래 심각도는 그대로 표시하면서 로컬에서 기록을 검토 완료로 표시하세요. ## Siemens iX 디자인 시스템 설계 참고 자료 현재 공개된 iX 문서와 공식 main 브랜치의 컴포넌트 API 스냅샷을 참고했습니다. 아래 색상 항목은 의미 역할이며, 임의로 만든 고정 16진수 색상 값이 아닙니다. 설치 패키지 버전은 함께 고정해야 합니다. 오프라인 예시에는 자체 팔레트와 크기를 사용하며, 이를 명확히 표시합니다. ### 화면 모드 및 패키지 진입점 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Core package | @siemens/ix | 웹 컴포넌트 및 전역 스타일시트 | | React wrappers | @siemens/ix-react | React 컴포넌트 통합 | | Icons | @siemens/ix-icons | 공식 아이콘 종속성 | | data-ix-theme | classic | 문서 수준의 화면 모드 선택기 | | data-ix-color-schema | dark \| light \| system | 정확한 속성 표기는 스키마를 따릅니다. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | 애플리케이션 진입점에서 한 번 가져오세요. | ### 텍스트 및 배경 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --theme-color-primary | Primary action role | 선택한 화면 모드에 따라 결정됩니다. | | --theme-color-std-text | Default reading color | 이벤트 제목 및 본문 텍스트 | | --theme-color-soft-text | Secondary reading color | 시간 및 자산 메타데이터 | | --theme-color-weak-text | Disabled reading color | 중요한 보조 정보에는 사용하지 마세요. | | --theme-color-alarm-text | Alarm text role | 오류 텍스트에 전경색이 필요할 때 사용하세요. | | --theme-color-component-1 | Interactive component fill | 반투명하므로 아래쪽 배경에 따라 표시되는 모습이 달라집니다. | | color-0 | Transparent background role | 다른 배경 계층은 불투명합니다. | ### 심각도 분류 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | 색상 표시와 함께 텍스트 레이블도 유지하세요. | | Critical | Between alarm and warning | 장식용으로 색조를 달리한 것이 아니라 별도의 의미를 나타냅니다. | | Warning | Condition requiring attention | 경보로 임의 변경하지 마세요. | | Success | Positive outcome | 검토 작업을 했다고 해서 경보가 반드시 정상 처리된 것은 아닙니다. | | Info | Informational condition | 비활성 콘텐츠와 구분하세요. | | Neutral | Unclassified neutral condition | 상태 판단이 필요하지 않을 때 사용할 수 있습니다. | ### 테두리 계층 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | 구분이 뚜렷한 경계 | | --theme-color-std-bdr | Standard control boundary | 입력 또는 선택 컨트롤 | | --theme-color-soft-bdr | Card boundary | 기록부 검사기에 사용됩니다. | | --theme-color-weak-bdr | Region boundary | 주요 영역을 부드럽게 구분하세요. | | --theme-color-x-weak-bdr | Very subtle boundary | 강조가 약한 구분선 | | --theme-primary-bdr-1 | Complete border value | 색상이 아니라 border: var(--theme-primary-bdr-1)로 사용하세요. | ### 타이포그래피 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Headings | H1 through H6 | 텍스트 계층 | | Body | Multiline reading | 검사 메모 및 설명 | | Label | Single-line component text | 짧은 컨트롤 및 필드 | | Display | Single-line KPI presentation | 개수입니다. 문단에는 사용하지 마세요. | | Code | Code and technical syntax | 적절한 경우 API 예시 또는 식별자에 사용하세요. | ### Event List API 스냅샷 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | 예시 제목과 메타데이터에 L을 사용하세요. | | IxEventList.compact | boolean; default false | 컴팩트 모드를 명시적으로 선택했습니다. | | IxEventList.chevron | boolean; default false | 탐색 표시를 보여주세요. | | IxEventList.animated | boolean; default false | 정적인 로그에 불필요한 움직임을 피하세요. | | IxEventListItem.itemColor | string | 화면 모드 CSS 색상 표현 | | IxEventListItem.selected | boolean; default false | 선택한 레코드 ID로 제어됩니다. | | IxEventListItem.variant | outline \| filled; default outline | 표시 방식 선택 | | IxEventListItem.disabled | boolean; default false | 상호작용이 불가능할 때만 비활성화하세요. | | itemClick | Custom event | React 래퍼의 onItemClick이 레코드를 선택합니다. | ## Siemens iX 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Siemens iX 디자인 시스템: 검토 상태와 해결 상태를 구분하는 산업 현장 이벤트 ### 기록부이지, 장비 제어 패널이 아닙니다. > 작업 예시는 가상의 장비 노트북입니다. 세 개의 기록은 원본 심각도를 유지하고, 별도의 로컬 검토 상태로 독자가 확인한 항목을 추적합니다. 이러한 분리는 구성의 핵심입니다. 행 선택, 메모 읽기, 물리적 상태 해결은 서로 다른 작업입니다. 미리보기는 처음 두 작업을 구현하며, 실제 장비를 제어한다고 주장하지 않습니다. Event List는 장식용 카드보다 더 나은 시작점입니다. 선택 상태, 심각도 표시, 꺾쇠 아이콘을 통해 반복되는 기록을 탐색 가능한 모음으로 명확하게 보여 주기 때문입니다. 긴 텍스트는 인스펙터에서 행 바깥에 표시합니다. 알람이 해제되었다고 주장하는 가짜 원격 측정 데이터나 성공 토스트는 없습니다. 지원 사양 읽기 ## Siemens iX 디자인 시스템: 운영상 의미를 나타내는 색상 역할 ### 표시 기호와 텍스트 색상을 함께 사용하세요 색상 시스템은 불투명한 배경 레이어와 반투명한 컴포넌트 채우기를 구분합니다. 컴포넌트 채우기는 그 아래에 놓인 표면과 함께 평가해야 합니다. 스크린샷의 16진수 색상 값을 각 행에 복사하지 말고, 네이티브 코드에서 실제 테마 변수를 사용하세요. 표준 텍스트와 부드러운 텍스트는 서로 다른 읽기 우선순위에 사용됩니다. 약한 텍스트는 비활성 콘텐츠용이므로, 조사에 필요한 타임스탬프를 무조건 해당 역할로 지정해서는 안 됩니다. 오류 전경색에는 상태 채우기 색을 그대로 재사용하기보다 전용 알람 텍스트 역할을 사용하는 것이 적절합니다. - 색상 가장자리 표시 옆에 알람, 경고 또는 정보라는 단어를 표시하세요. - 로컬 검토 후에도 알람 표시를 유지하세요. 검토 상태는 원본 상태를 바꾸지 않습니다. - 선택 스타일은 탐색 상태에만 사용하여 심각도와 선택 상태를 구분할 수 있게 하세요. 지원 사양 읽기 ## Siemens iX 디자인 시스템: 메모와 레이블을 구분하는 타이포그래피 ### 추측한 픽셀 크기 대신 형식을 사용하세요 iX는 타이포그래피를 제목, 본문, 레이블, 디스플레이, 코드로 구분합니다. 점검 메모에는 여러 줄 표시를 지원하는 본문 형식이 필요합니다. 큰 숫자에는 디스플레이 형식이 적합하고, 짧은 필터 레이블에는 레이블 형식을 사용합니다. 전체 이벤트 설명을 키우기 위한 편법으로 디스플레이 형식을 사용해서는 안 됩니다. 문서에 수록된 ix-typography format="h3" 예제는 구체적인 구현 방법을 보여 줍니다. 이에 상응하는 Sass typography-h3 믹스인을 사용하면 글꼴 규칙을 다시 만들지 않고도 사용자 지정 요소에 적용할 수 있습니다. 미리보기에는 의도적으로 시스템 글꼴 대체 설정과 애플리케이션 글꼴 크기를 사용했습니다. 이 값들은 공식 Siemens 토큰으로 제시하는 것이 아닙니다. 지원 사양 읽기 ## Siemens iX 디자인 시스템: Event List 선택 상태와 밀도 ### 항목 모양과 별개로 식별 정보를 관리하세요 API 스냅샷은 itemHeight에 S, L 또는 숫자를 지정할 수 있음을 보여 줍니다. 예제에서는 L을 선택하고 compact는 기본값인 false로 두며 꺾쇠 아이콘을 활성화합니다. 현지화된 제목이 긴 운영 로그에서는 예제처럼 모든 기록이 들어맞는다고 가정하지 말고, 줄바꿈을 고려해 선택한 높이를 확인해야 합니다. 각 항목의 selected는 ID 비교 결과를 사용하고, 래퍼의 onItemClick 핸들러를 통해 itemClick을 전달합니다. 인스펙터도 동일한 ID를 읽습니다. 따라서 시각적 선택과 상세 패널이 서로 다른 기록을 가리키는 문제를 방지할 수 있습니다. 필터를 변경하면 선택된 ID를 명시적으로 초기화합니다. 지원 사양 읽기 ## Siemens iX 디자인 시스템: 좁은 뷰포트에서도 유지되는 인스펙터 ### 상세 정보를 이벤트 목록 아래로 이동하세요 예제의 2:1 그리드는 애플리케이션 레이아웃이며, 공개된 iX 그리드 토큰이 아닙니다. 좁은 뷰포트에서는 한 열로 바뀌고, 인스펙터보다 기록을 먼저 표시합니다. 인스펙터는 중첩된 스크롤 문제를 만들지 않으므로 독자는 예제 전체를 자연스럽게 스크롤할 수 있습니다. 이벤트 메타데이터는 읽기 쉬운 보조 색상으로 두 번째 줄에 표시합니다. 필터는 반복되는 행 바깥에 두므로 기록이 바뀌어도 위치가 움직이지 않습니다. 상태 문단은 필터를 변경하거나 제목을 대체하지 않고, 선택된 기록의 로컬 검토 결과를 알려 줍니다. 지원 사양 읽기 ## Siemens iX 디자인 시스템: 색상이나 정밀한 포인터 조작 없이도 상태를 인지할 수 있게 하세요 ### 텍스트, 키보드 조작, 포커스 오프라인 미리보기에서는 기록에 네이티브 버튼을, 심각도에 레이블이 있는 선택 컨트롤을, 검토 피드백에 aria-live 상태 영역을 사용합니다. Enter와 Space로 기록을 선택할 수 있습니다. 네이티브 라이브러리 구성에서는 Event List 래퍼를 사용합니다. 사용자 지정 포커스 재정의를 적용하기 전에 설치된 버전의 키보드 및 보조 기술 동작을 테스트해야 합니다. 레이블은 업무상 차이를 명확히 나타냅니다. 알람 해결이 아니라 로컬에서 검토 표시를 합니다. 검토 작업을 사용할 수 없는 경우에도 검토 완료 상태를 눈에 보이게 표시합니다. 의미 전달을 색상에만 의존하지 않으며, 필터를 바꿔도 다른 범주에 접근할 수 없는 이전 선택 상태가 남지 않습니다. 지원 사양 읽기 ## Siemens iX 디자인 시스템: 패키지, 테마, 로컬 애플리케이션 상태 연결하기 ### 체계적인 통합 절차 설정 블록에는 패키지 가져오기, 문서 테마 속성, 실제 컴포넌트 속성, 전체 React 상태, 애플리케이션 CSS가 포함됩니다. 테마 선택기에는 비슷한 이름의 사용자 지정 속성이 아니라 data-ix-color-schema를 사용하세요. 애플리케이션에서 설치된 core, wrappers, icons의 호환 버전을 고정하세요. 시각적 예제는 이러한 상호작용 규칙을 적용한 오프라인 HTML/CSS입니다. 짙은 남색 팔레트, 24픽셀 여백, 개략적인 장비 그림은 애플리케이션에서 자체적으로 정한 요소입니다. 네이티브 화면과 시각적으로 일치시키려면 공식 스타일시트를 사용해 별도의 React 예제를 실행하고 계산된 테마 값을 확인하세요. 1. Vite React 스캐폴드에 core, React wrappers, icons를 설치하고 생성된 루트 요소를 유지하세요. 2. 제공된 파일로 main.jsx와 style.css를 바꾼 다음, 문서에서 classic과 dark, light 또는 system을 선택하세요. 3. 기록을 선택하고 검토 표시를 한 뒤 목록을 필터링하여, 숨겨진 선택 상태는 초기화되면서 심각도는 유지되는지 확인하세요. 지원 사양 읽기 ## Siemens iX 디자인 시스템 컴포넌트 예제 ### 완전한 독립형 인터랙티브 예제 전체 문서를 index.html로 저장한 다음 브라우저에서 여세요. 독립적으로 만든 오프라인 HTML/CSS 구현입니다. 자체 팔레트, 시스템 글꼴, 애플리케이션 크기를 사용하며 네이티브 iX 런타임이 아닙니다. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.

``` 코드 참조 - 이벤트를 검토 완료로 표시해도 심각도는 바뀌지 않으며 장비 알람도 해제되지 않습니다. 네이티브 iX 항목에서는 Event List 선택 상태와 테마 속성을 별도로 보여 줍니다. ### 별도로 제어하는 점검 패널이 있는 Event List 선택한 ID에 따라 항목 강조 표시와 세부 정보가 결정됩니다. 검토 작업은 로컬 노트 상태만 기록하며 원래 심각도는 그대로 표시됩니다. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` 코드 참조 - 심각도 표시에 itemColor를 사용하고, 읽기 쉬운 텍스트 심각도 레이블을 함께 표시하세요. - 심각도 필터를 변경하면 선택 항목이 지워져, 숨겨진 이벤트를 검사기에서 설명하지 않도록 합니다. - 로컬 검토 버튼은 애플리케이션 로직이며, 존재하지 않는 iX 알람 확인 기능을 의미하지 않습니다 API. ### 테마에 맞는 타이포그래피를 사용하고 글꼴 크기를 복사하지 마세요 테마에 관계없이 글꼴 크기를 고정하지 말고, 문서화된 format prop 또는 Sass 믹스인을 사용하세요. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` 코드 참조 - 미리보기는 시스템 글꼴 대체 서체를 사용하며, Siemens 브랜드 글꼴을 제공하지 않습니다. ## Siemens iX 디자인 시스템 에이전트 설정 ### 구현 시작점 기존 루트 요소가 있는 Vite React 스캐폴드에 맞춰 main.jsx와 style.css를 완성하세요. 공식 래퍼, CSS 가져오기 및 Event List 속성은 문서화되어 있지만, 여기서는 패키지를 직접 컴파일하지 않았습니다. 임베디드 미리보기는 별도로 만든 오프라인 해석입니다. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` ### 프로젝트를 위한 프롬프트 ``` 이 가이드에서 확인된 Event List 속성과 문서화된 테마 속성을 사용해 Siemens iX 이벤트 노트를 만드세요. 심각도는 선택 및 로컬 검토 상태와 별도로 유지하세요. 기본 버전에서는 의미에 맞는 테마 색상을 사용하세요. 노트 작업이 실제 알람을 해결한다고 암시하지 마세요. 필터에 레이블을 붙이고, 행은 키보드로 접근할 수 있게 하며, 좁은 화면에서는 검사기를 세로로 배치하세요. ``` ## Siemens iX 디자인 시스템의 출처와 범위 독립적으로 제작한 OpenDesign 가이드입니다. 이벤트 데이터와 장비 일러스트는 허구입니다. 미리보기 스타일은 독창적인 해석이며, 별도의 React 예시는 문서화된 iX API를 사용합니다. 장비 연결, 원격 측정 또는 실시간 확인 기능은 구현되어 있지 않습니다. - React 설치 패키지, CSS 및 테마 속성. - 컴포넌트 API 개요 실제 이벤트 속성과 이벤트. - 색상 기초 표면, 텍스트 및 상태 역할. - 타이포그래피 텍스트 범주와 용도. - 타이포그래피 구현 형식 및 Sass 진입점. - 테두리 경계의 위계. - Event List 컴포넌트 예시와 밀도별 변형. ## Siemens iX 디자인 시스템 관련 자료 ### Sprout Social Seeds 완성된 편집 검토 대기열에서 Seeds의 실제 공개 색상, 간격, 제품 타이포그래피, 테두리 디자인 토큰을 확인하세요. 여러 항목 선택, 필터 적용 후 빈 상태, 실행 취소도 포함되어 있습니다. ### SumUp Circuit 정확한 시맨틱 토큰, 네이티브 유효성 검사 props, 완성된 판매자 상품 편집기, 고객 측 미리보기 그림을 제공하는 Circuit 가이드입니다. ### TDesign 구체적인 테마 역할, 2픽셀 크기 체계, Form 필드 등록, 타입이 지정된 Table 구성 등 TDesign React을 사용해 간결한 API 정책 편집기를 만드세요. - [구현 레퍼런스](https://ix.siemens.io/docs/components/event-list/code) - [출처](https://ix.siemens.io/docs/home/installation/react) - [출처](https://ix.siemens.io/docs/styles/colors) - [출처](https://ix.siemens.io/docs/styles/borders) - [출처](https://ix.siemens.io/docs/styles/typography/guide) - [출처](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [지원 사양 읽기](https://ix.siemens.io/docs/components/event-list/code) - [지원 사양 읽기](https://ix.siemens.io/docs/styles/colors) - [지원 사양 읽기](https://ix.siemens.io/docs/styles/typography/code) - [지원 사양 읽기](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [지원 사양 읽기](https://ix.siemens.io/docs/guidelines/accessibility/code) - [지원 사양 읽기](https://ix.siemens.io/docs/home/installation/react) - [코드 참조](https://ix.siemens.io/docs/components/event-list/code) - [코드 참조](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [코드 참조](https://ix.siemens.io/docs/styles/typography/code) - [React 설치 패키지, CSS 및 테마 속성.](https://ix.siemens.io/docs/home/installation/react) - [컴포넌트 API 개요 실제 이벤트 속성과 이벤트.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [색상 기초 표면, 텍스트 및 상태 역할.](https://ix.siemens.io/docs/styles/colors) - [타이포그래피 텍스트 범주와 용도.](https://ix.siemens.io/docs/styles/typography/guide) - [타이포그래피 구현 형식 및 Sass 진입점.](https://ix.siemens.io/docs/styles/typography/code) - [테두리 경계의 위계.](https://ix.siemens.io/docs/styles/borders) - [Event List 컴포넌트 예시와 밀도별 변형.](https://ix.siemens.io/docs/components/event-list/code)