Skip to content

Commit 61d1655

Browse files
committed
Update README.md
1 parent cb6510b commit 61d1655

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

README.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,45 @@ Download [source](https://github.com/maxazan/angular-multiple-selection/archive/
2323

2424
##Using
2525
* Add `multiple-selection.min.js` file to your application
26-
```
26+
```html
2727
<script type="text/javascript" src="multiple-selection.min.js"></script>
2828
```
2929
* Add module to your app `angular.module('app', ['multipleSelection'])`
3030
* Add `multiple-selection-zone` attribute to element where selectable items will be located
3131
* Add `multiple-selection-item` attribute to each selectable item
3232
* Customize css
33+
34+
35+
##How it works
36+
Each selectable item has it`s own angular scope with variables
37+
38+
| Name | Description |
39+
| ------------- | ------------- |
40+
| isSelectable | `true` if element can be selected |
41+
| isSelecting | `true` if element now selecting. It means it enters in selection rectangle when you dragging |
42+
| isSelected | `true` if element selected |
43+
44+
###How to customize
45+
46+
* Add `ng-class` to your item
47+
```html
48+
<div multiple-selection-item ng-class="{'selecting': isSelecting ,'selected': isSelected}"></div>
49+
```
50+
* Customizing `.selecting` and `.selected` in your css
51+
```css
52+
.selected {
53+
background-color: green !important;
54+
}
55+
.selecting {
56+
background-color: yellow !important;
57+
}
58+
```
59+
* You can also customize your rectangle for selecting
60+
```css
61+
.select-helper {
62+
position: absolute;
63+
border: 1px dashed red;
64+
background: red;
65+
opacity: 0.2;
66+
}
67+
```

0 commit comments

Comments
 (0)