Skip to content

C
cube-ui

DiDi / cube-ui
12 个月 前同步成功

通知 34
Star 9078
Fork 1508
C
cube-ui

体验新版 GitCode，发现更多精彩内容 >>

提交 81f92d98 编写于 作者: W wind-stone 提交者： doly mood
浏览文件
操作

iPhone X compatible: ActionSheet、Picker (#47)

上级 c3cbe43c
隐藏空白更改
内联 并排
Showing with 17 addition and 3 deletion
example/index.html
浏览文件 @ 81f92d98
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>cube-ui lib</title> <title>cube-ui lib</title>
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/common/stylus/base.styl
浏览文件 @ 81f92d98
@require "./variable.styl" @require "./variable.styl"
@require "./mixin.styl"
body, html body, html
line-height: 1 line-height: 1
...@@ -52,6 +53,9 @@ body, html ...@@ -52,6 +53,9 @@ body, html
height: 100% height: 100%
transform-origin: left 0 transform-origin: left 0
.cube-safe-area-pb
safe-area-mixin(padding-bottom, bottom, true)
@media (min-resolution: 2dppx) @media (min-resolution: 2dppx)
.border-top-1px .border-top-1px
&::before &::before
......
src/common/stylus/mixin.styl
浏览文件 @ 81f92d98
...@@ -54,3 +54,10 @@ bg-image($url, $ext = ".png") ...@@ -54,3 +54,10 @@ bg-image($url, $ext = ".png")
background-image: url($url + "@2x" + $ext) background-image: url($url + "@2x" + $ext)
@media (min-resolution: 3dppx) @media (min-resolution: 3dppx)
background-image: url($url + "@3x" + $ext) background-image: url($url + "@3x" + $ext)
functions = constant env
safe-area-fn(fn, position)
s("%s(safe-area-inset-%s)", fn, position)
safe-area-mixin(property, position, important = false)
for fn in functions
{property} safe-area-fn(fn, position) important == true ? !important : unquote("")
src/common/stylus/theme/default.styl
浏览文件 @ 81f92d98
...@@ -6,6 +6,7 @@ $action-sheet-active-color := $color-orange ...@@ -6,6 +6,7 @@ $action-sheet-active-color := $color-orange
$action-sheet-bgc := $color-white $action-sheet-bgc := $color-white
$action-sheet-active-bgc := $color-light-grey-opacity $action-sheet-active-bgc := $color-light-grey-opacity
$action-sheet-title-color := $color-dark-grey $action-sheet-title-color := $color-dark-grey
$action-sheet-space-bgc := $color-mask-bg
/// picker style /// picker style
$action-sheet-picker-cancel-color := $color-light-grey $action-sheet-picker-cancel-color := $color-light-grey
$action-sheet-picker-cancel-active-color := $color-light-grey-s $action-sheet-picker-cancel-active-color := $color-light-grey-s
......
src/components/action-sheet/action-sheet.vue
浏览文件 @ 81f92d98
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
@touchmove.prevent="noop" @touchmove.prevent="noop"
@click="cancel"> @click="cancel">
<transition name="cube-action-sheet-move"> <transition name="cube-action-sheet-move">
<div class="cube-action-sheet-panel" v-show="isVisible" @click.stop="noop"> <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop="noop">
<h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1> <h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1>
<div class="cube-action-sheet-content"> <div class="cube-action-sheet-content">
<ul class="cube-action-sheet-list"> <ul class="cube-action-sheet-list">
...@@ -94,6 +94,7 @@ ...@@ -94,6 +94,7 @@
.cube-action-sheet-panel .cube-action-sheet-panel
text-align: center text-align: center
font-size: $fontsize-medium font-size: $fontsize-medium
background-color: $action-sheet-bgc
.cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active .cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active
transform: translate3d(0, 100%, 0) transform: translate3d(0, 100%, 0)
.cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active .cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active
...@@ -142,6 +143,7 @@ ...@@ -142,6 +143,7 @@
.cube-action-sheet-space .cube-action-sheet-space
height: 6px height: 6px
background-color: $action-sheet-space-bgc
.cube-action-sheet-item_active .cube-action-sheet-item_active
color: $action-sheet-active-color color: $action-sheet-active-color
......
src/components/picker/picker.vue
浏览文件 @ 81f92d98
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@touchmove.prevent @touchmove.prevent
@mask-click="cancel"> @mask-click="cancel">
<transition name="cube-picker-move"> <transition name="cube-picker-move">
<div class="cube-picker-panel" v-show="isVisible" @click.stop> <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
<div class="cube-picker-choose border-bottom-1px"> <div class="cube-picker-choose border-bottom-1px">
<span data-action="cancel" @click="cancel">{{cancelTxt}}</span> <span data-action="cancel" @click="cancel">{{cancelTxt}}</span>
<span data-action="confirm" @click="confirm">{{confirmTxt}}</span> <span data-action="confirm" @click="confirm">{{confirmTxt}}</span>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或