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';
|
||||
|
||||
/**
|
||||
* @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({
|
||||
tag: 'ion-fab-list',
|
||||
})
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# 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 -->
|
||||
|
||||
@ -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
|
||||
a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
|
||||
|
||||
@usage
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-item-sliding #item>
|
||||
|
||||
@ -1,5 +1,113 @@
|
||||
# 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 -->
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
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_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({
|
||||
tag: 'ion-split-pane',
|
||||
styleUrls: {
|
||||
|
||||
Reference in New Issue
Block a user