Global Header

<sy-global-header
  title="Syidax"
  information
  notification
></sy-global-header>

<sy-global-header title="Syidax" search></sy-global-header>

<sy-global-header title="Syidax"><strong slot="logo"
    style="font-size:20px">S</strong>
  <sy-button slot="actions" size="small">내 계정</sy-button>
</sy-global-header>

<sy-tab-group active="0" style="width:100%;height:260px">
  <sy-global-header title="Syidax">
    <div slot="tabs">
      <sy-tab tabkey="tab-0">개요</sy-tab>
      <sy-tab tabkey="tab-1">활동</sy-tab>
      <sy-tab tabkey="tab-2">설정</sy-tab>
    </div>
  </sy-global-header>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">프로젝트 현황을 한눈에 확인합니다.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">최근 변경 사항과 팀의 활동을 확인합니다.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">프로젝트의 기본 설정을 관리합니다.</p>
  </sy-tab-content>
</sy-tab-group>

<sy-global-header
  title="Syidax"
  information
  notification
></sy-global-header>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["changed", "actionClick", "selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

<sy-global-header
  title="Syidax"
  information
  notification
  id="supplement-1"
></sy-global-header>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">넘침 다시 계산</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {});
  const actionTarget0 = document.querySelector("#supplement-1");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.updateOverflowTabs();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>