mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
0b8f1bc7dd
Issue number: 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. --> Item sliding options in the "start" slot use the "left" safe area padding on the end edge. This causes the padding to be added in the wrong place. During development I also discovered that the RTL padding was wrong for both start and end options. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> LTR: - `side="start"` options set "left" safe area padding on left edge of first child - `side="end"` options set "right" safe area padding on right edge of last child RTL: - `side="start"` options set "right" safe area padding on right edge of first child - `side="end"` options set "left" safe area padding on the left edge of the last child ## 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. --> | side prop/text direction | `main` | `branch` | | - | - | - | | start/LTR |  |  | | end/LTR |  |  | | start/RTL |  |  | | end/RTL |  |  |
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
|
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
|
|
import { isEndSide } from '@utils/helpers';
|
|
|
|
import { getIonMode } from '../../global/ionic-global';
|
|
import type { Side } from '../menu/menu-interface';
|
|
|
|
@Component({
|
|
tag: 'ion-item-options',
|
|
styleUrls: {
|
|
ios: 'item-options.ios.scss',
|
|
md: 'item-options.md.scss',
|
|
},
|
|
})
|
|
export class ItemOptions implements ComponentInterface {
|
|
@Element() el!: HTMLElement;
|
|
|
|
/**
|
|
* The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
|
|
*
|
|
*/
|
|
@Prop() side: Side = 'end';
|
|
|
|
/**
|
|
* Emitted when the item has been fully swiped.
|
|
*/
|
|
@Event() ionSwipe!: EventEmitter<any>; // TODO(FW-2832): type
|
|
|
|
/** @internal */
|
|
@Method()
|
|
async fireSwipeEvent() {
|
|
this.ionSwipe.emit({
|
|
side: this.side,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const mode = getIonMode(this);
|
|
const isEnd = isEndSide(this.side);
|
|
return (
|
|
<Host
|
|
class={{
|
|
[mode]: true,
|
|
|
|
// Used internally for styling
|
|
[`item-options-${mode}`]: true,
|
|
|
|
/**
|
|
* Note: The "start" and "end" terms refer to the
|
|
* direction ion-item-option instances within ion-item-options flow.
|
|
* They do not refer to how ion-item-options flows within ion-item-sliding.
|
|
* As a result, "item-options-start" means the ion-item-options container
|
|
* always appears on the left, and "item-options-end" means the ion-item-options
|
|
* container always appears on the right.
|
|
*/
|
|
'item-options-start': !isEnd,
|
|
'item-options-end': isEnd,
|
|
}}
|
|
></Host>
|
|
);
|
|
}
|
|
}
|