- 
-
- CG-SELECT
-
- - -
v. 0.2.4
-This component allows you to create a custom select. It offers more flexible diff --git a/example/example.scss b/example/example.scss deleted file mode 100644 index a4e07c5..0000000 --- a/example/example.scss +++ /dev/null @@ -1,270 +0,0 @@ -@import '/src/main.scss'; -@import './src/constructor/constructor.scss'; - -* { - font-size: 14px; - font-family: Arial, Helvetica, sans-serif; - text-align: justify; -} - -.testClass { - background-color: #8297ff; - color: white; -} - -.listTest { - background-color: #8297ff; - border: 1px solid black; - color: white; -} - -.body-example { - background: #000000c4; -} - -.container { - margin: 0 auto; - width: 900px; - - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; - - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.header { - position: relative; - width: 100%; - border-radius: 5px; - display: flex; - align-items: center; - flex-direction: column; - background-color: #2a2f3b; - margin-bottom: 8px; - - h1 { - font-size: 57px; - color: white; - font-family: 'Times New Roman', Times, serif; - margin: 40px 0 12px 0; - } - - &__logoBox { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - } - - &__logo { - width: 13%; - height: 16%; - border: 1px solid #525252; - border-radius: 50%; - - margin: 22px 0 0 29px; - } - - .navlist { - display: flex; - justify-content: space-around; - margin: 15px 0 30px 0; - padding: 0; - width: 230px; - - li { - display: inline; - list-style: none; - text-decoration: none; - - a { - color: white; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - } -} - -.content { - margin-top: 15px; - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; -} - -.example-select { - width: 100%; - background-color: #5c5c5c; - border-radius: 5px; - margin: 15px 0 0 0; - - &_title { - height: 45px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - color: white; - padding: 20px 0 0 40px; - margin: 0 0 30px 0; - background-color: #2a2f3b; - font-size: 20px; - } - - &_submit { - text-align: center; - width: 200px; - height: 35px; - border-radius: 10px; - border: none; - margin-top: 20px; - margin: 20px 15px; - cursor: pointer; - transition: 1s; - -webkit-transition: 1s; - -moz-transition: 1s; - -ms-transition: 1s; - -o-transition: 1s; - - &:hover { - background-color: #d7d7d7; - transition: 1s; - -webkit-transition: 1s; - -moz-transition: 1s; - -ms-transition: 1s; - -o-transition: 1s; - } - } - - .layout-select { - margin: 15px; - } -} - -.row { - display: flex; - justify-content: space-around; -} - -.description-theme { - color: white; - - .col { - width: 54%; - } - - img { - border-radius: 15px; - } - - .createTheme { - display: flex; - flex-direction: column; - } - - h5 { - font-size: 18px; - margin: 0; - } - h6 { - font-size: 17px; - margin: 0; - } - p { - font-size: 16px; - } -} - -code { - display: none; -} - -pre { - background: #1e1e1e; - margin: 15px; - padding: 15px; - color: #88d0f7; - border-radius: 15px; - font-size: 16px; - line-height: 20px; -} - -.code { - &__class, - &__var, - &__string, - &__keyword { - font-size: 16px; - line-height: 20px; - } - &__class { - color: #4ec9b0; - } - - &__var { - color: #34a7ff; - } - - &__string { - color: #ce9178; - } - - &__keyword { - color: #5090ca; - } -} - -.check-code { - text-align: center; - width: 200px; - height: 35px; - cursor: pointer; - border: none; - border-radius: 10px; - margin: 20px 15px; - transition: all 1s; -} - -.active { - display: block; -} - -@media (max-width: 576px) { - .container { - width: 95%; - } - - .header { - margin-top: 15px; - h1 { - font-size: 32px; - } - } - - .example-select_title { - font-size: 14px; - height: 40px; - } -} - -.version { - position: absolute; - color: white; - font-size: 10px; - right: 20px; - bottom: 0px; -} diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 8863a25..0000000 --- a/example/index.html +++ /dev/null @@ -1,530 +0,0 @@ - - -
- - - - - - - - - -
- v. 0.2.4
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_three',
- placeholder: 'URL',
- url: 'https://jsonplaceholder.typicode.com/users',
- searchMode: true,
- darkTheme: false,
- language: 'ru',
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- },
- });
-
-
- - To change the theme of the select, you need to specify this parameter in the select - settings. The default theme is the classic theme, you can choose a white or dark - theme. -
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_one',
- placeholder: 'Choose a car',
- lable: 'EXAMPLE',
- items: [
- ...
- ],
- theme: 'dark / white'
- });
-
-
- - To create your own theme, you need to create an object with the following fields. - In these fields you need to insert the previously created css class. After - creating the object, just pass it to the select settings. -
-
-
- interface CustomTheme {
- name: 'string',
- styles: {
- head?: 'string',
- list?: 'testClass', ,
- placeholder?: 'string', ,
- caret?: 'string', ,
- search?: 'string', ,
- chips?: 'string', ,
- lable?: 'string', ,
- },
- });
-
-
-
-
- const newTheme = {
- name: 'test',
- styles: {
- head: 'headTestClass',
- list: 'listTestClass', ,
- placeholder: 'placeholderTestClass', ,
- caret: 'caretTestClass', ,
- search: 'searchTestClass', ,
- chips: 'chipsTestClass', ,
- lable: 'lableTestClass', ,
- },
- });
-
-
-
-
-
- const newCustomTheme: CustomTheme = {
- name: 'test',
- styles: {
- head: 'headTestClass',
- list: 'listTestClass', ,
- placeholder: 'placeholderTestClass', ,
- caret: 'caretTestClass', ,
- search: 'searchTestClass', ,
- chips: 'chipsTestClass', ,
- lable: 'lableTestClass', ,
- },
- });
-
-
-
-
- .headTestClass {
- background-color: #8297ff;
- color: white;
- }
-
- .listTestClass {
- background-color: #8297ff;
- border: 1px solid black;
- color: white;
- }
-
-
-
- - See an example of a select on - codesandbox.io -
-- This is a constructor for styling a select online without downloading. For it to work, - you need to: -
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_categories',
- placeholder: 'Выберите регион',
- searchMode: true,
- items: [
- {
- category: 'Russia',
- categoryItems: [
- {
- id: '28qwds',
- title: 'Москва',
- value: 0,
- },
- 'Ростов-на-дону',
- 'Саратов',
- 'Волгоград',
- 'Донецк',
- ],
- },
- {
- category: 'USA',
- categoryItems: [
- 'Alabama',
- 'Texas',
- 'Colorado',
- 'Klirens',
- 'Los-Angeles'],
- },
- {
- category: 'France',
- categoryItems: ['Paris'],
- },
- ],
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- placeholder: {
- maxWidth: '500px ',
- },
- },
- multiselect: true,
- multiselectTag: true,
- });
-
-
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_usedBtn',
- placeholder: 'Choose a car',
- searchMode: true,
- items: [
- 'BMW',
- {
- id: '213sade',
- title: 'Opel',
- value: 1,
- },
- 'Mersedes',
- 'MAN',
- 'max',
- ],
- styles: {
- head: {
- width: '830px',
- color: 'black',
- backgroundColor: 'rgb(176 223 167)',
- },
- list: {
- width: '824px',
- color: 'black',
- backgroundColor: 'rgb(176 223 167)',
- },
- caret: {
- borderTop: '6px solid black',
- },
- search: {
- backgroundColor: '#d7ffff',
- borderRadius: '5px',
- borderBottom: 'none',
- width: '95%',
- color: 'black',
- },
- },
- multiselect: true,
- });
-
-
-
-
- const dropdown = new CGSelect({
- selector: '.cg-dropdown_checkboxDisable',
- placeholder: 'Choose a car',
- searchMode: true,
- items: [
- 'BMW',
- {
- id: '213sade',
- title: 'Opel',
- value: 1,
- },
- 'Mersedes',
- 'MAN',
- 'Ferari',
- ],
- styles: {
- head: {
- width: '830px',
- },
- list: {
- width: '824px',
- },
- placeholder: {
- maxWidth: '500px ',
- },
- },
- multiselect: true,
- });
-
-
-