@arnelirobles/rnxjs
Version:
Minimalist Vanilla JS component system with reactive data binding.
55 lines (49 loc) • 1.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rnxJS Demo</title>
<!-- Bootstrap is optional but recommended for default styles -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-5">
<Container>
<h1>Welcome to rnxJS</h1>
<p class="lead">This is a simple demo of the component system.</p>
<Row>
<Col class="col-md-6">
<Card class="mb-3">
<div class="card-body">
<h5 class="card-title">Interactive Components</h5>
<p class="card-text">Click the button below to see an alert.</p>
<Button label="Click Me" variant="primary" onclick="alert('Hello from rnxJS!')"></Button>
</div>
</Card>
</Col>
<Col class="col-md-6">
<Card class="mb-3">
<div class="card-body">
<h5 class="card-title">Form Elements</h5>
<FormGroup>
<label class="form-label">Email Address</label>
<Input type="email" placeholder="name@example.com"></Input>
</FormGroup>
</div>
</Card>
</Col>
</Row>
</Container>
<!--
When using from npm/CDN:
<script src="https://unpkg.com/@arnelirobles/rnxjs/dist/rnx.global.js"></script>
-->
<!-- Local relative path for testing inside the package -->
<script src="../dist/rnx.global.js"></script>
<script>
// Initialize the library
rnx.autoRegisterComponents();
rnx.loadComponents();
</script>
</body>
</html>