javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(note): add tests and font family for note as standalone

Browse Source
This commit is contained in:
Brandy Carney
2018-01-24 18:20:10 -05:00
parent 352d96a9e0
commit c7c3b8cf56
7 changed files with 144 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/badge/test/basic/index.html
View File

@ -21,7 +21,7 @@
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-badge slot="end" color="primary">99</ion-badge>
<ion-badge slot="end">99</ion-badge>
<ion-label>Default Badge</ion-label>
</ion-item>
<ion-item>
@ -53,7 +53,7 @@
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-badge slot="start" color="primary">99</ion-badge>
<ion-badge slot="start">99</ion-badge>
<ion-label>Default Badge</ion-label>
</ion-item>
<ion-item>

2
packages/core/src/components/note/note.ios.scss
View File

@ -4,6 +4,8 @@
// --------------------------------------------------
.note-ios {
font-family: $note-ios-font-family;
color: $note-ios-color;
}

5
packages/core/src/components/note/note.ios.vars.scss
View File

@ -3,5 +3,8 @@
// iOS Note
// --------------------------------------------------
/// @prop - Font family of the note
$note-ios-font-family: $font-family-ios-base !default;
/// @prop - Text color of the note
$note-ios-color: darken($list-ios-border-color, 10%) !default;
$note-ios-color: darken($list-ios-border-color, 10%) !default;

2
packages/core/src/components/note/note.md.scss
View File

@ -4,6 +4,8 @@
// --------------------------------------------------
.note-md {
font-family: $note-md-font-family;
color: $note-md-color;
}

5
packages/core/src/components/note/note.md.vars.scss
View File

@ -3,5 +3,8 @@
// Material Design Note
// --------------------------------------------------
/// @prop - Font family of the note
$note-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the note
$note-md-color: darken($list-md-border-color, 10%) !default;
$note-md-color: darken($list-md-border-color, 10%) !default;

95
packages/core/src/components/note/test/basic/index.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Note - Basic</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-page>
<ion-header>
<ion-toolbar>
<ion-title>Note - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>Notes Right</ion-list-header>
<ion-item>
<ion-note slot="end">99</ion-note>
<ion-label>Default Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="end" color="primary">99</ion-note>
<ion-label>Primary Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="end" color="secondary">99</ion-note>
<ion-label>Secondary Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="end" color="danger">99</ion-note>
<ion-label>Danger Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="end" color="light">99</ion-note>
<ion-label>Light Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="end" color="dark">99</ion-note>
<ion-label>Dark Note</ion-label>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
<ion-label>Dynamic Note Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Notes Left</ion-list-header>
<ion-item>
<ion-note slot="start">99</ion-note>
<ion-label>Default Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="start" color="primary">99</ion-note>
<ion-label>Primary Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="start" color="secondary">99</ion-note>
<ion-label>Secondary Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="start" color="danger">99</ion-note>
<ion-label>Danger Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="start" color="light">99</ion-note>
<ion-label>Light Note</ion-label>
</ion-item>
<ion-item>
<ion-note slot="start" color="dark">99</ion-note>
<ion-label>Dark Note</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
<script>
const note = document.querySelector('#toggleColor');
function toggleColor() {
const prev = note.getAttribute('color');
note.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
note.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
}
</script>
</body>
</html>

35
packages/core/src/components/note/test/standalone/index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Note - Standalone</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>
<!-- Default Note -->
<ion-note>Default Note</ion-note>
<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
</body>
</html>