mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(item-divider): add interface
This commit is contained in:
185
core/src/components/item-divider/item-divider.interfaces.ts
Normal file
185
core/src/components/item-divider/item-divider.interfaces.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
import type { IonPadding, IonMargin } from '../../themes/themes.interfaces';
|
||||
|
||||
export type IonItemDividerRecipe = {
|
||||
background?: string;
|
||||
color?: string;
|
||||
minHeight?: string;
|
||||
zIndex?: number;
|
||||
|
||||
padding?: IonPadding;
|
||||
|
||||
inner?: {
|
||||
padding?: IonPadding;
|
||||
};
|
||||
|
||||
border?: {
|
||||
bottom?: string;
|
||||
};
|
||||
|
||||
font?: {
|
||||
size?: string;
|
||||
weight?: string;
|
||||
};
|
||||
|
||||
leading?: {
|
||||
anchor?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
trailing?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
label?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
|
||||
icon?: {
|
||||
font?: {
|
||||
size?: string;
|
||||
};
|
||||
|
||||
leading?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
trailing?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
default?: {
|
||||
color?: string;
|
||||
};
|
||||
|
||||
semantic?: {
|
||||
default?: {
|
||||
color?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
note?: {
|
||||
align?: {
|
||||
self?: string;
|
||||
};
|
||||
|
||||
font?: {
|
||||
size?: string;
|
||||
};
|
||||
|
||||
margin?: IonMargin;
|
||||
padding?: IonPadding;
|
||||
};
|
||||
|
||||
avatar?: {
|
||||
height?: string;
|
||||
width?: string;
|
||||
|
||||
margin?: IonMargin;
|
||||
|
||||
leading?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
trailing?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
thumbnail?: {
|
||||
height?: string;
|
||||
width?: string;
|
||||
|
||||
margin?: IonMargin;
|
||||
|
||||
leading?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
trailing?: {
|
||||
edge?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
header1?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
|
||||
header2?: {
|
||||
margin?: IonMargin;
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
header3?: {
|
||||
margin?: IonMargin;
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
header4?: {
|
||||
margin?: IonMargin;
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
header5?: {
|
||||
margin?: IonMargin;
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
header6?: {
|
||||
margin?: IonMargin;
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
|
||||
paragraph?: {
|
||||
color?: string;
|
||||
overflow?: string;
|
||||
|
||||
margin?: IonMargin;
|
||||
|
||||
font?: {
|
||||
size?: string;
|
||||
};
|
||||
|
||||
text?: {
|
||||
overflow?: string;
|
||||
};
|
||||
|
||||
trailing?: {
|
||||
margin?: IonMargin;
|
||||
};
|
||||
};
|
||||
};
|
||||
@@ -403,16 +403,13 @@ export const defaultTheme: DefaultTheme = {
|
||||
|
||||
margin: {
|
||||
top: components.item.media.slot.margin.top,
|
||||
end: components.item.media.slot.margin.end,
|
||||
bottom: components.item.media.slot.margin.bottom,
|
||||
start: components.item.media.slot.margin.start,
|
||||
},
|
||||
|
||||
leading: {
|
||||
// Targets `ion-avatar[slot="start"]`
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.start.slot.margin.start,
|
||||
end: components.item.media.start.slot.margin.end,
|
||||
},
|
||||
},
|
||||
@@ -423,7 +420,6 @@ export const defaultTheme: DefaultTheme = {
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.end.slot.margin.start,
|
||||
end: components.item.media.end.slot.margin.end,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -437,16 +433,13 @@ export const defaultTheme: DefaultTheme = {
|
||||
|
||||
margin: {
|
||||
top: components.item.media.slot.margin.top,
|
||||
end: components.item.media.slot.margin.end,
|
||||
bottom: components.item.media.slot.margin.bottom,
|
||||
start: components.item.media.slot.margin.start,
|
||||
},
|
||||
|
||||
leading: {
|
||||
// Targets `ion-thumbnail[slot="start"]`
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.start.slot.margin.start,
|
||||
end: components.item.media.start.slot.margin.end,
|
||||
},
|
||||
},
|
||||
@@ -457,7 +450,6 @@ export const defaultTheme: DefaultTheme = {
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.end.slot.margin.start,
|
||||
end: components.item.media.end.slot.margin.end,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -103,9 +103,7 @@ export const components = {
|
||||
slot: {
|
||||
margin: {
|
||||
top: 'var(--ion-spacing-sm)',
|
||||
end: null,
|
||||
bottom: 'var(--ion-spacing-sm)',
|
||||
start: null,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -113,7 +111,6 @@ export const components = {
|
||||
slot: {
|
||||
margin: {
|
||||
end: 'var(--ion-spacing-lg)',
|
||||
start: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -121,7 +118,6 @@ export const components = {
|
||||
end: {
|
||||
slot: {
|
||||
margin: {
|
||||
end: null,
|
||||
start: 'var(--ion-spacing-lg)',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -536,16 +536,13 @@ export const defaultTheme: DefaultTheme = {
|
||||
|
||||
margin: {
|
||||
top: components.item.media.slot.margin.top,
|
||||
end: components.item.media.slot.margin.end,
|
||||
bottom: components.item.media.slot.margin.bottom,
|
||||
start: components.item.media.slot.margin.start,
|
||||
},
|
||||
|
||||
leading: {
|
||||
// Targets `ion-avatar[slot="start"]`
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.start.slot.margin.start,
|
||||
end: components.item.media.start.slot.margin.end,
|
||||
},
|
||||
},
|
||||
@@ -556,7 +553,6 @@ export const defaultTheme: DefaultTheme = {
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.end.slot.margin.start,
|
||||
end: components.item.media.end.slot.margin.end,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -570,16 +566,13 @@ export const defaultTheme: DefaultTheme = {
|
||||
|
||||
margin: {
|
||||
top: components.item.media.slot.margin.top,
|
||||
end: components.item.media.slot.margin.end,
|
||||
bottom: components.item.media.slot.margin.bottom,
|
||||
start: components.item.media.slot.margin.start,
|
||||
},
|
||||
|
||||
leading: {
|
||||
// Targets `ion-thumbnail[slot="start"]`
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.start.slot.margin.start,
|
||||
end: components.item.media.start.slot.margin.end,
|
||||
},
|
||||
},
|
||||
@@ -590,7 +583,6 @@ export const defaultTheme: DefaultTheme = {
|
||||
edge: {
|
||||
margin: {
|
||||
start: components.item.media.end.slot.margin.start,
|
||||
end: components.item.media.end.slot.margin.end,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -114,9 +114,7 @@ export const components = {
|
||||
slot: {
|
||||
margin: {
|
||||
top: 'var(--ion-spacing-sm)',
|
||||
end: null,
|
||||
bottom: 'var(--ion-spacing-sm)',
|
||||
start: null,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -124,7 +122,6 @@ export const components = {
|
||||
slot: {
|
||||
margin: {
|
||||
end: 'var(--ion-spacing-lg)',
|
||||
start: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -132,7 +129,6 @@ export const components = {
|
||||
end: {
|
||||
slot: {
|
||||
margin: {
|
||||
end: null,
|
||||
start: 'var(--ion-spacing-lg)',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces';
|
||||
import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interfaces';
|
||||
import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
|
||||
|
||||
// Platform-specific theme
|
||||
@@ -282,7 +283,7 @@ export type DefaultTheme = BaseTheme & {
|
||||
|
||||
type Components = {
|
||||
IonChip?: IonChipRecipe;
|
||||
IonItemDivider?: any;
|
||||
IonItemDivider?: IonItemDividerRecipe;
|
||||
|
||||
IonCard?: any;
|
||||
IonItem?: any;
|
||||
|
||||
Reference in New Issue
Block a user