apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed Readme

Browse Source
This commit is contained in:
MaxOvs19 2023-04-25 12:33:26 +03:00
parent 2f69e4fbbf
commit 6f4a7d23db
2 changed files with 78 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
README.md
View File

@ -108,6 +108,41 @@ const App = () => {
}; };
``` ```
### An example of initialization a CGSelect in Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Example of different selects ## Example of different selects
<a href="https://cg-select.itguild.info/">View live example</a> <a href="https://cg-select.itguild.info/">View live example</a>
@ -129,9 +164,9 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
## Compatibility ## Compatibility
| Application Compatibility | JS | React | Angular | Vue | | Application Compatibility | JS | React | Angular | Vue |
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :----------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | | CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) |
| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available | | Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | The select is initiated inside the `mounted() `hook |
## History ## History

41
READMERU.md
View File

@ -109,6 +109,41 @@ const App = () => {
}; };
``` ```
### Пример инициализации CGSelect в Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Примеры различных вариантов выбора. ## Примеры различных вариантов выбора.
<a href="https://cg-select.itguild.info/">Рабочий пример</a> <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@ -128,9 +163,9 @@ const App = () => {
## Совместимость ## Совместимость
| Совместимость в приложениях | JS | React | Angular | Vue | | Совместимость в приложениях | JS | React | Angular | Vue |
| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :----------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | | CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) |
| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно | | Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | Инициация селекта происходит внутри хука `mounted()` |
## История ## История