Skip to content

Commit 4ecd1f4

Browse files
brandyscarneybrandyscarney
authored
docs(note): add note component playgrounds (#2535)
1 parent 3b72cad commit 4ecd1f4

27 files changed

+436
-196
lines changed

‎docs/api/note.md

Lines changed: 15 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
---
22
title: "ion-note"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/note/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
import TOCInline from '@theme/TOCInline';
10-
114
import Props from '@site/static/auto-generated/note/props.md';
125
import Events from '@site/static/auto-generated/note/events.md';
136
import Methods from '@site/static/auto-generated/note/methods.md';
@@ -24,208 +17,34 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2417

2518
<EncapsulationPill type="shadow" />
2619

27-
<h2 className="table-of-contents__title">Contents</h2>
28-
29-
<TOCInline
30-
toc={toc}
31-
maxHeadingLevel={2}
32-
/>
33-
34-
35-
36-
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.
37-
38-
39-
40-
41-
## Usage
42-
43-
<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' }]}>
44-
45-
<TabItem value="angular">
46-
47-
```html
48-
<!-- Default Note -->
49-
<ion-note>Default Note</ion-note>
50-
51-
<!-- Note Colors -->
52-
<ion-note color="primary">Primary Note</ion-note>
53-
<ion-note color="secondary">Secondary Note</ion-note>
54-
<ion-note color="danger">Danger Note</ion-note>
55-
<ion-note color="light">Light Note</ion-note>
56-
<ion-note color="dark">Dark Note</ion-note>
57-
58-
<!-- Notes in a List -->
59-
<ion-list>
60-
<ion-item>
61-
<ion-label>Note (End)</ion-label>
62-
<ion-note slot="end">On</ion-note>
63-
</ion-item>
64-
65-
<ion-item>
66-
<ion-note slot="start">Off</ion-note>
67-
<ion-label>Note (Start)</ion-label>
68-
</ion-item>
69-
</ion-list>
70-
```
71-
72-
73-
</TabItem>
74-
20+
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.
7521

76-
<TabItem value="javascript">
22+
## Basic Usage
7723

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

82-
<!-- Note Colors -->
83-
<ion-note color="primary">Primary Note</ion-note>
84-
<ion-note color="secondary">Secondary Note</ion-note>
85-
<ion-note color="danger">Danger Note</ion-note>
86-
<ion-note color="light">Light Note</ion-note>
87-
<ion-note color="dark">Dark Note</ion-note>
26+
<Basic />
8827

89-
<!-- Notes in a List -->
90-
<ion-list>
91-
<ion-item>
92-
<ion-label>Note (End)</ion-label>
93-
<ion-note slot="end">On</ion-note>
94-
</ion-item>
28+
## Item Notes
9529

96-
<ion-item>
97-
<ion-note slot="start">Off</ion-note>
98-
<ion-label>Note (Start)</ion-label>
99-
</ion-item>
100-
</ion-list>
101-
```
30+
import Item from '@site/static/usage/note/item/index.md';
10231

32+
<Item />
10333

104-
</TabItem>
34+
## Theming
10535

36+
### Colors
10637

107-
<TabItem value="react">
38+
import Colors from '@site/static/usage/note/theming/colors/index.md';
10839

109-
```tsx
110-
import React from 'react';
111-
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
40+
<Colors />
11241

113-
export const NoteExample: React.FC = () => (
114-
<IonContent>
115-
{/*-- Default Note --*/}
116-
<IonNote>Default Note</IonNote><br />
42+
### CSS Custom Properties
11743

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

125-
{/*-- Notes in a List --*/}
126-
<IonList>
127-
<IonItem>
128-
<IonLabel>Note (End)</IonLabel>
129-
<IonNote slot="end">On</IonNote>
130-
</IonItem>
46+
<CSSProps />
13147

132-
<IonItem>
133-
<IonNote slot="start">Off</IonNote>
134-
<IonLabel>Note (Start)</IonLabel>
135-
</IonItem>
136-
</IonList>
137-
</IonContent>
138-
);
139-
```
140-
141-
</TabItem>
142-
143-
144-
<TabItem value="stencil">
145-
146-
```tsx
147-
import { Component, h } from '@stencil/core';
148-
149-
@Component({
150-
tag: 'note-example',
151-
styleUrl: 'note-example.css'
152-
})
153-
export class NoteExample {
154-
render() {
155-
return [
156-
// Default Note
157-
<ion-note>Default Note</ion-note>,
158-
159-
// Note Colors
160-
<ion-note color="primary">Primary Note</ion-note>,
161-
<ion-note color="secondary">Secondary Note</ion-note>,
162-
<ion-note color="danger">Danger Note</ion-note>,
163-
<ion-note color="light">Light Note</ion-note>,
164-
<ion-note color="dark">Dark Note</ion-note>,
165-
166-
// Notes in a List
167-
<ion-list>
168-
<ion-item>
169-
<ion-label>Note (End)</ion-label>
170-
<ion-note slot="end">On</ion-note>
171-
</ion-item>
172-
173-
<ion-item>
174-
<ion-note slot="start">Off</ion-note>
175-
<ion-label>Note (Start)</ion-label>
176-
</ion-item>
177-
</ion-list>
178-
];
179-
}
180-
}
181-
```
182-
183-
184-
</TabItem>
185-
186-
187-
<TabItem value="vue">
188-
189-
```html
190-
<template>
191-
<!-- Default Note -->
192-
<ion-note>Default Note</ion-note>
193-
194-
<!-- Note Colors -->
195-
<ion-note color="primary">Primary Note</ion-note>
196-
<ion-note color="secondary">Secondary Note</ion-note>
197-
<ion-note color="danger">Danger Note</ion-note>
198-
<ion-note color="light">Light Note</ion-note>
199-
<ion-note color="dark">Dark Note</ion-note>
200-
201-
<!-- Notes in a List -->
202-
<ion-list>
203-
<ion-item>
204-
<ion-label>Note (End)</ion-label>
205-
<ion-note slot="end">On</ion-note>
206-
</ion-item>
207-
208-
<ion-item>
209-
<ion-note slot="start">Off</ion-note>
210-
<ion-label>Note (Start)</ion-label>
211-
</ion-item>
212-
</ion-list>
213-
</template>
214-
215-
<script>
216-
import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
217-
import { defineComponent } from 'vue';
218-
219-
export default defineComponent({
220-
components: { IonItem, IonLabel, IonList, IonNote }
221-
});
222-
</script>
223-
```
224-
225-
226-
</TabItem>
227-
228-
</Tabs>
22948

23049
## Properties
23150
<Props />
@@ -243,4 +62,4 @@ export default defineComponent({
24362
<CustomProps />
24463

24564
## Slots
246-
<Slots />
65+
<Slots />

‎static/usage/note/basic/angular.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-note>Default Note</ion-note>
3+
```

‎static/usage/note/basic/demo.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Note</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-content>
18+
<div class="container">
19+
<ion-note>Default Note</ion-note>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
</body>
24+
25+
</html>

‎static/usage/note/basic/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/note/basic/demo.html" />

‎static/usage/note/basic/javascript.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-note>Default Note</ion-note>
3+
```

‎static/usage/note/basic/react.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonNote } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonNote>Default Note</IonNote>
9+
</>
10+
);
11+
}
12+
export default Example;
13+
```

‎static/usage/note/basic/vue.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-note>Default Note</ion-note>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonNote } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonNote },
12+
});
13+
</script>
14+
```

‎static/usage/note/item/angular.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Label</ion-label>
4+
<ion-note slot="end">Note (End)</ion-note>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-note slot="start">Note (Start)</ion-note>
9+
<ion-label>Label</ion-label>
10+
</ion-item>
11+
```

‎static/usage/note/item/demo.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Note</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
<style>
14+
.container {
15+
display: block;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<ion-app>
22+
<ion-content>
23+
<div class="container">
24+
<ion-item>
25+
<ion-label>Label</ion-label>
26+
<ion-note slot="end">Note (End)</ion-note>
27+
</ion-item>
28+
29+
<ion-item>
30+
<ion-note slot="start">Note (Start)</ion-note>
31+
<ion-label>Label</ion-label>
32+
</ion-item>
33+
</div>
34+
</ion-content>
35+
</ion-app>
36+
</body>
37+
38+
</html>

‎static/usage/note/item/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/note/item/demo.html" />

‎static/usage/note/item/javascript.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Label</ion-label>
4+
<ion-note slot="end">Note (End)</ion-note>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-note slot="start">Note (Start)</ion-note>
9+
<ion-label>Label</ion-label>
10+
</ion-item>
11+
```

0 commit comments

Comments
 (0)