playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

updating the components pages.

pull/231/head
connors 11 years ago
parent
8da0f5bd3f
commit
7b2bd297da
2 changed files with 874 additions and 874 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      examples/components/classic/index.html
  2. 122
      examples/components/default/index.html

120
examples/components/classic/index.html
Unescape View File

@ -46,17 +46,17 @@
</a> </a>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
</ul> </ul>
</div> </div>
@ -362,34 +362,34 @@
<!-- LIST ============================================================ --> <!-- LIST ============================================================ -->
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li> <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-divider">With buttons</li> <li class="table-view-cell table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li> <li class="table-view-cell table-view-divider">With a toggle</li>
<li> <li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
<a href="#"> <a href="#">
Item2 Item2
</a> </a>
@ -397,7 +397,7 @@
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item3 Item3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
@ -406,47 +406,47 @@
</ul> </ul>
<ul class="table-view inset"> <ul class="table-view inset">
<li class="table-view-divider">Normal</li> <li class="table-view-cell table-view-divider">Normal</li>
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li> <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li> <li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li> <li class="table-view-cell table-view-divider">With a toggle</li>
<li> <li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item2 Item2
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item3 Item3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-divider">Bottom table-view-divider test</li> <li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
</ul> </ul>
<!-- List with <a>'s --> <!-- List with <a>'s -->

122
examples/components/default/index.html
Unescape View File

@ -46,17 +46,17 @@
</a> </a>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
</ul> </ul>
</div> </div>
@ -74,7 +74,7 @@
</header> </header>
<div> <div>
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div> <div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div> </div>
@ -362,34 +362,34 @@
<!-- LIST ============================================================ --> <!-- LIST ============================================================ -->
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li> <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-divider">With buttons</li> <li class="table-view-cell table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li> <li class="table-view-cell table-view-divider">With a toggle</li>
<li> <li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
<a href="#"> <a href="#">
Item2 Item2
</a> </a>
@ -397,7 +397,7 @@
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item3 Item3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
@ -406,47 +406,47 @@
</ul> </ul>
<ul class="table-view inset"> <ul class="table-view inset">
<li class="table-view-divider">Normal</li> <li class="table-view-cell table-view-divider">Normal</li>
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li class="table-view-divider">With badges</li> <li class="table-view-cell table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li> <li class="table-view-cell table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li> <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge">1</span></li> <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li> <li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li> <li class="table-view-cell table-view-divider">With a toggle</li>
<li> <li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item2 Item2
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li class="table-view-cell">
Item3 Item3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-divider">Bottom table-view-divider test</li> <li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
</ul> </ul>
<!-- List with <a>'s --> <!-- List with <a>'s -->

Write Preview
Loading…
Cancel
Save