javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(): Add documentation for slots (#17441)

Browse Source 
* add button slot

* add component slot docs

* update content default slot description

* run npm build

* fix typos

* update md files

* docs(slots): update slot components and the build files

* chore(stencil): updates stencil to build readmes

* chore(build): update the swiper bundle file to match master

* update default slot doc wording

* revert changes

* Revert "update default slot doc wording"

This reverts commit e18401491e.

merge

* docs(slots): update default slot doc wording
This commit is contained in:
Liam DeBeasi
2019-02-12 15:51:01 -05:00
committed by GitHub
parent 4f203bc230
commit 29f1500e5a
18 changed files with 127 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/package.json
View File

@@ -33,7 +33,7 @@
"ionicons": "4.5.5"
},
"devDependencies": {
"@stencil/core": "0.17.0",
"@stencil/core": "0.17.3-0",
"@stencil/sass": "0.1.1",
"@stencil/utils": "latest",
"@types/jest": "^23.3.13",

6
core/src/components/button/button.tsx
View File

@@ -4,6 +4,12 @@ import { Color, Mode, RouterDirection } from '../../interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot icon-only - Should be used on an icon in a button that has no text.
* @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
*/
@Component({
tag: 'ion-button',
styleUrls: {

10
core/src/components/button/readme.md
View File

@@ -118,6 +118,16 @@ This attribute specifies the size of the button. Setting this attribute will cha
| `ionFocus` | Emitted when the button has focus. | `CustomEvent<void>` |
## Slots
| Slot | Description |
| ------------- | --------------------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"end"` | Content is placed to the right of the button text in LTR, and to the left in RTL. |
| `"icon-only"` | Should be used on an icon in a button that has no text. |
| `"start"` | Content is placed to the left of the button text in LTR, and to the right in RTL. |
## CSS Custom Properties
| Name | Description |

4
core/src/components/content/content.tsx
View File

@@ -4,6 +4,10 @@ import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../inter
import { isPlatform } from '../../utils/platform';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @slot - Content is placed in the scrollable area if provided without a slot.
* @slot fixed - Should be used for fixed content that should not scroll.
*/
@Component({
tag: 'ion-content',
styleUrl: 'content.scss',

8
core/src/components/content/readme.md
View File

@@ -144,6 +144,14 @@ Type: `Promise<void>`
## Slots
| Slot | Description |
| --------- | -------------------------------------------------------------------- |
| | Content is placed in the scrollable area if provided without a slot. |
| `"fixed"` | Should be used for fixed content that should not scroll. |
## CSS Custom Properties
| Name | Description |

5
core/src/components/item-divider/item-divider.tsx
View File

@@ -3,6 +3,11 @@ import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL.
*/
@Component({
tag: 'ion-item-divider',
styleUrls: {

9
core/src/components/item-divider/readme.md
View File

@@ -61,6 +61,15 @@ Item Dividers are block elements that can be used to separate items in a list. T
| `sticky` | `sticky` | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky | `boolean` | `false` |
## Slots
| Slot | Description |
| --------- | ---------------------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"end"` | Content is placed to the right of the divider text in LTR, and to the left in RTL. |
| `"start"` | Content is placed to the left of the divider text in LTR, and to the right in RTL. |
## CSS Custom Properties
| Name | Description |

8
core/src/components/item-option/item-option.tsx
View File

@@ -3,6 +3,14 @@ import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/c
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the option text in LTR, and to the right in RTL.
* @slot top - Content is placed above the option text.
* @slot icon-only - Should be used on an icon in an option that has no text.
* @slot bottom - Content is placed below the option text.
* @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
*/
@Component({
tag: 'ion-item-option',
styleUrls: {

12
core/src/components/item-option/readme.md
View File

@@ -18,6 +18,18 @@ action for the item.
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## Slots
| Slot | Description |
| ------------- | --------------------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"bottom"` | Content is placed below the option text. |
| `"end"` | Content is placed to the right of the option text in LTR, and to the left in RTL. |
| `"icon-only"` | Should be used on an icon in an option that has no text. |
| `"start"` | Content is placed to the left of the option text in LTR, and to the right in RTL. |
| `"top"` | Content is placed above the option text. |
## CSS Custom Properties
| Name | Description |

5
core/src/components/item/item.tsx
View File

@@ -3,6 +3,11 @@ import { Component, ComponentInterface, Element, Listen, Prop, State } from '@st
import { Color, CssClassMap, Mode, RouterDirection, StyleEventDetail } from '../../interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
*/
@Component({
tag: 'ion-item',
styleUrls: {

9
core/src/components/item/readme.md
View File

@@ -721,6 +721,15 @@ Item Inputs
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
## Slots
| Slot | Description |
| --------- | ------------------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"end"` | Content is placed to the right of the item text in LTR, and to the left in RTL. |
| `"start"` | Content is placed to the left of the item text in LTR, and to the right in RTL. |
## CSS Custom Properties
| Name | Description |

4
core/src/components/range/range.tsx
View File

@@ -4,6 +4,10 @@ import { Color, Gesture, GestureDetail, KnobName, Mode, RangeChangeEventDetail,
import { clamp, debounceEvent } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
*/
@Component({
tag: 'ion-range',
styleUrls: {

8
core/src/components/range/readme.md
View File

@@ -111,6 +111,14 @@ left or right of the range.
| `ionFocus` | Emitted when the range has focus. | `CustomEvent<void>` |
## Slots
| Slot | Description |
| --------- | ---------------------------------------------------------------------------------- |
| `"end"` | Content is placed to the right of the range slider in LTR, and to the left in RTL. |
| `"start"` | Content is placed to the left of the range slider in LTR, and to the right in RTL. |
## CSS Custom Properties
| Name | Description |

9
core/src/components/slides/swiper/swiper.bundle.js
View File

@@ -72,17 +72,17 @@ var win = (typeof window === 'undefined') ? {
} : window; // eslint-disable-line
/**
* Dom7 2.1.2
* Dom7 2.1.3
* Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API
* http://framework7.io/docs/dom.html
*
* Copyright 2018, Vladimir Kharlampidi
* Copyright 2019, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: September 13, 2018
* Released on: February 11, 2019
*/
class Dom7 {
@@ -361,6 +361,9 @@ function off(...args) {
if (listener && handler.listener === listener) {
el.removeEventListener(event, handler.proxyListener, capture);
handlers.splice(k, 1);
} else if (listener && handler.listener && handler.listener.dom7proxy && handler.listener.dom7proxy === listener) {
el.removeEventListener(event, handler.proxyListener, capture);
handlers.splice(k, 1);
} else if (!listener) {
el.removeEventListener(event, handler.proxyListener, capture);
handlers.splice(k, 1);

9
core/src/components/tabs/readme.md
View File

@@ -217,6 +217,15 @@ Type: `Promise<boolean>`
## Slots
| Slot | Description |
| ---------- | --------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"bottom"` | Content is placed at the bottom of the screen. |
| `"top"` | Content is placed at the top of the screen. |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

5
core/src/components/tabs/tabs.tsx
View File

@@ -2,6 +2,11 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State }
import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot top - Content is placed at the top of the screen.
* @slot bottom - Content is placed at the bottom of the screen.
*/
@Component({
tag: 'ion-tabs',
styleUrl: 'tabs.scss',

11
core/src/components/toolbar/readme.md
View File

@@ -351,6 +351,17 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## Slots
| Slot | Description |
| ------------- | -------------------------------------------------------------------------------------------------------- |
| | Content is placed between the named slots if provided without a slot. |
| `"end"` | Content is placed to the left of the toolbar text in LTR, and to the right in RTL. |
| `"primary"` | Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode. |
| `"secondary"` | Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode. |
| `"start"` | Content is placed to the left of the toolbar text in LTR, and to the right in RTL. |
## CSS Custom Properties
| Name | Description |

7
core/src/components/toolbar/toolbar.tsx
View File

@@ -3,6 +3,13 @@ import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/c
import { Color, Config, CssClassMap, Mode, StyleEventDetail } from '../../interface';
import { createColorClasses } from '../../utils/theme';
/**
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
* @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
* @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
* @slot end - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
*/
@Component({
tag: 'ion-toolbar',
styleUrls: {