Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nstudio/nativescript-snackbar
NativeScript plugin for Material Design Snackbar
https://github.com/nstudio/nativescript-snackbar
android ios material-design nativescript nstudio snackbar typescript
Last synced: 5 days ago
JSON representation
NativeScript plugin for Material Design Snackbar
- Host: GitHub
- URL: https://github.com/nstudio/nativescript-snackbar
- Owner: nstudio
- License: apache-2.0
- Created: 2019-07-12T21:15:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T01:02:55.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T17:13:21.232Z (7 months ago)
- Topics: android, ios, material-design, nativescript, nstudio, snackbar, typescript
- Language: JavaScript
- Homepage:
- Size: 7.07 MB
- Stars: 23
- Watchers: 8
- Forks: 4
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
NativeScript plugin for Material Design SnackBar component.
---
### Installation:
NativeScript 7+:
`tns plugin add @nstudio/nativescript-snackbar`
NativeScript version prior to 7:
`tns plugin add @nstudio/[email protected]`
## Demo
## Usage
### TS
```typescript
import { SnackBar, SnackBarOptions } from "@nstudio/nativescript-snackbar";
// Create an instance of SnackBar
const snackbar = new SnackBar();
/// Show a simple snackbar with no actions
public showSimple() {
snackbar.simple('Snackbar', 'red', '#fff', 3, false).then((args) => {
this.set('jsonResult', JSON.stringify(args));
})
}
/// Show an Action snack bar
public showAction() {
const options: SnackBarOptions = {
actionText: this.get('actionText'),
actionTextColor: '#ff4081',
snackText: this.get('snackText'),
textColor: '#346db2',
hideDelay: 3500,
backgroundColor: '#eaeaea',
maxLines: 3, // Optional, Android Only
isRTL: false,
view: someView, // Optional, Android Only, default to topmost().currentPage
padding: number //Optional, iOS only
};
snackbar.action(options).then((args) => {
if (args.command === "Action") {
this.set('jsonResult', JSON.stringify(args));
} else {
this.set('jsonResult', JSON.stringify(args));
}
});
}
```
### API
Show a simple SnackBar (color args will only work on Android)
- **simple(snackText: string, textColor?: string, backgroundColor?: string, maxLines?: number, isRTL?: boolean, view?: View): Promise**
Show a SnackBar with Action.
- **action(options: SnackBarOptions): Promise**
Manually dismiss an active SnackBar
- **dismiss(): Promise**
### SnackBarOptions Interface
- **actionText: string**
- **actionTextColor: string**
- **snackText: string**
- **hideDelay: number**
- **textColor: string**
- **backgroundColor: string**
- **maxLines: number**
- **isRTL: boolean**
- **view: View**
- **padding: number**
## Run Demo
```bash
git clone https://github.com/nstudio/nativescript-snackbar.git
cd nativescript-snackbar/src
npm run build
npm run demo.ios
// or...
npm run demo.android
```
## [Changelog](./CHANGELOG.md)
## [Contributing](./CONTRIBUTING.md)