Using CitronJS
Step by Step
Samples are reusable pieces of HTML content defined within a .xml or .citron file. You can make as many samples and files as you want. Here's how to create one:
Step 1 - Creating a Sample
<citron>
<export sample="Hello World"></export>
<sample name="Hello World">
<h1>Hello, World!</h1>
</sample>
</citron>In this example, we define a sample named "Hello World" that displays a heading saying "Hello, World!".
That's pretty much it. Just keep in mind that all samples need to be exported with the <export> tag shown above.
Step 2 - Importing Samples
To use a sample in your HTML file, you need to import it using the <c-import> tag. Place this tag in the <head> of your HTML document:
<html>
<head>
<c-import src="hello_world.xml"></c-import>
</head>
<body></body>
</html>Replace "hello_world.xml" with the path to your .xml file containing the sample definitions.
Step 3 - Using Samples
Once imported, you can place your sample anywhere in the body of your HTML document by using the <sample> tag with the name attribute matching the name of your sample:
This will render the "Hello World" sample wherever the <sample> tag is placed. Like so:
Keep in mind that nesting sample elements within eachother might cause issues.
Conclusion
Thank you for taking the time to learn about CitronJS! We hope this guide has helped you get started on your journey with our library.
Remember, the best way to learn is by doing, so don't hesitate to experiment and create your own samples.
Happy Coding! ❤️
Last updated