メニューナビゲーションコンポーネント

<テンプレート>
  <のdiv クラス = " タブ" >
    <divのV- 用 = " 色で（アイテム、インデックス）"：キー= " インデックス"：スタイル= " インデックス=== 0 '' 'のmargin-left：？-6px;' "  クラス = " I3DFolderMenuNavigation " >
      <のdiv クラス = " I3DFolderMenuNavigationFoot " >
        <のdiv クラス = " I3DFolderMenuNavigationFootTop " >
          <divのクラス = " I3DFolderMenuNavigationParallelogram "：スタイル= " '背景：' + item.botColor " > </ div>
          <divのクラス = " I3DFolderMenuNavigationTriangle "：スタイル= " 'のborder-top：15ピクセル固体' + item.bodyColor " > </ div>
        </ div>
        <のdiv クラス = " I3DFolderMenuNavigationFootBot " >
          <divのクラス = " I3DFolderMenuNavigationParallelogram "：スタイル= " '背景：' + item.botColor " > </ div>
          <divのクラス = " I3DFolderMenuNavigationTriangle "：スタイル= " 'のborder-bottom：15ピクセル固体' + item.bodyColor " > </ div>
        </ div>
      </ div>
      <DIV クラス = " I3DFolderMenuNavigationMain "：スタイル= " '背景：' + item.bodyColor " > {{item.title}} </ div>
      <のdiv クラス = " I3DFolderMenuNavigationTop " >
        <divのクラス = " I3DFolderMenuNavigationTriangleTop "：スタイル= " 'のborder-bottom：15ピクセル固体' + item.bodyColor " > </ div>
        <divのクラス = " I3DFolderMenuNavigationTriangleBot "：スタイル= " 'のborder-top：15ピクセル固体' + item.bodyColor " > </ div>
      </ div>
    </ div>
  </ div>
</テンプレート>
<スクリプト>
// botColor、にbodyColorおよびテキスト：タイトルメニューのナビゲーションコンポーネントは、色渡す必要が 
エクスポートデフォルト{
  小道具：[ ' 色' ]
}
</ SCRIPT>

コンポーネントコンテンツ

.I3DFolderMenuNavigation {
    表示：フレックス。
}
.I3DFolderMenuNavigationFoot {
    幅：15ピクセル;
    高さ：30px;
}
.I3DFolderMenuNavigationFootTop {
    幅：100％;
    高さ：50％;
    表示：フレックス。
}
.I3DFolderMenuNavigationFootBot {
    幅：100％;
    高さ：50％;
    表示：フレックス。
}
.I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationParallelogram {
    幅：5pxの;
    高さ：100％;
    変換：skewX値（35deg）移動X（5pxの）;
    背景：＃FFD649。
}
.I3DFolderMenuNavigationFootTop .I3DFolderMenuNavigationTriangle {
    幅：10pxの;
    高さ：100％;
    国境 - 左：10pxの透明な固体;
    国境 - トップ：15ピクセル固体#FBECBB。
    ボーダー右回転：0 ;
    国境 -bottom：0 ;
}
.I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationParallelogram {
    幅：5pxの;
    高さ：100％;
    変換：skewX値（ - 35deg）移動X（5pxの）;
    背景：＃FFD649。
}
.I3DFolderMenuNavigationFootBot .I3DFolderMenuNavigationTriangle {
    幅：10pxの;
    高さ：100％;
    国境 - 左：10pxの透明な固体;
    ボーダー：-top 0 ;
    ボーダー右回転：0 ;
    国境 - 下：15ピクセル固体#FBECBB。
}
.I3DFolderMenuNavigationMain {
    パディング：0 15ピクセル;
    高さ：100％;
    背景：#FBECBB。
    行 - 高さ：31px;
    色：＃606060 ;
    フォント -family：アントンを！重要;
}
.I3DFolderMenuNavigationTop {
    幅：10pxの;
    高さ：100％;
}
.I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleTop {
    幅：100％;
    高さ：50％;
    国境 - 右：10pxの固体透明。
    ボーダー：-top 0 ;
    ボーダー -left：0 ;
    国境 - 下：15ピクセル固体#FBECBB。
}
.I3DFolderMenuNavigationTop .I3DFolderMenuNavigationTriangleBot {
    幅：100％;
    高さ：50％;
    国境 - 右：10pxの固体透明。
    ボーダー：-top 0 ;
    ボーダー -left：0 ;
    国境 - トップ：15ピクセル固体#FBECBB。
}
。タブ{
    表示：フレックス。
}

CSS