Onsen UI Simple Todo App - Onsen-ui Typing CST Test
Loading…
Onsen UI Simple Todo App — Onsen-ui Code
Demonstrates a simple Onsen UI app with a Todo list, adding tasks, and displaying them using Onsen UI components.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="center">Todo App</div>
</ons-toolbar>
<ons-input id="todoInput" placeholder="New Todo"></ons-input>
<ons-button onclick="addTodo()">Add</ons-button>
<ons-list id="todoList"></ons-list>
</ons-page>
<script>
const todos = [];
function addTodo() {
const input = document.getElementById('todoInput');
if(input.value.trim()) {
todos.push(input.value.trim());
input.value = '';
renderTodos();
}
}
function renderTodos() {
const list = document.getElementById('todoList');
list.innerHTML = '';
todos.forEach(todo => {
const item = document.createElement('ons-list-item');
item.textContent = todo;
list.appendChild(item);
});
}
</script>
</body>
</html>Onsen-ui Language Guide
Onsen UI is an open-source framework for building hybrid and mobile web apps using HTML5, CSS, and JavaScript. It provides ready-to-use UI components optimized for iOS and Android, supporting frameworks like Angular, React, and Vue.
Primary Use Cases
- ▸Hybrid mobile apps for iOS and Android
- ▸Progressive Web Apps (PWAs)
- ▸Rapid prototyping of mobile interfaces
- ▸Apps needing consistent cross-platform UI
- ▸Integration with Angular, React, or Vue frameworks
Notable Features
- ▸Platform-aware UI components that adapt to iOS and Android styles
- ▸Framework-agnostic core with bindings for Angular, React, and Vue
- ▸Built-in animations and touch gestures
- ▸Lightweight and optimized for performance
- ▸Supports Cordova/Capacitor for native device access
Origin & Creator
Developed by Monaca (Asial Corporation) in 2013, Onsen UI was created to simplify hybrid mobile app development using web technologies while providing native-like UI components.
Industrial Note
Best suited for hybrid apps and progressive web apps requiring native-style UI with minimal platform-specific customization.