javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(item-option): add shapes (#29636)

Browse Source
This commit is contained in:
Maria Hutt
2024-06-20 11:24:38 -07:00
committed by GitHub
parent 5055bdcc96
commit 3d94b234a0
48 changed files with 201 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/item-option/item-option.ionic.scss
View File

@ -45,3 +45,21 @@
min-width: initial;
height: globals.$ionic-scale-500;
}
// Item Option Shapes
// --------------------------------------------------
/* Round */
:host(.item-option-round) {
@include globals.border-radius(globals.$ionic-border-radius-300);
}
/* Soft */
:host(.item-option-soft) {
@include globals.border-radius(globals.$ionic-border-radius-200);
}
/* Rectangular */
:host(.item-option-rectangular) {
@include globals.border-radius(globals.$ionic-border-radius-0);
}

28
core/src/components/item-option/item-option.tsx
View File

@ -80,6 +80,15 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
* Set to `"rectangular"` for non-rounded corners.
* Set to `"soft"` for slightly rounded corners.
* Set to `"round"` for fully rounded corners.
*
* Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
*/
@Prop() shape?: 'soft' | 'round' | 'rectangular';
private onClick = (ev: Event) => {
const el = (ev.target as HTMLElement).closest('ion-item-option');
if (el) {
@ -87,10 +96,28 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
}
};
private getShape(): string | undefined {
const theme = getIonTheme(this);
const { shape } = this;
// TODO(ROU-10841): Remove theme check when shapes are defined for all themes.
if (theme !== 'ionic') {
return undefined;
}
if (shape === undefined) {
return 'round';
}
return shape;
}
render() {
const { disabled, expandable, href } = this;
const TagType = href === undefined ? 'button' : ('a' as any);
const theme = getIonTheme(this);
const shape = this.getShape();
const attrs =
TagType === 'button'
? { type: this.type }
@ -105,6 +132,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
onClick={this.onClick}
class={createColorClasses(this.color, {
[theme]: true,
[`item-option-${shape}`]: shape !== undefined,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,