Skip to content

Commit 1d0e668

Browse files
bmarkovbmarkov
committed
updates
1 parent 1f89d35 commit 1d0e668

File tree

5 files changed

+186
-2
lines changed

5 files changed

+186
-2
lines changed

‎README.md

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,90 @@
1-
# smart-list-box
2-
Grid Custom Element
1+
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/htmlelements/smart-listbox)
2+
3+
# <smart-listbox>
4+
5+
[Live Demo ↗](https://htmlelements.com/demos/l/)
6+
|
7+
[Documentation ↗](https://www.htmlelements.com/docs/)
8+
|
9+
[Installation ↗](https://www.npmjs.com/package/@smarthtmlelements/smarthtmlelements-core)
10+
11+
[<smart-listbox>](https://htmlelements.com/demos/listbox/) is a listbox Custom HTML Element that make it easy to select and switch between different list items, part of the [Smart HTML Elements](https://htmlelements.com/).
12+
13+
<!--
14+
```
15+
<custom-element-demo>
16+
<template>
17+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
18+
<script src="../smart-core/source/smart.element.js"></script>
19+
<script src="../smart-core/source/smart.button.js"></script>
20+
<script src="../smart-core/source/smart.scrollbar.js"></script>
21+
<script src="../smart-core/source/smart.listbox.js"></script>
22+
<link rel="stylesheet" href="../smart-core/source/styles/smart.base.css" type="text/css" />
23+
<link rel="stylesheet" href="../smart-core/source/styles/smart.material.css" type="text/css" />
24+
<next-code-block></next-code-block>
25+
</template>
26+
</custom-element-demo>
27+
```
28+
-->
29+
```html
30+
<smart-list-box class='material'>
31+
<smart-list-item selected value="1">Item 1</smart-list-item>
32+
<smart-list-item value="2">Item 2</smart-list-item>
33+
<smart-list-item value="3">Item 3</smart-list-item>
34+
</smart-list-box>
35+
```
36+
37+
[<img src="https://raw.githubusercontent.com/htmlelements/smart-listbox/master/smart-listbox.png" alt="Screenshot of smart-listbox, using the Material theme">](https://htmlelements.com/demos/listbox)
38+
39+
## Getting Started
40+
41+
Smart HTML Elements components documentation includes getting started, customization and api documentation topics.
42+
43+
[Getting Started Documentation](https://www.htmlelements.com/docs/listbox/)
44+
|
45+
[CSS Documentation](https://www.htmlelements.com/docs/listbox-css/)
46+
|
47+
[API Documentation](https://www.htmlelements.com/docs/listbox-api/)
48+
49+
50+
## The file structure for Smart HTML Elements
51+
52+
- `source-minified/`
53+
54+
Javascript files.
55+
56+
- `source-minified/styles/`
57+
58+
Component CSS Files.
59+
60+
- `demos/`
61+
62+
Demo files
63+
64+
## Running demos in browser
65+
66+
1. Fork the `Smart-HTML-Elements-Core` repository and clone it locally.
67+
68+
1. Make sure you have [npm](https://www.npmjs.com/) installed.
69+
70+
1. When in the `Smart-HTML-Elements-Core` directory, run `npm install` and then `bower install` to install dependencies.
71+
72+
1. Run a localhost or upload the demo on a web server. Then run:
73+
74+
- /demos/smart-button/smart-button-overview.htm
75+
76+
77+
## Following the coding style
78+
79+
We are using [ESLint](http://eslint.org/) for linting JavaScript code.
80+
81+
## Creating a pull request
82+
83+
- Make sure your code is compliant with ESLint
84+
- [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
85+
- Wait for response from one of our team members
86+
87+
88+
## License
89+
90+
Apache License 2.0

‎bower.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "smart-tabs",
3+
"authors": [
4+
"jQWidgets Ltd"
5+
],
6+
"description": "Smart Tabs is a free Custom Element, built using Javascript, HTML and CSS.",
7+
"license": "Apache-2.0",
8+
"keywords": [
9+
"smart tabs",
10+
"tabs",
11+
"tabstrip",
12+
"html tabs",
13+
"html tabstrip",
14+
"javascript tabs",
15+
"tabs custom element",
16+
"custom elements"
17+
],
18+
"main": "",
19+
"ignore": [
20+
"**/.*",
21+
"**/node_modules",
22+
"**/bower_components",
23+
"**/tests"
24+
],
25+
"dependencies": {
26+
"webcomponentsjs": "^1.0.0",
27+
"smart-core": "HTMLElements/smart-core"
28+
}
29+
}

‎demos/smart-listbox-overview.htm

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
5+
6+
<link rel="stylesheet" href="../../smart-core/source/styles/smart.base.css" type="text/css" />
7+
<!--! do not remove -->
8+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
9+
<script type="text/javascript" src="../../smart-core/source/smart.element.js"></script>
10+
<script type="text/javascript" src="../../smart-core/source/smart.button.js"></script>
11+
<script type="text/javascript" src="../../smart-core/source/smart.scrollbar.js"></script>
12+
<script type="text/javascript" src="../../smart-core/source/smart.listbox.js"></script>
13+
</head>
14+
<body>
15+
<smart-list-box selected-index="1">
16+
<smart-list-item selected value="1">Item 1</smart-list-item>
17+
<smart-list-item value="2">Item 2</smart-list-item>
18+
<smart-list-item value="3">Item 3</smart-list-item>
19+
</smart-list-box>
20+
</body>
21+
</html>

‎package.json

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@smarthtmlelements/smart-listbox",
3+
"version": "1.1.0",
4+
"description": "Smart ListBox",
5+
"scripts": {
6+
},
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/HTMLElements/smart-listbox.git"
10+
},
11+
"author": "Smart HTML Elements",
12+
"license": "SEE LICENSE IN https://www.htmlelements.com/license/",
13+
"bugs": {
14+
"url": "https://github.com/HTMLElements/smart-listbox"
15+
},
16+
"homepage": "https://github.com/HTMLElements/smart-listbox#readme",
17+
"devDependencies": {
18+
19+
},
20+
"dependencies": {
21+
"@webcomponents/webcomponentsjs": "^1.0.22",
22+
"@smarthtmlelements/smart-core": "^1.1.0"
23+
},
24+
"main": "index.js",
25+
"directories": {},
26+
"keywords": [
27+
"custom",
28+
"element",
29+
"listbox custom element",
30+
"html listbox",
31+
"listbox",
32+
"web components listbox",
33+
"listbox element",
34+
"listboxtrip",
35+
"custom listbox",
36+
"listbox widget",
37+
"listbox ui",
38+
"listbox component",
39+
"listbox control",
40+
"custom elements",
41+
"webcomponents",
42+
"listbox custom element",
43+
"material listbox",
44+
"material listboxtrip"
45+
]
46+
}

‎smart-listbox.gif

452 KB
Loading

0 commit comments

Comments
 (0)