Finish update 0.2.
This commit is contained in:
MaxOvs19
parent
93fec79c1e
commit
682332645e
@ -47,4 +47,9 @@ Tested in JS and React. Errors in work in React applications are revealed.
|
||||
- Documentation navigation update.
|
||||
- Added icon for example page and documentation.
|
||||
|
||||
##### 00.02.2023 - update 0.2.34
|
||||
### 20.02.2023 - update 0.2.4
|
||||
|
||||
- Added ability to create custom themes.
|
||||
- Added style builder on homepage.
|
||||
- Fixed documentation.
|
||||
- Added a block describing how to create your own themes.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.2.34
|
||||
## version ~ 0.2.4
|
||||
|
||||
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.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.2.34
|
||||
## version ~ 0.2.4
|
||||
|
||||
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
|
||||
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</a>
|
||||
|
||||
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
|
||||
<h2>version ~ 0.2.34</h2>
|
||||
<h2>version ~ 0.2.4</h2>
|
||||
</a>
|
||||
<p>
|
||||
This component allows you to create a custom select. It offers more flexible
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
@ -161,6 +162,7 @@
|
||||
|
||||
.description-theme {
|
||||
color: white;
|
||||
|
||||
.col {
|
||||
width: 54%;
|
||||
}
|
||||
@ -258,3 +260,11 @@ pre {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
<li><a href="/docs/index.html">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="version">v. 0.2.4</p>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
@ -193,7 +194,7 @@
|
||||
</div>
|
||||
|
||||
<div class="example-select description-theme">
|
||||
<h1 class="example-select_title">Setting up and adding a theme.</h1>
|
||||
<h1 class="example-select_title">Setting up and adding a theme</h1>
|
||||
|
||||
<div class="layout-select">
|
||||
<div class="row">
|
||||
@ -322,33 +323,38 @@
|
||||
|
||||
<div class="example-select">
|
||||
<h1 class="example-select_title">Select constructor</h1>
|
||||
<div class="col" style="margin: 20px; color: white">
|
||||
<h5 style="font-size: 18px">Select Style Builder:</h5>
|
||||
<p style="margin-right: 50px; font-size: 17px">
|
||||
This is a constructor for styling a select online without downloading. For it to work,
|
||||
you need to:
|
||||
<ol style="font-size: 15px;">
|
||||
<li>Select a part of the select for customization. </li>
|
||||
<li>Enter styles in the text field in the form "color: red;".</li>
|
||||
<li>Click on the render button.</li>
|
||||
</ol>
|
||||
<div class="row" style="margin: 20px; color: white">
|
||||
<div class="col">
|
||||
<h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
|
||||
<p style="margin-right: 50px; font-size: 17px">
|
||||
This is a constructor for styling a select online without downloading. For it to work,
|
||||
you need to:
|
||||
<ol style="font-size: 15px;">
|
||||
<li class="liList">Select a part of the select for customization. </li>
|
||||
<li class="liList">Enter styles in the text field in the form "color: red;".</li>
|
||||
<li class="liList">Click on the render button.</li>
|
||||
</ol>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="layout-select constructor">
|
||||
<button class="cg-dropdown body"></button>
|
||||
<textarea
|
||||
name="styles"
|
||||
id="styles"
|
||||
cols="30"
|
||||
rows="5"
|
||||
class="textareaStyle"
|
||||
placeholder="Enter CSS properties"
|
||||
disabled="disabled"
|
||||
></textarea>
|
||||
<button type="button" class="check-code render">Render</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="layout-select constructor">
|
||||
<button class="cg-dropdown body"></button>
|
||||
<textarea
|
||||
name="styles"
|
||||
id="styles"
|
||||
cols="30"
|
||||
rows="5"
|
||||
class="textareaStyle"
|
||||
placeholder="Enter CSS properties"
|
||||
disabled="disabled"
|
||||
></textarea>
|
||||
<button type="button" class="check-code render">Render</button>
|
||||
</div>
|
||||
<div class="layout-select constructor">
|
||||
<div class="layout-select constructor" style="margin-bottom: 60px;">
|
||||
<button class="cg-dropdown select"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,6 +52,7 @@ renderBtn.addEventListener('click', () => {
|
||||
const select = new CGSelect({
|
||||
selector: '.select',
|
||||
placeholder: 'Choose a car',
|
||||
label: 'Exemple select',
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
.textareaStyle {
|
||||
resize: none;
|
||||
border-radius: 5px;
|
||||
margin-left: 53px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.constructor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.liList {
|
||||
margin-bottom: 5px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.2.34",
|
||||
"version": "0.2.4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cg-select",
|
||||
"version": "0.2.34",
|
||||
"version": "0.2.4",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@parcel/optimizer-css": "^2.8.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.2.34",
|
||||
"version": "0.2.4",
|
||||
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
|
||||
"author": {
|
||||
"name": "CraftGroup",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user