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

fix(jp): re-add files for removed playgrounds #3189

Merged
merged 2 commits into from
Oct 12, 2023
Merged

fix(jp): re-add files for removed playgrounds #3189

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
609b0fd
fix(jp): re-add files for removed playgrounds
Oct 12, 2023
60ac4c7
lint
Oct 12, 2023
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
8 changes: 8 additions & 0 deletions static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
```css
ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}
```
16 changes: 16 additions & 0 deletions static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
```html
<ion-item lines="full" class="item-has-focus ion-touched">
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
<ion-input></ion-input>
</ion-item>
```
48 changes: 48 additions & 0 deletions static/usage/v7/item/theming/input-highlight/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Item</title>
<link rel="stylesheet" href="../../../../common.css" />
<script src="../../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

<style>
.container {
display: block;
}

ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-item lines="full" class="item-has-focus ion-touched">
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
<ion-input></ion-input>
</ion-item>
</div>
</ion-content>
</ion-app>
</body>
</html>
33 changes: 33 additions & 0 deletions static/usage/v7/item/theming/input-highlight/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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';

<Playground
version="7"
code={{
javascript,
react: {
files: {
'src/main.css': react_main_css,
'src/main.tsx': react_main_tsx,
},
},
vue,
angular: {
files: {
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.html': angular_example_component_html,
},
},
}}
src="usage/v7/item/theming/input-highlight/demo.html"
size="250px"
/>
25 changes: 25 additions & 0 deletions static/usage/v7/item/theming/input-highlight/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```html
<ion-item lines="full" class="item-has-focus ion-touched">
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
<ion-input></ion-input>
</ion-item>

<style>
ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}
</style>
```
8 changes: 8 additions & 0 deletions static/usage/v7/item/theming/input-highlight/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
```css
ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}
```
28 changes: 28 additions & 0 deletions static/usage/v7/item/theming/input-highlight/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
```tsx
import React from 'react';
import { IonInput, IonItem, IonLabel } from '@ionic/react';

import './main.css';

function Example() {
return (
<>
<IonItem lines="full" class="item-has-focus ion-touched">
<IonLabel position="stacked">Custom Input Highlight: Focused</IonLabel>
<IonInput></IonInput>
</IonItem>

<IonItem lines="full" class="item-has-focus ion-touched ion-valid">
<IonLabel position="stacked">Custom Input Highlight: Focused & Valid</IonLabel>
<IonInput></IonInput>
</IonItem>

<IonItem lines="full" class="item-has-focus ion-touched ion-invalid">
<IonLabel position="stacked">Custom Input Highlight: Focused & Invalid</IonLabel>
<IonInput></IonInput>
</IonItem>
</>
);
}
export default Example;
```
35 changes: 35 additions & 0 deletions static/usage/v7/item/theming/input-highlight/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
```html
<template>
<ion-item lines="full" class="item-has-focus ion-touched">
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
<ion-input></ion-input>
</ion-item>
</template>

<script lang="ts">
import { IonInput, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonInput, IonItem, IonLabel },
});
</script>

<style>
ion-item {
--highlight-height: 2px;
--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;
}
</style>
```
31 changes: 31 additions & 0 deletions static/usage/v7/label/input/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
```html
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>

<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
```
56 changes: 56 additions & 0 deletions static/usage/v7/label/input/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

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

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>

<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
</div>
</ion-content>
</ion-app>
</body>
</html>
8 changes: 8 additions & 0 deletions static/usage/v7/label/input/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 version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/input/demo.html" size="medium" />
31 changes: 31 additions & 0 deletions static/usage/v7/label/input/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
```html
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>

<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
```
41 changes: 41 additions & 0 deletions static/usage/v7/label/input/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
```tsx
import React from 'react';
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';

function Example() {
return (
<>
<IonItem>
<IonLabel>Default Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="fixed">Fixed Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="floating">Floating Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="stacked">Stacked Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel>Toggle</IonLabel>
<IonToggle slot="end" checked></IonToggle>
</IonItem>

<IonItem>
<IonCheckbox slot="start" checked></IonCheckbox>
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
);
}
export default Example;
```
Loading
Loading