cg-select
CG-SELECT
- + + + + + +cg-select
+CG-SELECT
+ - -version ~ 0.2.31
- -This component allows you to create a custom select. It offers more flexible customization and use of select. -Customization, multi-selection and live search by elements are available.
+ +version ~ 0.2.31
+ ++ This component allows you to create a custom select. It offers more flexible + customization and use of select. Customization, multi-selection and live search by + elements are available. +
- -The ability to customize basic elements, such as:
- --
-
- Select button. -
- List with select elements. -
- Placeholder. -
- In the multiselect mode, customization of chips (selected elements) is available. -
- Label of the element (if it was specified). -
- Switch themes from dark to light. -
The ability to customize basic elements, such as:
+ +-
+
- Select button. +
- List with select elements. +
- Placeholder. +
- + In the multiselect mode, customization of chips (selected elements) is available. + +
- Label of the element (if it was specified). +
- Switch themes from dark to light. +
Installation
- -npm i cg-select
+
+ Installation
+
+ npm i cg-select
-
- Usage
-
+
+ Usage
+
-
- To create a component, you need:
-
-
-- Create a regular button element.
-- Give it the cg-dropdown class.
-
-<button class="cg-dropdown"></button>
+
+ To create a component, you need:
+
+
+ - Create a regular button element.
+ - Give it the cg-dropdown class.
+
+ <button class="cg-dropdown"></button>
-
-- Give it a unique class, e.g. (cg-dropdown_categories).
-
-<button class="cg-dropdown cg-dropdown_categories"></button>
+
+ - Give it a unique class, e.g. (cg-dropdown_categories).
+
+ <button class="cg-dropdown cg-dropdown_categories"></button>
-
-- Create a new instance of the class (new CGSelect)
-- Pass all desired settings as an object
-
+
+ - Create a new instance of the class (new CGSelect)
+ - Pass all desired settings as an object
+
-
- All options for creating and managing are in the documentation, section "CGSelect class constructor".
-
+
+
+ All options for creating and managing are in the documentation, section "CGSelect
+ class constructor".
+
+
-
- An example of creating a regular select.
-
-import CGSelect from 'cg-select';
const dropdown = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
+
+ An example of creating a regular select.
+
+ import CGSelect from 'cg-select';
const dropdown = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
-
- Example of different selects
-
-Same working example -- https://cg-select.itguild.info/
-
-
-
-
-All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below.
-To view it, follow the link - https://cg-select.itguild.info/up_/documentation/index.html
+
+ Example of different selects
+
+
+ Same working example --
+ https://cg-select.itguild.info/
+
+
+ 
+ 
+ 
+ 
+
+
+ All documentation on CG-SELECT is located in the folder of the same name. The
+ documentation describes all methods and variables, there are also examples of passing
+ settings to select. You can also open it on the page with an example, or follow the link
+ below.
+
-
- Contributing
-
-
-- Fork it!
-- Create your feature branch:
git checkout -b my-new-feature
-- Commit your changes:
git commit -am 'Add some feature'
-- Push to the branch:
git push origin my-new-feature
-- Submit a pull request :D
-
+
+ Contributing
+
+
+ - Fork it!
+ - Create your feature branch:
git checkout -b my-new-feature
+ - Commit your changes:
git commit -am 'Add some feature'
+ - Push to the branch:
git push origin my-new-feature
+ - Submit a pull request :D
+
-
- Compatibility
-
-
-
-
-Application Compatibility
-JS
-React
-Angular
-Vue
-
-
-
-CG-SELECT
-
-
-
-Comment
-Tested in Js applications and it worksуспешно.
-Works only with a crutch in the form setTimeout()
-not yet available
-not yet available
-
-
+
+ Compatibility
+
+
+
+
+ Application Compatibility
+ JS
+ React
+ Angular
+ Vue
+
+
+
+
+ CG-SELECT
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Comment
+ Tested in Js applications and it worksуспешно.
+
+ Works only with a crutch in the form setTimeout()
+
+ not yet available
+ not yet available
+
+
+
-
- History
-
-16.12.2022 - release version 0.1.0!
-20.01.2023 - upgrade to version 0.2.1
-
Generated using TypeDoc
History
+ +16.12.2022 - release version 0.1.0!
+20.01.2023 - upgrade to version 0.2.1
+Generated using TypeDoc
+Interface ICreateBreadCrumb
Description
cSettings for creating chips.
-Hierarchy
--
-
- ICreateBreadCrumb
- Index
-Properties
-Properties
-element
-A specific instance of a class.
-indexes
-Array of indexes of selected elements.
-option
-Select settings.
-selected
-Array with selected elements.
-Generated using TypeDoc
Interface ICreateBreadCrumb
+Description
+cSettings for creating chips.
+Hierarchy
+-
+
- ICreateBreadCrumb +
+
+
+ Index
+
+
+ Properties
+ +Properties
++ element +
+A specific instance of a class.
+ indexes +
+Array of indexes of selected elements.
++ option +
+Select settings.
+ selected
+ Array with selected elements.
Generated using TypeDoc
+Interface IDataItem
Description
Receive Item Settings.
-Hierarchy
--
-
- IDataItem
- Index
-Properties
-Properties
-Item
-
-The value of the passed element.
-Optional category
-Optional parameter. Item group category.
-Optional category
-
-Optional parameter. Array with elements.
-Generated using TypeDoc
Interface IDataItem
+Description
+Receive Item Settings.
+Hierarchy
+-
+
- IDataItem +
+
+
+ Index
+
+
+ Properties
+ +Properties
+
+ Item
+
+ The value of the passed element.
+ Optional category
+
+ Optional parameter. Item group category.
+
+ Optional category
+
+ Optional parameter. Array with elements.
+Generated using TypeDoc
+Interface ISelectedItems
Description
Settings for select text, etc.
-Hierarchy
--
-
- ISelectedItems
- Index
-Properties
-Properties
-Optional indexes
-Array of indexes of selected elements.
-Optional multiselect
-An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.
-Optional placeholder
-Placeholder optional parameter to which the text of the select placeholder is passed.
-Optional selected
-An optional parameter, which is passed the element that will be selected initially in the select.
-Optional selected
-Array of selected items from the list.
-Optional theme
-An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
-Generated using TypeDoc
Interface ISelectedItems
+Description
+Settings for select text, etc.
+Hierarchy
+-
+
- ISelectedItems +
+
+
+ Index
+
+
+ Properties
+ +Properties
+
+ Optional indexes
+
+ Array of indexes of selected elements.
+
+ Optional
+ multiselect
+ + An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +
+
+ Optional placeholder
+
+ + Placeholder optional parameter to which the text of the select placeholder is + passed. +
+
+ Optional selected
+
+ + An optional parameter, which is passed the element that will be selected initially + in the select. +
+
+ Optional selected
+ Array of selected items from the list.
+
+ Optional theme
+
+ + An optional parameter that is responsible for enabling a light/dark theme by + default, the dark theme is set. +
+Generated using TypeDoc
+
Checking if item contains the specified properties.
+ + + + + ++- Preparing search index...
+ - The search index is not available
+
+ Home + Go to CGSelect ++- cg-select
+ - Utils
+ - checkItemStruct
+
+Function checkItemStruct
++-
+ check
+ -
+
+
-
-
-
Checking if item contains the specified properties.
-Returns
returns true/false if item contains the specified properties.
-Parameters
---
-
item: object
-element to be checked against a certain structure.
-Returns boolean
-
-Settings
Member Visibility
Theme
Generated using TypeDoc
Returns
+returns true/false if item contains the specified properties.
+