action sheet update

kevinfsz · Apr 7, 2017 · 8a11ee5 · 8a11ee5
1 parent dc08fc9
commit 8a11ee5
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 6 deletions.
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -1141,6 +1141,9 @@ <h1 class="page__title">ActionSheet</h1>
     <div>
         <div class="weui-mask" id="iosMask" style="display: none"></div>
         <div class="weui-actionsheet" id="iosActionsheet">
+            <div class="weui-actionsheet__title">
+                <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行，但不应该展示超过三行的文案。</p>
+            </div>
             <div class="weui-actionsheet__menu">
                 <div class="weui-actionsheet__cell">示例菜单</div>
                 <div class="weui-actionsheet__cell">示例菜单</div>

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/fragment/actionsheet.html b/src/example/fragment/actionsheet.html
@@ -11,6 +11,9 @@ <h1 class="page__title">ActionSheet</h1>
     <div>
         <div class="weui-mask" id="iosMask" style="display: none"></div>
         <div class="weui-actionsheet" id="iosActionsheet">
+            <div class="weui-actionsheet__title">
+                <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行，但不应该展示超过三行的文案。</p>
+            </div>
             <div class="weui-actionsheet__menu">
                 <div class="weui-actionsheet__cell">示例菜单</div>
                 <div class="weui-actionsheet__cell">示例菜单</div>

diff --git a/src/style/widget/weui-tips/weui-actionsheet.less b/src/style/widget/weui-tips/weui-actionsheet.less
@@ -13,12 +13,31 @@
     //slide up animation
     transition: transform .3s;
 }
+.weui-actionsheet__title {
+    position: relative;
+    height: 65px;
+    padding: 0 20px;
+    line-height: 1.4;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    font-size: 14px;
+    color: #888;
+    background: #FCFCFD;
+    &:before {
+        .setBottomLine(@weuiCellBorderColor);
+    }
+    .weui-actionsheet__title-text {
+        .ellipsisLn(2);
+    }
+}
 .weui-actionsheet__menu{
-    background-color: #FFFFFF;
+    background-color: #FCFCFD;
 }
 .weui-actionsheet__action {
     margin-top: 6px;
-    background-color: #FFFFFF;
+    background-color: #FCFCFD;;
 }
 .weui-actionsheet__cell {
     position: relative;