javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 14:19:17 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/vue
History
rug 3cc0353d6b feat(grid): modernizing component (#30658) 
<!-- 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. -->
The existing grid component (`ion-grid`, `ion-row`, and `ion-col`) in
Ionic was developed several years ago and has not received significant
updates since then. As a result, it does not leverage modern CSS
features. For example, the gutter (spacing) between columns is
implemented using the border property, which is an outdated technique.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `--ion-grid-gap`: this new CSS variable, will indicate the gap size in
the grid. Defaults to `0px` - the current value.
- `ion-col`: has a new way to calculate the width of the column.
Additionally a new property `order` (and responsive variants) was added,
and will control the order of the column.
- `ion-row`: uses the newly introduced custom property `--ion-grid-gap`.
This property will indicate the gap size in the grid.

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
The properties `pull` and `push` from `ion-col`, have been removed. The
functionality achieved with them, is now achieved with the new property
`order` and the existing `size`. More information and migration examples
can be read in `BREAKING.md` file.

## 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: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane@shanessite.net>
2025-09-17 11:10:54 +02:00
..
scripts
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00
src
feat(grid): modernizing component (#30658)
2025-09-17 11:10:54 +02:00
test
test(vue): improve test app (#30610)
2025-08-08 17:37:39 +00:00
types
feat(slides): remove ion-slide, ion-slides, and IonicSwiper module (#25868)
2022-09-01 14:36:17 -05:00
.eslintignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.eslintrc.js
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.prettierignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
CHANGELOG.md
v8.7.3
2025-08-20 18:36:46 +00:00
package-lock.json
chore(): update package lock files
2025-08-20 18:37:37 +00:00
package.json
v8.7.3
2025-08-20 18:36:46 +00:00
README.md
docs(many): update Contributing links (#29498)
2024-05-14 19:48:36 +00:00
rollup.config.mjs
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00
tsconfig.json
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00

README.md

@ionic/vue

Ionic Framework integration for Vue 3 apps.

Building

  1. Install dependencies in @ionic/core:
cd core && npm install
  1. Build @ionic/core. This will generate Vue component bindings in the packages/vue directory:
npm run build
  1. Install dependencies in @ionic/vue:
cd packages/vue && npm install
  1. Build @ionic/vue:
npm run build
  1. Install dependencies in @ionic/vue-router:
cd packages/vue-router && npm install
  1. Build @ionic/vue-router:
npm run build

Tests

  • E2E Tests are found in the packages/vue/test/base/tests directory and use Cypress.
  • When making changes to @ionic/vue or @ionic/vue-router you can run npm run sync in the test-app directory to ensure that the test application is using your built changes. Be sure to build in the vue and vue-router directories first.
  • Tests can be run in headless mode by running npm run cypress.
  • If you want to open the Cypress test runner, you can run node_modules/.bin/cypress open.
  • Bug fix and feature PRs should have new tests verifying the PR functionality.

Contributing

See our Contributing Guide.

Need Help?

Post your question on the Ionic Forum.