dart_html_elements 0.0.1

Generated Dart HTML elements.

example/main.dart

import 'package:dart_html_elements/dart_html_elements.dart';
import 'package:dart_html_elements/src/attribute.dart';

class RedButton extends StatelessComponent {
  RedButton({required this.text, this.onClick});

  final String text;

  final MouseEventHandler? onClick;

  HTMLElement? render() {
    return Button(
      className:
          'bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded',
      onClick: onClick,
      children: [
        Text(text),
      ],
    );
  }
}

void main(List<String> args) {
  final htmlRoot = Html(
    children: [
      Head(
        children: [
          Title(children: [
            Text('Dart HTML Example'),
          ]),
          Link(
            rel: 'stylesheet',
            media: 'screen',
            href:
                'https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css',
          ),
        ],
      ),
      Body(
        children: [
          H1(
            className: 'text-red-500',
            children: [
              Text('Dart HTML Example'),
            ],
          ),
          RedButton(
            text: 'Click me',
            onClick: (Object? event) {
              print('clicked');
            },
          ),
          Iframe(
            src: 'https://google.com',
          ),
        ],
      ),
    ],
  );

  // Render to an html string.
  print(renderAsString(htmlRoot));

  // Or as a stream:
  // renderAsStream(htmlRoot).listen(stdout.write);
}