mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
docs(headings): update readme headings to be correct level
This commit is contained in:
@ -2,11 +2,11 @@
|
||||
|
||||
An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
|
||||
|
||||
### Buttons
|
||||
## Buttons
|
||||
|
||||
A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
|
||||
|
||||
### Customization
|
||||
## Customization
|
||||
|
||||
Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
|
||||
|
||||
|
@ -2,18 +2,18 @@
|
||||
|
||||
An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
|
||||
|
||||
### Buttons
|
||||
## Buttons
|
||||
|
||||
In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
|
||||
|
||||
Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
|
||||
|
||||
|
||||
### Inputs
|
||||
## Inputs
|
||||
|
||||
Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
|
||||
|
||||
### Customization
|
||||
## Customization
|
||||
|
||||
Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
|
||||
|
||||
|
@ -4,7 +4,7 @@ The option buttons for an `ion-item-sliding`. These buttons can be placed either
|
||||
You can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item.
|
||||
|
||||
|
||||
### Side Description
|
||||
## Side Description
|
||||
|
||||
| Side | Position | Swipe Direction |
|
||||
|---------|-----------------------------------------------------------------|-------------------------------------------------------------------|
|
||||
|
@ -3,12 +3,12 @@
|
||||
A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](../item) component as a child. All options to reveal should be placed in the [item options](../item-options) element.
|
||||
|
||||
|
||||
### Swipe Direction
|
||||
## Swipe Direction
|
||||
|
||||
By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](../item-options) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
|
||||
|
||||
|
||||
### Options Layout
|
||||
## Options Layout
|
||||
|
||||
By default if an icon is placed with text in the [item option](../item-option), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
|
||||
|
||||
@ -21,7 +21,7 @@ By default if an icon is placed with text in the [item option](../item-option),
|
||||
| `end` | In LTR, end is the right side of the button, and in RTL it is the left |
|
||||
|
||||
|
||||
### Expandable 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.
|
||||
|
||||
|
@ -2,11 +2,11 @@
|
||||
|
||||
An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
|
||||
|
||||
### Dismissing
|
||||
## Dismissing
|
||||
|
||||
The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.
|
||||
|
||||
### Customization
|
||||
## Customization
|
||||
|
||||
Loading uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
|
||||
|
||||
|
@ -2,11 +2,11 @@
|
||||
|
||||
A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
|
||||
|
||||
### Dismissing
|
||||
## Dismissing
|
||||
|
||||
The modal can be dismissed after creation by calling the `dismiss()` method on the modal controller. The `onDidDismiss` function can be called to perform an action after the modal is dismissed.
|
||||
|
||||
### Customization
|
||||
## Customization
|
||||
|
||||
Modal uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
|
||||
|
||||
|
@ -2,11 +2,11 @@
|
||||
|
||||
A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.
|
||||
|
||||
### Presenting
|
||||
## Presenting
|
||||
|
||||
To present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport.
|
||||
|
||||
### Customization
|
||||
## Customization
|
||||
|
||||
Popover uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
|
||||
|
||||
|
@ -4,7 +4,7 @@ The Range slider lets users select from a range of values by moving
|
||||
the slider knob. It can accept dual knobs, but by default one knob
|
||||
controls the value of the range.
|
||||
|
||||
### Range Labels
|
||||
## Range Labels
|
||||
|
||||
Labels can be placed on either side of the range by adding the
|
||||
`slot="start"` or `slot="end"` to the element. The element doesn't have to
|
||||
|
@ -8,19 +8,19 @@ Data should be modified during the refresher's output events. Once the async
|
||||
operation has completed and the refreshing should end, call `complete()` on the
|
||||
refresher.
|
||||
|
||||
### Native Refreshers
|
||||
## Native Refreshers
|
||||
|
||||
Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.
|
||||
|
||||
Certain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.
|
||||
|
||||
#### iOS Usage
|
||||
### iOS Usage
|
||||
|
||||
Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](../spinner#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
|
||||
|
||||
The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.
|
||||
|
||||
#### Android Usage
|
||||
### Android Usage
|
||||
|
||||
Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
|
||||
|
||||
|
@ -7,7 +7,7 @@ Router outlet is a component used in routing within an Angular app. It behaves i
|
||||
Although router outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
|
||||
|
||||
|
||||
### Life Cycle Hooks
|
||||
## Life Cycle Hooks
|
||||
|
||||
Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations
|
||||
|
||||
|
@ -4,13 +4,13 @@ Searchbars represent a text field that can be used to search through a collectio
|
||||
|
||||
A Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click.
|
||||
|
||||
### Keyboard Display
|
||||
## Keyboard Display
|
||||
|
||||
#### Android
|
||||
### Android
|
||||
|
||||
By default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the `inputmode` property to `"search"`, which will change the icon from a magnifying glass to a carriage return.
|
||||
|
||||
#### iOS
|
||||
### iOS
|
||||
|
||||
By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the `inputmode` property to `"search"`, which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the `ion-searchbar` in a `form` element with an `action` property. This will cause the keyboard to appear with a blue submit button that says "search".
|
||||
|
||||
|
@ -4,7 +4,7 @@ Segments display a group of related buttons, sometimes known as segmented contro
|
||||
|
||||
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
|
||||
|
||||
### Scrollable Segments
|
||||
## Scrollable Segments
|
||||
|
||||
Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.
|
||||
|
||||
|
@ -15,12 +15,12 @@ http://www.idangero.us/
|
||||
|
||||
Licensed under MIT
|
||||
|
||||
### Custom Animations
|
||||
## Custom Animations
|
||||
|
||||
By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.
|
||||
|
||||
|
||||
#### Coverflow
|
||||
### Coverflow
|
||||
|
||||
```typescript
|
||||
const slideOpts = {
|
||||
@ -113,7 +113,7 @@ const slideOpts = {
|
||||
}
|
||||
```
|
||||
|
||||
#### Cube
|
||||
### Cube
|
||||
|
||||
```typescript
|
||||
const slideOpts = {
|
||||
@ -273,7 +273,7 @@ const slideOpts = {
|
||||
}
|
||||
```
|
||||
|
||||
#### Fade
|
||||
### Fade
|
||||
|
||||
```typescript
|
||||
const slideOpts = {
|
||||
@ -337,7 +337,7 @@ const slideOpts = {
|
||||
}
|
||||
```
|
||||
|
||||
#### Flip
|
||||
### Flip
|
||||
|
||||
```typescript
|
||||
const slideOpts = {
|
||||
|
@ -6,7 +6,7 @@ displayed as the viewport width increases.
|
||||
If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.
|
||||
|
||||
|
||||
### Setting Breakpoints
|
||||
## Setting Breakpoints
|
||||
|
||||
By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the `when` property. The `when` property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.
|
||||
|
||||
|
@ -2,11 +2,11 @@
|
||||
|
||||
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
|
||||
|
||||
### Positioning
|
||||
## Positioning
|
||||
|
||||
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
|
||||
|
||||
### Dismissing
|
||||
## Dismissing
|
||||
|
||||
The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `"cancel"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
Toolbars are positioned above or below content. When a toolbar is placed in an `<ion-header>` it will appear fixed at the top of the content, and when it is in an `<ion-footer>` it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an `<ion-content>`, toolbars will scroll with the content.
|
||||
|
||||
|
||||
### Buttons
|
||||
## Buttons
|
||||
|
||||
Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element. The `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
|
||||
|
||||
@ -15,7 +15,7 @@ Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` eleme
|
||||
| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. |
|
||||
|
||||
|
||||
### Borders
|
||||
## Borders
|
||||
|
||||
In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>` will receive a border on the bottom, and the `<ion-footer>` will receive a border on the top.
|
||||
|
||||
|
@ -8,7 +8,7 @@ in the list is rendered at once; instead a small subset of records (enough to fi
|
||||
are rendered and reused as the user scrolls.
|
||||
|
||||
|
||||
### Approximate Widths and Heights
|
||||
## Approximate Widths and Heights
|
||||
|
||||
If the height of items in the virtual scroll are not close to the
|
||||
default size of `40px`, it is extremely important to provide a value for
|
||||
@ -24,7 +24,7 @@ is only used to help calculate initial dimensions.
|
||||
It's also important to know that Ionic's default item sizes have
|
||||
slightly different heights between platforms, which is perfectly fine.
|
||||
|
||||
### Images Within Virtual Scroll
|
||||
## Images Within Virtual Scroll
|
||||
|
||||
HTTP requests, image decoding, and image rendering can cause jank while
|
||||
scrolling. In order to better control images, Ionic provides `<ion-img>`
|
||||
@ -49,7 +49,7 @@ images while scrolling quickly.
|
||||
|
||||
## Virtual Scroll Performance Tips
|
||||
|
||||
#### iOS Cordova WKWebView
|
||||
### iOS Cordova WKWebView
|
||||
|
||||
When deploying to iOS with Cordova, it's highly recommended to use the
|
||||
[WKWebView plugin](https://blog.ionicframework.com/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/)
|
||||
@ -57,7 +57,7 @@ in order to take advantage of iOS's higher performing webview. Additionally,
|
||||
WKWebView is superior at scrolling efficiently in comparison to the older
|
||||
UIWebView.
|
||||
|
||||
#### Lock in element dimensions and locations
|
||||
### Lock in element dimensions and locations
|
||||
|
||||
In order for virtual scroll to efficiently size and locate every item, it's
|
||||
very important every element within each virtual item does not dynamically
|
||||
@ -65,14 +65,14 @@ change its dimensions or location. The best way to ensure size and location
|
||||
does not change, it's recommended each virtual item has locked in its size
|
||||
via CSS.
|
||||
|
||||
#### Use `ion-img` for images
|
||||
### Use `ion-img` for images
|
||||
|
||||
When including images within Virtual Scroll, be sure to use
|
||||
[`ion-img`](../img/Img/) rather than the standard `<img>` HTML element.
|
||||
With `ion-img`, images are lazy loaded so only the viewable ones are
|
||||
rendered, and HTTP requests are efficiently controlled while scrolling.
|
||||
|
||||
#### Set Approximate Widths and Heights
|
||||
### Set Approximate Widths and Heights
|
||||
|
||||
As mentioned above, all elements should lock in their dimensions. However,
|
||||
virtual scroll isn't aware of the dimensions until after they have been
|
||||
@ -82,7 +82,7 @@ how many items should be built. With "approx" property inputs, such as
|
||||
therefore allowing virtual scroll to decide how many items should be
|
||||
created.
|
||||
|
||||
#### Changing dataset should use `trackBy`
|
||||
### Changing dataset should use `trackBy`
|
||||
|
||||
It is possible for the identities of elements in the iterator to change
|
||||
while the data does not. This can happen, for example, if the iterator
|
||||
@ -91,7 +91,7 @@ produced from an RPC to the server, and that RPC is re-run. Even if the
|
||||
different identities, and Ionic will tear down the entire DOM and rebuild
|
||||
it. This is an expensive operation and should be avoided if possible.
|
||||
|
||||
#### Efficient headers and footer functions
|
||||
### Efficient headers and footer functions
|
||||
Each virtual item must stay extremely efficient, but one way to really
|
||||
kill its performance is to perform any DOM operations within section header
|
||||
and footer functions. These functions are called for every record in the
|
||||
|
Reference in New Issue
Block a user