mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
chore(item-sliding): move item-options, item-option to separate directories
This commit is contained in:
Adam Bradley
4
packages/core/src/components.d.ts
vendored
4
packages/core/src/components.d.ts
vendored
@ -1252,7 +1252,7 @@ declare global {
|
||||
|
||||
import {
|
||||
ItemOption as IonItemOption
|
||||
} from './components/item-sliding/item-option';
|
||||
} from './components/item-option/item-option';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonItemOptionElement extends IonItemOption, HTMLElement {
|
||||
@ -1286,7 +1286,7 @@ declare global {
|
||||
|
||||
import {
|
||||
ItemOptions as IonItemOptions
|
||||
} from './components/item-sliding/item-options';
|
||||
} from './components/item-options/item-options';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonItemOptionsElement extends IonItemOptions, HTMLElement {
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @name ItemOption
|
||||
* @description
|
||||
* The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
|
||||
* You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
|
||||
* action for the item.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'ion-item-option',
|
||||
host: {
|
||||
58
packages/core/src/components/item-option/readme.md
Normal file
58
packages/core/src/components/item-option/readme.md
Normal file
@ -0,0 +1,58 @@
|
||||
# ion-item-option
|
||||
|
||||
The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
|
||||
You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
|
||||
action for the item.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
any
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -2,27 +2,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
|
||||
import { Side, isRightSide } from '../../utils/helpers';
|
||||
|
||||
|
||||
/**
|
||||
* @name ItemOptions
|
||||
* @description
|
||||
* The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
|
||||
* You can combine the `(ionSwipe)` event plus the `expandable` directive to create a full swipe action for the item.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* ```html
|
||||
* <ion-item-sliding>
|
||||
* <ion-item>
|
||||
* Item 1
|
||||
* </ion-item>
|
||||
* <ion-item-options side="right" (ionSwipe)="saveItem(item)">
|
||||
* <ion-item-option expandable (click)="saveItem(item)">
|
||||
* <ion-icon name="star"></ion-icon>
|
||||
* </ion-item-option>
|
||||
* </ion-item-options>
|
||||
* </ion-item-sliding>
|
||||
*```
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-item-options'
|
||||
})
|
||||
57
packages/core/src/components/item-options/readme.md
Normal file
57
packages/core/src/components/item-options/readme.md
Normal file
@ -0,0 +1,57 @@
|
||||
# ion-item-options
|
||||
|
||||
The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
|
||||
You can combine the `(ionSwipe)` event plus the `expandable` directive to create a full swipe action for the item.
|
||||
|
||||
|
||||
```html
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
Item 1
|
||||
</ion-item>
|
||||
<ion-item-options side="right" (ionSwipe)="saveItem(item)">
|
||||
<ion-item-option expandable (click)="saveItem(item)">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### side
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### side
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionSwipe
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### fireSwipeEvent()
|
||||
|
||||
|
||||
#### isRightSide()
|
||||
|
||||
|
||||
#### width()
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Method, State } from '@stencil
|
||||
|
||||
import { GestureDetail } from '../../index';
|
||||
import { swipeShouldReset } from '../../utils/helpers';
|
||||
import { ItemOptions } from './item-options';
|
||||
import { ItemOptions } from '../item-options/item-options';
|
||||
|
||||
|
||||
const SWIPE_MARGIN = 30;
|
||||
@ -26,107 +26,6 @@ export const enum SlidingState {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @name ItemSliding
|
||||
* @description
|
||||
* A sliding item is a list item that can be swiped to reveal buttons. It requires
|
||||
* an [Item](../Item) component as a child and a [List](../../list/List) component as
|
||||
* a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list>
|
||||
* <ion-item-sliding #item>
|
||||
* <ion-item>
|
||||
* Item
|
||||
* </ion-item>
|
||||
* <ion-item-options side="left">
|
||||
* <ion-button (click)="favorite(item)">Favorite</ion-button>
|
||||
* <ion-button color="danger" (click)="share(item)">Share</ion-button>
|
||||
* </ion-item-options>
|
||||
*
|
||||
* <ion-item-options side="right">
|
||||
* <ion-button (click)="unread(item)">Unread</ion-button>
|
||||
* </ion-item-options>
|
||||
* </ion-item-sliding>
|
||||
* </ion-list>
|
||||
* ```
|
||||
*
|
||||
* ### Swipe Direction
|
||||
* By default, the buttons are revealed when the sliding item is swiped from right to left,
|
||||
* so the buttons are placed in the right side. But it's also possible to reveal them
|
||||
* in the right side (sliding from left to right) by setting the `side` attribute
|
||||
* on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time
|
||||
* in order to reveal two different sets of buttons depending the swipping direction.
|
||||
*
|
||||
* ```html
|
||||
* <ion-item-options side="right">
|
||||
* <ion-button (click)="archive(item)">
|
||||
* <ion-icon name="archive"></ion-icon>
|
||||
* Archive
|
||||
* </ion-button>
|
||||
* </ion-item-options>
|
||||
*
|
||||
* <ion-item-options side="left">
|
||||
* <ion-button (click)="archive(item)">
|
||||
* <ion-icon name="archive"></ion-icon>
|
||||
* Archive
|
||||
* </ion-button>
|
||||
* </ion-item-options>
|
||||
* ```
|
||||
*
|
||||
* ### Listening for events (ionDrag) and (ionSwipe)
|
||||
* It's possible to know the current relative position of the sliding item by subscribing
|
||||
* to the (ionDrag)` event.
|
||||
*
|
||||
* ```html
|
||||
* <ion-item-sliding (ionDrag)="logDrag($event)">
|
||||
* <ion-item>Item</ion-item>
|
||||
* <ion-item-options>
|
||||
* <ion-button>Favorite</ion-button>
|
||||
* </ion-item-options>
|
||||
* </ion-item-sliding>
|
||||
* ```
|
||||
*
|
||||
* ### Button Layout
|
||||
* If an icon is placed with text in the option button, by default it will
|
||||
* display the icon on top of the text. This can be changed to display the icon
|
||||
* to the left of the text by setting `icon-start` as an attribute on the
|
||||
* `<ion-item-options>` element.
|
||||
*
|
||||
* ```html
|
||||
* <ion-item-options icon-start>
|
||||
* <ion-button (click)="archive(item)">
|
||||
* <ion-icon name="archive"></ion-icon>
|
||||
* Archive
|
||||
* </ion-button>
|
||||
* </ion-item-options>
|
||||
*
|
||||
* ```
|
||||
*
|
||||
* ### Expandable Options
|
||||
*
|
||||
* Options can be expanded to take up the full width of the item if you swipe past
|
||||
* a certain point. This can be combined with the `ionSwipe` event to call methods
|
||||
* on the class.
|
||||
*
|
||||
* ```html
|
||||
*
|
||||
* <ion-item-sliding (ionSwipe)="delete(item)">
|
||||
* <ion-item>Item</ion-item>
|
||||
* <ion-item-options>
|
||||
* <ion-button expandable (click)="delete(item)">Delete</ion-button>
|
||||
* </ion-item-options>
|
||||
* </ion-item-sliding>
|
||||
* ```
|
||||
*
|
||||
* We can call `delete` by either clicking the button, or by doing a full swipe on the item.
|
||||
*
|
||||
* @demo /docs/demos/src/item-sliding/
|
||||
* @see {@link /docs/components#lists List Component Docs}
|
||||
* @see {@link ../Item Item API Docs}
|
||||
* @see {@link ../../list/List List API Docs}
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-item-sliding',
|
||||
styleUrls: {
|
||||
|
||||
@ -1,52 +1,125 @@
|
||||
# ion-item-option
|
||||
# ion-item-sliding
|
||||
|
||||
A sliding item is a list item that can be swiped to reveal buttons. It requires
|
||||
an [Item](../Item) component as a child and a [List](../../list/List) component as
|
||||
a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
|
||||
|
||||
@usage
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-item-sliding #item>
|
||||
<ion-item>
|
||||
Item
|
||||
</ion-item>
|
||||
<ion-item-options side="left">
|
||||
<ion-button (click)="favorite(item)">Favorite</ion-button>
|
||||
<ion-button color="danger" (click)="share(item)">Share</ion-button>
|
||||
</ion-item-options>
|
||||
|
||||
<ion-item-options side="right">
|
||||
<ion-button (click)="unread(item)">Unread</ion-button>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
|
||||
### Swipe Direction
|
||||
|
||||
By default, the buttons are revealed when the sliding item is swiped from right to left,
|
||||
so the buttons are placed in the right side. But it's also possible to reveal them
|
||||
in the right side (sliding from left to right) by setting the `side` attribute
|
||||
on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time
|
||||
in order to reveal two different sets of buttons depending the swipping direction.
|
||||
|
||||
```html
|
||||
<ion-item-options side="right">
|
||||
<ion-button (click)="archive(item)">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
Archive
|
||||
</ion-button>
|
||||
</ion-item-options>
|
||||
|
||||
<ion-item-options side="left">
|
||||
<ion-button (click)="archive(item)">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
Archive
|
||||
</ion-button>
|
||||
</ion-item-options>
|
||||
```
|
||||
|
||||
|
||||
### Listening for events (ionDrag) and (ionSwipe)
|
||||
It's possible to know the current relative position of the sliding item by subscribing
|
||||
to the (ionDrag)` event.
|
||||
|
||||
```html
|
||||
<ion-item-sliding (ionDrag)="logDrag($event)">
|
||||
<ion-item>Item</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-button>Favorite</ion-button>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
```
|
||||
|
||||
|
||||
### Button Layout
|
||||
If an icon is placed with text in the option button, by default it will
|
||||
display the icon on top of the text. This can be changed to display the icon
|
||||
to the left of the text by setting `icon-start` as an attribute on the
|
||||
`<ion-item-options>` element.
|
||||
|
||||
```html
|
||||
<ion-item-options icon-start>
|
||||
<ion-button (click)="archive(item)">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
Archive
|
||||
</ion-button>
|
||||
</ion-item-options>
|
||||
|
||||
```
|
||||
|
||||
|
||||
### Expandable Options
|
||||
|
||||
Options can be expanded to take up the full width of the item if you swipe past
|
||||
a certain point. This can be combined with the `ionSwipe` event to call methods
|
||||
on the class.
|
||||
|
||||
```html
|
||||
|
||||
<ion-item-sliding (ionSwipe)="delete(item)">
|
||||
<ion-item>Item</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-button expandable (click)="delete(item)">Delete</ion-button>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
```
|
||||
|
||||
We can call `delete` by either clicking the button, or by doing a full swipe on the item.
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
## Events
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
#### ionDrag
|
||||
|
||||
|
||||
#### disabled
|
||||
## Methods
|
||||
|
||||
boolean
|
||||
#### close()
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
#### closeOpened()
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
any
|
||||
#### getOpenAmount()
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
any
|
||||
#### getSlidingPercent()
|
||||
|
||||
|
||||
|
||||
|
||||
2
packages/core/src/index.d.ts
vendored
2
packages/core/src/index.d.ts
vendored
@ -53,7 +53,7 @@ export { InfiniteScrollContent } from './components/infinite-scroll/infinite-scr
|
||||
export { Input } from './components/input/input';
|
||||
export { Item } from './components/item/item';
|
||||
export { ItemDivider } from './components/item-divider/item-divider';
|
||||
export { ItemOption } from './components/item-sliding/item-option';
|
||||
export { ItemOption } from './components/item-option/item-option';
|
||||
export { ItemSliding } from './components/item-sliding/item-sliding';
|
||||
export { KeyboardController } from './components/keyboard-controller/keyboard-controller';
|
||||
export * from './components/keyboard-controller/keys';
|
||||
|
||||
Reference in New Issue
Block a user