Roseview 簡介：輕量級 UI 框架，滿足您所需的一切，沒有您不需要的-css教學-PHP中文網

Roseview 簡介：輕量級 UI 框架，滿足您所需的一切，沒有您不需要的

Barbara Streisand

發布： 2024-10-28 08:49:29

原創

635 人瀏覽過

Introducing Roseview: The Lightweight UI Framework with Everything You Need, and Nothing You Don’t

Roseview 專為那些喜歡簡單但又不想在基本功能上妥協的人而設計。如果您厭倦了與需要大量設定的繁重框架進行鬥爭，Roseview 可以幫助您輕鬆建立優雅的 UI。

為什麼選擇RoseView

快速開發的最少設置

只需安裝使用可用的 cli 工具即可。

npx create-rose-app your-project-name

登入後複製

直覺的組件系統

Roseview 的元件系統讓建構可重複使用和模組化 UI 元素變得異常容易。使用 htmlElementclass，您可以建立功能強大且易於使用的元件。無需深入研究深層嵌套結構 - 只需建立、設計樣式和渲染即可。
這允許您直接在元件內套用樣式，確保每個元件都有範圍內的封裝樣式。

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;
}

登入後複製

輕量級基於哈希的路由

這種簡單的路由方法可讓您管理頁面導航，而無需添加大量依賴項或編寫冗長的程式碼。

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");

登入後複製

反應式狀態管理

使用 createSignal、createReactiveSignal、showIF，您可以設定響應式變量，這些變數會在變更時自動更新您的 UI，為使用者建立流暢、回應靈敏的體驗。

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;

登入後複製