├── .eslintrc.js ├── .github ├── FUNDING.yml ├── issue_template.md └── workflows │ └── release.yml ├── .gitignore ├── .gitmodules ├── .npmrc ├── .prettierignore ├── .prettierrc.js ├── .settings └── org.eclipse.buildship.core.prefs ├── .vscode ├── launch.json └── settings.json ├── .yarnrc.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config.json ├── demo-snippets ├── ng │ ├── basic │ │ ├── basic.component.html │ │ ├── basic.component.scss │ │ └── basic.component.ts │ └── install.module.ts ├── package.json ├── react │ ├── Basic.tsx │ └── install.ts ├── svelte │ ├── Basic.svelte │ └── install.ts ├── vue │ ├── Basic.vue │ └── install.ts └── webpack.config.vue.js ├── docs ├── .nojekyll ├── assets │ ├── hierarchy.js │ ├── highlight.css │ ├── icons.js │ ├── icons.svg │ ├── main.js │ ├── navigation.js │ ├── search.js │ └── style.css ├── classes │ └── PersistentBottomSheet.html ├── functions │ └── install.html ├── index.html ├── interfaces │ └── BottomSheetEventData.html ├── modules.html └── variables │ ├── PAN_GESTURE_TAG.html │ ├── backdropColorProperty.html │ ├── bottomSheetProperty.html │ ├── gestureEnabledProperty.html │ ├── scrollViewProperty.html │ ├── stepIndexProperty.html │ └── translationFunctionProperty.html ├── lerna.json ├── package.json ├── packages └── ui-persistent-bottomsheet │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── blueprint.md │ ├── package.json │ └── tsconfig.json ├── pnpm-workspace.yaml ├── references.d.ts ├── src └── ui-persistent-bottomsheet │ ├── angular │ ├── index.ts │ ├── module.ts │ ├── ng-package.json │ ├── package.json │ └── tsconfig.json │ ├── index.ts │ ├── react │ └── index.tsx │ ├── svelte │ └── index.ts │ └── vue │ └── index.ts ├── svelte.config.js ├── tsconfig.json ├── tsconfig.vue3.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './tools/.eslintrc.js' 3 | }; 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [farfromrefug] 2 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | ### Make sure to check the demo app(s) for sample usage 2 | 3 | ### Make sure to check the existing issues in this repository 4 | 5 | ### If the demo apps cannot help and there is no issue for your problem, tell us about it 6 | Please, ensure your title is less than 63 characters long and starts with a capital 7 | letter. 8 | 9 | ### Which platform(s) does your issue occur on? 10 | - iOS/Android/Both 11 | - iOS/Android versions 12 | - emulator or device. What type of device? 13 | 14 | ### Please, provide the following version numbers that your issue occurs with: 15 | 16 | - CLI: (run `tns --version` to fetch it) 17 | - Cross-platform modules: (check the 'version' attribute in the 18 | `node_modules/@nativescript/core/package.json` file in your project) 19 | - Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project) 20 | - Plugin(s): (look for the version numbers in the `package.json` file of your 21 | project and paste your dependencies and devDependencies here) 22 | 23 | ### Please, tell us how to recreate the issue in as much detail as possible. 24 | Describe the steps to reproduce it. 25 | 26 | ### Is there any code involved? 27 | - provide a code example to recreate the problem 28 | - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible. 29 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: 'release' 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | release_type: 7 | type: choice 8 | default: auto 9 | description: What kind of version upgrade 10 | options: 11 | - auto 12 | - patch 13 | - minor 14 | - major 15 | 16 | jobs: 17 | release: 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout repository 21 | uses: actions/checkout@v4 22 | with: 23 | fetch-depth: "0" 24 | submodules: true 25 | 26 | - name: setup node 27 | uses: actions/setup-node@v4 28 | with: 29 | node-version: lts/* 30 | registry-url: 'https://registry.npmjs.org' 31 | 32 | 33 | - uses: oNaiPs/secrets-to-env-action@v1 34 | with: 35 | secrets: ${{ toJSON(secrets) }} 36 | 37 | 38 | - uses: oleksiyrudenko/gha-git-credentials@v2-latest 39 | with: 40 | token: '${{ secrets.GITHUB_TOKEN }}' 41 | name: Martin Guillon 42 | email: dev@akylas.fr 43 | 44 | - name: install jq 45 | run: sudo apt install jq 46 | 47 | - name: Enable CorePack 48 | run: | 49 | corepack enable 50 | yarn config get globalFolder # the yarn command will ensure the correct yarn version is downloaded and installed 51 | 52 | - name: Get yarn cache directory path 53 | id: yarn-cache-dir-path 54 | run: echo "::set-output name=dir::$(yarn config get globalFolder)" 55 | 56 | - name: Remove package.json resolutions 57 | run: echo "`jq 'delpaths([["resolutions"]])' package.json`" > package.json 58 | 59 | - uses: actions/cache@v4 60 | name: Handle node_modules Cache 61 | id: yarn-node_modules # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 62 | with: 63 | path: node_modules 64 | key: ${{ runner.os }}-yarn-node_modules-${{ hashFiles('**/yarn.lock') }} 65 | restore-keys: | 66 | ${{ runner.os }}-node_modules- 67 | 68 | - uses: actions/cache@v4 69 | if: steps.yarn-node_modules.outputs.cache-hit != 'true' 70 | name: Handle Yarn cache 71 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 72 | with: 73 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 74 | key: ${{ runner.os }}-yarn-cache-${{ hashFiles('**/yarn.lock') }} 75 | restore-keys: | 76 | ${{ runner.os }}-yarn- 77 | 78 | - name: Install deps 79 | if: steps.yarn-node_modules.outputs.cache-hit != 'true' 80 | uses: bahmutov/npm-install@v1 81 | with: 82 | install-command: yarn install --silent 83 | env: 84 | YARN_ENABLE_IMMUTABLE_INSTALLS: false 85 | 86 | - name: run setup 87 | run: | 88 | npm run setup 89 | 90 | - name: "NPM Identity" 91 | env: 92 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 93 | run: | 94 | echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 95 | 96 | - name: publish auto 97 | if: github.event.inputs.release_type == 'auto' 98 | run: | 99 | npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes 100 | env: 101 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 102 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 103 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 104 | 105 | - name: publish 106 | if: github.event.inputs.release_type != 'auto' 107 | run: | 108 | npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes --bump ${{ github.event.inputs.release_type }} 109 | env: 110 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 111 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 112 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms 5 | 6 | # NativeScript Template 7 | *.js.map 8 | !ngcc.config.js 9 | !webpack.config.js 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # General 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | .idea 23 | .cloud 24 | .gradle 25 | .project 26 | .yarn 27 | .cxx 28 | tmp/ 29 | 30 | !.eslintrc.js 31 | !.prettierrc.js 32 | 33 | !e2e/*.js 34 | !detox.config.js 35 | devices.js 36 | 37 | *.framework 38 | *.xcframework 39 | **/*.js.map 40 | src/**/*.js 41 | packages/**/*.js 42 | packages/**/*.d.ts 43 | bin 44 | build 45 | Pods 46 | !packages/*/platforms 47 | /packages/**/*.aar 48 | /packages/**/*.framework 49 | /packages/**/*.xcframework 50 | /demo-snippets/**/*.aar 51 | *.xcuserdatad 52 | /packages/README.md 53 | packages/**/*js.map 54 | packages/**/*js 55 | packages/angular 56 | packages/typings 57 | packages/**/angular/*.json 58 | packages/**/*.ngsummary.json 59 | packages/**/*.metadata.json 60 | 61 | .vscode/settings.json 62 | 63 | /blueprint.md -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "tools"] 2 | path = tools 3 | url = https://github.com/nativescript-community/plugin-seed-tools.git 4 | [submodule "demo-vue"] 5 | path = demo-vue 6 | url = https://github.com/nativescript-community/plugin-seed-demo-vue.git 7 | [submodule "demo-ng"] 8 | path = demo-ng 9 | url = https://github.com/nativescript-community/plugin-seed-demo-ng.git 10 | [submodule "demo-svelte"] 11 | path = demo-svelte 12 | url = https://github.com/nativescript-community/plugin-seed-demo-svelte.git 13 | [submodule "demo-react"] 14 | path = demo-react 15 | url = https://github.com/nativescript-community/plugin-seed-demo-react.git 16 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | public-hoist-pattern[]=*eslint* 3 | public-hoist-pattern[]=source-map-support 4 | public-hoist-pattern[]=ts-patch 5 | public-hoist-pattern[]=typescript 6 | public-hoist-pattern[]=cpy-cli 7 | strict-peer-dependencies=false 8 | shell-emulator=true 9 | auto-install-peers=false 10 | loglevel=error 11 | engine-strict=true 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules/ 3 | plugin/ 4 | docs/ 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 200, 3 | semi: true, 4 | tabWidth: 4, 5 | trailingComma: 'none', 6 | singleQuote: true 7 | }; 8 | -------------------------------------------------------------------------------- /.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | arguments= 2 | auto.sync=false 3 | build.scans.enabled=false 4 | connection.gradle.distribution=GRADLE_DISTRIBUTION(VERSION(6.3)) 5 | connection.project.dir= 6 | eclipse.preferences.version=1 7 | gradle.user.home= 8 | java.home=/Library/Java/JavaVirtualMachines/jdk1.8.0_141.jdk/Contents/Home 9 | jvm.arguments= 10 | offline.mode=false 11 | override.workspace.settings=true 12 | show.console.view=true 13 | show.executions.view=true 14 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch on iOS", 9 | "type": "nativescript", 10 | "request": "launch", 11 | "platform": "ios", 12 | "appRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "watch": true 15 | }, 16 | { 17 | "name": "Attach on iOS", 18 | "type": "nativescript", 19 | "request": "attach", 20 | "platform": "ios", 21 | "appRoot": "${workspaceRoot}", 22 | "sourceMaps": true, 23 | "watch": false 24 | }, 25 | { 26 | "name": "Launch on Android", 27 | "type": "nativescript", 28 | "request": "launch", 29 | "platform": "android", 30 | "appRoot": "${workspaceRoot}", 31 | "sourceMaps": true, 32 | "watch": true 33 | }, 34 | { 35 | "name": "Attach on Android", 36 | "type": "nativescript", 37 | "request": "attach", 38 | "platform": "android", 39 | "appRoot": "${workspaceRoot}", 40 | "sourceMaps": true, 41 | "watch": false 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "java.configuration.updateBuildConfiguration": "disabled" 3 | } -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | nmHoistingLimits: workspaces 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: tools/.yarn/releases/yarn-4.0.1.cjs 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.1.0](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.30...v0.1.0) (2025-05-01) 7 | 8 | ### Bug Fixes 9 | 10 | * update bottomsheet position when steps are modified ([e7cbc0f](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/e7cbc0f52b08097496cbe4489c228a9bfe5b12a2)) 11 | 12 | ## [0.0.30](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.29...v0.0.30) (2025-02-03) 13 | 14 | ### Bug Fixes 15 | 16 | * send `animated` once the step is finish animating ([3c25d95](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/3c25d95042d8f10c2f18b42446a91315f1269ea1)) 17 | 18 | ## [0.0.29](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.28...v0.0.29) (2023-10-19) 19 | 20 | **Note:** Version bump only for package ui-persistent-bottomsheet 21 | 22 | ## [0.0.28](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.27...v0.0.28) (2023-10-19) 23 | 24 | ### Bug Fixes 25 | 26 | * regression fix ([799b610](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/799b6103911fe7f37d4fd4c7f9a0d868f38a40fc)) 27 | 28 | ## [0.0.27](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.26...v0.0.27) (2023-10-18) 29 | 30 | ### Bug Fixes 31 | 32 | * prevent error in latest N ([e9cb118](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/e9cb118f7593befd13276d6ae30253f1c2f8893a)) 33 | 34 | ## [0.0.26](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.25...v0.0.26) (2022-12-16) 35 | 36 | **Note:** Version bump only for package ui-persistent-bottomsheet 37 | 38 | ## [0.0.25](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.24...v0.0.25) (2022-12-16) 39 | 40 | **Note:** Version bump only for package ui-persistent-bottomsheet 41 | 42 | ## [0.0.24](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.23...v0.0.24) (2022-11-07) 43 | 44 | ### Bug Fixes 45 | 46 | - `translationFunction` parameters fix to `(delta, max, progress)` ([63fef75](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/63fef75e5c500d48b889ee2541f5309df58ecaab)) 47 | 48 | ## [0.0.23](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.22...v0.0.23) (2022-11-07) 49 | 50 | **Note:** Version bump only for package @nativescript-community/ui-persistent-bottomsheet 51 | 52 | ## [0.0.22](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.21...v0.0.22) (2022-10-04) 53 | 54 | ### Bug Fixes 55 | 56 | - handle animation cancel and stepIndex change during animation ([38f0a0b](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/38f0a0b062c23e1d4c3ac521587540326a4cf61c)) 57 | 58 | ## [0.0.21](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.20...v0.0.21) (2022-04-11) 59 | 60 | ### Bug Fixes 61 | 62 | - gesture lifecycle fixes ([b07eac7](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/b07eac70ca8cb10d4716a8be04de7236b84bf75e)) 63 | 64 | ## [0.0.20](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.19...v0.0.20) (2022-03-29) 65 | 66 | ### Bug Fixes 67 | 68 | - ensure gesture tag is unique ([7013c49](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/7013c4974052b94c61ccbff6b26cd6018b9b4497)) 69 | 70 | ## [0.0.19](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.18...v0.0.19) (2022-02-15) 71 | 72 | ### Bug Fixes 73 | 74 | - **ios:** safe area support ([ba4fb6f](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/ba4fb6fad187747489ed106d1b5f59574f432909)) 75 | 76 | ## [0.0.18](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.17...v0.0.18) (2022-02-11) 77 | 78 | ### Bug Fixes 79 | 80 | - angular demo almost working ([900f3f1](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/900f3f1bfda5093d75e2a57e23a53c132e1c7077)) 81 | - **angular:** fix for main content not showing ([ae9ce28](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/ae9ce28646e8b77865384146449c9c5d4d43f77e)) 82 | 83 | ## [0.0.17](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.16...v0.0.17) (2021-03-22) 84 | 85 | ### Bug Fixes 86 | 87 | - need to bet init as null to be reactive ([b0704d4](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/b0704d495d934ede1ed3fa1b5960e6502210f0d4)) 88 | 89 | ## [0.0.16](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.15...v0.0.16) (2021-03-22) 90 | 91 | ### Bug Fixes 92 | 93 | - allow to customize gesture options ([a14dce0](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/a14dce09eea3993c6d4c98e7a891e9a9748c65ad)) 94 | 95 | ## [0.0.15](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.14...v0.0.15) (2021-02-22) 96 | 97 | ### Bug Fixes 98 | 99 | - dont start gesture if no steps or [0] ([f184494](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/f184494321da98b7474720be55c0bf2faf94b080)) 100 | - release touch on scrollview ([795da2d](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/795da2d0f9d8159737f497bf1dc1029b022c852f)) 101 | 102 | ## [0.0.14](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.13...v0.0.14) (2020-11-11) 103 | 104 | ### Bug Fixes 105 | 106 | - bug fixes after last change ([00ab489](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/00ab4898086da03c9e2862688478d866b3cba7d8)) 107 | 108 | ## [0.0.13](https://github.com/nativescript-community/ui-persistent-bottomsheet/compare/v0.0.12...v0.0.13) (2020-11-11) 109 | 110 | ### Bug Fixes 111 | 112 | - more fixes to allow more complex configurations ([9472018](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/9472018dfc635bf028f58437b724bccbb3057595)) 113 | 114 | ## 0.0.12 (2020-11-11) 115 | 116 | ### Bug Fixes 117 | 118 | - sonme fixes ([d16935e](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/d16935e870681f01956963d59c1fed6e58fe4b06)) 119 | - vue component fix ([b3b036d](https://github.com/nativescript-community/ui-persistent-bottomsheet/commit/b3b036df51778b9da8992450f84c1186e3e7d18a)) 120 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 21 |

@nativescript-community/ui-persistent-bottomsheet

22 |

23 | Downloads per month 24 | NPM Version 25 |

26 | 27 |

28 | NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
29 | 30 |

31 | 32 |
33 | 34 | 35 | | | | 36 | | --- | ----------- | 37 | | iOS Demo | Android Demo | 38 | 39 | 40 | [](#table-of-contents) 41 | 42 | 43 | [](#table-of-contents) 44 | 45 | ## Table of Contents 46 | 47 | * [Installation](#installation) 48 | * [Configuration](#configuration) 49 | * [API](#api) 50 | * [Properties](#properties) 51 | * [Methods](#methods) 52 | * [Usage in Angular](#usage-in-angular) 53 | * [Usage in Vue](#usage-in-vue) 54 | * [Usage in Svelte](#usage-in-svelte) 55 | * [Usage in React](#usage-in-react) 56 | * [Demos](#demos) 57 | * [Demos and Development](#demos-and-development) 58 | * [Repo Setup](#repo-setup) 59 | * [Build](#build) 60 | * [Demos](#demos-1) 61 | * [Contributing](#contributing) 62 | * [Update repo ](#update-repo-) 63 | * [Update readme ](#update-readme-) 64 | * [Update doc ](#update-doc-) 65 | * [Publish](#publish) 66 | * [modifying submodules](#modifying-submodules) 67 | * [Questions](#questions) 68 | 69 | 70 | [](#installation) 71 | 72 | 73 | [](#installation) 74 | 75 | ## Installation 76 | Run the following command from the root of your project: 77 | 78 | `ns plugin add @nativescript-community/ui-persistent-bottomsheet` 79 | 80 | 81 | [](#configuration) 82 | 83 | 84 | [](#configuration) 85 | 86 | ## Configuration 87 | For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts): 88 | 89 | ```typescript 90 | import { install } from '@nativescript-community/ui-persistent-bottomsheet'; 91 | install(); 92 | ``` 93 | 94 | 95 | [](#api) 96 | 97 | 98 | [](#api) 99 | 100 | ## API 101 | 102 | ### Properties 103 | 104 | | Property | Default | Type | Description | 105 | | ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- | 106 | | bottomSheet | `undefined` | `View` | View containing the content for the bottomsheet | 107 | | gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled | 108 | | stepIndex | `0` | `number` | the index of current step (mutable) | 109 | | steps | `[70]` | `number[]` | the different available steps | 110 | | backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer | 111 | 112 | 113 | 114 | ### Methods 115 | 116 | | Name | Return | Description | 117 | | ------------ | ------ | ----------------------------------------------- | 118 | | install() | `void` | Install gestures | 119 | 120 | 121 | [](#usage-in-angular) 122 | 123 | 124 | [](#usage-in-angular) 125 | 126 | ## Usage in Angular 127 | Import the module into your project. 128 | 129 | ```typescript 130 | import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular"; 131 | 132 | @NgModule({ 133 | imports: [ 134 | PBSModule 135 | ] 136 | schemas: [ 137 | NO_ERRORS_SCHEMA 138 | ] 139 | }) 140 | 141 | export class AppModule { } 142 | ``` 143 | 144 | Then in your component add the following: 145 | 146 | ```xml 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | ``` 158 | For a more complete example, look in the `demo-ng` directory. 159 | 160 | 161 | [](#usage-in-vue) 162 | 163 | 164 | [](#usage-in-vue) 165 | 166 | ## Usage in Vue 167 | 168 | Register the plugin in your `app.js`. 169 | 170 | ```typescript 171 | import BottomSheetPlugin from '~/components/drawer/vue'; 172 | Vue.use(BottomSheetPlugin); 173 | ``` 174 | 175 | Add this at the top of your webpack config file: 176 | ```javascript 177 | const NsVueTemplateCompiler = require('nativescript-vue-template-compiler'); 178 | 179 | NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, { 180 | model: { 181 | prop: 'stepIndex', 182 | event: 'stepIndexChange' 183 | } 184 | }); 185 | ``` 186 | 187 | Then in your component add the following: 188 | 189 | ```xml 190 | 191 | 192 | 194 | 195 | 197 | 198 | 199 | ``` 200 | For a more complete example, look in the `demo-vue` directory. 201 | 202 | 203 | [](#usage-in-svelte) 204 | 205 | 206 | [](#usage-in-svelte) 207 | 208 | ## Usage in Svelte 209 | 210 | Register the plugin in your `app.ts`. 211 | 212 | ```typescript 213 | import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte'; 214 | BottomSheetElement.register(); 215 | ``` 216 | 217 | Then in your component, add the following: 218 | 219 | ```xml 220 | 221 | 222 | 224 | 225 | 227 | 228 | 229 | ``` 230 | For a more complete example, look in the `demo-svelte` directory. 231 | 232 | 233 | [](#usage-in-react) 234 | 235 | 236 | [](#usage-in-react) 237 | 238 | ## Usage in React 239 | 240 | Register the plugin in your `app.ts`. 241 | 242 | ```typescript 243 | import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react'; 244 | BottomSheetElement.register(); 245 | ``` 246 | 247 | Then in your component, add the following: 248 | ```ts 249 | import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react" 250 | ``` 251 | 252 | ```xml 253 | 254 | 255 | 257 | 258 | 260 | 261 | 262 | ``` 263 | For a more complete example, look in the `demo-react` directory. 264 | 265 | 266 | 267 | [](#demos) 268 | 269 | 270 | [](#demos) 271 | 272 | ## Demos 273 | This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell: 274 | ```shell 275 | $ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet 276 | $ cd ui-drawer 277 | $ npm run i 278 | $ npm run setup 279 | $ npm run build && npm run build.angular 280 | $ cd demo-ng # or demo-vue or demo-svelte or demo-react 281 | $ ns run ios|android 282 | ``` 283 | 284 | 285 | [](#demos-and-development) 286 | 287 | 288 | [](#demos-and-development) 289 | 290 | ## Demos and Development 291 | 292 | 293 | ### Repo Setup 294 | 295 | The repo uses submodules. If you did not clone with ` --recursive` then you need to call 296 | ``` 297 | git submodule update --init 298 | ``` 299 | 300 | The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work. 301 | 302 | To develop and test: 303 | if you use `yarn` then run `yarn` 304 | if you use `pnpm` then run `pnpm i` 305 | 306 | **Interactive Menu:** 307 | 308 | To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts. 309 | 310 | ### Build 311 | 312 | ```bash 313 | npm run build.all 314 | ``` 315 | WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run` 316 | 317 | ### Demos 318 | 319 | ```bash 320 | npm run demo.[ng|react|svelte|vue].[ios|android] 321 | 322 | npm run demo.svelte.ios # Example 323 | ``` 324 | 325 | Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]` 326 | Instead you work in `demo-snippets/[ng|react|svelte|vue]` 327 | You can start from the `install.ts` of each flavor to see how to register new demos 328 | 329 | 330 | [](#contributing) 331 | 332 | 333 | [](#contributing) 334 | 335 | ## Contributing 336 | 337 | ### Update repo 338 | 339 | You can update the repo files quite easily 340 | 341 | First update the submodules 342 | 343 | ```bash 344 | npm run update 345 | ``` 346 | 347 | Then commit the changes 348 | Then update common files 349 | 350 | ```bash 351 | npm run sync 352 | ``` 353 | Then you can run `yarn|pnpm`, commit changed files if any 354 | 355 | ### Update readme 356 | ```bash 357 | npm run readme 358 | ``` 359 | 360 | ### Update doc 361 | ```bash 362 | npm run doc 363 | ``` 364 | 365 | ### Publish 366 | 367 | The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release) 368 | Simply run 369 | ```shell 370 | npm run publish 371 | ``` 372 | 373 | ### modifying submodules 374 | 375 | The repo uses https:// for submodules which means you won't be able to push directly into the submodules. 376 | One easy solution is t modify `~/.gitconfig` and add 377 | ``` 378 | [url "ssh://git@github.com/"] 379 | pushInsteadOf = https://github.com/ 380 | ``` 381 | 382 | 383 | [](#questions) 384 | 385 | 386 | [](#questions) 387 | 388 | ## Questions 389 | 390 | If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). 391 | 392 | [](#demos-and-development) 393 | 394 | ## Demos and Development 395 | 396 | 397 | ### Repo Setup 398 | 399 | The repo uses submodules. If you did not clone with ` --recursive` then you need to call 400 | ``` 401 | git submodule update --init 402 | ``` 403 | 404 | The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work. 405 | 406 | To develop and test: 407 | if you use `yarn` then run `yarn` 408 | if you use `pnpm` then run `pnpm i` 409 | 410 | **Interactive Menu:** 411 | 412 | To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts. 413 | 414 | ### Build 415 | 416 | ```bash 417 | npm run build.all 418 | ``` 419 | WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run` 420 | 421 | ### Demos 422 | 423 | ```bash 424 | npm run demo.[ng|react|svelte|vue].[ios|android] 425 | 426 | npm run demo.svelte.ios # Example 427 | ``` 428 | 429 | Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]` 430 | Instead you work in `demo-snippets/[ng|react|svelte|vue]` 431 | You can start from the `install.ts` of each flavor to see how to register new demos 432 | 433 | 434 | [](#contributing) 435 | 436 | ## Contributing 437 | 438 | ### Update repo 439 | 440 | You can update the repo files quite easily 441 | 442 | First update the submodules 443 | 444 | ```bash 445 | npm run update 446 | ``` 447 | 448 | Then commit the changes 449 | Then update common files 450 | 451 | ```bash 452 | npm run sync 453 | ``` 454 | Then you can run `yarn|pnpm`, commit changed files if any 455 | 456 | ### Update readme 457 | ```bash 458 | npm run readme 459 | ``` 460 | 461 | ### Update doc 462 | ```bash 463 | npm run doc 464 | ``` 465 | 466 | ### Publish 467 | 468 | The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release) 469 | Simply run 470 | ```shell 471 | npm run publish 472 | ``` 473 | 474 | ### modifying submodules 475 | 476 | The repo uses https:// for submodules which means you won't be able to push directly into the submodules. 477 | One easy solution is t modify `~/.gitconfig` and add 478 | ``` 479 | [url "ssh://git@github.com/"] 480 | pushInsteadOf = https://github.com/ 481 | ``` 482 | 483 | [](#questions) 484 | 485 | ## Questions 486 | 487 | If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "readme": true, 3 | "angular": true, 4 | "demos": [ 5 | "ng", 6 | "react", 7 | "svelte", 8 | "vue" 9 | ] 10 | } -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | ActionBar { 2 | background-color: #ed3e04; 3 | color: white; 4 | } 5 | 6 | .avatar { 7 | background-color: #ed3e04; 8 | border-radius: 40; 9 | height: 80; 10 | vertical-align: middle; 11 | } 12 | 13 | .avatar Label { 14 | vertical-align: middle; 15 | horizontal-align: center; 16 | font-size: 30; 17 | color: white; 18 | } 19 | 20 | .drawer .button { 21 | background-color: transparent; 22 | margin: 0; 23 | padding: 0; 24 | border-color: #ccc; 25 | z-index: 0; 26 | border-width: 0 0 0.5 0; 27 | color: #222222; 28 | text-align: left; 29 | padding-left: 25; 30 | height: 50; 31 | font-size: 14; 32 | } 33 | 34 | .drawer .button:highlighted { 35 | background-color: #eeeeee; 36 | color: #222222; 37 | } 38 | 39 | Button { 40 | background-color: #ed3e04; 41 | color: white; 42 | } 43 | -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; 2 | import { RouterExtensions } from '@nativescript/angular'; 3 | 4 | @Component({ 5 | selector: 'ns-basic', 6 | templateUrl: './basic.component.html', 7 | styleUrls: ['./basic.component.scss'] 8 | }) 9 | export class BasicComponent { 10 | constructor(private router: RouterExtensions) {} 11 | stepIndex = 0; 12 | items = [ 13 | { index: 0, name: 'TURQUOISE', color: '#1abc9c' }, 14 | { index: 1, name: 'EMERALD', color: '#2ecc71' }, 15 | { index: 2, name: 'PETER RIVER', color: '#3498db' }, 16 | { index: 3, name: 'AMETHYST', color: '#9b59b6' }, 17 | { index: 4, name: 'WET ASPHALT', color: '#34495e' }, 18 | { index: 5, name: 'GREEN SEA', color: '#16a085' }, 19 | { index: 6, name: 'NEPHRITIS', color: '#27ae60' }, 20 | { index: 7, name: 'BELIZE HOLE', color: '#2980b9' }, 21 | { index: 8, name: 'WISTERIA', color: '#8e44ad' }, 22 | { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }, 23 | { index: 10, name: 'SUN FLOWER', color: '#f1c40f' }, 24 | { index: 11, name: 'CARROT', color: '#e67e22' }, 25 | { index: 12, name: 'ALIZARIN', color: '#e74c3c' }, 26 | { index: 13, name: 'CLOUDS', color: '#ecf0f1' }, 27 | { index: 14, name: 'CONCRETE', color: '#95a5a6' }, 28 | { index: 15, name: 'ORANGE', color: '#f39c12' }, 29 | { index: 16, name: 'PUMPKIN', color: '#d35400' }, 30 | { index: 17, name: 'POMEGRANATE', color: '#c0392b' }, 31 | { index: 18, name: 'SILVER', color: '#bdc3c7' }, 32 | { index: 19, name: 'ASBESTOS', color: '#7f8c8d' } 33 | ]; 34 | 35 | setIndex(index: number) { 36 | this.stepIndex = index; 37 | } 38 | 39 | onIndexChanged(event) { 40 | this.setIndex(event.value); 41 | } 42 | 43 | goBack(): void { 44 | this.router.back(); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /demo-snippets/ng/install.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | 3 | import { BottomSheetModule } from '@nativescript-community/ui-persistent-bottomsheet/angular'; 4 | 5 | import { BasicComponent } from './basic/basic.component'; 6 | 7 | export const COMPONENTS = [BasicComponent]; 8 | @NgModule({ 9 | imports: [BottomSheetModule], 10 | exports: [BottomSheetModule], 11 | schemas: [NO_ERRORS_SCHEMA] 12 | }) 13 | export class InstallModule {} 14 | 15 | export function installPlugin() {} 16 | 17 | export const demos = [{ name: 'Basic', path: 'basic', component: BasicComponent }]; 18 | -------------------------------------------------------------------------------- /demo-snippets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/template-snippet", 3 | "private": true, 4 | "version": "0.0.1", 5 | "dependencies": { 6 | "@nativescript-community/gesturehandler": "^2.0.8", 7 | "@nativescript-community/ui-persistent-bottomsheet": "0.0.24" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /demo-snippets/react/Basic.tsx: -------------------------------------------------------------------------------- 1 | import { PersistentBottomSheet as NativeScriptBottomSheet } from '@nativescript-community/ui-persistent-bottomsheet'; 2 | import { BottomSheet } from '@nativescript-community/ui-persistent-bottomsheet/react'; 3 | import * as React from 'react'; 4 | import { NSVElement, StyleSheet } from 'react-nativescript'; 5 | 6 | const items = [ 7 | { index: 0, name: 'TURQUOISE', color: '#1abc9c' }, 8 | { index: 1, name: 'EMERALD', color: '#2ecc71' }, 9 | { index: 2, name: 'PETER RIVER', color: '#3498db' }, 10 | { index: 3, name: 'AMETHYST', color: '#9b59b6' }, 11 | { index: 4, name: 'WET ASPHALT', color: '#34495e' }, 12 | { index: 5, name: 'GREEN SEA', color: '#16a085' }, 13 | { index: 6, name: 'NEPHRITIS', color: '#27ae60' }, 14 | { index: 7, name: 'BELIZE HOLE', color: '#2980b9' }, 15 | { index: 8, name: 'WISTERIA', color: '#8e44ad' }, 16 | { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }, 17 | { index: 10, name: 'SUN FLOWER', color: '#f1c40f' }, 18 | { index: 11, name: 'CARROT', color: '#e67e22' }, 19 | { index: 12, name: 'ALIZARIN', color: '#e74c3c' }, 20 | { index: 13, name: 'CLOUDS', color: '#ecf0f1' }, 21 | { index: 14, name: 'CONCRETE', color: '#95a5a6' }, 22 | { index: 15, name: 'ORANGE', color: '#f39c12' }, 23 | { index: 16, name: 'PUMPKIN', color: '#d35400' }, 24 | { index: 17, name: 'POMEGRANATE', color: '#c0392b' }, 25 | { index: 18, name: 'SILVER', color: '#bdc3c7' }, 26 | { index: 19, name: 'ASBESTOS', color: '#7f8c8d' } 27 | ]; 28 | 29 | interface Item { 30 | index: number; 31 | name: string; 32 | color: string; 33 | } 34 | const cellFactory = (item: Item) => ( 35 | 36 | 37 | 39 | 40 | ); 41 | 42 | export function Basic() { 43 | let stepIndex = 0; 44 | 45 | return ( 46 | 47 | (stepIndex = e.value)} steps={[56, 156, 456]} scrollViewId="scrollView" backdropColor="#88000000"> 48 | 49 | 51 | 52 | 53 |