apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Constructor in working. Added description in style builder

Browse Source
This commit is contained in:
MaxOvs19 2023-02-17 19:56:41 +03:00
parent b206334a8b
commit 93fec79c1e
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/index.html
View File

@ -322,6 +322,19 @@
<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>
</p>
</div>
<div class="layout-select constructor">
<button class="cg-dropdown body"></button>
<textarea
@ -334,7 +347,6 @@
disabled="disabled"
></textarea>
<button type="button" class="check-code render">Render</button>
<button type="button" class="check-code saveStyle">Save style</button>
</div>
<div class="layout-select constructor">
<button class="cg-dropdown select"></button>

9
example/src/constructor/constructor.js
View File

@ -3,19 +3,17 @@ import { CGSelect } from '../../../src/cg-select';
const body = new CGSelect({
selector: '.body',
placeholder: 'Select element to style',
items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'],
items: ['head', 'list', 'placeholder', 'caret', 'search'],
});
let head = '';
let list = '';
let placeholder = '';
let caret = '';
let chips = '';
let valueSelect = '';
const textarea = document.querySelector('#styles');
const renderBtn = document.querySelector('.render');
const saveStyleBtn = document.querySelector('.saveStyle');
body.on('select', (e, value) => {
valueSelect = value;
@ -43,9 +41,6 @@ function getValueSelect(value) {
case 'search':
search = textarea.value;
break;
case 'chips':
chips = textarea.value;
break;
default:
break;
@ -69,6 +64,8 @@ renderBtn.addEventListener('click', () => {
'Ferari',
],
searchMode: true,
multiselect: true,
multiselectTag: true,
});
const drop = document.querySelector('.select');