| 23 | shadow: true, |
| 24 | }) |
| 25 | export class Segment implements ComponentInterface { |
| 26 | private gesture?: Gesture; |
| 27 | |
| 28 | // Value before the segment is dragged |
| 29 | private valueBeforeGesture?: SegmentValue; |
| 30 | |
| 31 | private segmentViewEl?: HTMLIonSegmentViewElement | null = null; |
| 32 | private lastNextIndex?: number; |
| 33 | |
| 34 | /** |
| 35 | * Whether to update the segment view, if exists, when the value changes. |
| 36 | * This behavior is enabled by default, but is set false when scrolling content views |
| 37 | * since we don't want to "double scroll" the segment view. |
| 38 | */ |
| 39 | private triggerScrollOnValueChange?: boolean; |
| 40 | |
| 41 | @Element() el!: HTMLIonSegmentElement; |
| 42 | |
| 43 | @State() activated = false; |
| 44 | |
| 45 | /** |
| 46 | * The color to use from your application's color palette. |
| 47 | * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. |
| 48 | * For more information on colors, see [theming](/docs/theming/basics). |
| 49 | */ |
| 50 | @Prop({ reflect: true }) color?: Color; |
| 51 | @Watch('color') |
| 52 | protected colorChanged(value?: Color, oldValue?: Color) { |
| 53 | /** |
| 54 | * If color is set after not having |
| 55 | * previously been set (or vice versa), |
| 56 | * we need to emit style so the segment-buttons |
| 57 | * can apply their color classes properly. |
| 58 | */ |
| 59 | if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) { |
| 60 | this.emitStyle(); |
| 61 | } |
| 62 | } |
| 63 | |
| 64 | /** |
| 65 | * If `true`, the user cannot interact with the segment. |
| 66 | */ |
| 67 | @Prop() disabled = false; |
| 68 | |
| 69 | /** |
| 70 | * If `true`, the segment buttons will overflow and the user can swipe to see them. |
| 71 | * In addition, this will disable the gesture to drag the indicator between the buttons |
| 72 | * in order to swipe to see hidden buttons. |
| 73 | */ |
| 74 | @Prop() scrollable = false; |
| 75 | |
| 76 | /** |
| 77 | * If `true`, users will be able to swipe between segment buttons to activate them. |
| 78 | */ |
| 79 | @Prop() swipeGesture = true; |
| 80 | |
| 81 | @Watch('swipeGesture') |
| 82 | swipeGestureChanged() { |
nothing calls this directly
no test coverage detected