Added img
This commit is contained in:
MaxOvs19
parent
a2a6b44e41
commit
f603d007fc
225
docs/index.html
225
docs/index.html
@ -8,18 +8,25 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="assets/style.css" />
|
||||
<link rel="stylesheet" href="assets/highlight.css" />
|
||||
<link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="../src/img/logoCG2.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<script async src="assets/search.js" id="search-script"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
|
||||
document.documentElement.dataset.theme =
|
||||
localStorage.getItem("tsd-theme") || "os";
|
||||
</script>
|
||||
<header class="tsd-page-toolbar">
|
||||
<div class="tsd-toolbar-contents container">
|
||||
<div class="table-cell" id="tsd-search" data-base=".">
|
||||
<div class="field">
|
||||
<label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
|
||||
<label
|
||||
for="tsd-search-field"
|
||||
class="tsd-widget tsd-toolbar-icon search no-caption"
|
||||
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
|
||||
@ -35,7 +42,9 @@
|
||||
<li class="state failure">The search index is not available</li>
|
||||
</ul>
|
||||
<a href="index.html" class="title">Home</a>
|
||||
<a href="/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
|
||||
<a href="/index.html" class="title" style="margin-left: 15px"
|
||||
>Go to CGSelect</a
|
||||
>
|
||||
</div>
|
||||
<div class="table-cell" id="tsd-widgets">
|
||||
<a
|
||||
@ -44,9 +53,27 @@
|
||||
data-toggle="menu"
|
||||
aria-label="Menu"
|
||||
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
|
||||
<rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
|
||||
<rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
|
||||
<rect
|
||||
x="1"
|
||||
y="3"
|
||||
width="14"
|
||||
height="2"
|
||||
fill="var(--color-text)"
|
||||
></rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="7"
|
||||
width="14"
|
||||
height="2"
|
||||
fill="var(--color-text)"
|
||||
></rect>
|
||||
<rect
|
||||
x="1"
|
||||
y="11"
|
||||
width="14"
|
||||
height="2"
|
||||
fill="var(--color-text)"
|
||||
></rect></svg
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,17 +84,25 @@
|
||||
<h2>cg-select</h2>
|
||||
</div>
|
||||
<div class="tsd-panel tsd-typography">
|
||||
<a href="#cg-select" id="cg-select" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#cg-select"
|
||||
id="cg-select"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h1>CG-SELECT</h1>
|
||||
</a>
|
||||
|
||||
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#version--0231"
|
||||
id="version--0231"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>version ~ 0.2.4</h2>
|
||||
</a>
|
||||
<p>
|
||||
This component allows you to create a custom select. It offers more flexible
|
||||
customization and use of select. Customization, multi-selection and live search by
|
||||
elements are available.
|
||||
This component allows you to create a custom select. It offers more
|
||||
flexible customization and use of select. Customization,
|
||||
multi-selection and live search by elements are available.
|
||||
</p>
|
||||
|
||||
<a
|
||||
@ -82,19 +117,28 @@
|
||||
<li>List with select elements.</li>
|
||||
<li>Placeholder.</li>
|
||||
<li>
|
||||
In the multiselect mode, customization of chips (selected elements) is available.
|
||||
In the multiselect mode, customization of chips (selected
|
||||
elements) is available.
|
||||
</li>
|
||||
<li>Label of the element (if it was specified).</li>
|
||||
<li>Switch themes from dark to light.</li>
|
||||
</ul>
|
||||
|
||||
<a href="#installation" id="installation" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#installation"
|
||||
id="installation"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>Installation</h2>
|
||||
</a>
|
||||
<pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">i</span><span class="hl-1"> </span><span class="hl-0">cg</span><span class="hl-1">-</span><span class="hl-0">select</span>
|
||||
</code></pre>
|
||||
|
||||
<a href="#usage" id="usage" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#usage"
|
||||
id="usage"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>Usage</h2>
|
||||
</a>
|
||||
|
||||
@ -112,7 +156,10 @@
|
||||
<pre><code><span class="hl-1"><</span><span class="hl-0">button</span><span class="hl-1"> </span><span class="hl-0">class</span><span class="hl-1">=</span><span class="hl-2">"cg-dropdown"</span><span class="hl-1">></</span><span class="hl-3">button</span><span class="hl-1">></span>
|
||||
</code></pre>
|
||||
<ol start="3">
|
||||
<li>Give it a <strong>unique class</strong>, e.g. (cg-dropdown_categories).</li>
|
||||
<li>
|
||||
Give it a <strong>unique class</strong>, e.g.
|
||||
(cg-dropdown_categories).
|
||||
</li>
|
||||
</ol>
|
||||
<pre><code><span class="hl-1"><</span><span class="hl-0">button</span><span class="hl-1"> </span><span class="hl-0">class</span><span class="hl-1">=</span><span class="hl-2">"cg-dropdown cg-dropdown_categories"</span><span class="hl-1">></</span><span class="hl-3">button</span><span class="hl-1">></span>
|
||||
</code></pre>
|
||||
@ -127,8 +174,8 @@
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h4>
|
||||
All options for creating and managing are in the documentation, section "CGSelect
|
||||
class constructor".
|
||||
All options for creating and managing are in the documentation,
|
||||
section "CGSelect class constructor".
|
||||
</h4>
|
||||
</a>
|
||||
|
||||
@ -151,37 +198,56 @@
|
||||
</a>
|
||||
<p>
|
||||
Same working example --
|
||||
<a href="https://cg-select.itguild.info/">https://cg-select.itguild.info/</a>
|
||||
<a href="https://cg-select.itguild.info/"
|
||||
>https://cg-select.itguild.info/</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<img src="../src/images/DefaultSelect.png" alt="image" />
|
||||
<img src="../src/images/MultiSelect.png" alt="image" />
|
||||
<img src="../src/images/WhiteTheme.png" alt="image" />
|
||||
<img src="../src/images/Categories.png" alt="image" />
|
||||
<img src="../src/img/DefaultSelect.png" alt="image" />
|
||||
<img src="../src/img/MultiSelect.png" alt="image" />
|
||||
<img src="../src/img/WhiteTheme.png" alt="image" />
|
||||
<img src="../src/img/Categories.png" alt="image" />
|
||||
</p>
|
||||
<p>
|
||||
Built-in themes are also available: dark, white. To apply them, specify the theme
|
||||
attribute in the select settings and pass one of the values into it dark or white.
|
||||
Built-in themes are also available: dark, white. To apply them,
|
||||
specify the theme attribute in the select settings and pass one of
|
||||
the values into it dark or white.
|
||||
</p>
|
||||
<p>
|
||||
All documentation on CG-SELECT is located in the folder of the same name. The
|
||||
documentation describes all methods and variables, there are also examples of passing
|
||||
settings to select. You can also open it on the page with an example, or follow the link
|
||||
below.
|
||||
All documentation on CG-SELECT is located in the folder of the same
|
||||
name. The documentation describes all methods and variables, there
|
||||
are also examples of passing settings to select. You can also open
|
||||
it on the page with an example, or follow the link below.
|
||||
</p>
|
||||
|
||||
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#contributing"
|
||||
id="contributing"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>Contributing</h2>
|
||||
</a>
|
||||
<ol>
|
||||
<li>Fork it!</li>
|
||||
<li>Create your feature branch: <code>git checkout -b my-new-feature</code></li>
|
||||
<li>Commit your changes: <code>git commit -am 'Add some feature'</code></li>
|
||||
<li>Push to the branch: <code>git push origin my-new-feature</code></li>
|
||||
<li>
|
||||
Create your feature branch:
|
||||
<code>git checkout -b my-new-feature</code>
|
||||
</li>
|
||||
<li>
|
||||
Commit your changes:
|
||||
<code>git commit -am 'Add some feature'</code>
|
||||
</li>
|
||||
<li>
|
||||
Push to the branch: <code>git push origin my-new-feature</code>
|
||||
</li>
|
||||
<li>Submit a pull request :D</li>
|
||||
</ol>
|
||||
|
||||
<a href="#compatibility" id="compatibility" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#compatibility"
|
||||
id="compatibility"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>Compatibility</h2>
|
||||
</a>
|
||||
<table>
|
||||
@ -198,22 +264,24 @@
|
||||
<tr>
|
||||
<td>CG-SELECT</td>
|
||||
<td align="center">
|
||||
<img src="../src/images/yes.png" alt="image" />
|
||||
<img src="../src/img/yes.png" alt="image" />
|
||||
</td>
|
||||
<td align="center">
|
||||
<img src="../src/images/yes.png" alt="image" />
|
||||
<img src="../src/images/no.png" alt="image" />
|
||||
<img src="../src/img/yes.png" alt="image" />
|
||||
<img src="../src/img/no.png" alt="image" />
|
||||
</td>
|
||||
<td align="center">
|
||||
<img src="../src/images/no.png" alt="image" />
|
||||
<img src="../src/img/no.png" alt="image" />
|
||||
</td>
|
||||
<td align="center">
|
||||
<img src="../src/images/no.png" alt="image" />
|
||||
<img src="../src/img/no.png" alt="image" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Comment</td>
|
||||
<td align="center">Tested in Js applications and it worksуспешно.</td>
|
||||
<td align="center">
|
||||
Tested in Js applications and it worksуспешно.
|
||||
</td>
|
||||
<td align="center">
|
||||
Works only with a crutch in the form <code>setTimeout()</code>
|
||||
</td>
|
||||
@ -223,7 +291,11 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#history" id="history" style="color: inherit; text-decoration: none">
|
||||
<a
|
||||
href="#history"
|
||||
id="history"
|
||||
style="color: inherit; text-decoration: none"
|
||||
>
|
||||
<h2>History</h2>
|
||||
</a>
|
||||
<p>16.12.2022 - release version 0.1.0!</p>
|
||||
@ -251,7 +323,11 @@
|
||||
<ul id="tsd-filter-options">
|
||||
<li class="tsd-filter-item">
|
||||
<label class="tsd-filter-input"
|
||||
><input type="checkbox" id="tsd-filter-private" name="private" /><svg
|
||||
><input
|
||||
type="checkbox"
|
||||
id="tsd-filter-private"
|
||||
name="private"
|
||||
/><svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
@ -318,38 +394,72 @@
|
||||
>
|
||||
</li>
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/interfaces_items_interface.html">Items.interface</a>
|
||||
<a href="modules/interfaces_items_interface.html"
|
||||
>Items.interface</a
|
||||
>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
|
||||
|
||||
<li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li>
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/components_utils_urils_interface.html">Utils.interface</a>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
|
||||
<li
|
||||
style="
|
||||
border-bottom: 1px solid white;
|
||||
width: 80%;
|
||||
margin-left: 25px;
|
||||
"
|
||||
></li>
|
||||
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/components_create_element_create_element.html"
|
||||
<a href="modules/Utils.html">Utils</a>
|
||||
</li>
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/components_utils_urils_interface.html"
|
||||
>Utils.interface</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
style="
|
||||
border-bottom: 1px solid white;
|
||||
width: 80%;
|
||||
margin-left: 25px;
|
||||
"
|
||||
></li>
|
||||
|
||||
<li class="tsd-kind-module">
|
||||
<a
|
||||
href="modules/components_create_element_create_element.html"
|
||||
>Create-<wbr />element</a
|
||||
>
|
||||
</li>
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/components_create_element_create_element_interface.html"
|
||||
<a
|
||||
href="modules/components_create_element_create_element_interface.html"
|
||||
>Create-<wbr />element.interface</a
|
||||
>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
|
||||
<li
|
||||
style="
|
||||
border-bottom: 1px solid white;
|
||||
width: 80%;
|
||||
margin-left: 25px;
|
||||
"
|
||||
></li>
|
||||
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/components_theme_theme.html">Theme</a>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
|
||||
<li
|
||||
style="
|
||||
border-bottom: 1px solid white;
|
||||
width: 80%;
|
||||
margin-left: 25px;
|
||||
"
|
||||
></li>
|
||||
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/language_language.html">language</a>
|
||||
</li>
|
||||
<li class="tsd-kind-module">
|
||||
<a href="modules/interfaces_language_interface.html">Language.interface</a>
|
||||
<a href="modules/interfaces_language_interface.html"
|
||||
>Language.interface</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -360,7 +470,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="container tsd-generator">
|
||||
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
||||
<p>
|
||||
Generated using
|
||||
<a href="https://typedoc.org/" target="_blank">TypeDoc</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
<script src="assets/main.js"></script>
|
||||
|
||||
BIN
src/img/Categories.png
Normal file
BIN
src/img/Categories.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/img/DefaultSelect.png
Normal file
BIN
src/img/DefaultSelect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/img/MultiSelect.png
Normal file
BIN
src/img/MultiSelect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/img/WhiteTheme.png
Normal file
BIN
src/img/WhiteTheme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/img/no.png
Normal file
BIN
src/img/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/img/yes.png
Normal file
BIN
src/img/yes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue
Block a user