From c73ba6b3b0d840308331289e4ca7bc61deef918c Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 28 Nov 2017 21:17:29 -0600 Subject: [PATCH] docs(): move jsdocs to readme.md files --- .../core/src/components/fab-list/fab-list.tsx | 25 +--- .../core/src/components/fab-list/readme.md | 15 +++ .../src/components/item-sliding/readme.md | 1 - .../core/src/components/split-pane/readme.md | 108 ++++++++++++++++ .../src/components/split-pane/split-pane.tsx | 115 ------------------ 5 files changed, 124 insertions(+), 140 deletions(-) diff --git a/packages/core/src/components/fab-list/fab-list.tsx b/packages/core/src/components/fab-list/fab-list.tsx index dd262ec10e..fecfd25bd7 100644 --- a/packages/core/src/components/fab-list/fab-list.tsx +++ b/packages/core/src/components/fab-list/fab-list.tsx @@ -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 - * - * - * - * - * - * - * - * - * - * - * - * ``` - * @module ionic - * - * @demo /docs/demos/src/fab/ - * @see {@link /docs/components#fab Fab Component Docs} - */ + @Component({ tag: 'ion-fab-list', }) diff --git a/packages/core/src/components/fab-list/readme.md b/packages/core/src/components/fab-list/readme.md index e6db2d5cfd..04a7b3f095 100644 --- a/packages/core/src/components/fab-list/readme.md +++ b/packages/core/src/components/fab-list/readme.md @@ -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 + + + + + + + + + + + +``` diff --git a/packages/core/src/components/item-sliding/readme.md b/packages/core/src/components/item-sliding/readme.md index f13f0dbbdd..4a47bceca0 100644 --- a/packages/core/src/components/item-sliding/readme.md +++ b/packages/core/src/components/item-sliding/readme.md @@ -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 `` element. -@usage ```html diff --git a/packages/core/src/components/split-pane/readme.md b/packages/core/src/components/split-pane/readme.md index f10617662c..aad4ca8008 100644 --- a/packages/core/src/components/split-pane/readme.md +++ b/packages/core/src/components/split-pane/readme.md @@ -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 + + + + + + Menu + + + + + + + +``` + +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. + +``` + + + + + .... + + + + + +``` + +SplitPane also provides some predefined media queries that can be used. + +```html + + +... + +``` + + + | 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 + + ... + + ``` + + ```ts + class MyClass { + public isLarge = false; + constructor(){} + } + ``` + + Or + + ```html + + ... + + ``` + + ```ts + class MyClass { + constructor(){} + shouldShow(){ + if(conditionA){ + return true + } else { + return false + } + } + } + ``` diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx index 3c94bc4612..6a448b9c9f 100644 --- a/packages/core/src/components/split-pane/split-pane.tsx +++ b/packages/core/src/components/split-pane/split-pane.tsx @@ -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 - * - * - * - * - * - * Menu - * - * - * - * - * - * - * - * ``` - * - * 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. - * - * ``` - * - * - * - * - * .... - * - * - * - * - * - * ``` - * - * SplitPane also provides some predefined media queries that can be used. - * - * ```html - * - * - * ... - * - * ``` - * - * - * | 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 - * - * ... - * - * ``` - * - * ```ts - * class MyClass { - * public isLarge = false; - * constructor(){} - * } - * ``` - * - * Or - * - * ```html - * - * ... - * - * ``` - * - * ```ts - * class MyClass { - * constructor(){} - * shouldShow(){ - * if(conditionA){ - * return true - * } else { - * return false - * } - * } - * } - * ``` - * - */ @Component({ tag: 'ion-split-pane', styleUrls: {