docs/components/split-buttons.html.erb in zurb-foundation-4.2.3 vs docs/components/split-buttons.html.erb in zurb-foundation-4.3.0
- old
+ new
@@ -13,13 +13,36 @@
<div class="row">
<div class="large-12 columns">
<a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
+ <ul id="drop" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
+
<a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop2"></span></a><br>
+ <ul id="drop2" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
+
<a href="#" class="button alert round split">Split Button <span data-dropdown="drop3"></span></a><br>
+ <ul id="drop3" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
+
<a href="#" class="large success button split">Split Button <span data-dropdown="drop4"></span></a><br>
+ <ul id="drop4" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
<hr>
<h3>Build With Predefined HTML Classes</h3>
<p>There are two ways to build buttons in Foundation 4: with our predefined HTML classes or our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <code><a></code>, <code><button></code> or <code><input></code> with a class of <code>.button.split</code>. This will create a default medium button. You can also use size, color and radius classes to control more of the style.</p>
@@ -75,10 +98,15 @@
@include split-button;
}
', :css %>
<a href="" class="split button">Default Split Button<span data-dropdown="drop5"></span></a>
+ <ul id="drop5" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
<p>There are also <strong>four options</strong> you can customize on the fly when writing this mixin. These control things like: padding size, pip color, border color and base styles. Setting any of these options to <strong>false</strong> will not include the styles.</p>
<%= code_example '
/* Using the available options */
@@ -101,10 +129,12 @@
$base-style: true
', :css %>
<h5>Default SCSS Variables</h5>
<%= code_example '
+$include-html-button-classes: $include-html-classes;
+
/* We use these to control different shared styles for Split Buttons */
$split-button-function-factor: 15%;
$split-button-pip-color: #fff;
$split-button-pip-color-alt: #333;
$split-button-active-bg-tint: rgba(0,0,0,0.1);
@@ -112,32 +142,32 @@
/* We use these to control tiny split buttons */
$split-button-padding-tny: $button-tny * 9;
$split-button-span-width-tny: $button-tny * 6.5;
$split-button-pip-size-tny: $button-tny;
$split-button-pip-top-tny: $button-tny * 2;
-$split-button-pip-left-tny: emCalc(-5px);
+$split-button-pip-default-float-tny: emCalc(-5);
/* We use these to control small split buttons */
$split-button-padding-sml: $button-sml * 7;
$split-button-span-width-sml: $button-sml * 5;
$split-button-pip-size-sml: $button-sml;
$split-button-pip-top-sml: $button-sml * 1.5;
-$split-button-pip-left-sml: emCalc(-9px);
+$split-button-pip-default-float-sml: emCalc(-9);
/* We use these to control medium split buttons */
$split-button-padding-med: $button-med * 6.4;
$split-button-span-width-med: $button-med * 4;
-$split-button-pip-size-med: $button-med - emCalc(3px);
+$split-button-pip-size-med: $button-med - emCalc(3);
$split-button-pip-top-med: $button-med * 1.5;
-$split-button-pip-left-med: emCalc(-9px);
+$split-button-pip-default-float-med: emCalc(-9);
/* We use these to control large split buttons */
$split-button-padding-lrg: $button-lrg * 6;
$split-button-span-width-lrg: $button-lrg * 3.75;
-$split-button-pip-size-lrg: $button-lrg - emCalc(6px);
-$split-button-pip-top-lrg: $button-lrg + emCalc(5px);
-$split-button-pip-left-lrg: emCalc(-9px);
+$split-button-pip-size-lrg: $button-lrg - emCalc(6);
+$split-button-pip-top-lrg: $button-lrg + emCalc(5);
+$split-button-pip-default-float-lrg: emCalc(-9);
', :css %>
<p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
<hr>
@@ -153,68 +183,40 @@
<h5>Creating the Dropdown</h5>
<p>To create a dropdown, you'll need to attach a data-attribute to whatever element you want the dropdown attached to (in this case a button). From there, you'll create a list that holds the links or content and add another data-attribute that associates with the element it belongs to. Here's an example of that markup:</p>
<%= code_example '
<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button <span data-dropdown="drop1"></span></a><br>
-
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>
', :html %>
- <a href="#" class="button split">Dropdown Button <span data-dropdown="drop1"></span></a><br>
+ <a href="#" class="button split">Dropdown Button <span data-dropdown="drop6"></span></a><br>
+ <ul id="drop6" class="f-dropdown" data-dropdown-content>
+ <li><a href="#">This is a link</a></li>
+ <li><a href="#">This is another</a></li>
+ <li><a href="#">Yet another</a></li>
+ </ul>
<p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.</p>
<h5>Optional JavaScript Configuration</h5>
<p>Dropdown button options can only be passed in during initialization at this time.</p>
-<%= code_example "
-{
+<%= code_example "{
// specify the class used for active sections
activeClass: 'open'
-}", :json %>
+}", :js %>
</div>
</div>
</div>
<div class="large-3 pull-9 columns">
<%= render "_sidebar-components.html.erb" %>
</div>
</div>
-
- <ul id="drop" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>
- <ul id="drop1" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>
- <ul id="drop2" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>
- <ul id="drop3" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>
- <ul id="drop4" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>
- <ul id="drop5" class="f-dropdown" data-dropdown-content>
- <li><a href="#">This is a link</a></li>
- <li><a href="#">This is another</a></li>
- <li><a href="#">Yet another</a></li>
- </ul>