mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
22
core/src/components/note/note.ios.scss
Normal file
22
core/src/components/note/note.ios.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "./note.ios.vars";
|
||||
|
||||
// iOS Note
|
||||
// --------------------------------------------------
|
||||
|
||||
.note-ios {
|
||||
font-family: $note-ios-font-family;
|
||||
|
||||
color: $note-ios-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Note Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
.note-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
10
core/src/components/note/note.ios.vars.scss
Normal file
10
core/src/components/note/note.ios.vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// 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: $text-ios-color-step-650 !default;
|
||||
22
core/src/components/note/note.md.scss
Normal file
22
core/src/components/note/note.md.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "./note.md.vars";
|
||||
|
||||
// Material Design Note
|
||||
// --------------------------------------------------
|
||||
|
||||
.note-md {
|
||||
font-family: $note-md-font-family;
|
||||
|
||||
color: $note-md-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Note Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.note-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
10
core/src/components/note/note.md.vars.scss
Normal file
10
core/src/components/note/note.md.vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// 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: $text-md-color-step-800 !default;
|
||||
30
core/src/components/note/note.tsx
Normal file
30
core/src/components/note/note.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-note',
|
||||
styleUrls: {
|
||||
ios: 'note.ios.scss',
|
||||
md: 'note.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'note'
|
||||
}
|
||||
})
|
||||
export class Note {
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
}
|
||||
77
core/src/components/note/readme.md
Normal file
77
core/src/components/note/readme.md
Normal file
@ -0,0 +1,77 @@
|
||||
# ion-note
|
||||
|
||||
Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default.
|
||||
|
||||
```html
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
146
core/src/components/note/test/basic/index.html
Normal file
146
core/src/components/note/test/basic/index.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!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-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-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</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-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</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>
|
||||
39
core/src/components/note/test/standalone/index.html
Normal file
39
core/src/components/note/test/standalone/index.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!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 -->
|
||||
<ion-note>Default Note</ion-note>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-note color="primary">Primary Note</ion-note>
|
||||
<ion-note color="secondary">Secondary Note</ion-note>
|
||||
<ion-note color="tertiary">Tertiary Note</ion-note>
|
||||
<ion-note color="success">Success Note</ion-note>
|
||||
<ion-note color="warning">Warning Note</ion-note>
|
||||
<ion-note color="danger">Danger Note</ion-note>
|
||||
<ion-note color="light">Light Note</ion-note>
|
||||
<ion-note color="medium">Medium 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>
|
||||
Reference in New Issue
Block a user