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

41
public/patterns/core/tabs/index.html
View File

@@ -6,7 +6,7 @@
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<p>A tabs component that provides different sections of content that are displayed one at a time when the user selects that information. </p>
<h2>How to use it</h2>
<h2>When to use it</h2>
<p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should </p>
<ul>
<li>be logically chunked and ordered</li>
@@ -15,8 +15,8 @@
<li>obvious where they begin and end </li>
</ul>
<p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p>
<h2>When to use it</h2>
<p>The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
<h2>How to use it</h2>
<p>The structure of the tab set is defined in html. There are two forms supported. Adding a class of <code class="inline">.tab-group</code> to the container element will work in place of the <code class="inline">tabset</code> tag, and the tab panels can be defined using either <code class="inline">tab=""</code> or <code class="inline">data-tab=""</code>. Passing an optional element to the init function will initialise tabs within that element. </p>
<tabset id="tabs">
<pre class="language-html" tab="html">
<tabset id="uniqueID">
@@ -38,8 +38,8 @@ tabset > ul, .tab-group > ul {
padding: 0;
}
tabset > ul li.separator, .tab-group > ul li.separator {
border-bottom: 1px solid var(--colour-grey);
border-left: 1px solid var(--colour-grey);
border-bottom: 1px solid #7f7f7f;
border-left: 1px solid #7f7f7f;
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
@@ -48,9 +48,9 @@ tabset .tab-hidden, .tab-group .tab-hidden {
display: none;
}
tabset [role=tab], .tab-group [role=tab] {
background-color: var(--colour-white);
border-left: 1px solid var(--colour-grey);
border-top: 1px solid var(--colour-grey);
background-color: #FFF;
border-left: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
border-radius: 0.5rem 0.5rem 0 0;
cursor: pointer;
margin: 0;
@@ -59,19 +59,19 @@ tabset [role=tab], .tab-group [role=tab] {
z-index: 2;
}
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
border-right: 1px solid var(--colour-grey);
border-right: 1px solid #7f7f7f;
}
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
background-color: var(--colour-grey-xxl);
border-bottom: 1px solid var(--colour-grey);
background-color: #f0f0f0;
border-bottom: 1px solid #7f7f7f;
}
tabset [role=tab] span, .tab-group [role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
tabset [role=tabpanel], .tab-group [role=tabpanel] {
background-color: var(--colour-white);
border: 1px solid var(--colour-grey);
background-color: #FFF;
border: 1px solid #7f7f7f;
border-top: none;
padding: 1rem;
z-index: 1;
@@ -79,7 +79,13 @@ tabset [role=tabpanel], .tab-group [role=tabpanel] {
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}</pre>
<pre class="language-css" tab="scss">// DS2 core (c) 2024 Alexander McIlwraith
<div tab="scss">
<pre class="language-sass">@import "[path to]/_tabs";
@include tabs{
// optional content block
};
</pre>
<pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0
$tab-border: #7f7f7f !default;
@@ -148,7 +154,11 @@ $tab-notselected: #f0f0f0 !default;
}
}
}</pre>
<pre class="language-css" tab="js">/* DS2 core (c) 2024 Alexander McIlwraith
</div>
<div tab="js">
<pre class="language-js">import * as tabs from "[path to]/_tabs.js";
tabs.init();</pre>
<pre class="language-js">/* DS2 core (c) 2024 Alexander McIlwraith
import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";
tabs.init();
*/
@@ -202,6 +212,7 @@ export function init(p = document) {
});
}
</pre>
</div>
</tabset>
</body>
</html>