mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 23:01:57 +08:00
docs(): move jsdocs to readme.md files
This commit is contained in:
Adam Bradley
@ -1,29 +1,6 @@
|
|||||||
import { Component, Element, Prop, PropDidChange } from '@stencil/core';
|
import { Component, Element, Prop, PropDidChange } from '@stencil/core';
|
||||||
|
|
||||||
/**
|
|
||||||
* @name FabList
|
|
||||||
* @description
|
|
||||||
* `ion-fab-list` is a container for multiple FAB buttons. They are components of `ion-fab` and allow you to specificy the buttons position, left, right, top, bottom.
|
|
||||||
* @usage
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <ion-fab bottom right>
|
|
||||||
* <button ion-fab>Share</button>
|
|
||||||
* <ion-fab-list side="top">
|
|
||||||
* <button ion-fab>Facebook</button>
|
|
||||||
* <button ion-fab>Twitter</button>
|
|
||||||
* <button ion-fab>Youtube</button>
|
|
||||||
* </ion-fab-list>
|
|
||||||
* <ion-fab-list side="left">
|
|
||||||
* <button ion-fab>Vimeo</button>
|
|
||||||
* </ion-fab-list>
|
|
||||||
* </ion-fab>
|
|
||||||
* ```
|
|
||||||
* @module ionic
|
|
||||||
*
|
|
||||||
* @demo /docs/demos/src/fab/
|
|
||||||
* @see {@link /docs/components#fab Fab Component Docs}
|
|
||||||
*/
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-fab-list',
|
tag: 'ion-fab-list',
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,5 +1,20 @@
|
|||||||
# ion-fab-list
|
# ion-fab-list
|
||||||
|
|
||||||
|
`ion-fab-list` is a container for multiple FAB buttons. They are components of `ion-fab` and allow you to specificy the buttons position, left, right, top, bottom.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-fab bottom right>
|
||||||
|
<button ion-fab>Share</button>
|
||||||
|
<ion-fab-list side="top">
|
||||||
|
<button ion-fab>Facebook</button>
|
||||||
|
<button ion-fab>Twitter</button>
|
||||||
|
<button ion-fab>Youtube</button>
|
||||||
|
</ion-fab-list>
|
||||||
|
<ion-fab-list side="left">
|
||||||
|
<button ion-fab>Vimeo</button>
|
||||||
|
</ion-fab-list>
|
||||||
|
</ion-fab>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
<!-- Auto Generated Below -->
|
||||||
|
|||||||
@ -4,7 +4,6 @@ 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
|
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.
|
a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
|
||||||
|
|
||||||
@usage
|
|
||||||
```html
|
```html
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-item-sliding #item>
|
<ion-item-sliding #item>
|
||||||
|
|||||||
@ -1,5 +1,113 @@
|
|||||||
# ion-split-pane
|
# ion-split-pane
|
||||||
|
|
||||||
|
SplitPane is a component that makes it possible to create multi-view layout.
|
||||||
|
Similar to iPad apps, SplitPane allows UI elements, like Menus, to be
|
||||||
|
displayed as the viewport increases.
|
||||||
|
|
||||||
|
If the devices screen size is below a certain size, the SplitPane will
|
||||||
|
collapse and the menu will become hidden again. This is especially useful when
|
||||||
|
creating an app that will be served over a browser or deployed through the app
|
||||||
|
store to phones and tablets.
|
||||||
|
|
||||||
|
To use SplitPane, simply add the component around your root component.
|
||||||
|
In this example, we'll be using a sidemenu layout, similar to what is
|
||||||
|
provided from the sidemenu starter template.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-split-pane>
|
||||||
|
<!-- our side menu -->
|
||||||
|
<ion-menu>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<!-- the main content -->
|
||||||
|
<ion-nav [root]="root" main></ion-nav>
|
||||||
|
</ion-split-pane>
|
||||||
|
```
|
||||||
|
|
||||||
|
Here, SplitPane will look for the element with the `main` attribute and make
|
||||||
|
that the central component on larger screens. The `main` component can be any
|
||||||
|
Ionic component (`ion-nav` or `ion-tabs`) except `ion-menu`.
|
||||||
|
|
||||||
|
|
||||||
|
### Setting breakpoints
|
||||||
|
|
||||||
|
By default, SplitPane will expand when the screen is larger than 768px.
|
||||||
|
If you want to customize this, use the `when` input. The `when` input can
|
||||||
|
accept any valid media query, as it uses `matchMedia()` underneath.
|
||||||
|
|
||||||
|
```
|
||||||
|
<ion-split-pane when="(min-width: 475px)">
|
||||||
|
|
||||||
|
<!-- our side menu -->
|
||||||
|
<ion-menu>
|
||||||
|
....
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<!-- the main content -->
|
||||||
|
<ion-nav [root]="root" main></ion-nav>
|
||||||
|
</ion-split-pane>
|
||||||
|
```
|
||||||
|
|
||||||
|
SplitPane also provides some predefined media queries that can be used.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- could be "xs", "sm", "md", "lg", or "xl" -->
|
||||||
|
<ion-split-pane when="lg">
|
||||||
|
...
|
||||||
|
</ion-split-pane>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
| Size | Value | Description |
|
||||||
|
|------|-----------------------|-----------------------------------------------------------------------|
|
||||||
|
| `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) |
|
||||||
|
| `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px |
|
||||||
|
| `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px (default break point) |
|
||||||
|
| `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px |
|
||||||
|
| `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px |
|
||||||
|
|
||||||
|
You can also pass in boolean values that will trigger SplitPane when the value
|
||||||
|
or expression evaluates to true.
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-split-pane [when]="isLarge">
|
||||||
|
...
|
||||||
|
</ion-split-pane>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
class MyClass {
|
||||||
|
public isLarge = false;
|
||||||
|
constructor(){}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Or
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-split-pane [when]="shouldShow()">
|
||||||
|
...
|
||||||
|
</ion-split-pane>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
class MyClass {
|
||||||
|
constructor(){}
|
||||||
|
shouldShow(){
|
||||||
|
if(conditionA){
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
<!-- Auto Generated Below -->
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange, State } from '@stencil/core';
|
import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange, State } from '@stencil/core';
|
||||||
// import { assert } from '../../utils/helpers';
|
|
||||||
|
|
||||||
const SPLIT_PANE_MAIN = 'split-pane-main';
|
const SPLIT_PANE_MAIN = 'split-pane-main';
|
||||||
const SPLIT_PANE_SIDE = 'split-pane-side';
|
const SPLIT_PANE_SIDE = 'split-pane-side';
|
||||||
@ -13,120 +12,6 @@ const QUERY: { [key: string]: string } = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @name SplitPane
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* SplitPane is a component that makes it possible to create multi-view layout.
|
|
||||||
* Similar to iPad apps, SplitPane allows UI elements, like Menus, to be
|
|
||||||
* displayed as the viewport increases.
|
|
||||||
*
|
|
||||||
* If the devices screen size is below a certain size, the SplitPane will
|
|
||||||
* collapse and the menu will become hidden again. This is especially useful when
|
|
||||||
* creating an app that will be served over a browser or deployed through the app
|
|
||||||
* store to phones and tablets.
|
|
||||||
*
|
|
||||||
* @usage
|
|
||||||
* To use SplitPane, simply add the component around your root component.
|
|
||||||
* In this example, we'll be using a sidemenu layout, similar to what is
|
|
||||||
* provided from the sidemenu starter template.
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <ion-split-pane>
|
|
||||||
* <!-- our side menu -->
|
|
||||||
* <ion-menu>
|
|
||||||
* <ion-header>
|
|
||||||
* <ion-toolbar>
|
|
||||||
* <ion-title>Menu</ion-title>
|
|
||||||
* </ion-toolbar>
|
|
||||||
* </ion-header>
|
|
||||||
* </ion-menu>
|
|
||||||
*
|
|
||||||
* <!-- the main content -->
|
|
||||||
* <ion-nav [root]="root" main></ion-nav>
|
|
||||||
* </ion-split-pane>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* Here, SplitPane will look for the element with the `main` attribute and make
|
|
||||||
* that the central component on larger screens. The `main` component can be any
|
|
||||||
* Ionic component (`ion-nav` or `ion-tabs`) except `ion-menu`.
|
|
||||||
*
|
|
||||||
* ### Setting breakpoints
|
|
||||||
*
|
|
||||||
* By default, SplitPane will expand when the screen is larger than 768px.
|
|
||||||
* If you want to customize this, use the `when` input. The `when` input can
|
|
||||||
* accept any valid media query, as it uses `matchMedia()` underneath.
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* <ion-split-pane when="(min-width: 475px)">
|
|
||||||
*
|
|
||||||
* <!-- our side menu -->
|
|
||||||
* <ion-menu>
|
|
||||||
* ....
|
|
||||||
* </ion-menu>
|
|
||||||
*
|
|
||||||
* <!-- the main content -->
|
|
||||||
* <ion-nav [root]="root" main></ion-nav>
|
|
||||||
* </ion-split-pane>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* SplitPane also provides some predefined media queries that can be used.
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <!-- could be "xs", "sm", "md", "lg", or "xl" -->
|
|
||||||
* <ion-split-pane when="lg">
|
|
||||||
* ...
|
|
||||||
* </ion-split-pane>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* | Size | Value | Description |
|
|
||||||
* |------|-----------------------|-----------------------------------------------------------------------|
|
|
||||||
* | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) |
|
|
||||||
* | `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px |
|
|
||||||
* | `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px (default break point) |
|
|
||||||
* | `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px |
|
|
||||||
* | `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px |
|
|
||||||
*
|
|
||||||
* You can also pass in boolean values that will trigger SplitPane when the value
|
|
||||||
* or expression evaluates to true.
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <ion-split-pane [when]="isLarge">
|
|
||||||
* ...
|
|
||||||
* </ion-split-pane>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* ```ts
|
|
||||||
* class MyClass {
|
|
||||||
* public isLarge = false;
|
|
||||||
* constructor(){}
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* Or
|
|
||||||
*
|
|
||||||
* ```html
|
|
||||||
* <ion-split-pane [when]="shouldShow()">
|
|
||||||
* ...
|
|
||||||
* </ion-split-pane>
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* ```ts
|
|
||||||
* class MyClass {
|
|
||||||
* constructor(){}
|
|
||||||
* shouldShow(){
|
|
||||||
* if(conditionA){
|
|
||||||
* return true
|
|
||||||
* } else {
|
|
||||||
* return false
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-split-pane',
|
tag: 'ion-split-pane',
|
||||||
styleUrls: {
|
styleUrls: {
|
||||||
|
|||||||
Reference in New Issue
Block a user