CG-SELECT

v. 0.2.4

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:  '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', ,
          },
        });
CSS
              .headTestClass {
                background-color: #8297ff;
                color: white;
              }

              .listTestClass {
                background-color: #8297ff;
                border: 1px solid black;
                color: white;
              }
Example custom theme in CG-Select

See an example of a select on codesandbox.io

Select constructor

Select Style Builder:

This is a constructor for styling a select online without downloading. For it to work, you need to:

  1. Select a part of the select for customization.
  2. Enter styles in the text field in the form "color: red;".
  3. Click on the render button.

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