mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
145 lines
6 KiB
HTML
145 lines
6 KiB
HTML
---
|
|
layout: docs
|
|
title: Menu
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/menu.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>React component for multi-section Menus with key binding</p>
|
|
<p>The Menu component allows you to display a list of items. Menu takes care of
|
|
several important things, ensuring that your menu is consistent with the rest
|
|
of the N1 application and offers a near-native experience:</p>
|
|
<ul>
|
|
<li>Keyboard Interaction with the Up and Down arrow keys, Enter to select</li>
|
|
<li>Maintaining selection across content changes</li>
|
|
<li>Highlighted state</li>
|
|
</ul>
|
|
<p>Menus are often, but not always, used in conjunction with <a href='popover.html'>Popover</a> to display
|
|
a floating "popup" menu. See <code>template-picker.cjsx</code> for an example.</p>
|
|
<p>The Menu also exposes "header" and "footer" regions you can fill with arbitrary
|
|
components by providing the <code>headerComponents</code> and <code>footerComponents</code> props.
|
|
These items are nested within <code>.header-container</code>. and <code>.footer-container</code>,
|
|
and you can customize their appearance by providing CSS selectors scoped to your
|
|
component's Menu instance:</p>
|
|
<pre><code class="lang-css"><span class="hljs-class">.template-picker</span> <span class="hljs-class">.menu</span> <span class="hljs-class">.header-container</span> <span class="hljs-rules">{
|
|
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
|
|
}</span>
|
|
</code></pre>
|
|
</p>
|
|
</div>
|
|
|
|
<ul>
|
|
</ul>
|
|
|
|
|
|
<h3>Class Properties</h3>
|
|
|
|
<h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
|
|
<p><p>React <code>props</code> supported by Menu:</p>
|
|
</p>
|
|
<table class="arguments">
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>className</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>The <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> class name applied to the Menu</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>itemContent</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function'>Function</a> that returns a <a href='menuitem.html'>MenuItem</a>, <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a>, or React component for the given <code>item</code>. If you return a <a href='menuitem.html'>MenuItem</a>, your item is injected into the list directly. If you return a string or React component, the result is placed within a <a href='menuitem.html'>MenuItem</a>, resulting in the following DOM: <code><div className="item [selected]">{your content}</div></code>. To create dividers and other special menu items, return an instance of:</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>itemKey</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function'>Function</a> that returns a unique string key for the given <code>item</code>. Keys are important for efficient React rendering when <code>items</code> is changed, and a key function is required.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>itemChecked</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function'>Function</a> that returns true if the given item should be shown with a checkmark. If you don't provide an implementation for <code>itemChecked</code>, no checkmarks are ever shown.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>items</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>An <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/array'>Array</a> of arbitrary objects the menu should display.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>onSelect</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function'>Function</a> called with the selected item when the user clicks an item in the menu or confirms their selection with the Enter key.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>defaultSelectedIndex</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>The index of the item first selected if there was no other previous index. Defaults to 0. Set to -1 if you want nothing selected.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<h3>Instance Methods</h3>
|
|
|
|
<h4 id=getSelectedItem class="function-name">
|
|
getSelectedItem(<span class="args"></span>) <a href="#getSelectedItem" class="link"></a>
|
|
</h4>
|
|
|
|
<div class="function-description markdown-from-sourecode">
|
|
<p></p>
|
|
</div>
|
|
|
|
|
|
<strong>Returns</strong>
|
|
<table class="arguments">
|
|
<tr>
|
|
<th>Return Values</th>
|
|
</tr>
|
|
<tr><td class="markdown-from-sourecode"><p>Returns the currently selected item.</p>
|
|
</td></tr>
|
|
</table>
|
|
<h4 id=setSelectedItem class="function-name">
|
|
setSelectedItem(<span class="args"></span>) <a href="#setSelectedItem" class="link"></a>
|
|
</h4>
|
|
|
|
<div class="function-description markdown-from-sourecode">
|
|
<p><p>Set the currently selected item. Pass
|
|
null to remove the selection</p>
|
|
</p>
|
|
</div>
|