Added img

This commit is contained in:
MaxOvs19 2023-02-23 19:19:36 +03:00
parent a2a6b44e41
commit f603d007fc
7 changed files with 169 additions and 56 deletions

View File

@ -8,18 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="assets/highlight.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> <script async src="assets/search.js" id="search-script"></script>
</head> </head>
<body> <body>
<script> <script>
document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os'; document.documentElement.dataset.theme =
localStorage.getItem("tsd-theme") || "os";
</script> </script>
<header class="tsd-page-toolbar"> <header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container"> <div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base="."> <div class="table-cell" id="tsd-search" data-base=".">
<div class="field"> <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"> ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path <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" 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> <li class="state failure">The search index is not available</li>
</ul> </ul>
<a href="index.html" class="title">Home</a> <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>
<div class="table-cell" id="tsd-widgets"> <div class="table-cell" id="tsd-widgets">
<a <a
@ -44,9 +53,27 @@
data-toggle="menu" data-toggle="menu"
aria-label="Menu" aria-label="Menu"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none"> ><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
<rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect> x="1"
<rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg 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> ></a>
</div> </div>
</div> </div>
@ -57,17 +84,25 @@
<h2>cg-select</h2> <h2>cg-select</h2>
</div> </div>
<div class="tsd-panel tsd-typography"> <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> <h1>CG-SELECT</h1>
</a> </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> <h2>version ~ 0.2.4</h2>
</a> </a>
<p> <p>
This component allows you to create a custom select. It offers more flexible This component allows you to create a custom select. It offers more
customization and use of select. Customization, multi-selection and live search by flexible customization and use of select. Customization,
elements are available. multi-selection and live search by elements are available.
</p> </p>
<a <a
@ -82,19 +117,28 @@
<li>List with select elements.</li> <li>List with select elements.</li>
<li>Placeholder.</li> <li>Placeholder.</li>
<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>
<li>Label of the element (if it was specified).</li> <li>Label of the element (if it was specified).</li>
<li>Switch themes from dark to light.</li> <li>Switch themes from dark to light.</li>
</ul> </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> <h2>Installation</h2>
</a> </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> <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> </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> <h2>Usage</h2>
</a> </a>
@ -112,7 +156,10 @@
<pre><code><span class="hl-1">&lt;</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">&quot;cg-dropdown&quot;</span><span class="hl-1">&gt;&lt;/</span><span class="hl-3">button</span><span class="hl-1">&gt;</span> <pre><code><span class="hl-1">&lt;</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">&quot;cg-dropdown&quot;</span><span class="hl-1">&gt;&lt;/</span><span class="hl-3">button</span><span class="hl-1">&gt;</span>
</code></pre> </code></pre>
<ol start="3"> <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> </ol>
<pre><code><span class="hl-1">&lt;</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">&quot;cg-dropdown cg-dropdown_categories&quot;</span><span class="hl-1">&gt;&lt;/</span><span class="hl-3">button</span><span class="hl-1">&gt;</span> <pre><code><span class="hl-1">&lt;</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">&quot;cg-dropdown cg-dropdown_categories&quot;</span><span class="hl-1">&gt;&lt;/</span><span class="hl-3">button</span><span class="hl-1">&gt;</span>
</code></pre> </code></pre>
@ -127,8 +174,8 @@
style="color: inherit; text-decoration: none" style="color: inherit; text-decoration: none"
> >
<h4> <h4>
All options for creating and managing are in the documentation, section &quot;CGSelect All options for creating and managing are in the documentation,
class constructor&quot;. section &quot;CGSelect class constructor&quot;.
</h4> </h4>
</a> </a>
@ -151,37 +198,56 @@
</a> </a>
<p> <p>
Same working example -- 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>
<p> <p>
<img src="../src/images/DefaultSelect.png" alt="image" /> <img src="../src/img/DefaultSelect.png" alt="image" />
<img src="../src/images/MultiSelect.png" alt="image" /> <img src="../src/img/MultiSelect.png" alt="image" />
<img src="../src/images/WhiteTheme.png" alt="image" /> <img src="../src/img/WhiteTheme.png" alt="image" />
<img src="../src/images/Categories.png" alt="image" /> <img src="../src/img/Categories.png" alt="image" />
</p> </p>
<p> <p>
Built-in themes are also available: dark, white. To apply them, specify the theme Built-in themes are also available: dark, white. To apply them,
attribute in the select settings and pass one of the values into it dark or white. specify the theme attribute in the select settings and pass one of
the values into it dark or white.
</p> </p>
<p> <p>
All documentation on CG-SELECT is located in the folder of the same name. The All documentation on CG-SELECT is located in the folder of the same
documentation describes all methods and variables, there are also examples of passing name. The documentation describes all methods and variables, there
settings to select. You can also open it on the page with an example, or follow the link are also examples of passing settings to select. You can also open
below. it on the page with an example, or follow the link below.
</p> </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> <h2>Contributing</h2>
</a> </a>
<ol> <ol>
<li>Fork it!</li> <li>Fork it!</li>
<li>Create your feature branch: <code>git checkout -b my-new-feature</code></li> <li>
<li>Commit your changes: <code>git commit -am &#39;Add some feature&#39;</code></li> Create your feature branch:
<li>Push to the branch: <code>git push origin my-new-feature</code></li> <code>git checkout -b my-new-feature</code>
</li>
<li>
Commit your changes:
<code>git commit -am &#39;Add some feature&#39;</code>
</li>
<li>
Push to the branch: <code>git push origin my-new-feature</code>
</li>
<li>Submit a pull request :D</li> <li>Submit a pull request :D</li>
</ol> </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> <h2>Compatibility</h2>
</a> </a>
<table> <table>
@ -198,22 +264,24 @@
<tr> <tr>
<td>CG-SELECT</td> <td>CG-SELECT</td>
<td align="center"> <td align="center">
<img src="../src/images/yes.png" alt="image" /> <img src="../src/img/yes.png" alt="image" />
</td> </td>
<td align="center"> <td align="center">
<img src="../src/images/yes.png" alt="image" /> <img src="../src/img/yes.png" alt="image" />
<img src="../src/images/no.png" alt="image" /> <img src="../src/img/no.png" alt="image" />
</td> </td>
<td align="center"> <td align="center">
<img src="../src/images/no.png" alt="image" /> <img src="../src/img/no.png" alt="image" />
</td> </td>
<td align="center"> <td align="center">
<img src="../src/images/no.png" alt="image" /> <img src="../src/img/no.png" alt="image" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Comment</td> <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"> <td align="center">
Works only with a crutch in the form <code>setTimeout()</code> Works only with a crutch in the form <code>setTimeout()</code>
</td> </td>
@ -223,7 +291,11 @@
</tbody> </tbody>
</table> </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> <h2>History</h2>
</a> </a>
<p>16.12.2022 - release version 0.1.0!</p> <p>16.12.2022 - release version 0.1.0!</p>
@ -251,7 +323,11 @@
<ul id="tsd-filter-options"> <ul id="tsd-filter-options">
<li class="tsd-filter-item"> <li class="tsd-filter-item">
<label class="tsd-filter-input" <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" width="32"
height="32" height="32"
viewBox="0 0 32 32" viewBox="0 0 32 32"
@ -318,38 +394,72 @@
> >
</li> </li>
<li class="tsd-kind-module"> <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>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li
style="
<li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li> border-bottom: 1px solid white;
<li class="tsd-kind-module"> width: 80%;
<a href="modules/components_utils_urils_interface.html">Utils.interface</a> margin-left: 25px;
</li> "
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> ></li>
<li class="tsd-kind-module"> <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 >Create-<wbr />element</a
> >
</li> </li>
<li class="tsd-kind-module"> <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 >Create-<wbr />element.interface</a
> >
</li> </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"> <li class="tsd-kind-module">
<a href="modules/components_theme_theme.html">Theme</a> <a href="modules/components_theme_theme.html">Theme</a>
</li> </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"> <li class="tsd-kind-module">
<a href="modules/language_language.html">language</a> <a href="modules/language_language.html">language</a>
</li> </li>
<li class="tsd-kind-module"> <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> </li>
</ul> </ul>
</li> </li>
@ -360,7 +470,10 @@
</div> </div>
</div> </div>
<div class="container tsd-generator"> <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>
<div class="overlay"></div> <div class="overlay"></div>
<script src="assets/main.js"></script> <script src="assets/main.js"></script>

BIN
src/img/Categories.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/img/DefaultSelect.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/MultiSelect.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/WhiteTheme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/no.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/yes.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB