<p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">Flexbox</a> allows for elements to intuitively resize to fill available space, making many complex layouts much simpler.</p>
@ -40,15 +43,48 @@ type : 'Introduction'
</div>
<div class="no example">
<h4 class="ui header">Color All The Things</h4>
<p>2.0
<div class="colored example">
<h4 class="ui header">New Colors</h4>
<p><code>2.0</code> includes additional named colors olive, violet, brown and grey which help provide more expressiveness with color variations.</p>
<h4 class="ui header">Equal Height by Default</h4>
<h4 class="ui header">Flexbox Grid</h4>
<p>Grids in 2.0 now use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank"><code>flexbox</code></a> and are equal height across rows by default.</p>
<div class="ui three column divided grid">
<div class="row">
@ -81,7 +117,7 @@ type : 'Introduction'
</div>
<div class="highlighted example">
<h4 class="ui header">Automatic Columns</h4>
<p>The new <a href="/collections/grid.html#equal-width"><code>equal width</code></a> grid variation adjusts column widths automatically to split their container evenly without having to manually specify a column count.</p>
<p>The new <a href="/collections/grid.html#equal-width"><code>equal width</code></a> grid variation adjusts column widths automatically to evenly split their container without having to manually specify a column count.</p>
<td>When set to <code>auto</code> determines direction based on whether dropdown can fit on screen. Set to <code>upward</code> or <code>downward</code> to always force a direction.</td>
<td>When enabled will automatically store selected name/value pairs in <code>sessionStorage</code> to preserve user selection on page refresh. Disabling will clear remote dropdown values on refresh.</td>
</tr>
<tr>
<td>sortSelect</td>
<td>false</td>
<td>Whether to sort values when creating a dropdown automatically from a select element.</td>
</tr>
<tr>
<td>forceSelection</td>
<td>true</td>
<td>Whether search selection will force currently selected choice when element is blurred.</td>
</tr>
<tr>
<td>allowAdditions</td>
<td>false</td>
<td>Whether search selection should allow users to add their own selections, works for single or multiselect.</td>
</tr>
<tr>
<td>showOnFocus</td>
<td>true</td>
<td>Whether to show dropdown menu automatically on element focus.</td>
</tr>
<tr>
<td>allowTab</td>
<td>true</td>
<td>Whether to allow a <code>tabindex</code> to be created for this element </td>
</tr>
<tr>
<td>allowCategorySelection</td>
<td>false</td>
<td>Whether menu items with sub-menus (categories) should be selectable</td>
</tr>
<tr>
<td>transition</td>
<td>
auto (slide down / slide up)
</td>
<td>Named transition to use when animating menu in and out. Defaults to <code>slide down</code> or <code>slide up</code> depending on dropdown direction. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>
200
</td>
<td>Duration of animation events</td>
</tr>
<tr>
<td>delay</td>
<td>
<div class="code">
delay : {
hide : 300,
show : 200,
search : 50,
touch : 50
}
</div>
</td>
<td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used, or when touch is used.</td>
<td>When set to <code>auto</code> determines direction based on whether dropdown can fit on screen. Set to <code>upward</code> or <code>downward</code> to always force a direction.</td>
</tr>
<tr>
<td>keepOnScreen</td>
<td>true</td>
<td>Whether dropdown should try to keep itself on screen by checking whether menus display position in its <code>context</code> (Default context is page).</td>
</tr>
<tr>
<td>context</td>
<td>window</td>
<td>Element context to use when checking whether can show when <code>keepOnScreen: true</code></td>
</tr>
<tr>
<td>fullTextSearch</td>
<td>false</td>
<td>Whether search selections should look for string match anywhere in string</td>
</tr>
<tr>
<td>preserveHTML</td>
<td>true</td>
<td>Whether html included in dropdown values should be preserved. (Allows icons to show up in selected value)</td>
</tr>
<tr>
<td>sortSelect</td>
<td>false</td>
<td>Whether to sort values when creating a dropdown automatically from a select element.</td>
</tr>
<tr>
<td>showOnFocus</td>
<td>true</td>
<td>Whether to show dropdown menu automatically on element focus.</td>
</tr>
<tr>
<td>allowTab</td>
<td>true</td>
<td>Whether to allow the element to be navigable by keyboard, by automatically creating a <code>tabindex</code></td>
</tr>
<tr>
<td>transition</td>
<td>
auto (slide down / slide up)
</td>
<td>Named transition to use when animating menu in and out. Defaults to <code>slide down</code> or <code>slide up</code> depending on dropdown direction. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>
200
</td>
<td>Duration of animation events</td>
</tr>
<tr>
<td>delay</td>
<td>
<div class="code">
delay : {
hide : 300,
show : 200,
search : 50,
touch : 50
}
</div>
</td>
<td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used, or when touch is used.</td>
jlukic
9 years ago