Constructor in working. Added description in style builder
This commit is contained in:
parent
b206334a8b
commit
93fec79c1e
@ -322,6 +322,19 @@
|
|||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h1 class="example-select_title">Select constructor</h1>
|
<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">
|
<div class="layout-select constructor">
|
||||||
<button class="cg-dropdown body"></button>
|
<button class="cg-dropdown body"></button>
|
||||||
<textarea
|
<textarea
|
||||||
@ -334,7 +347,6 @@
|
|||||||
disabled="disabled"
|
disabled="disabled"
|
||||||
></textarea>
|
></textarea>
|
||||||
<button type="button" class="check-code render">Render</button>
|
<button type="button" class="check-code render">Render</button>
|
||||||
<button type="button" class="check-code saveStyle">Save style</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-select constructor">
|
<div class="layout-select constructor">
|
||||||
<button class="cg-dropdown select"></button>
|
<button class="cg-dropdown select"></button>
|
||||||
|
@ -3,19 +3,17 @@ import { CGSelect } from '../../../src/cg-select';
|
|||||||
const body = new CGSelect({
|
const body = new CGSelect({
|
||||||
selector: '.body',
|
selector: '.body',
|
||||||
placeholder: 'Select element to style',
|
placeholder: 'Select element to style',
|
||||||
items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'],
|
items: ['head', 'list', 'placeholder', 'caret', 'search'],
|
||||||
});
|
});
|
||||||
|
|
||||||
let head = '';
|
let head = '';
|
||||||
let list = '';
|
let list = '';
|
||||||
let placeholder = '';
|
let placeholder = '';
|
||||||
let caret = '';
|
let caret = '';
|
||||||
let chips = '';
|
|
||||||
let valueSelect = '';
|
let valueSelect = '';
|
||||||
|
|
||||||
const textarea = document.querySelector('#styles');
|
const textarea = document.querySelector('#styles');
|
||||||
const renderBtn = document.querySelector('.render');
|
const renderBtn = document.querySelector('.render');
|
||||||
const saveStyleBtn = document.querySelector('.saveStyle');
|
|
||||||
|
|
||||||
body.on('select', (e, value) => {
|
body.on('select', (e, value) => {
|
||||||
valueSelect = value;
|
valueSelect = value;
|
||||||
@ -43,9 +41,6 @@ function getValueSelect(value) {
|
|||||||
case 'search':
|
case 'search':
|
||||||
search = textarea.value;
|
search = textarea.value;
|
||||||
break;
|
break;
|
||||||
case 'chips':
|
|
||||||
chips = textarea.value;
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
@ -69,6 +64,8 @@ renderBtn.addEventListener('click', () => {
|
|||||||
'Ferari',
|
'Ferari',
|
||||||
],
|
],
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const drop = document.querySelector('.select');
|
const drop = document.querySelector('.select');
|
||||||
|
Loading…
Reference in New Issue
Block a user