javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

structure idea 1

Browse Source
This commit is contained in:
Adam Bradley
2015-04-09 12:13:58 -05:00
parent 8e97c8b30c
commit 660a2da4a7
1 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/components/app/test/testing/index.html Normal file
View File

@@ -0,0 +1,171 @@
<style>
body * {
display: block;
box-sizing: border-box;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background: maroon;
position: relative;
}
navview {
position: absolute;
background: gray;
height: 100vh;
width: 100%;
display:flex;
flex-direction: column;
top: 0;
left: 0;
}
toolbars {
background: blue;
position: relative;
width: 100%;
min-height: 50px;
overflow: hidden;
}
toolbar {
background: green;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
tabs {
background: red;
display: flex;
justify-content: center;
}
tab {
background: blue;
color: white;
height: 50px;
padding: 0 20px;
border: 1px solid white;
text-align: center;
display: flex;
align-items: center;
justify-content:center;
}
view-container {
position: relative;
background: yellow;
height: 100%;
overflow: hidden;
}
view {
position: absolute;
background: orange;
height: 100%;
width: 100%;
}
.entering {
box-shadow: 0px 0px 5px 5px black;
}
.entering-1 {
transform: translateX(20%);
}
.entering-2 {
transform: translateX(40%);
}
</style>
<navview>
<toolbars>
<toolbar>
Level 1, View 1 Toolbar
</toolbar>
<toolbar class="entering entering-1">
Level 1, View 2 Toolbar
</toolbar>
</toolbars>
<view-container>
<view>
Level 1, View 1 Content
</view>
<view class="entering entering-1">
Level 1, View 2 Content
</view>
</view-container>
<navview class="entering entering-2">
<toolbars>
<toolbar style="background:purple">
Level 2, View 1 Toolbar
</toolbar>
<toolbar class="entering entering-1" style="background:purple">
Level 2, View 2 Toolbar
</toolbar>
</toolbars>
<view-container>
<view style="background:yellow">
Level 2, View 1 Content
</view>
<view class="entering entering-1" style="background:yellow">
Level 2, View 2 Content
</view>
</view-container>
<navview class="entering entering-2">
<toolbars>
<toolbar style="background:red">
Level 3, View 1 Toolbar
</toolbar>
<toolbar class="entering entering-1" style="background:red">
Level 3, View 2 Toolbar
</toolbar>
</toolbars>
<view-container>
<view style="background:blue">
Level 3, View 1 Content
</view>
<view class="entering entering-1" style="background:blue">
Level 3, View 2 Content
</view>
</view-container>
</navview>
</navview>
</navview>