Skip to content
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

Jump to bottom

docs(button): add components playgrounds #2530

Merged
merged 5 commits into from
Sep 14, 2022
Merged

docs(button): add components playgrounds #2530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b73ce4
docs(button): add components playgrounds
brandyscarney Sep 2, 2022
b353b40
Update static/usage/button/theming/css-properties/react/main_tsx.md
brandyscarney Sep 13, 2022
7d95f7a
docs(button): update width of demo for colors and remove tables
brandyscarney Sep 14, 2022
9d74cdd
Merge branch 'main' into FW-1301
brandyscarney Sep 14, 2022
15a9137
bad merge conflict resolve
brandyscarney Sep 14, 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
378 changes: 31 additions & 347 deletions docs/api/button.md
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions static/usage/button/basic/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
```html
<ion-button>Default</ion-button>
<ion-button [disabled]="true">Disabled</ion-button>
```
26 changes: 26 additions & 0 deletions static/usage/button/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</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-button>Default</ion-button>
<ion-button disabled>Disabled</ion-button>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/button/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/button/basic/demo.html" />
4 changes: 4 additions & 0 deletions static/usage/button/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
```html
<ion-button>Default</ion-button>
<ion-button disabled="true">Disabled</ion-button>
```
14 changes: 14 additions & 0 deletions static/usage/button/basic/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```tsx
import React from 'react';
import { IonButton } from '@ionic/react';

function Example() {
return (
<>
<IonButton>Default</IonButton>
<IonButton disabled={true}>Disabled</IonButton>
</>
);
}
export default Example;
```
15 changes: 15 additions & 0 deletions static/usage/button/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```html
<template>
<ion-button>Default</ion-button>
<ion-button :disabled="true">Disabled</ion-button>
</template>

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

export default defineComponent({
components: { IonButton },
});
</script>
```
4 changes: 4 additions & 0 deletions static/usage/button/expand/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
```html
<ion-button expand="block">Block</ion-button>
<ion-button expand="full">Full</ion-button>
```
32 changes: 32 additions & 0 deletions static/usage/button/expand/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</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 {
flex-direction: column;
align-items: stretch;
}
</style>
</head>

<body>
<ion-app>
<ion-content class="ion-padding">
<div class="container">
<ion-button expand="block">Block</ion-button>
<ion-button expand="full">Full</ion-button>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/button/expand/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/button/expand/demo.html" />
4 changes: 4 additions & 0 deletions static/usage/button/expand/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
```html
<ion-button expand="block">Block</ion-button>
<ion-button expand="full">Full</ion-button>
```
14 changes: 14 additions & 0 deletions static/usage/button/expand/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```tsx
import React from 'react';
import { IonButton } from '@ionic/react';

function Example() {
return (
<>
<IonButton expand="block">Block</IonButton>
<IonButton expand="full">Full</IonButton>
</>
);
}
export default Example;
```
15 changes: 15 additions & 0 deletions static/usage/button/expand/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```html
<template>
<ion-button expand="block">Block</ion-button>
<ion-button expand="full">Full</ion-button>
</template>

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

export default defineComponent({
components: { IonButton },
});
</script>
```
6 changes: 6 additions & 0 deletions static/usage/button/fill/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
```html
<ion-button>Default</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="solid">Solid</ion-button>
```
28 changes: 28 additions & 0 deletions static/usage/button/fill/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</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-button>Default</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="solid">Solid</ion-button>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/button/fill/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/button/fill/demo.html" />
6 changes: 6 additions & 0 deletions static/usage/button/fill/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
```html
<ion-button>Default</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="solid">Solid</ion-button>
```
16 changes: 16 additions & 0 deletions static/usage/button/fill/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
```tsx
import React from 'react';
import { IonButton } from '@ionic/react';

function Example() {
return (
<>
<IonButton>Default</IonButton>
<IonButton fill="clear">Clear</IonButton>
<IonButton fill="outline">Outline</IonButton>
<IonButton fill="solid">Solid</IonButton>
</>
);
}
export default Example;
```
17 changes: 17 additions & 0 deletions static/usage/button/fill/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<template>
<ion-button>Default</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="solid">Solid</ion-button>
</template>

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

export default defineComponent({
components: { IonButton },
});
</script>
```
15 changes: 15 additions & 0 deletions static/usage/button/icons/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```html
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>

<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
```
37 changes: 37 additions & 0 deletions static/usage/button/icons/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</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-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>

<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/button/icons/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/button/icons/demo.html" />
15 changes: 15 additions & 0 deletions static/usage/button/icons/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
```html
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>

<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
```
26 changes: 26 additions & 0 deletions static/usage/button/icons/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
```tsx
import React from 'react';
import { IonButton, IonIcon } from '@ionic/react';
import { star } from 'ionicons/icons';

function Example() {
return (
<>
<IonButton>
<IonIcon slot="start" icon={star}></IonIcon>
Left Icon
</IonButton>

<IonButton>
Right Icon
<IonIcon slot="end" icon={star}></IonIcon>
</IonButton>

<IonButton>
<IonIcon slot="icon-only" icon={star}></IonIcon>
</IonButton>
</>
);
}
export default Example;
```
30 changes: 30 additions & 0 deletions static/usage/button/icons/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```html
<template>
<ion-button>
<ion-icon slot="start" :icon="star"></ion-icon>
Left Icon
</ion-button>

<ion-button>
Right Icon
<ion-icon slot="end" :icon="star"></ion-icon>
</ion-button>

<ion-button>
<ion-icon slot="icon-only" :icon="star"></ion-icon>
</ion-button>
</template>

<script lang="ts">
import { IonButton, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';
import { star } from 'ionicons/icons';

export default defineComponent({
components: { IonButton, IonIcon },
setup() {
return { star }
}
});
</script>
```
4 changes: 4 additions & 0 deletions static/usage/button/shape/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
```html
<ion-button>Default</ion-button>
<ion-button shape="round">Round</ion-button>
```
Loading