mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
feat(item-group): add the item group component and move styles
- styles are moved out of item into item group for it - updated to work like v3 styles
This commit is contained in:
3073
packages/core/src/components.d.ts
vendored
3073
packages/core/src/components.d.ts
vendored
File diff suppressed because it is too large
Load Diff
15
packages/core/src/components/item-group/item-group.ios.scss
Normal file
15
packages/core/src/components/item-group/item-group.ios.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
@import "./item-group";
|
||||||
|
@import "./item-group.ios.vars";
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Item Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.item-group-ios ion-item:first-child .item-inner {
|
||||||
|
border-top-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-group-ios ion-item:last-child .item-inner,
|
||||||
|
.item-group-ios .item-wrapper:last-child .item .item-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
@import "../../themes/ionic.globals.ios";
|
||||||
|
|
||||||
|
// iOS Item Group
|
||||||
|
// --------------------------------------------------
|
15
packages/core/src/components/item-group/item-group.md.scss
Normal file
15
packages/core/src/components/item-group/item-group.md.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
@import "./item-group";
|
||||||
|
@import "./item-group.md.vars";
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Item Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.item-group-md ion-item:first-child .item-inner {
|
||||||
|
border-top-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-group-md ion-item:last-child .item-inner,
|
||||||
|
.item-group-md .item-wrapper:last-child .item .item-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
@import "../../themes/ionic.globals.md";
|
||||||
|
|
||||||
|
// Material Design Item Group
|
||||||
|
// --------------------------------------------------
|
9
packages/core/src/components/item-group/item-group.scss
Normal file
9
packages/core/src/components/item-group/item-group.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@import "./item-group.vars";
|
||||||
|
|
||||||
|
|
||||||
|
// Item Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
ion-item-group {
|
||||||
|
display: block;
|
||||||
|
}
|
18
packages/core/src/components/item-group/item-group.tsx
Normal file
18
packages/core/src/components/item-group/item-group.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Component } from '@stencil/core';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
tag: 'ion-item-group',
|
||||||
|
styleUrls: {
|
||||||
|
ios: 'item-group.ios.scss',
|
||||||
|
md: 'item-group.md.scss'
|
||||||
|
},
|
||||||
|
host: {
|
||||||
|
theme: 'item-group'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export class ItemGroup {
|
||||||
|
render() {
|
||||||
|
return <slot></slot>;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,5 @@
|
|||||||
|
@import "../../themes/ionic.globals";
|
||||||
|
|
||||||
|
|
||||||
|
// Item Group
|
||||||
|
// --------------------------------------------------
|
@ -167,19 +167,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// iOS Item Group
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
ion-item-group .item-ios:first-child .item-inner {
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-item-group .item-ios:last-child .item-inner,
|
|
||||||
ion-item-group .item-wrapper:last-child .item-ios .item-inner {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Generate iOS Item and Item Divider Colors
|
// Generate iOS Item and Item Divider Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
@ -153,19 +153,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Material Design Item Group
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
ion-item-group .item-md:first-child .item-inner {
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-item-group .item-md:last-child .item-inner,
|
|
||||||
ion-item-group .item-md .item-wrapper:last-child .item-inner {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Generate Material Design Item and Item Divider Colors
|
// Generate Material Design Item and Item Divider Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user