ナビゲーション

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: "ja", 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: "ja", 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": "ja",
  "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("ja");  // "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: "ja", 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);
  }
}