Memperkenalkan Roseview: Rangka Kerja UI Ringan dengan Semua yang Anda Perlukan, dan Tiada yang Anda Tidak Perlukan

Roseview direka untuk mereka yang sukakan kesederhanaan tetapi tidak mahu berkompromi dengan ciri penting. Jika anda bosan bergelut dengan rangka kerja berat yang memerlukan persediaan yang meluas, Roseview sedia membantu anda membina UI yang elegan dengan sedikit kekecohan.

Mengapa Pilih RoseView

Persediaan Minimum untuk Pembangunan Pantas

Cuma pasang gunakan alat cli yang tersedia.

npx create-rose-app your-project-name

Sistem Komponen Intuitif

Sistem komponen Roseview menjadikannya sangat mudah untuk membina elemen UI boleh guna semula dan modular. Menggunakan htmlElementclass, anda boleh mencipta komponen yang berkuasa dan mudah untuk digunakan. Tidak perlu menyelami struktur bersarang dalam—hanya buat, gayakan dan render.
Ini membolehkan anda menggunakan gaya secara langsung dalam komponen, memastikan setiap komponen mempunyai penggayaan berskop dan terkapsul.

import { htmlElement } from 'roseview';

const button = function(parent){
let btn = new htmlElement(parent, 'button', {
  textContent: 'Click Me!',
  onclick: () => alert('Button Clicked')
});

// You can use in Emotion like style
btn.css({
  background: '#FF6347',
  color: '#FFFFFF',
  padding: '10px 20px',
  borderRadius: '5px'
});

// Or in this manner
btn.css`
background: #FF6347;
color: #FFFFFF;
`
return btn;
}

Penghalaan Berasaskan Hash Ringan

Pendekatan mudah untuk penghalaan ini membolehkan anda mengurus navigasi halaman tanpa menambah kebergantungan berat atau menulis kod verbose.

import { HashRouter } from "roseview";
import { createApp } from "roseview";

import homePage from "./pages/index.js";
import aboutPage from "./pages/about.js";

const routes = [
    { path: "index", component: homePage },
    { path: "about", component: aboutPage },
];
const router = HashRouter(routes);

window.app = createApp(homePage).use(router).mount("#app");

Pengurusan Negeri Reaktif

Dengan createSignal, createReactiveSignal, showIF, anda boleh menyediakan pembolehubah reaktif yang mengemas kini UI anda secara automatik apabila ia berubah, mewujudkan pengalaman yang lancar dan responsif untuk pengguna.

import { createSignal, htmlLayout, htmlElement } from 'roseview';

const [count, setCount] = createSignal(0);

let homePage = new htmlLayout("linear", "top, scrolly, fillxy");
const button = new htmlElement(homePage, 'button', {
  textContent: `Clicked ${count()} times`,
  onclick: () => setCount(count() + 1)
});

export default homePage;

Seni Bina Modular dan Boleh Diperluas

Roseview dibina supaya boleh dipanjangkan seperti yang anda perlukan. Ia menyediakan ciri penting di luar kotak tetapi tidak menghalang anda daripada mengembangkannya dengan pemalam atau perpustakaan tambahan. Sama ada anda menyepadukan animasi tersuai, menambah pustaka visualisasi data atau menggabungkan API lanjutan, Roseview membolehkan anda fleksibiliti untuk memperluaskan keupayaannya.

Keluk Pembelajaran Sifar

Mudah untuk sesiapa sahaja mengambil dan mula membina. Sama ada anda datang dari React, Vue atau JavaScript vanilla, sintaks akan terasa semula jadi, membantu anda menjadi produktif dengan cepat.

Roseview menjadikan pembangunan UI mudah didekati, berkuasa dan pantas. Mawar merah, Roseview kurus; bina UI yang cantik dengan kod yang bersih.

Atas ialah kandungan terperinci Memperkenalkan Roseview: Rangka Kerja UI Ringan dengan Semua yang Anda Perlukan, dan Tiada yang Anda Tidak Perlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!