mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
test(preview): add preview tests for documentation previews
This commit is contained in:
125
core/src/components/textarea/test/preview/index.html
Normal file
125
core/src/components/textarea/test/preview/index.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Input - Textarea</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Input - Textarea</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label color="primary">Inline Label</ion-label>
|
||||
<ion-textarea placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label color="primary" fixed>Fixed Label</ion-label>
|
||||
<ion-textarea placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-textarea placeholder="Textarea with no label"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label color="primary" stacked>Stacked Label</ion-label>
|
||||
<ion-textarea placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label color="primary" floating>Floating Label</ion-label>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Readonly</ion-label>
|
||||
<ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dynamic Value</ion-label>
|
||||
<ion-input id="dynamicValue" value="dynamic"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dynamic Value</ion-label>
|
||||
<ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label color="primary">Clear on Edit</ion-label>
|
||||
<ion-textarea clear-on-edit="true"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label color="primary">Clear on Edit</ion-label>
|
||||
<ion-input clear-on-edit="true"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div text-center>
|
||||
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
|
||||
Toggle Disabled
|
||||
</ion-button>
|
||||
|
||||
<ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
|
||||
Toggle Readonly
|
||||
</ion-button>
|
||||
|
||||
<ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
|
||||
Toggle Value
|
||||
</ion-button>
|
||||
|
||||
<ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
|
||||
Clear Value
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function toggleBoolean(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
|
||||
var isTrue = el[prop] ? false : true;
|
||||
el[prop] = isTrue;
|
||||
console.log('in toggleBoolean, setting', prop, 'to', isTrue);
|
||||
}
|
||||
|
||||
function toggleString(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
console.log('INPUT ELE', el);
|
||||
|
||||
var newString = el[prop] === 'dynamic' ? 'changed' : 'dynamic';
|
||||
el[prop] = newString;
|
||||
console.log('in toggleString, setting', prop, 'to', newString);
|
||||
}
|
||||
|
||||
function clearString(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
|
||||
el[prop] = '';
|
||||
console.log('in toggleString, setting', prop, 'to', '');
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user