docs(note): document custom properties

references #14850
ionic-team · Aug 30, 2018 · 88ab4f9 · 88ab4f9
1 parent 0f9a7b4
commit 88ab4f9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss
@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the note
+   */
+
   color: var(--color);
 
   font-family: $font-family-base;

diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
@@ -14,6 +14,13 @@ Notes are text elements generally used as subtitles that provide more informatio
 | `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |
 
 
+## CSS Custom Properties
+
+| Name      | Description       |
+| --------- | ----------------- |
+| `--color` | Color of the note |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/note/test/standalone/index.html b/core/src/components/note/test/standalone/index.html
@@ -13,6 +13,9 @@
   <!-- Default -->
   <ion-note>Default Note</ion-note>
 
+  <!-- Custom -->
+  <ion-note class="custom">Custom Note</ion-note>
+
   <!-- Colors -->
   <ion-note color="primary">Primary Note</ion-note>
   <ion-note color="secondary">Secondary Note</ion-note>
@@ -36,5 +39,11 @@
       <ion-label>Note (Start)</ion-label>
     </ion-item>
   </ion-list>
+
+  <style>
+    .custom {
+      --color: hotpink;
+    }
+  </style>
 </body>
 </html>