syidaxgrid
홈 가격 내 정보
GridGetting started

로고와 위치.

Grid의 기본 로고 위치와 Pro 로고 제거·사용자 지정 방법입니다.

빠르게 이해하기

기본 Syidax 로고의 위치를 확인하고, Pro 권한으로 로고를 제거하거나 서비스 로고로 교체할 때 참고하는 문서입니다.

직접 해보기

  1. 기본 위치 확인

    아래 미리보기에서 로고가 표 하단 오른쪽의 전용 영역에 있는지 확인하세요. 데이터 셀과 겹치지 않습니다.

  2. 로고 모드 비교

    미리보기 아래 로고 선택에서 기본 로고, 제거, 내 로고를 비교하세요. 내 로고는 PNG·JPEG·WebP 파일을 선택합니다.

  3. 초기 상태로 복원

    초기화를 누르면 기본 로고가 다시 나타납니다. 밝은 테마와 어두운 테마에서도 로고 표시를 확인하세요.

확인할 결과

선택한 로고 설정에 맞춰 미리보기와 brandLogo 코드가 갱신됩니다.

위치를 옮기는 옵션은 없습니다. 로고 제거·교체는 Pro 권한이 필요하고 선택한 파일은 이 브라우저의 미리보기에서만 사용됩니다.

알아두면 쉬운 용어

brandLogo
기본 로고, none 또는 사용자 이미지 data URL을 지정하는 설정입니다.
data URL
이미지 데이터를 문자열 안에 담는 형식입니다.

제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.

기본 로고와 위치

#

기본 Syidax 심볼과 워드마크는 표 하단 오른쪽의 전용 영역에 표시됩니다. 데이터 셀·페이지 이동·상태 바와 겹치지 않으며 포인터나 키보드 조작을 막지 않습니다.

Grid의 로고 위치는 고정입니다. 위치를 선택하는 속성은 제공하지 않습니다. brandLogo를 생략하거나 빈 문자열로 지정하면 기본 로고를 표시하고, 테마에 따라 색상을 자동 조정합니다.

미리보기와 적용 코드

#
Live preview위치 · 표 하단 오른쪽

미리보기를 불러오고 있습니다.

현재 설정의 전체 적용 코드
<sy-grid id="orders"></sy-grid>
<script type="module">
import '@syidax/advanced/css/grid';
import { defineCustomElement } from '@syidax/advanced/components/sy-grid.js';
defineCustomElement();
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
Object.assign(grid, {
  height: 280,
  theme: "alpine",
  locale: "ko",
  brandLogo: "",
  getRowId: row=>row.id,
  defaultColDef: { "sortable": true, "resizable": true },
  columnDefs: [{ "field": "product", "headerName": "제품", "width": 200 }, { "field": "quantity", "headerName": "수량", "width": 120, "editable": true, "editor": "number" }],
  rowData: [{ "id": "A-001", "product": "Atlas Sensor", "quantity": 24 }, { "id": "A-002", "product": "Beacon Lite", "quantity": 36 }, { "id": "A-003", "product": "Cipher Pro", "quantity": 18 }]
});
</script>

Pro 사용자 지정 PRO

#

grid.branding 권한으로 brand-logo="none"을 지정해 로고를 제거하거나, 이미지 data URL을 brandLogo에 전달해 교체합니다. 유효한 권한이 없으면 기본 로고가 유지되고 licenseFeatureRefused 이벤트가 발생합니다.

// Pro 패키지와 grid.branding 권한을 등록한 뒤 사용합니다.
grid.brandLogo = 'none';

// 기본 로고로 복원
grid.brandLogo = '';

// 로컬 파일을 data URL로 변환해 사용자 로고로 지정
function setLogo(grid, file) {
  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > 100 * 1024) {
    throw new Error('100 KB 이하의 PNG·JPEG·WebP 파일을 선택하세요.');
  }
  const reader = new FileReader();
  reader.addEventListener('load', () => { grid.brandLogo = String(reader.result); });
  reader.readAsDataURL(file);
}

PNG·JPEG·WebP 이미지는 100 KB 이하를 사용하세요. SVG와 외부 이미지 URL은 지원하지 않습니다. 선택한 파일은 이 브라우저의 미리보기와 코드에서만 사용됩니다. Pro 라이선스 등록 방법

GridTab 이동 Enter 열기