search

tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.
https://tigrr.github.io/circle-progress
MIT License
164 stars 43 forks source link

Specifying Properties When Importing from CDN #21

Closed emmavray closed 1 year ago

emmavray commented 1 year ago

I'm linking this library from the CDN in a static html page, which is packaged as a standalone html document with no dependencies. I'm using the CDN example from the README:

<script src="https://cdn.jsdelivr.net/npm/js-circle-progress/dist/circle-progress.min.js" type="module"></script>

<circle-progress value="50" max="100"></circle-progress>

I'd like to specify some properties (such as textFormat) using html attributes: <circle-progress textFormat="value" value="50" max="100"></circle-progress>

This doesn't work. The problem may be obvious to frontend developers (which I am not) but I'm unsure how this should work in an environment when I cannot import a node module or a local js file.

Is what I'm trying to do even possible, or are these attributes only available via the constructor when creating the object in js?

tigrr commented 1 year ago

When setting attributes (not properties) you have to keep in mind that some attribute names are different than the corresponding property names. Property names are camelCased, whereas attribute names are kebab-cased. In your case, the textFormat property is set as text-format attribute. So the complete HTML would be:

<circle-progress text-format="value" value="50" max="100"></circle-progress>

I updated the docs to reflect that. You can now see the attribute name corresponding to each property in the properties table.

emmavray commented 1 year ago

thanks for the quick response -- I suspected it would be something simple!