CG-SELECT

Default select

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_one', 
                placeholder: 'Choose a car', 
                lable: 'EXAMPLE', 
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Default select with function nativeSelectMode

*Native select appears on mobile resolution. 

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_one', 
                placeholder: 'Choose a car', 
                nativeSelectMode: true,
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Default select with function listDisplayMode

*When using this method, the selection sheet appears as a modal window. 

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_listDisplayMode', 
                placeholder: 'Choose a car', 
                listDisplayMode: true,
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Select with data from URL

            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', 
                },
              },
            });

Setting up and adding a theme.

Default theme:

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'
                  });
Create custom theme:

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', ,
              },
            });
Example:
For JS
For TS
        const newTheme = {
          name: 'test', 
          styles: {
            head:  'testClass', 
            list: 'testClass', ,
            placeholder: 'testClass', ,
            caret: 'testClass', ,
            search: 'testClass', ,
            chips: 'testClass', ,
            lable: 'testClass', ,
          },
        });
              
        const newCustomTheme: CustomTheme  = {
          name: 'test', 
          styles: {
            head:  'testClass', 
            list: 'testClass', ,
            placeholder: 'testClass', ,
            caret: 'testClass', ,
            search: 'testClass', ,
            chips: 'testClass', ,
            lable: 'testClass', ,
          },
        });
CSS
              .testClass {
                background-color: #ff8282;
                color: white;
              }

Categories

            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,
            });

Button control

            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,
            });

Function disabled

            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,
            });