Skip to content

M
mui
Commit 3d43667e authored by hbcui1984's avatar hbcui1984
Browse files
Options

优化hello mui中actionsheet的描述信息

parent a8d81086
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 31 deletions
examples/hello-mui/examples/actionsheet-plus.html
View file @ 3d43667e
......@@ -34,6 +34,13 @@
#info{
padding: 20px 10px ;
}
.des{
margin: .5em 0;
}
.des>li{
font-size: 14px;
color: #8f8f94;
}
</style>
<script>
mui.init();
......@@ -59,15 +66,16 @@
</nav>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是5+ runtime封装的原生Actionsheet，
优点是无需考虑跨webview的遮罩问题，
缺点是样式固定，无法自定义；
多webview模式下推荐使用原生模式的Actionsheet；
<!--<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：-->
</p>
<p>这是5+ runtime封装的原生actionsheet，该模式具备如下优点：</p>
<ul class="des">
<li>支持覆盖顶部状态栏</li>
<li>支持跨webview的遮罩</li>
<li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li>
</ul>
<p>另一方面，原生模式的actionsheet目前暂不支持样式自定义</p>
<p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
</div>
</div>
......
examples/hello-mui/examples/actionsheet.html
View file @ 3d43667e
......@@ -34,6 +34,13 @@
#info{
padding: 20px 10px ;
}
.des{
margin: .5em 0;
}
.des>li{
font-size: 14px;
color: #8f8f94;
}
</style>
<script>
mui.init();
......@@ -60,19 +67,22 @@
</nav>
<div class="mui-content">
<div class="mui-content-padded">
<p>Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； ActionSheet可从任意位置触发， 点击本页面左下角
<p>actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； actionSheet可从任意位置触发， 点击本页面左下角
<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：
</p>
<p>
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a>
</p>
<p>本页面为H5模式的Actionsheet演示示例，
H5模式的优点是可通过css自由定制展现样式，
缺点是不支持跨webview的遮罩，
当前页面使用了双webview的模板机制，故Actionsheet弹出后，顶部导航栏并未被遮罩层覆盖；
在单webview模式下，推荐使用H5模式的Actionsheet；
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
<p>本页面为H5模式的actionsheet演示示例，该模式具有如下优点：</p>
<ul class="des"><li>可通过css自由定制展现样式</li></ul>
<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
<ul class="des">
<li>不支持覆盖顶部状态栏</li>
<li>不支持跨webview的遮罩</li>
<li>在有map等原生组件时，容易被遮挡</li>
</ul>
<p id="info"></p>
</div>
</div>
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 3d43667e
......@@ -22,6 +22,15 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
......@@ -30,25 +39,22 @@
margin-top: 50px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
......@@ -145,7 +151,26 @@
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script>
......
examples/hello-mui/list.html
View file @ 3d43667e
......@@ -29,17 +29,17 @@
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
Actionsheet（操作表）
actionsheet（操作表）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet.html">
H5模式Actionsheet
H5模式actionsheet
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet-plus.html">
原生模式Actionsheet
原生模式actionsheet
</a>
</li>
</ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment