<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:description" content="Feature rich Select control for React/JS with multiselect, autocomplete and styling" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="cg-select" /> <meta property="og:url" content="https://cg-select.itguild.info" /> <meta property="og:image" content="/src/images/logoCG.jpg" /> <title>Cg-Select</title> <link href="example.scss" rel="stylesheet" /> </head> <body class="body-example"> <div class="container"> <header class="header"> <div class="header__logoBox"> <h1>CG-SELECT</h1> <img src="/src/images/logoCG.jpg" alt="#" class="header__logo" /> </div> <hr style="width: 55%" /> <nav> <ul class="navlist"> <li><a href="">Home</a></li> <li><a href="/documentation/index.html">Documentation</a></li> </ul> </nav> </header> </div> <div class="container content"> <div class="example-select"> <h2 class="example-select_title">Дефолтный селект</h2> <form method="get" class="form"> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_one"></button> </div> <input type="submit" value="Отправить!" class="example-select_submit" /> <button type="button" class="check-code" id="first">Посмотреть код</button> <code id="codeFirst"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_one',</span> placeholder: <span class="code__string">'Выберите авто',</span> lable: <span class="code__string">'EXAMPLE',</span> items: [ <span class="code__string">'BMW',</span> { id: <span class="code__string">'213sade',</span> title: <span class="code__string">'Opel',</span> value: 1, }, <span class="code__string">'Mersedes',</span> <span class="code__string">'MAN',</span> <span class="code__string">'Ferari',</span> ], styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, }, }); </pre> </code> </form> </div> <div class="example-select"> <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2> <form method="get" class="form"> <p style="margin-left: 12px; color: white"> *При мобильном разрешении появляеться нативный селект. </p> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_selectNative"></button> </div> <button type="button" class="check-code" id="Native">Посмотреть код</button> <code id="codeNative"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_one',</span> placeholder: <span class="code__string">'Выберите авто',</span> nativeSelectMode: <span class="code__keyword">true,</span> items: [ <span class="code__string">'BMW',</span> { id: <span class="code__string">'213sade',</span> title: <span class="code__string">'Opel',</span> value: 1, }, <span class="code__string">'Mersedes',</span> <span class="code__string">'MAN',</span> <span class="code__string">'Ferari',</span> ], styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, }, }); </pre> </code> </form> </div> <div class="example-select"> <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2> <form method="get" class="form"> <p style="margin-left: 12px; color: white"> *При использовании данного метода лист с выбором появляеться как модальное окно. </p> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_listDisplayMode"></button> </div> <button type="button" class="check-code" id="six">Посмотреть код</button> <code id="codeSix"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> placeholder: <span class="code__string">'Выберите авто',</span> listDisplayMode: <span class="code__keyword">true,</span> items: [ <span class="code__string">'BMW',</span> { id: <span class="code__string">'213sade',</span> title: <span class="code__string">'Opel',</span> value: 1, }, <span class="code__string">'Mersedes',</span> <span class="code__string">'MAN',</span> <span class="code__string">'Ferari',</span> ], styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, }, }); </pre> </code> </form> </div> <div class="example-select"> <h1 class="example-select_title">Селект с данными с URL</h1> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_three"></button> </div> <button type="button" class="check-code" id="second">Посмотреть код</button> <code id="codeSecond"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_three',</span> placeholder: <span class="code__string">'URL',</span> url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span> searchMode: <span class="code__keyword">true,</span> darkTheme: <span class="code__keyword">false,</span> language: <span class="code__string">'ru',</span> styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, }, }); </pre> </code> </div> <div class="example-select"> <h1 class="example-select_title">Категории</h1> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_categories"></button> </div> <button type="button" class="check-code" id="third">Посмотреть код</button> <code id="codeThird"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_categories',</span> placeholder: <span class="code__string">'Выберите регион',</span> searchMode: <span class="code__keyword">true,</span> items: [ { category: <span class="code__string">'Russia',</span> categoryItems: [ { id: <span class="code__string">'28qwds',</span> title: <span class="code__string">'Москва',</span> value: 0, }, <span class="code__string">'Ростов-на-дону',</span> <span class="code__string">'Саратов',</span> <span class="code__string">'Волгоград',</span> <span class="code__string">'Донецк',</span> ], }, { category: <span class="code__string">'USA',</span> categoryItems: <span class="code__string">[ 'Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],</span> }, { category: <span class="code__string">'France',</span> categoryItems: <span class="code__string">['Paris'],</span> }, ], styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, placeholder: { maxWidth: <span class="code__string">'500px ',</span> }, }, multiselect: <span class="code__keyword">true,</span> multiselectTag: <span class="code__keyword">true,</span> }); </pre> </code> </div> <div class="example-select"> <h1 class="example-select_title">Управление с помошью кнопок</h1> <div style="margin-bottom: 15px"> <button class="button__open example-select_submit">Open</button> <button class="button__close example-select_submit">Close</button> </div> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_usedBtn"></button> </div> <button type="button" class="check-code" id="fourth">Посмотреть код</button> <code id="codeFourth"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> placeholder: <span class="code__string">'Выберите авто',</span> searchMode: <span class="code__keyword">true,</span> items: [ <span class="code__string">'BMW',</span> { id: <span class="code__string">'213sade',</span> title: <span class="code__string">'Opel',</span> value: 1, }, <span class="code__string">'Mersedes',</span> <span class="code__string">'MAN',</span> <span class="code__string">'max',</span> ], styles: { head: { width: <span class="code__string">'830px',</span> color: <span class="code__string">'black',</span> backgroundColor: <span class="code__string">'rgb(176 223 167)',</span> }, list: { width: <span class="code__string">'824px',</span> color: <span class="code__string">'black',</span> backgroundColor: <span class="code__string">'rgb(176 223 167)',</span> }, caret: { borderTop: <span class="code__string">'6px solid black',</span> }, search: { backgroundColor: <span class="code__string">'#d7ffff',</span> borderRadius: <span class="code__string">'5px',</span> borderBottom: <span class="code__string">'none',</span> width: <span class="code__string">'95%',</span> color: <span class="code__string">'black',</span> }, }, multiselect: <span class="code__keyword">true,</span> }); </pre> </code> </div> <div class="example-select"> <h1 class="example-select_title">Функция disabled</h1> <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" /> <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label> <div class="layout-select"> <button class="cg-dropdown cg-dropdown_checkboxDisable"></button> </div> <button type="button" class="check-code" id="fifth">Посмотреть код</button> <code id="codeFifth"> <pre> <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({ selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> placeholder: <span class="code__string">'Выберите авто',</span> searchMode: <span class="code__keyword">true,</span> items: [ <span class="code__string">'BMW',</span> { id: <span class="code__string">'213sade',</span> title: <span class="code__string">'Opel',</span> value: 1, }, <span class="code__string">'Mersedes',</span> <span class="code__string">'MAN',</span> <span class="code__string">'Ferari',</span> ], styles: { head: { width: <span class="code__string">'830px',</span> }, list: { width: <span class="code__string">'824px',</span> }, placeholder: { maxWidth: <span class="code__string">'500px ',</span> }, }, }); </pre> </code> </div> </div> </body> <script type="module" src="index.js"></script> <script type="module" src="indexTs.ts"></script> </html>