mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00

Issue number: resolves internal --------- <!-- 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. --> Segments can only be changed by clicking a segment button, or dragging the indicator ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The segment/segment buttons can now be linked to segment content within a segment view component. This content is scrollable/swipeable. Changing the content will update the segment/indicator and vice-versa. ## Does this introduce a breaking change? - [ ] Yes - [x] 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. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> **Limitations:** - Segment buttons **cannot** be disabled when connected ton `ion-segment-content` instances - The `ion-segment` **cannot** be without a value when linked with an `ion-segment-view`. If no value is provided, the value will default to the value of the first `ion-segment-content` [Preview](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/basic) [Preview (disabled state)](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/disabled) --------- Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
@ionic/vue
Ionic Framework integration for Vue 3 apps.
Building
- Install dependencies in
@ionic/core
:
cd core && npm install
- Build
@ionic/core
. This will generate Vue component bindings in thepackages/vue
directory:
npm run build
- Install dependencies in
@ionic/vue
:
cd packages/vue && npm install
- Build
@ionic/vue
:
npm run build
- Install dependencies in
@ionic/vue-router
:
cd packages/vue-router && npm install
- 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 runnpm run sync
in the test-app directory to ensure that the test application is using your built changes. Be sure to build in thevue
andvue-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.