You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: examples/dist/index.html
+15-12Lines changed: 15 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,8 @@ <h2 class="project-tagline">A simple and elegant checkbox tree for React</h2>
24
24
<p>
25
25
<strong>React Checkbox Tree</strong> is a feature-rich React component for a checkbox treeview.
26
26
Checkout the examples below and then view <ahref="https://github.com/jakezatecky/react-checkbox-tree/tree/master/examples/src/js">source code</a>
27
-
or main <ahref="https://github.com/jakezatecky/react-checkbox-tree">documentation page</a> when you are ready to try it out.
27
+
or main <ahref="https://github.com/jakezatecky/react-checkbox-tree">documentation page</a> when you are ready
28
+
to try it out.
28
29
</p>
29
30
30
31
<h1>Examples</h1>
@@ -48,10 +49,22 @@ <h2>No Cascading Example</h2>
48
49
<h2>Pessimistic Toggle Example</h2>
49
50
<p>
50
51
Try clicking a partially-checked node below. Instead of cascading a checked state to all children, the
51
-
pessimistic model will uncheck children and their descendents.
52
+
pessimistic model will uncheck children and their descendants.
52
53
</p>
53
54
<divid="pessimistic-toggle-example"></div>
54
55
56
+
<h2>Clickable Labels Example</h2>
57
+
<p>
58
+
By default, clicking on the node label toggles the checkbox value. By providing an <code>onClick</code> property
59
+
the checkbox will toggle only when clicking on the checkbox and the provided function will be called when
60
+
clicking on the node label.
61
+
</p>
62
+
<p>
63
+
When the <code>onClick</code> function is defined, passing the <code>expandOnClick</code> property will also
64
+
expand the clicked node automatically.
65
+
</p>
66
+
<divid="clickable-labels-example"></div>
67
+
55
68
<h2>Hide Checkboxes Example</h2>
56
69
<p>
57
70
Checkboxes can be hidden on a node-level by setting <code>showCheckbox: false</code> for any given node. They
@@ -64,16 +77,6 @@ <h2>Large Data Example</h2>
64
77
<p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
65
78
<divid="large-data-example"></div>
66
79
67
-
<h2>Clickable Labels Example</h2>
68
-
<p>
69
-
By default, clicking on the node label texts toggle the checkbox value. Providing an <code>onClick</code> property the checkbox will toggle
70
-
only when clicking on the checkbox and the provided function will be called when clicking on the node label text.
71
-
</p>
72
-
<p>
73
-
When the <code>onClick</code> function is defined passing the <code>expandOnClick</code> property will expand the clicked node automatically.
74
-
</p>
75
-
<divid="clickable-labels-example"></div>
76
-
77
80
<footerclass="site-footer">
78
81
<spanclass="site-footer-owner">
79
82
<ahref="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <ahref="https://github.com/jakezatecky">jakezatecky</a>.
0 commit comments