diff --git a/docs/api/note.md b/docs/api/note.md index 23606008724..fa25e670eeb 100644 --- a/docs/api/note.md +++ b/docs/api/note.md @@ -1,13 +1,6 @@ --- title: "ion-note" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/note/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html" --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import TOCInline from '@theme/TOCInline'; - import Props from '@site/static/auto-generated/note/props.md'; import Events from '@site/static/auto-generated/note/events.md'; import Methods from '@site/static/auto-generated/note/methods.md'; @@ -24,208 +17,34 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -

Contents

- - - - - -Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text. - - - - -## Usage - - - - - -```html - -Default Note - - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note - - - - - Note (End) - On - - - - Off - Note (Start) - - -``` - - - - +Notes are text elements generally used as subtitles that provide more information. They are styled to appear grey by default. Notes can be used in an item as metadata text. - +## Basic Usage -```html - -Default Note +import Basic from '@site/static/usage/note/basic/index.md'; - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note + - - - - Note (End) - On - +## Item Notes - - Off - Note (Start) - - -``` +import Item from '@site/static/usage/note/item/index.md'; + - +## Theming +### Colors - +import Colors from '@site/static/usage/note/theming/colors/index.md'; -```tsx -import React from 'react'; -import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; + -export const NoteExample: React.FC = () => ( - - {/*-- Default Note --*/} - Default Note
+### CSS Custom Properties - {/*-- Note Colors --*/} - Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
+import CSSProps from '@site/static/usage/note/theming/css-properties/index.md'; - {/*-- Notes in a List --*/} - - - Note (End) - On - + - - Off - Note (Start) - - - -); -``` - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'note-example', - styleUrl: 'note-example.css' -}) -export class NoteExample { - render() { - return [ - // Default Note - Default Note, - - // Note Colors - Primary Note, - Secondary Note, - Danger Note, - Light Note, - Dark Note, - - // Notes in a List - - - Note (End) - On - - - - Off - Note (Start) - - - ]; - } -} -``` - - - - - - - -```html - - - -``` - - - - - ## Properties @@ -243,4 +62,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/usage/note/basic/angular.md b/static/usage/note/basic/angular.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/note/basic/angular.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/note/basic/demo.html b/static/usage/note/basic/demo.html new file mode 100644 index 00000000000..ab305da8799 --- /dev/null +++ b/static/usage/note/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + + Note + + + + + + + + + + +
+ Default Note +
+ + + + + diff --git a/static/usage/note/basic/index.md b/static/usage/note/basic/index.md new file mode 100644 index 00000000000..0bda4adefaf --- /dev/null +++ b/static/usage/note/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/note/basic/javascript.md b/static/usage/note/basic/javascript.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/note/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/note/basic/react.md b/static/usage/note/basic/react.md new file mode 100644 index 00000000000..9f1cdb45225 --- /dev/null +++ b/static/usage/note/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/note/basic/vue.md b/static/usage/note/basic/vue.md new file mode 100644 index 00000000000..dffb1348fc9 --- /dev/null +++ b/static/usage/note/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/note/item/angular.md b/static/usage/note/item/angular.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/note/item/angular.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/note/item/demo.html b/static/usage/note/item/demo.html new file mode 100644 index 00000000000..18c46c3f605 --- /dev/null +++ b/static/usage/note/item/demo.html @@ -0,0 +1,38 @@ + + + + + + + Note + + + + + + + + + + + +
+ + Label + Note (End) + + + + Note (Start) + Label + +
+ + + + + diff --git a/static/usage/note/item/index.md b/static/usage/note/item/index.md new file mode 100644 index 00000000000..f6ce753068b --- /dev/null +++ b/static/usage/note/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/note/item/javascript.md b/static/usage/note/item/javascript.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/note/item/javascript.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/note/item/react.md b/static/usage/note/item/react.md new file mode 100644 index 00000000000..422ba6eff85 --- /dev/null +++ b/static/usage/note/item/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + + Label + Note (End) + + + + Note (Start) + Label + + + ); +} +export default Example; +``` diff --git a/static/usage/note/item/vue.md b/static/usage/note/item/vue.md new file mode 100644 index 00000000000..24b7add1ed1 --- /dev/null +++ b/static/usage/note/item/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/note/theming/colors/angular.md b/static/usage/note/theming/colors/angular.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/note/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/note/theming/colors/demo.html b/static/usage/note/theming/colors/demo.html new file mode 100644 index 00000000000..48d74a3757f --- /dev/null +++ b/static/usage/note/theming/colors/demo.html @@ -0,0 +1,49 @@ + + + + + + + Note + + + + + + + + + + + +
+
+ Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note +
+
+ + + + + diff --git a/static/usage/note/theming/colors/index.md b/static/usage/note/theming/colors/index.md new file mode 100644 index 00000000000..72f81406a9e --- /dev/null +++ b/static/usage/note/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/note/theming/colors/javascript.md b/static/usage/note/theming/colors/javascript.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/note/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/note/theming/colors/react.md b/static/usage/note/theming/colors/react.md new file mode 100644 index 00000000000..0f17783c5c6 --- /dev/null +++ b/static/usage/note/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note + + ); +} +export default Example; +``` diff --git a/static/usage/note/theming/colors/vue.md b/static/usage/note/theming/colors/vue.md new file mode 100644 index 00000000000..77e767a5e5f --- /dev/null +++ b/static/usage/note/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/note/theming/css-properties/angular/example_component_css.md b/static/usage/note/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/note/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/note/theming/css-properties/angular/example_component_html.md b/static/usage/note/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/note/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/note/theming/css-properties/demo.html b/static/usage/note/theming/css-properties/demo.html new file mode 100644 index 00000000000..31feba5ab0d --- /dev/null +++ b/static/usage/note/theming/css-properties/demo.html @@ -0,0 +1,30 @@ + + + + + + + Note + + + + + + + + + + + +
+ Default Note +
+ + + + + diff --git a/static/usage/note/theming/css-properties/index.md b/static/usage/note/theming/css-properties/index.md new file mode 100644 index 00000000000..ffd7a95c81f --- /dev/null +++ b/static/usage/note/theming/css-properties/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/note/theming/css-properties/javascript.md b/static/usage/note/theming/css-properties/javascript.md new file mode 100644 index 00000000000..cc1bdeec421 --- /dev/null +++ b/static/usage/note/theming/css-properties/javascript.md @@ -0,0 +1,9 @@ +```html + + +Default Note +``` diff --git a/static/usage/note/theming/css-properties/react/main_css.md b/static/usage/note/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/note/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/note/theming/css-properties/react/main_tsx.md b/static/usage/note/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..798b6ab90d1 --- /dev/null +++ b/static/usage/note/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/note/theming/css-properties/vue.md b/static/usage/note/theming/css-properties/vue.md new file mode 100644 index 00000000000..77e8b361f2c --- /dev/null +++ b/static/usage/note/theming/css-properties/vue.md @@ -0,0 +1,20 @@ +```html + + + + + +```