Skip to content

Commit

Permalink
Use hero icons
Browse files Browse the repository at this point in the history
  • Loading branch information
mbraak committed Dec 28, 2024
1 parent a55f566 commit a1be570
Show file tree
Hide file tree
Showing 13 changed files with 26 additions and 17 deletions.
16 changes: 13 additions & 3 deletions docs/_examples/10_icon_buttons.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,25 @@ <h1>Example 10 - use icon toggle buttons</h1>

<p>
You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for
the toggle buttons. You can for example use <a href="https://github.com/FortAwesome/Font-Awesome">Fontawesome icons</a>.
the toggle buttons. You can for example use <a href="https://heroicons.com/">Hero icons</a>.
</p>
<div id="tree1" class="not-prose" data-url="/example_data/"></div>

<h3>javascript</h3>

{% highlight js %}
$('#tree1').tree({
closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
closedIcon: $(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
</svg>`
),
openedIcon: $(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
</svg>`
)
});
{% endhighlight %}
1 change: 0 additions & 1 deletion docs/static/bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"name": "jqtree-docs",
"dependencies": {
"fontawesome": "^6.3.0",
"jquery": "^3.7.0",
"jquery-mockjax": "^2.7.0-beta.0"
}
Expand Down
9 changes: 0 additions & 9 deletions docs/static/bower_components/fontawesome/css/all.min.css

This file was deleted.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1 change: 1 addition & 0 deletions docs/static/example.postcss
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,6 @@
.jqtree-tree {
.jqtree-toggler {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
align-self: center;
}
}
16 changes: 12 additions & 4 deletions docs/static/examples/icon_buttons.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
$.mockjax({
url: "*",
response: function(options) {
response: function () {
this.responseText = ExampleData.exampleData;
},
responseTime: 0
responseTime: 0,
});

$("#tree1").tree({
closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
closedIcon: $(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
</svg>`,
),
openedIcon: $(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
</svg>`,
),
});

0 comments on commit a1be570

Please sign in to comment.