test(preview): add preview tests for documentation previews

This commit is contained in:
Brandy Carney
2018-03-21 12:18:04 -04:00
parent d26074a17f
commit fc30ba18f3
57 changed files with 7134 additions and 0 deletions

View 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>