내비게이션

window.addEventListener('unveilyGlueReady', () => {
  window.unveilyBridge.bottomTabs.setConfig({ items: [...] });
  window.unveilyBridge.sideDrawer.setConfig({ items: [...] });
}, { once: true });

{
  "modules": {
    "bottomTabs":  { "enabled": true, "autoHide": false, "heightDp": 60 },
    "sideDrawer":  { "enabled": true },
    "topDownMenu": { "enabled": true },
    "bottomSheet": { "enabled": true }
  }
}

cp config.json config.json.bak && cp config.sample.json config.json

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor": "#CC1A1A2E"
    }
  }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor": {
        "light": "#CCF0F0F5",
        "dark":  "#CC1A1A2E"
      }
    },
    "sideDrawer": {
      "enabled": true,
      "panelColor": {
        "light": "#CCFFFFFF",
        "dark":  "#CC2C2C2C"
      }
    },
    "topDownMenu": {
      "enabled": true,
      "panelColor": "#CC101020"
    },
    "bottomSheet": {
      "enabled": true,
      "panelColor": "#CC1C1C1E"
    }
  }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor":  "#CC1A1A2E",
      "iconColor":   { "light": "#1A1A2E", "dark": "#FFFFFF" },
      "labelColor":  { "light": "#1A1A2E", "dark": "#FFFFFF" },
      "activeAlpha":   1.0,
      "inactiveAlpha": 0.5
    },
    "sideDrawer": {
      "enabled": true,
      "panelColor": "#CC2C2C2C",
      "iconColor":  "#FFFFFF",
      "labelColor": "#FFFFFF"
    },
    "topDownMenu": {
      "enabled": true,
      "panelColor": "#CC101020",
      "iconColor":  "#FFFFFF",
      "labelColor": "#CCCCCC"
    }
  }
}

"bottomTabs": {
  "enabled": true,
  "panelColor": "#E8101020",
  "iconColor":  { "light": "#1F2937", "dark": "#FFFFFF" },
  "activeIndicator":      "dot",
  "activeIndicatorColor": { "light": "#2563EB", "dark": "#60A5FA" }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "heightDp": 64
    }
  }
}

window.unveilyBridge.bottomTabs.show();
window.unveilyBridge.bottomTabs.hide();
window.unveilyBridge.bottomTabs.toggle();

window.unveilyBridge.bottomTabs.setConfig({
  visible: false,  // 선택 — 기본값: true. false 로 설정하면 최초 로드 시 숨긴 상태로 시작합니다.
  items: [
    { id: "home",   label: "홈",   icon: "home.svg",   url: "/home" },
    { id: "search", label: "검색", icon: "search.svg", url: "/search" },
    { id: "my",     label: "마이", icon: "person.svg", url: "/my" }
  ]
});

window.unveilyBridge.bottomTabs.setBadge("home", 5);  // 배지 표시
window.unveilyBridge.bottomTabs.setBadge("home", 0);  // 배지 제거

function onBottomTabClick(result) {
  console.log(result.id);   // 탭 id
  console.log(result.url);  // 해당 탭에 설정된 url
}

window.unveilyBridge.sideDrawer.open();
window.unveilyBridge.sideDrawer.close();
window.unveilyBridge.sideDrawer.toggle();

window.unveilyBridge.sideDrawer.setConfig({
  widthDp: 320,   // 선택 사항 — 드로어 너비(dp), 기본값: 320
  items: [
    { id: "profile",  label: { ko: "프로필",  en: "Profile",  ja: "プロフィール" }, icon: "person.png",   url: "/profile" },
    { id: "settings", label: { ko: "설정",    en: "Settings", ja: "設定"         }, icon: "settings.png", url: "/settings" },
    { id: "refresh",  type: "button", label: { ko: "새로고침", en: "Refresh", ja: "更新" } },
    { id: "lang",     type: "select", value: "ko", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]}
  ]
});

window.unveilyBridge.sideDrawer.setItemEnabled("settings", false);
window.unveilyBridge.sideDrawer.setItemVisible("settings", false);

window.unveilyBridge.sideDrawer.setBadge("profile", 3);
window.unveilyBridge.sideDrawer.setBadge("profile", 0); // 제거

// 아이콘 타입 항목 탭 (하위 호환)
function onSideDrawerItemClick(result) {
  console.log(result.id);   // 항목 id
  console.log(result.url);  // 해당 항목의 url
}

// 버튼 또는 셀렉트 항목 조작
function onSideDrawerAction(result) {
  console.log(result.id);     // 항목 id
  console.log(result.type);   // "button" | "select"
  console.log(result.value);  // 버튼이면 ""; 셀렉트이면 선택된 값
}

window.unveilyBridge.topDownMenu.open();
window.unveilyBridge.topDownMenu.close();
window.unveilyBridge.topDownMenu.toggle();

window.unveilyBridge.topDownMenu.setConfig({
  columns: 4,              // 그리드 열 수 (1–5, 기본값: 4)
  maxHeightFraction: 0.5,  // 최대 높이 비율 — 상한 (0.1–1.0, 기본값: 0.5). 내용이 적으면 상한보다 작게 표시
  items: [
    { id: "home",    label: { ko: "홈",    en: "Home",    ja: "ホーム" }, icon: "home.png" },
    { id: "search",  label: { ko: "검색",  en: "Search",  ja: "検索"   }, icon: "search.png" },
    { id: "refresh", type: "button", label: { ko: "새로고침", en: "Refresh", ja: "更新" } },
    { id: "lang",    type: "select", value: "ko", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]},
    { id: "banner",  type: "image",  icon: "promo.svg", heightDp: 80 }
  ]
});

var cols = window.unveilyBridge.app.isTablet() ? 5 : 3;
window.unveilyBridge.topDownMenu.setConfig({ columns: cols, items: [ /* ... */ ] });

window.unveilyBridge.topDownMenu.setItemEnabled("search", false);
window.unveilyBridge.topDownMenu.setItemVisible("search", false);

// 아이콘 타입 항목 탭 (하위 호환)
function onTopDownMenuItemClick(result) {
  console.log(result.id);   // 항목 id
  console.log(result.url);  // 해당 항목의 url
}

// 버튼 또는 셀렉트 항목 조작
function onTopDownMenuAction(result) {
  console.log(result.id);     // 항목 id
  console.log(result.type);   // "button" | "select"
  console.log(result.value);  // 버튼이면 ""; 셀렉트이면 선택된 값
}

window.unveilyBridge.bottomSheet.show({
  title: "상품 상세",     // 선택 사항
  content: "설명 텍스트", // 선택 사항
  heightFraction: 0.5,   // 화면 높이 비율 (0.1–1.0, 기본값: 0.5)
  heightDp: 400          // 고정 높이(dp) — heightFraction보다 우선
});

window.unveilyBridge.bottomSheet.hide();
window.unveilyBridge.bottomSheet.toggle();

// 닫힌 상태 — 다음 show() 때 높이 적용
window.unveilyBridge.bottomSheet.setConfig({ heightFraction: 0.7 });

// 열린 상태에서 호출 — 즉시 라이브 리사이즈
window.unveilyBridge.bottomSheet.setConfig({ heightFraction: 0.3 });

{
  "id": "settings",
  "label": { "ko": "설정", "en": "Settings", "ja": "設定" },
  "icon": "settings.png",
  "url": "/settings"
}

{
  "id": "banner",
  "type": "image",
  "icon": "promo.svg",
  "heightDp": 80,
  "url": "/promo"
}

{
  "id": "refresh",
  "type": "button",
  "label": { "ko": "새로고침", "en": "Refresh", "ja": "更新" }
}

{
  "id": "lang",
  "type": "select",
  "value": "ko",
  "options": [
    { "value": "ko", "label": { "ko": "한국어", "en": "Korean",   "ja": "韓国語"  } },
    { "value": "en", "label": { "ko": "영어",   "en": "English",  "ja": "英語"    } },
    { "value": "ja", "label": { "ko": "일본어", "en": "Japanese", "ja": "日本語"  } }
  ]
}

{
  "id": "dark",
  "type": "toggle",
  "label": { "ko": "다크 모드", "en": "Dark Mode", "ja": "ダークモード" },
  "value": false
}

{ "type": "separator" }

{
  "type": "header",
  "label": { "ko": "설정", "en": "Settings", "ja": "設定" }
}

{
  "id": "dark",
  "type": "toggle",
  "title": { "ko": "화면", "en": "Appearance", "ja": "画面" },
  "label": { "ko": "다크 모드", "en": "Dark Mode", "ja": "ダークモード" },
  "value": false
}

// 일반 문자열 — 언어와 무관하게 동일한 라벨 표시
{ id: "home", label: "홈", icon: "home.png" }

// i18n 객체 — setLocale()에 따라 라벨이 전환됨
{ id: "home", label: { ko: "홈", en: "Home", ja: "ホーム" }, icon: "home.png" }

window.unveilyBridge.app.setLocale("ko");  // "ko" | "en" | "ja"
window.unveilyBridge.app.setLocale("");    // 기기 로케일로 초기화

window.unveilyBridge.topDownMenu.setConfig({
  items: [
    { id: "home", label: { ko: "홈", en: "Home", ja: "ホーム" }, icon: "home.png" },
    { id: "lang", type: "select", value: "ko", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]}
  ]
});

function onTopDownMenuAction(result) {
  if (result.id === "lang" && result.type === "select") {
    window.unveilyBridge.app.setLocale(result.value);
  }
}