- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 18 Jan 2012 02:37:36 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv20965
Modified Files:
Overview.html Overview.src.html flex-order-example.html
Log Message:
Add example showing tab-reordering using flex-order.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.html 18 Jan 2012 00:59:43 -0000 1.93
+++ Overview.html 18 Jan 2012 02:37:33 -0000 1.94
@@ -924,7 +924,27 @@
<button>Three</button></div>
</div>
- <p class=issue>Add a realistic example of tab reordering.
+ <div class=example>
+ <p>The following figure shows a simple tabbed interface, where the tab for
+ the active pane is always in front:</p>
+
+ <div class=figure><img src="images/flex-order-example.png"></div>
+
+ <p>This could be implemented with the following CSS (showing only the
+ flexbox-relevant code):</p>
+
+ <pre>
+.tabs {
+ display: flexbox;
+}
+.tabs > .current {
+ flex-order: -1; /* Lower than the default of 0 */
+}</pre>
+
+ <p>You can also see a <a href=flex-order-example.html>working example</a>
+ in some modern browsers (modern WebKit, Firefox, or any browser that
+ supports the Flexbox spec).</p>
+ </div>
<p class=issue>Add an example of reordering columns in a page.
Index: flex-order-example.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/flex-order-example.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- flex-order-example.html 18 Jan 2012 02:13:59 -0000 1.1
+++ flex-order-example.html 18 Jan 2012 02:37:34 -0000 1.2
@@ -32,20 +32,16 @@
border: 2px solid;
border-bottom: none;
cursor: pointer;
- -moz-box-ordinal-group: 2;
- -webkit-box-ordinal-group: 2;
- -webkit-flex-order: 2;
- flex-order: 2;
}
.tabs > li.current {
color: black;
border-bottom: 2px solid transparent;
position: relative;
bottom: -2px;
- -moz-box-ordinal-group: 1;
- -webkit-box-ordinal-group: 1;
- -webkit-flex-order: 1;
- flex-order: 1;
+ -moz-box-ordinal-group: 0;
+ -webkit-box-ordinal-group: 0;
+ -webkit-flex-order: -1;
+ flex-order: -1;
}
.cards {
border: 2px solid;
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.src.html 18 Jan 2012 00:59:43 -0000 1.93
+++ Overview.src.html 18 Jan 2012 02:37:34 -0000 1.94
@@ -413,7 +413,23 @@
</div>
</div>
- <p class='issue'>Add a realistic example of tab reordering.</p>
+ <div class='example'>
+ <p>The following figure shows a simple tabbed interface, where the tab for the active pane is always in front:</p>
+
+ <div class='figure'><img src="images/flex-order-example.png"></div>
+
+ <p>This could be implemented with the following CSS (showing only the flexbox-relevant code):</p>
+
+ <pre>
+.tabs {
+ display: flexbox;
+}
+.tabs > .current {
+ flex-order: -1; /* Lower than the default of 0 */
+}</pre>
+
+ <p>You can also see a <a href="flex-order-example.html">working example</a> in some modern browsers (modern WebKit, Firefox, or any browser that supports the Flexbox spec).</p>
+ </div>
<p class='issue'>Add an example of reordering columns in a page.</p>
Received on Wednesday, 18 January 2012 02:37:37 UTC