javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/angular
History
Amanda Johnston 897ff6f749 feat(toast): allow custom positioning relative to specific element (#28248) 
Issue number: resolves #17499

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, there isn't a way to position toasts such that they don't
overlap navigation elements such as headers, footers, and FABs.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Added the new `positionAnchor` property, which specifies an element that
the toast's position should be anchored to.

While the name can be tweaked, we should take care to keep the relation
between it and the `position` property clear. The `position` acts as a
sort of "origin" point, and the toast is moved from there to sit near
the chosen anchor element. This is important because it helps clarify
why the toast sits above the anchor for `position="bottom"` and vice
versa.

I chose not to rename the `position` prop itself to avoid breaking
changes.

Docs PR: https://github.com/ionic-team/ionic-docs/pull/3158

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-10-04 14:06:27 -05:00
..
scripts
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
src
feat(toast): allow custom positioning relative to specific element (#28248)
2023-10-04 14:06:27 -05:00
test
test: update test apps to cypress 13 (#28212)
2023-09-21 20:17:46 +00:00
.eslintignore
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
.eslintrc.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
.prettierignore
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
CHANGELOG.md
v7.4.1
2023-09-20 13:20:51 +00:00
ng-package.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
package-lock.json
chore(): update package lock files
2023-09-20 13:21:09 +00:00
package.json
v7.4.1
2023-09-20 13:20:51 +00:00
README.md
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
tsconfig.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
tsconfig.schematics.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
tslint.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00

README.md

@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

Related

License

Testing ng-add in ionic

  1. Pull the latest from main
  2. Build ionic/angular: npm run build
  3. Run npm link from ionic/angular/dist directory
  4. Create a blank angular project
ng new add-test
// Say yes to including the router, we need it
cd add-test
  1. To run schematics locally, we need the schematics-cli (once published, this will not be needed)
npm install @angular-devkit/schematics-cli
  1. Link @ionic/angular
npm link @ionic/angular
  1. Run the local copy of the ng-add schematic
$ npx schematics @ionic/angular:ng-add

You'll now be able to add ionic components to a vanilla Angular app setup.