Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moayadnajd/nativescript-filter-select
A NativeScript plugin to provide an listview widget to select AND filter items
https://github.com/moayadnajd/nativescript-filter-select
nativescript nativescript-plugin
Last synced: 3 months ago
JSON representation
A NativeScript plugin to provide an listview widget to select AND filter items
- Host: GitHub
- URL: https://github.com/moayadnajd/nativescript-filter-select
- Owner: moayadnajd
- License: other
- Created: 2017-05-16T16:12:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T12:27:44.000Z (almost 2 years ago)
- Last Synced: 2024-06-21T17:07:19.968Z (8 months ago)
- Topics: nativescript, nativescript-plugin
- Language: TypeScript
- Homepage: http://codeobia.com
- Size: 22.7 MB
- Stars: 37
- Watchers: 4
- Forks: 19
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# No active maintinance please go to https://www.npmjs.com/package/@ticnat/nativescript-searchable-select
# FilterSelect
[](https://www.npmjs.com/package/nativescript-filter-select)
[](https://www.npmjs.com/package/nativescript-filter-select)
A NativeScript plugin to provide an listview widget to select AND filter items.
## Sample Screenshots
#### Android and ios
Sample 1 | Sample 2
-------- | ---------
 | 
## Installation
##### NativeScript 4.x
- `tns plugin add nativescript-filter-select`
## import css
` @import 'nativescript-filter-select/styles.css'; `
*Be sure to run a new build after adding plugins to avoid any issues
## Vanilla NativeScript
IMPORTANT: *Make sure you include `xmlns:FS="nativescript-filter-select"` on the Page element*
### XML
```XML
```
## Angular NativeScript
### Regiter plugin in Component class
```JAVASCRIPT
import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-select';
registerElement('FilterSelect', () => FilterSelect);
```
### HTML
```HTML
```
## Attributes
### see [demo](https://github.com/moayadnajd/nativescript-filter-select/tree/master/demo) examples for more information
| Attribute | Description |Default
| ------------- | ------------------------------------------------------- |--------
| render | to render "tags" or "label" or "drop" | string : tags
| multiple | to limit the options selected to one if set to false | boolean : true
|search_param| index of the string value in the items object to search on it |string : name
|item_template|xml template for the listview items | string : ``
|change| change event treger when select is done | function : optional `change(args)` and selected item can be accessed as `args.selected`
|modal_title|title of the filter modal | String : `Please select items`
|hint|string to show when no items selected |`Please select some items`
|items|array of objects to populate the list of options | ObservableArray :[]
|primary_key|unique index of the items object | string : `id`
|selected|array of objects to mark some options as selected and it will be the result when select is done | Array: []
|disabled| to disable select botton | boolean : false
|allowSearch| to enable/disable search bar in the modal | boolean : true
|refresh| to refresh the filter select with new values good with remote data | function
|searchHint | search placeholder or hint in the items modal | "Search for item"
|xbtn| remove tag text you can use tag icon here | "x"
|closeText| close button text | "Close"
|doneText| done button text | "Done"
|clearText| clear button text | "Clear"
|selectText| select button text | "Select"
| autofocus | keyboard up when you open modal so you can start search | false
| open() | open modal programmatically | function
|close| close event treger when modal is closed | you can get the selected array by `args.selected` if the modal closed without any selection the array will be empty
### CSS core-theme styles is required for modal page if you dont have them just make your own
see [styles.css](https://github.com/moayadnajd/nativescript-filter-select/blob/master/styles.css) so you can override or make your own
* and don't forget to share with us your nice styles :D
### font icons
* font icons are required if you are using dropdown render
and you can add fontawsome icon as a select triger ( hint="{{'fa-list-ul' | fonticon}}" )
see [demo](https://github.com/moayadnajd/nativescript-filter-select/tree/master/demo)
### For contributing
just do a pull request with description of your changes or open issue with your ideas
### i need help with [this issue](https://github.com/moayadnajd/nativescript-filter-select/issues/5)