gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Update pattern documentation

Browse Source
This commit is contained in:
A McIlwraith
2024-07-28 15:30:51 -04:00
parent 77a13bbd46
commit 3292729d53
15 changed files with 227 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/patterns/core/sticky-note/index.html
View File

@@ -9,11 +9,11 @@
<h2>When to use it</h2>
<p>Use a sticky when you want to make a note without adding it to the content. </p>
<h2>How to use it</h2>
<p>Uses absolute positioning.
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note>
<p>Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either <code class="language-html inline">float="[ right | left &#93;"</code> or <code class="language-html inline">offset="[ top | left &#93;"</code>. Offset will take negative values in any web measurement unit.
<sticky-note class="blue" offset="-10rem 1rem">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note>
<sticky-note float="right">You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).</sticky-note>
</p>
<p>If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". </p>
<sticky-note>You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).</sticky-note>
<tabset id="sticky-note">
<pre class="language-html" tab="html">
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
@@ -145,7 +145,11 @@ sticky-note-wrapper:has(sticky-note.pink:hover) {
sticky-note-wrapper:has(sticky-note.green:hover) {
background-color: #bbfbc0;
}</pre>
<pre class="language-css" data-tab="scss"> //- DS2 core (c) 2024 Alexander McIlwraith
<div tab="scss">
<pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
@import "[path to]/_sticky-note";
@include sticky-note;</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@use 'sass:color';
@@ -297,7 +301,12 @@ $sticky-colors: (
}
}
}</pre>
<pre class="language-js" data-tab="js"> //- DS2 core (c) 2024 Alexander McIlwraith
</div>
<div tab="js">
<pre class="language-js">import * as stickynote from "[path to]]/_sticky-note.js";
stickynote.init()
</pre>
<pre class="language-js">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
const font = {
@@ -428,6 +437,7 @@ export function init(p = document){
});
}
}</pre>
</div>
</tabset>
</body>
</html>