mirror of
https://github.com/zhigang1992/react-native-paper.git
synced 2026-05-19 02:50:48 +08:00
64 lines
23 KiB
HTML
64 lines
23 KiB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content="A component to show tiles inside a List."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="List.Item"/><meta name="twitter:description" content="A component to show tiles inside a List."/><meta property="og:type" content="website"/><meta property="og:title" content="List.Item"/><meta property="og:description" content="A component to show tiles inside a List."/><title>List.Item</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_llziuo3"/><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l5q2p2e" href="index.html">Home</a><a data-selected="false" class="LinkItem_l5q2p2e" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l5q2p2e" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l5q2p2e" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l5q2p2e" href="fonts.html">Fonts</a><a data-selected="false" class="LinkItem_l5q2p2e" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l5q2p2e" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l5q2p2e" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l5q2p2e" href="contributing.html">Contributing</a><hr class="SeparatorItem_s1gpol2t"/><a data-selected="false" class="LinkItem_l5q2p2e" href="activity-indicator.html">ActivityIndicator</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l5q2p2e" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l5q2p2e" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l5q2p2e" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l5q2p2e" href="button.html">Button</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l5q2p2e" href="card-title.html">Card.Title</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l5q2p2e" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="chip.html">Chip</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l5q2p2e" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l5q2p2e" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="divider.html">Divider</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l5q2p2e" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l5q2p2e" href="icon-button.html">IconButton</a><a data-selected="false" class="LinkItem_l5q2p2e" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-icon.html">List.Icon</a><a data-selected="true" class="LinkItem_l5q2p2e" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l5q2p2e" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="modal.html">Modal</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="progress-bar.html">ProgressBar</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l5q2p2e" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a data-selected="false" class="LinkItem_l5q2p2e" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l5q2p2e" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l5q2p2e" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l5q2p2e" href="switch.html">Switch</a><a data-selected="false" class="LinkItem_l5q2p2e" href="text-input.html">TextInput</a><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="toggle-button-group.html">ToggleButton.Group</a><a data-selected="false" class="LinkItem_l5q2p2e" href="toggle-button-row.html">ToggleButton.Row</a></div></div><div><div class="Row_rl210no"><a data-selected="false" class="LinkItem_l5q2p2e" href="">Typography</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b19yxlm8"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_g1ol5l8s"><a data-selected="false" class="LinkItem_l5q2p2e" href="text.html">Text</a><a data-selected="false" class="LinkItem_l5q2p2e" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l5q2p2e" href="title.html">Title</a><a data-selected="false" class="LinkItem_l5q2p2e" href="paragraph.html">Paragraph</a><a data-selected="false" class="LinkItem_l5q2p2e" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l5q2p2e" href="caption.html">Caption</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="Inner_ir6lat6"><a target="_blank" href="https://github.com/callstack/react-native-paper/edit/master//../src/components/List/ListItem.tsx" class="EditButtonContainer_emlbhqm"><svg width="18px" height="20px" viewBox="0 0 18 20"><path fill="none" transform="translate(2.000000, 2.000000)" d="M1.5,14.5363545 L1.5,11.3292488 L9.36649374,3.4627884 L12.5735698,6.66982438 L4.7071064,14.5363545 L1.5,14.5363545 Z M14.1535993,5.08986045 L12.5666426,6.67673666 L9.35957774,3.46971186 L10.9465031,1.88274634 C11.4083588,1.42089061 12.1250348,1.42089061 12.5868905,1.88274634 L14.1536082,3.44946407 C14.6154639,3.91131979 14.6154639,4.62799577 14.1536082,5.08985149 Z"></path></svg></a><h1 class="Title_t1dytcq5">List.Item</h1><div class="MarkdownContent_m3ctz2y"><p>A component to show tiles inside a List.</p>
|
|
<div class="screenshots">
|
|
<img class="medium" src="screenshots/list-item-1.png" />
|
|
<img class="medium" src="screenshots/list-item-2.png" />
|
|
<img class="medium" src="screenshots/list-item-3.png" />
|
|
</div>
|
|
|
|
<h2 id="usage">
|
|
<a class="anchor" href="#usage">
|
|
<svg width="16" height="16">
|
|
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
|
|
</svg>
|
|
</a>
|
|
Usage</h2>
|
|
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">MyComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">List.Item</span></span>
|
|
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First Item<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">description</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Item description<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">left</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">props</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">List.Icon</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
|
<span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> MyComponent<span class="token punctuation">;</span></code></pre>
|
|
</div><h2>Props</h2><div class="PropInfo_p1eats2g"><a name="title" href="#title" class="PropLabel_psi127e"><code>title</code> (required)</a><div class="PropItem_pwdtv5j"><span>Type: </span><code>React.ReactNode</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Title text for the list item.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="description" href="#description" class="PropLabel_psi127e"><code>description</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>Description | null</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Description text for the list item or callback which returns a React element to display the description.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="left" href="#left" class="PropLabel_psi127e"><code>left</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>(props: {
|
|
color: string;
|
|
style: {
|
|
marginLeft: number;
|
|
marginRight: number;
|
|
marginVertical?: number;
|
|
};
|
|
}) => React.ReactNode</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Callback which returns a React element to display on the left side.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="right" href="#right" class="PropLabel_psi127e"><code>right</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>(props: {
|
|
color: string;
|
|
style?: {
|
|
marginRight: number;
|
|
marginVertical?: number;
|
|
};
|
|
}) => React.ReactNode</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Callback which returns a React element to display on the right side.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="onPress" href="#onPress" class="PropLabel_psi127e"><code>onPress</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>() => void</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Function to execute on press.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="theme" href="#theme" class="PropLabel_psi127e"><code>theme</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>Theme</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"></div></div><div class="PropInfo_p1eats2g"><a name="style" href="#style" class="PropLabel_psi127e"><code>style</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>StyleProp<ViewStyle></code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Style that is passed to the wrapping TouchableRipple element.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="titleStyle" href="#titleStyle" class="PropLabel_psi127e"><code>titleStyle</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>StyleProp<TextStyle></code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Style that is passed to Title element.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="descriptionStyle" href="#descriptionStyle" class="PropLabel_psi127e"><code>descriptionStyle</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>StyleProp<TextStyle></code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Style that is passed to Description element.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="titleNumberOfLines" href="#titleNumberOfLines" class="PropLabel_psi127e"><code>titleNumberOfLines</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>number</code></div><div class="PropItem_pwdtv5j"><span>Default value: </span><code>1</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Truncate Title text such that the total number of lines does not
|
|
exceed this number.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="descriptionNumberOfLines" href="#descriptionNumberOfLines" class="PropLabel_psi127e"><code>descriptionNumberOfLines</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>number</code></div><div class="PropItem_pwdtv5j"><span>Default value: </span><code>2</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Truncate Description text such that the total number of lines does not
|
|
exceed this number.</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="titleEllipsizeMode" href="#titleEllipsizeMode" class="PropLabel_psi127e"><code>titleEllipsizeMode</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>EllipsizeProp</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Ellipsize Mode for the Title</p>
|
|
</div></div><div class="PropInfo_p1eats2g"><a name="descriptionEllipsizeMode" href="#descriptionEllipsizeMode" class="PropLabel_psi127e"><code>descriptionEllipsizeMode</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>EllipsizeProp</code></div><div class="PropItem_pwdtv5j MarkdownContent_m3ctz2y"><p>Ellipsize Mode for the Description</p>
|
|
</div></div><h2>Methods</h2><p>These methods can be accessed on the <code>ref</code> of the component, e.g.<!-- --> <code>list.Item<!-- -->Ref.<!-- -->renderDescription<!-- -->(...args)</code>.</p><div class="PropInfo_p1eats2g"><a name="renderDescription" href="#renderDescription" class="PropLabel_psi127e"><code>renderDescription</code></a><div class="PropItem_pwdtv5j"><span>Params: </span><code>descriptionColor: string, description: Description | null</code></div></div></div></main></div></div>
|
|
<style type="text/css">
|
|
:root {
|
|
--theme-primary-color: #397AF9;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.__INITIAL_PATH__ = 'list-item';
|
|
</script>
|
|
<script src="app.bundle.js"></script><script src="scripts/snack.js"></script></body></html> |