{"id":18546739,"url":"https://github.com/bradleygore/nativescript-materialdropdownlist","last_synced_at":"2025-08-24T16:46:49.273Z","repository":{"id":57154882,"uuid":"57354444","full_name":"bradleygore/nativescript-materialdropdownlist","owner":"bradleygore","description":"Material-inspired dropdown list widget for NativeScript","archived":false,"fork":false,"pushed_at":"2018-10-09T16:05:19.000Z","size":2781,"stargazers_count":10,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T11:12:36.830Z","etag":null,"topics":["demo","material","nativescript","widget"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bradleygore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-29T04:25:13.000Z","updated_at":"2024-05-30T16:13:57.000Z","dependencies_parsed_at":"2022-09-06T19:22:27.578Z","dependency_job_id":null,"html_url":"https://github.com/bradleygore/nativescript-materialdropdownlist","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-materialdropdownlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-materialdropdownlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-materialdropdownlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradleygore%2Fnativescript-materialdropdownlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradleygore","download_url":"https://codeload.github.com/bradleygore/nativescript-materialdropdownlist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248107244,"owners_count":21048884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","material","nativescript","widget"],"created_at":"2024-11-06T20:26:47.271Z","updated_at":"2025-04-09T20:31:04.703Z","avatar_url":"https://github.com/bradleygore.png","language":"TypeScript","readme":"# nativescript-materialdropdownlist\n### Material-inspired dropdown list widget for NativeScript\n\n---------\n\n# NO LONGER MAINTAINED\n\nI'm no longer actively maintaining this project. When I first built it, I was exploring NativeScript in my spare time. Presently, I do not have the spare time to continue maintaining this plugin. PRs are welcome, or if you wish to take over maintenance please submit an issue with your information and I'll contact you.\n\n\\- Bradley\n\n---------\n\n\u003cp align=\"center\"\u003e\n    \u003cimg height=\"750\" src=\"https://raw.githubusercontent.com/bradleygore/nativescript-materialdropdownlist/master/materialdropdown.gif\" alt=\"NativeScript Material Dropdown\"/\u003e\n\u003c/p\u003e\n\n### Usage\n\nInstall the plugin by running this command in your project root:\n`tns plugin add nativescript-materialdropdownlist`\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n    xmlns:MDL=\"nativescript-materialdropdownlist\"\u003e\n\n    \u003cStackLayout\u003e\n        \u003cGridLayout rows=\"auto\" columns=\"*, auto\"\u003e\n            \u003cStackLayout\u003e\n                \u003clabel text=\"Color\" /\u003e\n                \u003clabel style=\"height: 3; background-color: gray;\" /\u003e\n            \u003c/StackLayout\u003e\n\n            \u003c!--Dropdown List widget--\u003e\n            \u003cMDL:MaterialDropdownList col=\"1\" id=\"ddlColors\"\n                itemsSeparatorColor=\"transparent\" itemsRowHeight=\"30\"\n                items=\"{{ colors }}\" selectedIndex=\"{{ selectedColorIndex }}\" \u003e\n            \u003c/MDL:MaterialDropdownList\u003e\n        \u003c/GridLayout\u003e\n    \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### Attributes\n\nName | Description | Value Type | Default\n-----|-------------|------------|---------\nitems | list of items to bind to as data source | Array or ObservableArray | null\nid | [Optional] prepended to generated ListView's ID as {id}_pickerList | string | ''\niconText | [Optional] text to use for the icon label | string | '\\ue5c5' (standard dropdown icon from [Material Icons](https://design.google.com/icons/#ic_arrow_drop_down))\nitemsSeparatorColor | [Optional] pass-through to ListView to set color for line separating items | string (Color) | ListView's default (light gray)\nitemsRowHeight | [Optional] pass-through to ListView to set height of each item in the list | number | ListView's default\nselectedIndex | [Optional] index of the item currently selected | number | null\ntargetViewId | [Optional] target view for the backdrop (AbsoluteLayout) and the ListView to render in. This is specifically needed for best results using the widget in tab-views and modals - see demo for examples | string | null\nindexChange | [Optional] function to call when the selected index changes | Function | N/A (uses view event .notify() mechanism)\n\n#### Custom Templates\n\nThis widget was designed with flexibility in mind, so you can use a custom template for the prompt view (the view the user taps to bring up the dropdown list) as well as define a view template for each item in the ListView.\n\n*These custom templates will need to be used if the list of items is not just strings, but objects*\n\n```xml\n\u003cMDL:MaterialDropdownList col=\"1\" id=\"ddlAuthors\"\n    items=\"{{ authors }}\" selectedIndex=\"{{ selectedAuthorIndex }}\" \u003e\n\n    \u003c!--Prompt or Selected Item Template--\u003e\n    \u003cMDL:MaterialDropdownList.selectedItemView\u003e\n        \u003cStackLayout\u003e\n            \u003clabel text=\"{{ selectedAuthor ? selectedAuthor.name : 'Select Author' }}\" style=\"color: red; padding-left: 5;\" /\u003e\n            \u003clabel style=\"background-color: gray; height: 1;\" /\u003e\n        \u003c/StackLayout\u003e\n    \u003c/MDL:MaterialDropdownList.selectedItemView\u003e\n\n    \u003c!--Template to pass to the ListView--\u003e\n    \u003cMDL:MaterialDropdownList.itemsTemplate\u003e\n        \u003clabel style=\"color: red; padding-top: 5; padding-bottom: 5;\" text=\"{{ name }}\" /\u003e\n    \u003c/MDL:MaterialDropdownList.itemsTemplate\u003e\n\u003c/MDL:MaterialDropdownList\u003e\n```\n\n#### Default Prompt View\n\nIf you don't use a custom template, we kept design-ability in mind. The default prompt view's elements all have specific purposes and individual IDs and CSS classes to make styling easy. If there were an XML template for it, here is what it would be:\n\n```xml\n\u003cgrid-layout rows=\"auto, auto\" columns=\"*, auto\" id=\"mdlLayout\" class=\"mdl-container\"\u003e\n\n    \u003c!--Label where the value from the selected item gets put--\u003e\n    \u003clabel id=\"mdlSelectedValue\" row=\"0\" col=\"0\" class=\"mdl-value\" /\u003e\n\n    \u003c!--Label where the icon text gets put--\u003e\n    \u003clabel id=\"mdlIcon\" row=\"0\" col=\"1\" class=\"mdl-icon\" /\u003e\n\n    \u003c!--Label to hold no next but act as an underline across the entire widget - i.e. set height and background-color in a style rule--\u003e\n    \u003clabel id=\"mdlUnderline\" row=\"1\" col=\"0\" colSpan=\"2\" class=\"mdl-underline\" /\u003e\n\n\u003c/grid-layout\u003e\n```\n\n#### Styling\n\nStyling these dropdowns couldn't be simpler. Just create CSS rules based on the classes and IDs shown above. Given the dynamic nature of these types of lists, you will want to set a standard height for all dropdown lists, fortunately there's also a CSS Class specifically for those: **mdl-pickerList**. Here's an example of some things you can do to style these:\n\n```css\n.mdl-backdrop {\n    /*The AbsoluteLayout that acts as backdrop to the dropdown*/\n    background-color: lightgrey;\n}\n\n.mdl-pickerList {\n    /*common styles for ALL dropdown lists*/\n    height: 80;\n    min-width: 60;\n    background-color: white;\n    border-color: blue;\n    border-width: 1;\n}\n\n/*different styles for specific lists - remember ID is container's ID + _pickerList*/\n#ddlColors_pickerList {\n    border-color: silver;\n}\n\n#ddlShapes_pickerList {\n    border-color: orange;\n    border-width: 4;\n    min-width: 80;\n}\n\n#ddlAuthors_pickerList {\n    min-width: 200;\n}\n\n#ddlShapes_pickerList label {\n    /*If a custom itemsTemplate is not used, ListView defaults to a Label*/\n    padding-top: 4;\n    padding-bottom: 4;\n    padding-left: 2;\n    color: blue;\n}\n```\n-----------------\n\n### Demo\n\nTo run the demo locally, run the following commands from the root folder after pulling down this repo:\n`npm run setup` and `npm run demo.android`\n\n------------------\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradleygore%2Fnativescript-materialdropdownlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradleygore%2Fnativescript-materialdropdownlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradleygore%2Fnativescript-materialdropdownlist/lists"}