mirror of
https://github.com/zhigang1992/react-native-paper.git
synced 2026-05-27 09:04:26 +08:00
68 lines
17 KiB
HTML
68 lines
17 KiB
HTML
<html lang="en" data-reactroot=""><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="Snackbar provide brief feedback about an operation through a message at the bottom of the screen."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Snackbar"/><meta name="twitter:description" content="Snackbar provide brief feedback about an operation through a message at the bottom of the screen."/><meta property="og:type" content="website"/><meta property="og:title" content="Snackbar"/><meta property="og:description" content="Snackbar provide brief feedback about an operation through a message at the bottom of the screen."/><title>Snackbar</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="_wrapper__1nbmuhq" data-reactroot=""><aside class="_sidebar__1gt5k1p"><input type="checkbox" class="_menuButton__1gt5k1p" id="slide-sidebar" role="button"/><label class="_menuIcon__1gt5k1p" for="slide-sidebar">☰</label><div class="_menu__1gt5k1p"><input type="search" value="" placeholder="Filter…" class="_searchbar__1gt5k1p"/><nav class="_navigation__1gt5k1p"><a class="_link__1gt5k1p" href="index.html">Home</a><a class="_link__1gt5k1p" href="showcase.html">Showcase</a><a class="_link__1gt5k1p" href="getting-started.html">Getting Started</a><a class="_link__1gt5k1p" href="theming.html">Theming</a><a class="_link__1gt5k1p" href="icons.html">Icons</a><a class="_link__1gt5k1p" href="contributing.html">Contributing</a><hr class="_separator__1gt5k1p"/><a class="_link__1gt5k1p" href="bottom-navigation.html">BottomNavigation</a><a class="_link__1gt5k1p" href="button.html">Button</a><a class="_link__1gt5k1p" href="caption.html">Caption</a><a class="_link__1gt5k1p" href="card.html">Card</a><a class="_link__1gt5k1p" href="card-actions.html">CardActions</a><a class="_link__1gt5k1p" href="card-content.html">CardContent</a><a class="_link__1gt5k1p" href="card-cover.html">CardCover</a><a class="_link__1gt5k1p" href="checkbox.html">Checkbox</a><a class="_link__1gt5k1p" href="chip.html">Chip</a><a class="_link__1gt5k1p" href="dialog.html">Dialog</a><a class="_link__1gt5k1p" href="dialog-actions.html">DialogActions</a><a class="_link__1gt5k1p" href="dialog-content.html">DialogContent</a><a class="_link__1gt5k1p" href="dialog-scroll-area.html">DialogScrollArea</a><a class="_link__1gt5k1p" href="dialog-title.html">DialogTitle</a><a class="_link__1gt5k1p" href="divider.html">Divider</a><a class="_link__1gt5k1p" href="drawer-item.html">DrawerItem</a><a class="_link__1gt5k1p" href="drawer-section.html">DrawerSection</a><a class="_link__1gt5k1p" href="fab.html">FAB</a><a class="_link__1gt5k1p" href="fabgroup.html">FABGroup</a><a class="_link__1gt5k1p" href="headline.html">Headline</a><a class="_link__1gt5k1p" href="helper-text.html">HelperText</a><a class="_link__1gt5k1p" href="list-accordion.html">ListAccordion</a><a class="_link__1gt5k1p" href="list-item.html">ListItem</a><a class="_link__1gt5k1p" href="list-section.html">ListSection</a><a class="_link__1gt5k1p" href="modal.html">Modal</a><a class="_link__1gt5k1p" href="paper.html">Paper</a><a class="_link__1gt5k1p" href="paragraph.html">Paragraph</a><a class="_link__1gt5k1p" href="progress-bar.html">ProgressBar</a><a class="_link__1gt5k1p" href="radio-button.html">RadioButton</a><a class="_link__1gt5k1p" href="radio-button-group.html">RadioButtonGroup</a><a class="_link__1gt5k1p" href="searchbar.html">Searchbar</a><a class="_link__1gt5k1p _active__1gt5k1p" href="snackbar.html">Snackbar</a><a class="_link__1gt5k1p" href="subheading.html">Subheading</a><a class="_link__1gt5k1p" href="switch.html">Switch</a><a class="_link__1gt5k1p" href="text.html">Text</a><a class="_link__1gt5k1p" href="text-input.html">TextInput</a><a class="_link__1gt5k1p" href="title.html">Title</a><a class="_link__1gt5k1p" href="toolbar.html">Toolbar</a><a class="_link__1gt5k1p" href="toolbar-action.html">ToolbarAction</a><a class="_link__1gt5k1p" href="toolbar-back-action.html">ToolbarBackAction</a><a class="_link__1gt5k1p" href="toolbar-content.html">ToolbarContent</a><a class="_link__1gt5k1p" href="touchable-ripple.html">TouchableRipple</a></nav></div></aside><div class="_container__z02bld"><main class="_content__z02bld"><div class="_container__vv20rl"><h1 class="_title__vv20rl">Snackbar</h1><div options="[object Object]" class="_markdown__1e8xr4b _markdown__vv20rl"><div><span><p>Snackbar provide brief feedback about an operation through a message at the bottom of the screen.</p>
|
|
<div class="screenshots">
|
|
<img class="medium" src="screenshots/snackbar.gif" />
|
|
</div>
|
|
<h2>Usage</h2>
|
|
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> StyleSheet <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Snackbar <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
|
|
|
|
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >MyComponent</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation brackets-braces" >{</span>
|
|
state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
|
|
visible<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
|
|
|
|
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
|
|
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> visible <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
|
|
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>View</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>styles<span class="token punctuation" >.</span>container<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span>
|
|
<span class="token attr-name" >raised</span>
|
|
<span class="token attr-name" >onPress</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span>state <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> visible<span class="token punctuation" >:</span> <span class="token operator" >!</span>state<span class="token punctuation" >.</span>visible <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span>
|
|
<span class="token punctuation" >></span></span>
|
|
<span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>visible <span class="token operator" >?</span> <span class="token string" >'Hide'</span> <span class="token punctuation" >:</span> <span class="token string" >'Show'</span><span class="token punctuation brackets-braces" >}</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span>
|
|
<span class="token operator" ><</span>Snackbar
|
|
visible<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>visible<span class="token punctuation brackets-braces" >}</span>
|
|
onDismiss<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> visible<span class="token punctuation" >:</span> <span class="token boolean" >false</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
|
|
action<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span>
|
|
label<span class="token punctuation" >:</span> <span class="token string" >'Undo'</span><span class="token punctuation" >,</span>
|
|
onPress<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation brackets-braces" >{</span>
|
|
<span class="token comment" spellcheck="true" >// Do something</span>
|
|
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span>
|
|
<span class="token operator" >></span>
|
|
Hey there<span class="token operator" >!</span> I'm a Snackbar<span class="token punctuation" >.</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Snackbar</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>View</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation brackets-braces" >}</span>
|
|
<span class="token punctuation brackets-braces" >}</span>
|
|
|
|
<span class="token keyword keyword-const" >const</span> styles <span class="token operator" >=</span> StyleSheet<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
|
|
container<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
|
|
flex<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span>
|
|
justifyContent<span class="token punctuation" >:</span> <span class="token string" >'space-between'</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
|
|
</code></pre>
|
|
</span></div></div><h2 class="_propsHeader__vv20rl">Props</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="visible" href="#visible"><code>visible</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Whether the Snackbar is currently visible.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="action" href="#action"><code>action</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>{
|
|
label: string,
|
|
onPress: () => mixed,
|
|
}</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Label and press callback for the action button. It should contain the following properties:</p>
|
|
<ul>
|
|
<li><code>label</code> - Label of the action button</li>
|
|
<li><code>onPress</code> - Callback that is called when action button is pressed.</li>
|
|
</ul>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="duration" href="#duration"><code>duration</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>number</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>3500</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>The duration for which the Snackbar is shown.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onDismiss" href="#onDismiss"><code>onDismiss</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>() => mixed</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Callback called when Snackbar is dismissed. The <code>visible</code> prop needs to be updated when this is called.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="children" href="#children"><code>children</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>React.Node</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Text content of the Snackbar.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="style" href="#style"><code>style</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>any</code></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="theme" href="#theme"><code>theme</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Theme</code></div><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div></div></div></div><h2 class="_propsHeader__vv20rl">Static properties</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="DURATION_SHORT" href="#DURATION_SHORT"><code>DURATION_SHORT</code></a><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Show the Snackbar for a short duration.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="DURATION_LONG" href="#DURATION_LONG"><code>DURATION_LONG</code></a><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Show the Snackbar for a long duration.</p>
|
|
</span></div></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="DURATION_INDEFINITE" href="#DURATION_INDEFINITE"><code>DURATION_INDEFINITE</code></a><div class="_markdown__1e8xr4b _propItem__vv20rl _markdown__vv20rl"><div><span><p>Show the Snackbar for indefinite amount of time.</p>
|
|
</span></div></div></div></div></main></div></div></div>
|
|
<script>
|
|
window.__INITIAL_PATH__ = 'snackbar';
|
|
</script>
|
|
<script src="app.bundle.js"></script></body></html> |