Skip to content

Commit cc35c38

Browse files
brandyscarneybrandyscarney
authored
docs(text): add basic usage playground and link to theming docs (#2531)
1 parent 1c8c3be commit cc35c38

File tree

7 files changed

+183
-47
lines changed

7 files changed

+183
-47
lines changed

‎docs/api/text.md

Lines changed: 6 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
---
22
title: "ion-text"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/text/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/text/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
104
import Props from '@site/static/auto-generated/text/props.md';
115
import Events from '@site/static/auto-generated/text/events.md';
126
import Methods from '@site/static/auto-generated/text/methods.md';
@@ -20,56 +14,21 @@ import Slots from '@site/static/auto-generated/text/slots.md';
2014
</head>
2115

2216
import EncapsulationPill from '@components/page/api/EncapsulationPill';
23-
import APITOCInline from '@components/page/api/APITOCInline';
2417

2518
<EncapsulationPill type="shadow" />
2619

27-
<h2 className="table-of-contents__title">Contents</h2>
28-
29-
<APITOCInline
30-
toc={toc}
31-
maxHeadingLevel={2}
32-
autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
33-
/>
34-
35-
36-
3720
The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element.
3821

22+
## Basic Usage
3923

24+
import Basic from '@site/static/usage/text/basic/index.md';
4025

26+
<Basic />
4127

42-
## Usage
43-
44-
```html
45-
<ion-text color="secondary">
46-
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
47-
</ion-text>
48-
49-
<ion-text color="primary">
50-
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
51-
</ion-text>
52-
53-
<ion-text color="light">
54-
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
55-
</ion-text>
56-
57-
<ion-text color="danger">
58-
<h4 >H4: The quick brown fox jumps over the lazy dog</h4>
59-
</ion-text>
6028

61-
<ion-text color="dark">
62-
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
63-
</ion-text>
29+
## Theming
6430

65-
<p>
66-
I saw a werewolf with a Chinese menu in his hand.
67-
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
68-
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
69-
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
70-
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
71-
</p>
72-
```
31+
The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
7332

7433
## Properties
7534
<Props />
@@ -87,4 +46,4 @@ The text component is a simple component that can be used to style the text colo
8746
<CustomProps />
8847

8948
## Slots
90-
<Slots />
49+
<Slots />

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```html
2+
<ion-text color="primary">
3+
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
4+
</ion-text>
5+
6+
<ion-text color="secondary">
7+
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
8+
</ion-text>
9+
10+
<ion-text color="tertiary">
11+
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
12+
</ion-text>
13+
14+
<p>
15+
<ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
16+
I saw a werewolf with a Chinese menu in his hand.
17+
Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
18+
He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
19+
Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
20+
</p>
21+
```

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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>Text</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+
flex-wrap: wrap;
16+
}
17+
18+
h1, h2, h3 {
19+
margin: 0;
20+
}
21+
22+
p {
23+
width: 80%;
24+
margin: 0 auto;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<ion-app>
31+
<ion-content>
32+
<div class="container">
33+
<ion-text color="primary">
34+
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
35+
</ion-text>
36+
37+
<ion-text color="secondary">
38+
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
39+
</ion-text>
40+
41+
<ion-text color="tertiary">
42+
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
43+
</ion-text>
44+
45+
<p>
46+
<ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
47+
I saw a werewolf with a Chinese menu in his hand.
48+
Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
49+
He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
50+
Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
51+
</p>
52+
</div>
53+
</ion-content>
54+
</ion-app>
55+
</body>
56+
57+
</html>

‎static/usage/text/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/text/basic/demo.html" />

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```html
2+
<ion-text color="primary">
3+
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
4+
</ion-text>
5+
6+
<ion-text color="secondary">
7+
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
8+
</ion-text>
9+
10+
<ion-text color="tertiary">
11+
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
12+
</ion-text>
13+
14+
<p>
15+
<ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
16+
I saw a werewolf with a Chinese menu in his hand.
17+
Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
18+
He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
19+
Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
20+
</p>
21+
```

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonText, IonIcon } from '@ionic/react';
4+
import { warning } from 'ionicons/icons';
5+
6+
function Example() {
7+
return (
8+
<>
9+
<IonText color="primary">
10+
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
11+
</IonText>
12+
13+
<IonText color="secondary">
14+
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
15+
</IonText>
16+
17+
<IonText color="tertiary">
18+
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
19+
</IonText>
20+
21+
<p>
22+
<IonText color="warning"><IonIcon icon={warning}></IonIcon></IonText>
23+
I saw a werewolf with a Chinese menu in his hand.
24+
Walking through the <IonText color="success"><sub>streets</sub></IonText> of Soho in the rain.
25+
He <IonText color="medium"><i>was</i></IonText> looking for a place called Lee Ho Fook's.
26+
Gonna get a <IonText color="danger">big dish of beef chow mein.</IonText>
27+
</p>
28+
</>
29+
);
30+
}
31+
export default Example;
32+
```

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```html
2+
<template>
3+
<ion-text color="primary">
4+
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
5+
</ion-text>
6+
7+
<ion-text color="secondary">
8+
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
9+
</ion-text>
10+
11+
<ion-text color="tertiary">
12+
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
13+
</ion-text>
14+
15+
<p>
16+
<ion-text color="warning"><ion-icon :icon="warning"></ion-icon></ion-text>
17+
I saw a werewolf with a Chinese menu in his hand.
18+
Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
19+
He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
20+
Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
21+
</p>
22+
</template>
23+
24+
<script lang="ts">
25+
import { IonIcon, IonText } from '@ionic/vue';
26+
import { warning } from 'ionicons/icons';
27+
import { defineComponent } from 'vue';
28+
29+
export default defineComponent({
30+
components: { IonIcon, IonText },
31+
setup() {
32+
return {
33+
warning,
34+
};
35+
},
36+
});
37+
</script>
38+
```

0 commit comments

Comments
 (0)