javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-divider): use prop for sticky (#16691)

Browse Source
This commit is contained in:
Manu MA
2018-12-11 23:06:14 +01:00
committed by GitHub
parent e08b739168
commit a6a17235d0
6 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@@ -374,13 +374,13 @@ export class IonItem {
}
export declare interface IonItemDivider extends StencilComponents<'IonItemDivider'> {}
@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
export class IonItemDivider {
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode']);
proxyInputs(this, el, ['color', 'mode', 'sticky']);
}
}

1
core/api.txt
View File

@@ -447,6 +447,7 @@ ion-input,css-prop,--placeholder-opacity
ion-item-divider
ion-item-divider,prop,color,string | undefined,undefined,false
ion-item-divider,prop,mode,"ios" | "md",undefined,false
ion-item-divider,prop,sticky,boolean,false,false
ion-item-divider,css-prop,--background
ion-item-divider,css-prop,--color
ion-item-divider,css-prop,--padding-bottom

8
core/src/components.d.ts vendored
View File

@@ -1876,6 +1876,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
*/
'sticky': boolean;
}
interface IonItemDividerAttributes extends StencilHTMLAttributes {
/**
@@ -1886,6 +1890,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
*/
'sticky'?: boolean;
}
interface IonItemGroup {}

2
core/src/components/item-divider/item-divider.scss
View File

@@ -50,7 +50,7 @@
color: current-color(contrast);
}
:host([sticky]) {
:host(.item-divider-sticky) {
position: sticky;
top: 0;
}

10
core/src/components/item-divider/item-divider.tsx
View File

@@ -27,6 +27,15 @@ export class ItemDivider implements ComponentInterface {
*/
@Prop() mode!: Mode;
/**
* When it's set to `true`, the item-divider will stay visible when it reaches the top
* of the viewport until the next `ion-item-divider` replaces it.
*
* This feature relies in `position:sticky`:
* https://caniuse.com/#feat=css-sticky
*/
@Prop() sticky = false;
componentDidLoad() {
// Change the button size to small for each ion-button in the item
// unless the size is explicitly set
@@ -41,6 +50,7 @@ export class ItemDivider implements ComponentInterface {
return {
class: {
...createColorClasses(this.color),
'item-divider-sticky': this.sticky,
'item': true,
}
};

1
core/src/components/item-divider/readme.md
View File

@@ -58,6 +58,7 @@ Item Dividers are block elements that can be used to separate items in a list. T
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `sticky` | `sticky` | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky | `boolean` | `false` |
## CSS Custom Properties