|
|
---layout : 'default'css : 'accordion'element : 'accordion'elementType : 'module'
title : 'Accordion'description : 'An accordion allows users to toggle the display of sections of content'type : 'UI Module'
themes : ['Default', 'Chubby']---<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/accordion.less" /><script src="/javascript/accordion.js"></script>
<%- @partial('header', { tabs: 'module' }) %>
<div class="main container">
<div class="ui active tab" data-tab="definition">
<h2 class="ui dividing header">Types</h2> <div class="example"> <h4 class="ui header">Accordion</h4> <p>A standard accordion</p> <div class="ui accordion"> <div class="active title"> <i class="dropdown icon"></i> What is a dog? </div> <div class="active content"> <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> </div> <div class="title"> <i class="dropdown icon"></i> What kinds of dogs are there? </div> <div class="content"> <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> </div> <div class="title"> <i class="dropdown icon"></i> How do you acquire a dog? </div> <div class="content"> <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> </div> </div> </div>
<div class="example"> <h4 class="ui header">Styled</h4> <p>A styled accordion adds basic formatting</p> <div class="ui styled accordion"> <div class="active title"> <i class="dropdown icon"></i> What is a dog? </div> <div class="active content"> <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> </div> <div class="title"> <i class="dropdown icon"></i> What kinds of dogs are there? </div> <div class="content"> <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> </div> <div class="title"> <i class="dropdown icon"></i> How do you acquire a dog? </div> <div class="content"> <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> </div> </div> </div>
<h2 class="ui dividing header">Variations</h2> <div class="example"> <h4 class="ui header">Fluid</h4> <p>An accordion can take up the width of its container</p> <div class="ui styled fluid accordion"> <div class="active title"> <i class="dropdown icon"></i> What is a dog? </div> <div class="active content"> <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> </div> <div class="title"> <i class="dropdown icon"></i> What kinds of dogs are there? </div> <div class="content"> <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> </div> <div class="title"> <i class="dropdown icon"></i> How do you acquire a dog? </div> <div class="content"> <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> </div> </div> </div>
</div>
<div class="ui tab" data-tab="examples">
<h2 class="ui dividing header">Examples</h2>
<div class="example"> <h4 class="ui header">Nested</h4> <p>An accordion can have multiple levels of nested content. This content can either be in a nested <code>accordion</code> or simply another level of <code>title</code> and <code>content</code></p> <div class="ui styled accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1 </div> <div class="active content"> Welcome to level 1 <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1A </div> <div class="active content"> <p>Level 1A Contents</p> <div class="accordion"> <div class="title"> <i class="dropdown icon"></i> Level 1A-A </div> <div class="content"> Level 1A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1A-B </div> <div class="content"> Level 1A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 1B </div> <div class="content"> Level 1B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1C </div> <div class="content"> Level 1C Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2 </div> <div class="content"> <p>Welcome to level 2</p> <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 2A </div> <div class="active content"> <p>Level 2A Contents</p> <div class="accordion"> <div class="title"> <i class="dropdown icon"></i> Level 2A-A </div> <div class="content"> Level 2A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2A-B </div> <div class="content"> Level 2A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2B </div> <div class="content"> Level 2B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2C </div> <div class="content"> Level 2C Contents </div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Form</h4> <p>An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.</p> <div class="ui segment"> <div class="ui fluid form"> <div class="two fields"> <div class="field"> <label>First Name</label> <input placeholder="First Name" type="text"> </div> <div class="field"> <label>Last Name</label> <input placeholder="Last Name" type="text"> </div> </div> <div class="ui accordion field"> <div class="title"> <i class="icon dropdown"></i> Optional Details </div> <div class="content field"> <label>Maiden Name</label> <input placeholder="Maiden Name" type="text"> </div> </div> <div class="ui secondary submit button">Sign Up</div> </div> </div> </div> <div class="example"> <h4 class="ui header">Menu</h4> <p>An accordion can be used to create content drawers inside a menu</p> <div class="ui vertical accordion menu"> <div class="item"> <a class="active title"> <i class="dropdown icon"></i> Size </a> <div class="active content"> <div class="ui form"> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="size" value="small" /> <label>Small</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="size" value="medium" /> <label>Medium</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="size" value="large" /> <label>Large</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="size" value="x-large" /> <label>X-Large</label> </div> </div> </div> </div> </div> </div> <div class="item"> <a class="title"> <i class="dropdown icon"></i> Colors </a> <div class="content"> <div class="ui form"> <div class="grouped fields"> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="small" /> <label>Red</label> </div> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="medium" /> <label>Orange</label> </div> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="large" /> <label>Green</label> </div> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="x-large" /> <label>Blue</label> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Initializing</h2>
<div class="no example"> <h4 class="ui header">Initializing an accordion</h4> <p>Accordion is initialized on pre-existing markup</p> <div class="test code"> $('.ui.accordion') .accordion() ; </div> </div>
<div class="no example"> <h4 class="ui header">AJAX Content</h4> <p>Accordions use <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">DOM Mutation Observers</a> and delegated events to allow for easy compataibility with AJAX content, or content added after initialization.</p> <p>If the DOM tree changes the module will automatically call <code>module.refresh</code> and update the selector cache. Because events are bound on the parent module using delegated events, events will automatically fire on content added after initialization.</p> <p>If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's <code>refresh</code> behavior. <div class="code" data-type="javascript"> $('.ui.accordion').accordion('refresh'); </div> </div>
<h2 class="ui dividing header">Behaviors</h2>
<p>Behaviors are short english phrases used for accessing specific functionality in
<p>Behaviors are accessible with javascript using the syntax:<p> <div class="code"> $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...); </div>
<table class="ui definition celled table"> <tr> <td>open (index)</td> <td>Opens accordion content at index</td> </tr> <tr> <td>close others</td> <td>Closes accordion content that are not active</td> </tr> <tr> <td>close (index)</td> <td>Closes accordion content at index</td> </tr> <tr> <td>toggle (index)</td> <td>Toggles accordion content at index</td> </tr> </table>
</div>
<div class="ui tab" data-tab="settings"> <h2 class="ui dividing header"> Accordion </h2>
<h4 class="ui header"> Behavior </h4> <table class="ui sortable celled definition table"> <thead> <th class="three wide"></th> <th class="three wide">Default</th> <th>Description</th> </thead> <tbody> <tr> <td>exclusive</td> <td>true</td> <td>Only allow one section open at a time</td> </tr> <tr> <td>close nested</td> <td>true</td> <td>Allow active sections to collapse</td> </tr> <tr> <td>collapsible</td> <td>true</td> <td>Allow active sections to collapse</td> </tr> <tr> <td>duration</td> <td>500</td> <td>Duration in ms of opening animation</td> </tr> <tr> <td>easing</td> <td>easeInOutQuint</td> <td>Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include <a href="http://gsgd.co.uk/sandbox/jquery/easing/">easing equations</a>.</td> </tr> </tbody> </table>
<h4 class="ui header"> Callbacks </h4>
<table class="ui sortable celled definition table"> <thead> <th class="three wide"></th> <th class="three wide">Context</th> <th>Description</th> </thead> <tbody> <tr> <td>onOpen</td> <td>active content</td> <td>Callback on element open</td> </tr> <tr> <td>onClose</td> <td>active content</td> <td>Callback on element close</td> </tr> <tr> <td>onChange</td> <td>active content</td> <td>Callback on element open or close</td> </tr> </tbody> </table>
<h2 class="ui dividing header"> Module </h2>
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
<table class="ui sortable celled definition table"> <thead> <th></th> <th class="six wide">Default</th> <th>Description</th> </thead> <tbody> <tr> <td>name</td> <td>Accordion</td> <td>Name used in log statements</td> </tr> <tr> <td>namespace</td> <td>accordion</td> <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> </tr> <tr> <td>selector</td> <td> <div class="code" data-type="css"> selector : { accordion : '.accordion', title : '.title', content : '.content' } </div> </td> <td>Selectors used to find parts of a module</td> </tr> <tr> <td>className</td> <td> <div class="code"> className : { active : 'active' } </div> </td> <td>Class names used to determine element state</td> </tr> <tr> <td>debug</td> <td>false</td> <td>Debug output to console</td> </tr> <tr> <td>performance</td> <td>false</td> <td>Show <code>console.table</code> output with performance metrics</td> </tr> <tr> <td>verbose</td> <td>false</td> <td>Debug output includes all internal behaviors</td> </tr> <tr> <td>errors</td> <td colspan="2"> <div class="code"> error : { method : 'The method you called is not defined.' } </div> </td> </tr> </tbody> </table> </div></div>
|
