-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(segment-view): adds support for new
ion-segment-view
component (…
…#29969) 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>
- Loading branch information
1 parent
3628ea8
commit 89508fb
Showing
26 changed files
with
1,096 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
// Segment Content | ||
// -------------------------------------------------- | ||
|
||
:host { | ||
scroll-snap-align: center; | ||
scroll-snap-stop: always; | ||
|
||
flex-shrink: 0; | ||
|
||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import type { ComponentInterface } from '@stencil/core'; | ||
import { Component, Host, h } from '@stencil/core'; | ||
|
||
@Component({ | ||
tag: 'ion-segment-content', | ||
styleUrl: 'segment-content.scss', | ||
shadow: true, | ||
}) | ||
export class SegmentContent implements ComponentInterface { | ||
render() { | ||
return ( | ||
<Host> | ||
<slot></slot> | ||
</Host> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export interface SegmentViewScrollEvent { | ||
scrollRatio: number; | ||
isManualScroll: boolean; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
@import "./segment-view"; | ||
@import "../segment-button/segment-button.ios.vars"; | ||
|
||
// iOS Segment View | ||
// -------------------------------------------------- | ||
|
||
:host(.segment-view-disabled) { | ||
opacity: $segment-button-ios-opacity-disabled; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
@import "./segment-view"; | ||
@import "../segment-button/segment-button.md.vars"; | ||
|
||
// Material Design Segment View | ||
// -------------------------------------------------- | ||
|
||
:host(.segment-view-disabled) { | ||
opacity: $segment-button-md-opacity-disabled; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
// Segment View | ||
// -------------------------------------------------- | ||
|
||
:host { | ||
display: flex; | ||
|
||
height: 100%; | ||
|
||
overflow-x: scroll; | ||
scroll-snap-type: x mandatory; | ||
|
||
/* Hide scrollbar in Firefox */ | ||
scrollbar-width: none; | ||
|
||
/* Hide scrollbar in IE and Edge */ | ||
-ms-overflow-style: none; | ||
} | ||
|
||
/* Hide scrollbar in webkit */ | ||
:host::-webkit-scrollbar { | ||
display: none; | ||
} | ||
|
||
:host(.segment-view-disabled) { | ||
touch-action: none; | ||
overflow-x: hidden; | ||
} | ||
|
||
:host(.segment-view-scroll-disabled) { | ||
pointer-events: none; | ||
} |
Oops, something went wrong.