diff --git a/README.md b/README.md index be7c8a4..e22a371 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,27 @@ toast用于临时显示某些信息，并且会在数秒后自动消失。这些 ``` +## ActionSheet +`ActionSheet`用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。 + +![](./dist/example/snapshot/actionSheet.png) + +```html +
+
+
+
+
示例菜单
+
示例菜单
+
示例菜单
+
示例菜单
+
+
+
取消
+
+
+
+``` ## Icon diff --git a/dist/example/example.css b/dist/example/example.css index fbd4629..cec7850 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.msg .weui_msg{padding-top:30px}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards} \ No newline at end of file +.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards} \ No newline at end of file diff --git a/dist/example/images/icon_nav_actionSheet.png b/dist/example/images/icon_nav_actionSheet.png new file mode 100644 index 0000000..4303640 Binary files /dev/null and b/dist/example/images/icon_nav_actionSheet.png differ diff --git a/dist/example/index.html b/dist/example/index.html index 5246bab..33695fc 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -73,9 +73,9 @@ - +
-

Action Sheet

+

ActionSheet

@@ -261,7 +261,7 @@
开关
-
+
标题文字
@@ -282,7 +282,7 @@
-
+
@@ -297,12 +297,13 @@
-
+
+
底部说明文字底部说明文字
确定
@@ -502,25 +503,20 @@