feat: support placeholder and zIndex props

packages/components/avatar/README.md

@@ -19,7 +19,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/a86Sfimw7VSO" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/oiQl6pmr855m" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/avatar/_example/avatar.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="demo-navbar" title="Avatar" leftArrow />
+  <t-navbar class="demo-navbar" title="Avatar" leftArrow placeholder zIndex="{{99}}" />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <t-demo-header

packages/components/badge/README.md

@@ -18,7 +18,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/TgaeQimG73SD" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/omQZvpmT8g5q" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/badge/_example/badge.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Badge" leftArrow />
+<t-navbar title="Badge" leftArrow placeholder zIndex="{{99}}" />
 <t-demo-header
   title="Badge 徽标"
   desc="用于告知用户，该区域的状态变化或者待处理任务的数量。"

packages/components/badge/_example/skyline/badge.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="block" title="Badge" left-arrow />
+  <t-navbar class="block" title="Badge" left-arrow placeholder zIndex="{{99}}" />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo-title">Badge 徽标</view>
     <view class="demo-desc">用于告知用户，该区域的状态变化或者待处理任务的数量。</view>

packages/components/cell/README.md

@@ -19,7 +19,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/bz7aGimL72S2" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/UMQsbpmt8m5m" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/cell/_example/cell.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Cell" leftArrow />
+<t-navbar title="Cell" leftArrow placeholder zIndex="{{99}}" />
 <view class="demo">
   <t-demo-header title="Cell 单元格" desc="用于各个类别行的信息展示。" notice="渲染框架支持情况：Skyline、WebView" />
   <t-demo title="01 组件类型" desc="单行单元格">

packages/components/cell/_example/skyline/cell.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar title="Cell" leftArrow />
+  <t-navbar title="Cell" leftArrow placeholder zIndex="{{99}}" />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <view class="demo-title">Cell 单元格</view>

packages/components/grid/README.md

@@ -19,7 +19,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/6H70dimL7jSK" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/LyQxOpme8p5A" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/grid/_example/grid.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Grid" leftArrow />
+<t-navbar title="Grid" leftArrow placeholder zIndex="{{99}}" />
 <view class="demo">
   <t-demo-header
     title="Grid 宫格"

packages/components/input/README.md

@@ -19,7 +19,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/Id60eimj76Ss" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/N1QRtpm78t5i" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/input/_example/input.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="Input" leftArrow />
+<t-navbar title="Input" leftArrow placeholder zIndex="{{99}}" />
 <view class="input-example">
   <t-demo-header title="Input 输入框" desc="用于单行文本信息输入。" notice="渲染框架支持情况：Skyline、WebView" />
   <t-demo title="01 组件类型" desc="基础输入框">

packages/components/input/_example/skyline/input.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="block" title="Input" left-arrow />
+  <t-navbar class="block" title="Input" left-arrow placeholder zIndex="{{99}}" />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="input-example">
       <view class="demo-title">Input 输入框</view>

packages/components/loading/README.md

@@ -18,7 +18,7 @@ isComponent: true
 
 ## 代码演示
 
-<a href="https://developers.weixin.qq.com/s/Jraocimc7mSr" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+<a href="https://developers.weixin.qq.com/s/LaQgipmj8z5j" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
 <blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>

packages/components/loading/_example/loading.wxml

@@ -1,5 +1,5 @@
 <view class="skyline">
-  <t-navbar class="demo-navbar" title="Loading" leftArrow />
+  <t-navbar class="demo-navbar" title="Loading" leftArrow placeholder zIndex="{{99}}" />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
       <t-demo-header

packages/components/navbar/README.en-US.md

@@ -15,10 +15,12 @@ fixed | Boolean | true | \- | N
 home-icon | String | - | `deprecated`。homeIcon | N
 left-arrow | Boolean | false | `0.26.0` | N
 left-icon | String | - | `deprecated` | N
+placeholder | Boolean | false | `1.12.1` | N
 safe-area-inset-top | Boolean | true | \- | N
 title | String | - | page title | N
 title-max-length | Number | - | \- | N
 visible | Boolean | true | \- | N
+z-index | Number | 1 | \- | N
 
 ### Navbar Events
 

packages/components/navbar/README.md

@@ -64,10 +64,12 @@ fixed | Boolean | true | 是否固定在顶部 | N
 home-icon | String | - | 已废弃。首页图标地址。值为 '' 或者 undefined 则表示不显示返回图标，值为 'circle' 表示显示默认图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
 left-arrow | Boolean | false | `0.26.0`。是否展示左侧箭头 | N
 left-icon | String | - | 已废弃。左侧图标地址，值为 '' 或者 undefined 则表示不显示返回图标，值为 'arrow-left' 表示显示返回图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
+placeholder | Boolean | false | `1.12.1`。固定在顶部时是否开启占位 | N
 safe-area-inset-top | Boolean | true | 是否开启顶部安全区适配 | N
 title | String | - | 页面标题 | N
 title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
 visible | Boolean | true | 是否显示 | N
+z-index | Number | 1 | 导航条层级 | N
 
 ### Navbar Events
 

packages/components/navbar/__test__/__snapshots__/demo.test.js.snap

@@ -3,8 +3,7 @@
 exports[`Navbar Navbar back-home demo works fine 1`] = `
 <back-home>
   <t-navbar
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
+    fixed="{{false}}"
     title="标题文字"
   >
     <wx-view
@@ -38,8 +37,8 @@ exports[`Navbar Navbar base demo works fine 1`] = `
     class="block"
   >
     <t-navbar
-      tClassContent="t-navbar-content"
-      tClassPlaceholder="t-navbar-placeholder"
+      fixed="{{false}}"
+      placeholder="{{true}}"
       tClassTitle="nav-title"
       title="标题文字"
     />
@@ -49,9 +48,8 @@ exports[`Navbar Navbar base demo works fine 1`] = `
   >
     <t-navbar
       class="block"
+      fixed="{{false}}"
       leftArrow="{{true}}"
-      tClassContent="t-navbar-content"
-      tClassPlaceholder="t-navbar-placeholder"
       title="标题文字"
       bind:go-back="handleBack"
     />
@@ -63,9 +61,8 @@ exports[`Navbar Navbar custom-color demo works fine 1`] = `
 <custom-color>
   <t-navbar
     class="custom-navbar"
+    fixed="{{false}}"
     leftArrow="{{true}}"
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
     title="标题文字"
   />
 </custom-color>
@@ -74,8 +71,7 @@ exports[`Navbar Navbar custom-color demo works fine 1`] = `
 exports[`Navbar Navbar img demo works fine 1`] = `
 <img>
   <t-navbar
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
+    fixed="{{false}}"
   >
     <wx-view
       slot="left"
@@ -96,16 +92,14 @@ exports[`Navbar Navbar left-title demo works fine 1`] = `
     class="block"
   >
     <t-navbar
+      fixed="{{false}}"
       leftArrow="{{true}}"
-      tClassContent="t-navbar-content"
-      tClassPlaceholder="t-navbar-placeholder"
       title="标题居中"
     />
   </wx-view>
   <t-navbar
+    fixed="{{false}}"
     leftArrow="{{true}}"
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-view
       class="custom-title"
@@ -120,9 +114,8 @@ exports[`Navbar Navbar left-title demo works fine 1`] = `
     标题尺寸
   </wx-view>
   <t-navbar
+    fixed="{{false}}"
     leftArrow="{{true}}"
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-text
       class="left-text"
@@ -143,9 +136,8 @@ exports[`Navbar Navbar left-title demo works fine 1`] = `
 exports[`Navbar Navbar search demo works fine 1`] = `
 <search>
   <t-navbar
+    fixed="{{false}}"
     leftIcon="slot"
-    tClassContent="t-navbar-content"
-    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-view
       class="search-box"

packages/components/navbar/__test__/__snapshots__/index.test.js.snap

@@ -5,11 +5,8 @@ exports[`navbar :base 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; z-index: 1; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
     >
-      <wx-view
-        class="t-navbar__placeholder t-class-placeholder"
-      />
       <wx-view
         class="t-navbar__content t-class-content"
       >
@@ -40,11 +37,8 @@ exports[`navbar :base 2`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; z-index: 1; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
     >
-      <wx-view
-        class="t-navbar__placeholder t-class-placeholder"
-      />
       <wx-view
         class="t-navbar__content t-class-content"
       >
@@ -75,11 +69,8 @@ exports[`navbar :base 3`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; z-index: 1; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
     >
-      <wx-view
-        class="t-navbar__placeholder t-class-placeholder"
-      />
       <wx-view
         class="t-navbar__content t-class-content"
       >
@@ -110,11 +101,8 @@ exports[`navbar :fixed 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-left-max-width: 281px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px; z-index: 1; --td-navbar-center-left: 94px; --td-navbar-center-width: 187px;"
     >
-      <wx-view
-        class="t-navbar__placeholder t-class-placeholder"
-      />
       <wx-view
         class="t-navbar__content t-class-content"
       >
@@ -145,11 +133,8 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top: 20px; --td-navbar-right: 375px; --td-navbar-left-max-width: 0px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px; --td-navbar-center-left: 375px; --td-navbar-center-width: 0px;"
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 375px; --td-navbar-left-max-width: 0px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px; z-index: 1; --td-navbar-center-left: 375px; --td-navbar-center-width: 0px;"
     >
-      <wx-view
-        class="t-navbar__placeholder t-class-placeholder"
-      />
       <wx-view
         class="t-navbar__content t-class-content"
       >

packages/components/navbar/_example/back-home/index.wxml

@@ -1,4 +1,4 @@
-<t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" title="标题文字">
+<t-navbar fixed="{{false}}" title="标题文字">
   <view slot="capsule" class="custom-capsule">
     <t-icon
       size="40rpx"

packages/components/navbar/_example/base/index.wxml

@@ -1,19 +1,7 @@
 <view class="block">
-  <t-navbar
-    t-class-placeholder="t-navbar-placeholder"
-    t-class-content="t-navbar-content"
-    title="标题文字"
-    t-class-title="nav-title"
-  />
+  <t-navbar title="标题文字" fixed="{{false}}" placeholder t-class-title="nav-title" />
 </view>
 
 <view class="block">
-  <t-navbar
-    t-class-placeholder="t-navbar-placeholder"
-    t-class-content="t-navbar-content"
-    class="block"
-    title="标题文字"
-    left-arrow
-    bind:go-back="handleBack"
-  />
+  <t-navbar class="block" title="标题文字" fixed="{{false}}" left-arrow bind:go-back="handleBack" />
 </view>

packages/components/navbar/_example/custom-color/index.wxml

@@ -1,7 +1 @@
-<t-navbar
-  t-class-placeholder="t-navbar-placeholder"
-  t-class-content="t-navbar-content"
-  class="custom-navbar"
-  left-arrow
-  title="标题文字"
-/>
+<t-navbar class="custom-navbar" fixed="{{false}}" left-arrow title="标题文字" />

packages/components/navbar/_example/img/index.wxml

@@ -1,4 +1,4 @@
-<t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content">
+<t-navbar fixed="{{false}}">
   <view slot="left">
     <t-image
       t-class="custom-image"

packages/components/navbar/_example/left-title/index.wxml

@@ -1,14 +1,14 @@
 <view class="block">
-  <t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" left-arrow title="标题居中" />
+  <t-navbar fixed="{{false}}" left-arrow title="标题居中" />
 </view>
 
-<t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" left-arrow>
+<t-navbar fixed="{{false}}" left-arrow>
   <view slot="left" class="custom-title">标题左对齐</view>
 </t-navbar>
 
 <view class="demo-desc">标题尺寸</view>
 
-<t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" left-arrow>
+<t-navbar fixed="{{false}}" left-arrow>
   <text class="left-text" slot="left" bind:tap="onBack">返回</text>
 </t-navbar>
 <view class="header-title">大标题尺寸</view>

packages/components/navbar/_example/navbar.less

@@ -1,11 +1,5 @@
-.demo .t-navbar--fixed .t-navbar__content {
-  position: relative !important;
+.demo .t-navbar__content {
   padding-top: 0;
-  z-index: 5000;
-}
-
-.demo .t-navbar__placeholder {
-  display: none !important;
 }
 
 .block {

packages/components/navbar/_example/navbar.wxml

@@ -1,4 +1,4 @@
-<t-navbar title="NavBar" leftArrow />
+<t-navbar title="NavBar" zIndex="{{99}}" leftArrow placeholder zIndex="{{99}}" />
 <view class="demo">
   <t-demo-header
     title="NavBar 导航栏"

packages/components/navbar/_example/search/index.wxml

@@ -1,4 +1,4 @@
-<t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" leftIcon="slot">
+<t-navbar fixed="{{false}}" leftIcon="slot">
   <view class="search-box" slot="left">
     <t-search shape="round" placeholder="搜索内容" />
   </view>

packages/components/navbar/_example/skyline/navbar.less

@@ -1,12 +1,3 @@
-.t-navbar-content {
-  position: relative !important;
-  padding-top: 0 !important;
-}
-
-.t-navbar-placeholder {
-  display: none !important;
-}
-
 .base {
   display: block;
 }