---
page: 'reference-detail'
title: 'ons-splitter'
name: 'ons-splitter'
collection: 'components'
reference: true
docCategory: 'js'
componentCategory: control
---
<div class="reference-container" id="ons-splitter">

  <div class="reference-github-links">
    <a class="reference-github-link" href="https://github.com/OnsenUI/OnsenUI/blob/master/framework/directives/splitter.js">View Source</a>

    <a class="reference-github-link" href="https://github.com/OnsenUI/OnsenUI/edit/master/framework/directives/splitter.js">Improve this doc</a>
  </div>

  <h2>ons-splitter</h2>

  

  <section class="description">
    <p></p>
    
  </section>

  <ul class="reference-quick-navi">
    
    <li><a href="#usage"></a></li>
    
    
    
    <li><a href="#attributes"></a></li>
    
    
    
    <li><a href="#methods-summary"></a></li>
    
    
    
    <li><a href="#seealso"></a></li>
    
    <li><a href="#discussion"></a></li>
  </ul>

  
    <section>
      <h3 id="usage">
        
        <a href="#usage" class="reference-loop-anchor">#</a>
      </h3>
      <pre><code class="xml">&lt;ons-splitter&gt;
  &lt;ons-splitter-content&gt;
    ...
  &lt;/ons-splitter-content&gt;

  &lt;ons-splitter-side side=&quot;left&quot; width=&quot;80%&quot; collapse&gt;
    ...
  &lt;/ons-splitter-side&gt;
&lt;/ons-splitter&gt;</code></pre>
    </section>
  

  

  <!-- codepen -->
  

  
  <h3 id="seealso">
    関連情報
    <a href="#seealso" class="reference-loop-anchor">#</a>
  </h3>
  <ul class="seealso">
    
      
        <li class="guide"><a href="/guide/overview.html#CallingComponentAPIsfromJavaScript
"></a></li>
      
    
    
  </ul>
  

  <!-- attributes -->
  
  <section>
    <h3 id="attributes">
      属性
      <a href="#attributes" class="reference-loop-anchor">#</a>
    </h3>
    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型 / デフォルト値</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td class="attribute-name" id="ons-splitter-var">var</td>
          <td>
            <span class="value-type">String</span>
            
          </td>
          <td>
            

            
            <span style="font-size: 12px">Optional</span>
            

            
            <span style="font-size: 12px;">初期化時のみ有効</span>
            

            
            <span class="extension-name"></span>
            

            
          </td>
        </tr>
        
        <tr>
          <td class="attribute-name" id="ons-splitter-ons-destroy">ons-destroy</td>
          <td>
            <span class="value-type">Expression</span>
            
          </td>
          <td>
            

            
            <span style="font-size: 12px">Optional</span>
            

            
            <span style="font-size: 12px;">初期化時のみ有効</span>
            

            
            <span class="extension-name"></span>
            

            
          </td>
        </tr>
        
      </tbody>
    </table>
  </section>
  

  <!-- modifiers -->
  

  <!-- methods summary -->
  
  <section>
    <h3 id="methods-summary">
      メソッド概要
      <a href="#methods-summary" class="reference-loop-anchor">#</a>
    </h3>
    <table>
      <thead>
        <tr>
          
          <th>シグネチャ</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><a href="#method-openRight">openRight([options])</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-openLeft">openLeft([options])</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-closeRight">closeRight([options])</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-closeLeft">closeLeft([options])</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-loadContentPage">loadContentPage(pageUrl)</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-loadContentPage">loadContentPage(pageUrl)</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-leftIsOpened">leftIsOpened()</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-rightIsOpened">rightIsOpened()</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-getDeviceBackButtonHandler">getDeviceBackButtonHandler()</a></td>
          <td>
            

            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-on">on(eventName, listener)</a></td>
          <td>
            

            
            <span class="extension-name"></span>
            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-once">once(eventName, listener)</a></td>
          <td>
            

            
            <span class="extension-name"></span>
            

            
          </td>
        </tr>
        
        <tr>
          <td><a href="#method-off">off(eventName, [listener])</a></td>
          <td>
            

            
            <span class="extension-name"></span>
            

            
          </td>
        </tr>
        
      </tbody>
    </table>
  </section>
  
  <!-- end methods summary -->

  <!-- events summary -->
  
  <!-- end events summary -->

  <!-- methods details -->
  
  <h3>メソッド</h3>
  
  <section class="method-detail">
    <h4 id="method-openRight">
      openRight([options])

      <a href="#method-openRight" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">options</span></td>
          <td class="value-type">Object</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">options.callback</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-openLeft">
      openLeft([options])

      <a href="#method-openLeft" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">options</span></td>
          <td class="value-type">Object</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">options.callback</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-closeRight">
      closeRight([options])

      <a href="#method-closeRight" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">options</span></td>
          <td class="value-type">Object</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">options.callback</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-closeLeft">
      closeLeft([options])

      <a href="#method-closeLeft" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">options</span></td>
          <td class="value-type">Object</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">options.callback</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-loadContentPage">
      loadContentPage(pageUrl)

      <a href="#method-loadContentPage" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">pageUrl</span></td>
          <td class="value-type">String</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-loadContentPage">
      loadContentPage(pageUrl)

      <a href="#method-loadContentPage" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">pageUrl</span></td>
          <td class="value-type">String</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-leftIsOpened">
      leftIsOpened()<span class="value-type">: Boolean</span>

      <a href="#method-leftIsOpened" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    
    <p>返り値: </p>
    

    
  </section>
  
  <section class="method-detail">
    <h4 id="method-rightIsOpened">
      rightIsOpened()<span class="value-type">: Boolean</span>

      <a href="#method-rightIsOpened" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    
    <p>返り値: </p>
    

    
  </section>
  
  <section class="method-detail">
    <h4 id="method-getDeviceBackButtonHandler">
      getDeviceBackButtonHandler()<span class="value-type">: Object</span>

      <a href="#method-getDeviceBackButtonHandler" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    

    

    
    <p>返り値: </p>
    

    
  </section>
  
  <section class="method-detail">
    <h4 id="method-on">
      on(eventName, listener)

      <a href="#method-on" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    
    <span class="extension-name"></span>
    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">eventName</span></td>
          <td class="value-type">String</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">listener</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-once">
      once(eventName, listener)

      <a href="#method-once" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    
    <span class="extension-name"></span>
    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">eventName</span></td>
          <td class="value-type">String</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">listener</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  
  <section class="method-detail">
    <h4 id="method-off">
      off(eventName, [listener])

      <a href="#method-off" class="reference-loop-anchor">#</a>
    </h4>

    <p></p>

    
    <span class="extension-name"></span>
    

    

    

    
    <!-- method parameter -->
    <h5>パラメーター</h5>

    <table>
      <thead>
        <tr>
          
          <th>名前</th>
          <th>型</th>
          <th>概要</th>
          
        </tr>
      </thead>
      <tbody>
        
        <tr>
          <td><span class="parameter-name">eventName</span></td>
          <td class="value-type">String</td>
          <td></td>
        </tr>
        
        <tr>
          <td><span class="parameter-name">listener</span></td>
          <td class="value-type">Function</td>
          <td></td>
        </tr>
        
      </tbody>
    </table>
    <!-- end method parameter -->
    
  </section>
  

  
  <!-- end methods -->

  <!-- events -->
  
  <!-- end events -->

  <!-- disqus -->
  <h3 id="discussion">
    議論
    <a href="#discussion" class="reference-loop-anchor">#</a>
  </h3>

  <div id="disqus_thread"></div>
  <script type="text/javascript">
      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  var disqus_shortname = 'onsenui'; // required: replace example with your forum shortname

      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  <!-- end disqus -->

</div>

<script src="/vendor/highlight.min.js"></script>
