Skip to content

docs(note): add note component playgrounds #2535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 9, 2022
Merged

docs(note): add note component playgrounds #2535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a9a08b
docs(note): add note component playgrounds
brandyscarney Sep 6, 2022
5cbadcf
Merge branch 'main' into FW-1279
brandyscarney Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 15 additions & 196 deletions docs/api/note.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,208 +17,34 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';

<EncapsulationPill type="shadow" />

<h2 className="table-of-contents__title">Contents</h2>

<TOCInline
toc={toc}
maxHeadingLevel={2}
/>



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

<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

```html
<!-- Default Note -->
<ion-note>Default Note</ion-note>

<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>

<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
```


</TabItem>

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.

<TabItem value="javascript">
## Basic Usage

```html
<!-- Default Note -->
<ion-note>Default Note</ion-note>
import Basic from '@site/static/usage/note/basic/index.md';

<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
<Basic />

<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
## Item Notes

<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
```
import Item from '@site/static/usage/note/item/index.md';

<Item />

</TabItem>
## Theming

### Colors

<TabItem value="react">
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';
<Colors />

export const NoteExample: React.FC = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote><br />
### CSS Custom Properties

{/*-- Note Colors --*/}
<IonNote color="primary">Primary Note</IonNote><br />
<IonNote color="secondary">Secondary Note</IonNote><br />
<IonNote color="danger">Danger Note</IonNote><br />
<IonNote color="light">Light Note</IonNote><br />
<IonNote color="dark">Dark Note</IonNote><br />
import CSSProps from '@site/static/usage/note/theming/css-properties/index.md';

{/*-- Notes in a List --*/}
<IonList>
<IonItem>
<IonLabel>Note (End)</IonLabel>
<IonNote slot="end">On</IonNote>
</IonItem>
<CSSProps />

<IonItem>
<IonNote slot="start">Off</IonNote>
<IonLabel>Note (Start)</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
```

</TabItem>


<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'note-example',
styleUrl: 'note-example.css'
})
export class NoteExample {
render() {
return [
// Default Note
<ion-note>Default Note</ion-note>,

// Note Colors
<ion-note color="primary">Primary Note</ion-note>,
<ion-note color="secondary">Secondary Note</ion-note>,
<ion-note color="danger">Danger Note</ion-note>,
<ion-note color="light">Light Note</ion-note>,
<ion-note color="dark">Dark Note</ion-note>,

// Notes in a List
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
];
}
}
```


</TabItem>


<TabItem value="vue">

```html
<template>
<!-- Default Note -->
<ion-note>Default Note</ion-note>

<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>

<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
</template>

<script>
import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItem, IonLabel, IonList, IonNote }
});
</script>
```


</TabItem>

</Tabs>

## Properties
<Props />
Expand All @@ -243,4 +62,4 @@ export default defineComponent({
<CustomProps />

## Slots
<Slots />
<Slots />
3 changes: 3 additions & 0 deletions static/usage/note/basic/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-note>Default Note</ion-note>
```
25 changes: 25 additions & 0 deletions static/usage/note/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Note</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />

</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-note>Default Note</ion-note>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/note/basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground code={{ javascript, react, vue, angular }} src="usage/note/basic/demo.html" />
3 changes: 3 additions & 0 deletions static/usage/note/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-note>Default Note</ion-note>
```
13 changes: 13 additions & 0 deletions static/usage/note/basic/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```tsx
import React from 'react';
import { IonNote } from '@ionic/react';

function Example() {
return (
<>
<IonNote>Default Note</IonNote>
</>
);
}
export default Example;
```
14 changes: 14 additions & 0 deletions static/usage/note/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```html
<template>
<ion-note>Default Note</ion-note>
</template>

<script lang="ts">
import { IonNote } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonNote },
});
</script>
```
11 changes: 11 additions & 0 deletions static/usage/note/item/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```html
<ion-item>
<ion-label>Label</ion-label>
<ion-note slot="end">Note (End)</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Note (Start)</ion-note>
<ion-label>Label</ion-label>
</ion-item>
```
38 changes: 38 additions & 0 deletions static/usage/note/item/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Note</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />

<style>
.container {
display: block;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-item>
<ion-label>Label</ion-label>
<ion-note slot="end">Note (End)</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Note (Start)</ion-note>
<ion-label>Label</ion-label>
</ion-item>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/note/item/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground code={{ javascript, react, vue, angular }} src="usage/note/item/demo.html" />
11 changes: 11 additions & 0 deletions static/usage/note/item/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```html
<ion-item>
<ion-label>Label</ion-label>
<ion-note slot="end">Note (End)</ion-note>
</ion-item>

<ion-item>
<ion-note slot="start">Note (Start)</ion-note>
<ion-label>Label</ion-label>
</ion-item>
```
Loading