57 lines
No EOL
1.4 KiB
Markdown
57 lines
No EOL
1.4 KiB
Markdown
# StyleExample
|
|
|
|
This example demonstrates how to apply styling to HTML elements using Crafter.CppDOM.
|
|
|
|
## Features
|
|
|
|
- Shows how to apply inline styles using CSS strings
|
|
- Demonstrates setting individual CSS properties
|
|
- Illustrates working with CSS classes (adding, removing, toggling)
|
|
- Shows how to check for class existence
|
|
|
|
## Usage
|
|
|
|
```cpp
|
|
import Crafter.CppDOM;
|
|
using namespace Crafter::CppDOM;
|
|
|
|
int main(){
|
|
HtmlElement body("body","<div id=\"myDiv\"></div>");
|
|
// Create a div element
|
|
HtmlElement div("myDiv");
|
|
|
|
// Set some initial content
|
|
div.SetInnerHTML("<p>This is a styled paragraph</p>");
|
|
|
|
// Apply styles using different methods
|
|
div.SetStyle("color: blue; font-size: 20px; background-color: lightgray;");
|
|
|
|
// Or apply individual properties
|
|
div.SetProperty("border", "2px solid red");
|
|
div.SetProperty("padding", "10px");
|
|
|
|
// Add CSS classes
|
|
div.AddClass("highlight");
|
|
div.AddClass("container");
|
|
|
|
// Demonstrate class toggling
|
|
div.ToggleClass("active");
|
|
|
|
// Check if class exists
|
|
bool hasActiveClass = div.HasClass("active");
|
|
|
|
// Remove a class
|
|
div.RemoveClass("highlight");
|
|
}
|
|
```
|
|
|
|
## Building and Running
|
|
|
|
```bash
|
|
crafter-build build executable
|
|
run.sh
|
|
```
|
|
|
|
Then navigate to `http://localhost:8080/` in your browser.
|
|
|
|
If caddy is not installed, you can use your favorite static file server instead. |