docs(headings): update readme headings to be correct level

This commit is contained in:
Brandy Carney
2020-05-14 17:26:44 -04:00
parent 448dfa0a69
commit 16a03d58ec
17 changed files with 42 additions and 42 deletions

View File

@ -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.

View File

@ -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.

View File

@ -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 |
|---------|-----------------------------------------------------------------|-------------------------------------------------------------------|

View File

@ -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.

View File

@ -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.

View File

@ -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.

View File

@ -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.

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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".

View File

@ -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.

View File

@ -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 = {

View File

@ -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.

View File

@ -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.

View File

@ -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.

View File

@ -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