MaxOvs19/Example-CG-SELECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed main page

Browse Source
This commit is contained in:
MaxOvs19 2023-03-22 16:58:04 +03:00
commit 051a9f610b
3 changed files with 77 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example.scss
View File

@ -196,7 +196,7 @@ code {
pre { pre {
background: #1e1e1e; background: #1e1e1e;
margin: 15px; margin: 15px;
padding: 15px; padding: 30px 15px 0 5px;
color: #88d0f7; color: #88d0f7;
border-radius: 15px; border-radius: 15px;
font-size: 16px; font-size: 16px;

134
index.html
View File

@ -205,17 +205,17 @@
settings. The default theme is the classic theme, you can choose a white or dark settings. The default theme is the classic theme, you can choose a white or dark
theme. theme.
</p> </p>
<code style="display: block; margin-top: 104px"> <code style="display: block; margin-top: 104px; ">
<pre> <pre style="height: 240px;">
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({ <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span> selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span> placeholder: <span class="code__string">'Choose a car',</span>
lable: <span class="code__string">'EXAMPLE',</span> lable: <span class="code__string">'EXAMPLE',</span>
items: [ items: [
... ...
], ],
<span class="code__keyword">theme</span>: <span class="code__string">'dark / white'</span> <span class="code__keyword">theme</span>: <span class="code__string">'dark / white'</span>
}); });
</pre> </pre>
</code> </code>
</div> </div>
@ -232,17 +232,17 @@
</p> </p>
<code style="display: block"> <code style="display: block">
<pre> <pre>
<span class="code__keyword">interface</span> <span class="code__var">CustomThemeJson</span> { <span class="code__keyword">interface</span> <span class="code__var">CustomThemeJson</span> {
name: <span class="code__class">'string',</span> name: <span class="code__class">'string',</span>
styles: { styles: {
head?: <span class="code__class">object</span> head?: <span class="code__class">object</span>
list?: <span class="code__class">object</span> , list?: <span class="code__class">object</span> ,
placeholder?: <span class="code__class">object</span> , placeholder?: <span class="code__class">object</span> ,
caret?: <span class="code__class">object</span> , caret?: <span class="code__class">object</span> ,
search?: <span class="code__class">object</span> , search?: <span class="code__class">object</span> ,
lable?: <span class="code__class">object</span> , lable?: <span class="code__class">object</span> ,
}, },
}; };
</pre> </pre>
</code> </code>
</div> </div>
@ -258,65 +258,59 @@
<div class="row"> <div class="row">
<code style="display: block"> <code style="display: block">
<pre style="height:430px"> <pre style="height:460px">
<span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = { <span class="code__keyword">const</span> <span class="code__var">newTheme</span>:<span class="code__class"> CustomTheme</span> = {
name: <span class="code__string">'test',</span> name: <span class="code__string">'test',</span>
styles: { styles: {
head: <span class="code__string">'headTestClass',</span> head: <span class="code__string">'headTestClass',</span>
list: <span class="code__string">'listTestClass',</span> , list: <span class="code__string">'listTestClass',</span> ,
placeholder: <span class="code__string">'placeholderTestClass',</span> , placeholder: <span class="code__string">'placeholderTestClass',</span> ,
caret: <span class="code__string">'caretTestClass',</span> , caret: <span class="code__string">'caretTestClass',</span> ,
search: <span class="code__string">'searchTestClass',</span> , search: <span class="code__string">'searchTestClass',</span> ,
chips: <span class="code__string">'chipsTestClass',</span> , chips: <span class="code__string">'chipsTestClass',</span> ,
lable: <span class="code__string">'lableTestClass',</span> , lable: <span class="code__string">'lableTestClass',</span> ,
}, },
}; };
.headTestClass {
background-color: <span class="code__string">#8297ff</span>;
color: <span class="code__string">white</span>;
}
.listTestClass {
background-color: <span class="code__string">#8297ff</span>;
border: <span class="code__string">1px solid black</span>;
color: <span class="code__string">white</span> ;
}
</pre> </pre>
</code> </code>
<code style="display: block"> <code style="display: block">
<pre> <pre>
<span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomThemeJson</span> = { <span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomThemeJson</span> = {
name: <span class="code__string">'test',</span> name: <span class="code__string">'test',</span>
styles: { styles: {
head: {<span class="code__string"> head: {<span class="code__string">
color: 'red',
background: 'green',
</span> },
list: {<span class="code__string">
color: 'red',
background: 'green',
</span>},
placeholder: {<span class="code__string">
color: 'red', color: 'red',
fontSize: '26px', background: 'green',
</span> }, </span> },
caret: {<span class="code__string"> list: {<span class="code__string">
borderTop: '6px solid white' color: 'red',
</span> }, background: 'green',
search: {}, </span>},
lable: {}, placeholder: {<span class="code__string">
}, color: 'red',
}; fontSize: '26px',
</span> },
caret: {<span class="code__string">
borderTop: '6px solid white'
</span> },
search: {},
lable: {},
},
};
</pre> </pre>
</code> </code>
</div> </div>
<h6 style="text-align: center; margin-top: 15px;">CSS</h6>
<code style="display: block; width: 44%" class="stylesTheme">
<pre>
.headTestClass {
background-color: <span class="code__string">#8297ff</span>;
color: <span class="code__string">white</span>;
}
.listTestClass {
background-color: <span class="code__string">#8297ff</span>;
border: <span class="code__string">1px solid black</span>;
color: <span class="code__string">white</span> ;
}
</pre>
</code>
<h6>Example custom theme in CG-Select</h6> <h6>Example custom theme in CG-Select</h6>
<p> <p>
See an example of a select on See an example of a select on

16
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "example-cg-select-page", "name": "example-cg-select-page",
"version": "0.2.5", "version": "0.2.6",
"description": "This is a test page to demonstrate the capabilities of the select", "description": "This is a test page to demonstrate the capabilities of the select",
"scripts": { "scripts": {
"start": "parcel ./index.html -p 4660 --open", "start": "parcel ./index.html -p 4660 --open",
@ -13,14 +13,22 @@
"url": "git+https://github.com/MaxOvs19/Example-CG-SELECT.git" "url": "git+https://github.com/MaxOvs19/Example-CG-SELECT.git"
}, },
"keywords": [ "keywords": [
"exemple-cg-select" "exemple-cg-select",
"select",
"autocomplete",
"dropdown",
"multiselect",
"tag"
], ],
"author": "MaxOvs19", "author": {
"name": "CraftGroup",
"url": "https://github.com/apuc/"
},
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/MaxOvs19/Example-CG-SELECT/issues" "url": "https://github.com/MaxOvs19/Example-CG-SELECT/issues"
}, },
"homepage": "https://MaxOvs19.github.io/Example-CG-SELECT", "homepage": "https://cg-select.itguild.info",
"dependencies": { "dependencies": {
"cg-select": "^0.2.5", "cg-select": "^0.2.5",
"gh-pages": "^5.0.0", "gh-pages": "^5.0.0",