-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
https://1rosehip.atlassian.net/browse/RRS-80
- Loading branch information
Showing
16 changed files
with
870 additions
and
52 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 11 additions & 11 deletions
22
docs/js/index.1689667000283.js → docs/js/index.1689669442327.js
Large diffs are not rendered by default.
Oops, something went wrong.
6 changes: 3 additions & 3 deletions
6
docs/js/index.1689667000283.js.map → docs/js/index.1689669442327.js.map
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,233 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>React Round Slider Documentation</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | ||
|
|
||
| <!-- google fonts --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> | ||
|
|
||
| <!-- favicon --> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" /> | ||
| <link id="favicon-48" rel="icon" type="image/png" sizes="48x48" href="/img/favicon/favicon-48.png" /> | ||
| <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" /> | ||
| <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" /> | ||
|
|
||
| <link rel="stylesheet" href="/css/styles.1689669442327.css" /> | ||
| <!--<link rel="stylesheet" href="/js/index.1689669442327.css" />--> | ||
|
|
||
| </head> | ||
| <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100"> | ||
|
|
||
| <header class="py-4 px-4 border-b shadow-sm bg-slate-100 dark:bg-slate-900 dark:text-slate-400 dark:border-black"> | ||
| <div class="container mx-auto flex items-center justify-between"> | ||
| <div class="flex items-center"> | ||
| <!-- mobile menu button --> | ||
| <button | ||
| id="mobile-menu-btn" | ||
| type="button" | ||
| class="mr-4 pointer md:hidden"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="M4 6h16M4 12h16M4 18h16"/> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <a href="/" title="" class="flex items-center ml-6"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" | ||
| stroke-width="3.48" stroke="rgba(255, 255, 255, 1)" | ||
| class="mr-4" | ||
| fill="none" stroke-linecap="round" stroke-linejoin="round"> | ||
| <circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(40, 95, 104, 1)"/> | ||
| <g transform="translate(3.36, 3.36) scale(0.72)"> | ||
| <g transform="rotate(25.2 12 12)"> | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none"/> | ||
| <path d="M6 20v-16l6 14l6 -14v16"/> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| <span class="text-slate-600 dark:text-slate-400"><b>React Round Slider</b> Documentation</span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="flex items-center"> | ||
|
|
||
| <!-- themes --> | ||
| <button type="button" id="move-to-dark-mode-btn" class="hidden"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="M14.828 14.828a4 4 0 1 0-5.656-5.656 4 4 0 0 0 5.656 5.656zm-8.485 2.829-1.414 1.414M6.343 6.343 4.929 4.929m12.728 1.414 1.414-1.414m-1.414 12.728 1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2"/> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <button type="button" id="move-to-light-mode-btn" class="hidden"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path fill="currentColor" stroke="none" d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006-.06-.002z"/> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <a href="https://github.com/mzusin/react-round-slider" class="mx-3 block text-slate-400 hover:text-slate-500"><span class="sr-only">React Round Slider on GitHub</span><svg viewBox="0 0 16 16" class="w-5 h-5" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a> | ||
|
|
||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="container mx-auto flex-1 overflow-hidden"> | ||
| <div class="flex h-full"> | ||
|
|
||
| <div class="side-menu border-r dark:border-slate-900 shadow-md overflow-y-auto h-full max-w-full min-w-270 md:w-350 absolute md:static md:left-auto bg-white dark:bg-slate-900 z-50" id="side-menu"> | ||
| <div class="px-6 pb-4 flex flex-col relative"> | ||
|
|
||
| <!-- mobile menu close --> | ||
| <button type="button" class="pointer absolute right-4 top-2 md:hidden" id="mobile-menu-close-btn"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="M18 6 6 18M6 6l12 12"/> | ||
| </svg> | ||
| </button> | ||
|
|
||
| <div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="1-main"> | ||
| Getting Started | ||
| <svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="m7 7 5 5-5 5m6-10 5 5-5 5"/> | ||
| </svg> | ||
|
|
||
| </div><div class="flex flex-col" data-links><a href="/pages/basic-usage.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Basic Usage</a><a href="/pages/pointer-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Pointer Settings</a><a href="/pages/path-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Path Settings</a><a href="/pages/data-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-sky-500">Data Settings</a><a href="/pages/values-list.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Values List</a></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800"> | ||
| <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 class="text-3xl mb-8">Data Settings</h1> | ||
| <p class="mb-4">The interface below represents the data configuration options for a round slider component.</p> | ||
| <br/> | ||
| <div id="data-options-slider"></div> | ||
| <br/> | ||
| <br/> | ||
| <pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">ISettings</span> { | ||
| <span class="hljs-comment">// ... other settings ...</span> | ||
|
|
||
| <span class="hljs-comment">// A number or string representing the minimum value allowed on the slider.</span> | ||
| <span class="hljs-comment">// This sets the lower limit for the slider's range. </span> | ||
| <span class="hljs-comment">// The default value = 0.</span> | ||
| min?: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span>; | ||
|
|
||
| <span class="hljs-comment">// A number or string representing the maximum value allowed on the slider.</span> | ||
| <span class="hljs-comment">// This sets the upper limit for the slider's range. </span> | ||
| <span class="hljs-comment">// The default value = 100.</span> | ||
| max?: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span>; | ||
|
|
||
| <span class="hljs-comment">// A number specifying the increment or decrement value </span> | ||
| <span class="hljs-comment">// when moving the slider handle. </span> | ||
| <span class="hljs-comment">// This determines the granularity of the slider's values. </span> | ||
| <span class="hljs-comment">// The default value = 1.</span> | ||
| step?: <span class="hljs-built_in">number</span>; | ||
|
|
||
| <span class="hljs-comment">// A number specifying the increment or decrement value </span> | ||
| <span class="hljs-comment">// when using arrow keys to move the slider handle.</span> | ||
| <span class="hljs-comment">// The default value = 1.</span> | ||
| arrowStep?: <span class="hljs-built_in">number</span>; | ||
|
|
||
| <span class="hljs-comment">// An array of strings or numbers representing custom data </span> | ||
| <span class="hljs-comment">// associated with each position on the slider. </span> | ||
| <span class="hljs-comment">// The default value = undefined.</span> | ||
| data?: (<span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span>)[]; | ||
|
|
||
| <span class="hljs-comment">// A number specifying the number of decimal places </span> | ||
| <span class="hljs-comment">// to round the slider's values. </span> | ||
| <span class="hljs-comment">// This determines the precision of the slider's displayed values. </span> | ||
| <span class="hljs-comment">// The default value = 0.</span> | ||
| round?: <span class="hljs-built_in">number</span>; | ||
|
|
||
| <span class="hljs-comment">// ... other settings ...</span> | ||
| }</code></pre> | ||
| <p class="mb-4">For example:</p> | ||
| <pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-keyword">const</span> <span class="hljs-title function_">Component</span> = (<span class="hljs-params"></span>) => { | ||
|
|
||
| <span class="hljs-keyword">const</span> [ pointers, setPointers ] = useState<<span class="hljs-title class_">ISettingsPointer</span>[]>([ | ||
| { | ||
| <span class="hljs-attr">value</span>: -<span class="hljs-number">100</span> | ||
| } | ||
| ]); | ||
|
|
||
| <span class="hljs-keyword">return</span> ( | ||
| <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">RoundSlider</span> | ||
| <span class="hljs-attr">min</span>=<span class="hljs-string">{</span> <span class="hljs-attr">-100</span> } | ||
| <span class="hljs-attr">max</span>=<span class="hljs-string">{</span> <span class="hljs-attr">100</span> } | ||
| <span class="hljs-attr">step</span>=<span class="hljs-string">{</span> <span class="hljs-attr">0.01</span> } | ||
| <span class="hljs-attr">arrowStep</span>=<span class="hljs-string">{</span> <span class="hljs-attr">1</span> } | ||
| <span class="hljs-attr">round</span>=<span class="hljs-string">{</span> <span class="hljs-attr">2</span> } | ||
|
|
||
| <span class="hljs-attr">pointers</span>=<span class="hljs-string">{</span> <span class="hljs-attr">pointers</span> } | ||
| <span class="hljs-attr">onChange</span>=<span class="hljs-string">{</span> <span class="hljs-attr">setPointers</span> } | ||
| /></span></span> | ||
| ); | ||
| };</code></pre> | ||
| </div> | ||
|
|
||
| <div class="w-800 max-w-full mx-auto grid lg:grid-cols-2 gap-8 items-center text-slate-500"> | ||
| <div class="flex justify-between items-start border border-slate-200 rounded p-4"> | ||
| <a href="/pages/path-settings.html" title="" class="mr-4 hover:text-blue-500"> | ||
| <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="M5 12h14M5 12l6 6m-6-6 6-6"/> | ||
| </svg> | ||
| </a> | ||
| <div class="flex flex-col items-end justify-center"> | ||
| <div class="mb-2 text-sm text-slate-300">Previous</div> | ||
| <a href="/pages/path-settings.html" title="" class="hover:text-blue-500">Path Settings</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="flex justify-between items-start border border-slate-200 rounded p-4"> | ||
|
|
||
| <div class="flex flex-col justify-center"> | ||
| <div class="mb-2 text-sm text-slate-300">Next</div> | ||
| <a href="/pages/values-list.html" title="" class="hover:text-blue-500">Values List</a> | ||
| </div> | ||
|
|
||
| <a href="/pages/values-list.html" title="" class="mr-4 hover:text-blue-500"> | ||
| <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"> | ||
| <path stroke="none" d="M0 0h24v24H0z"/> | ||
| <path d="M5 12h14m-6 6 6-6m-6-6 6 6"/> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!--<footer class="py-2 px-4 border-t"> | ||
| <div class="container mx-auto"> | ||
| Footer | ||
| </div> | ||
| </footer>--> | ||
|
|
||
| <script src="/js/index.1689669442327.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.