Roseview の紹介: 必要なものがすべて揃っており、不要なものは何もない軽量 UI フレームワーク-CSSチュートリアル-php.cn

Roseview の紹介: 必要なものがすべて揃っており、不要なものは何もない軽量 UI フレームワーク

Barbara Streisand

リリース： 2024-10-28 08:49:29

オリジナル

600 人が閲覧しました

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 要素を非常に簡単に構築できます。 htmlElement クラスを使用すると、強力でありながら操作が簡単なコンポーネントを作成できます。深くネストされた構造に入る必要はありません。作成、スタイル設定、レンダリングするだけです。
これにより、コンポーネント内にスタイルを直接適用できるようになり、各コンポーネントがスコープ付きでカプセル化されたスタイルを持つことが保証されます。

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;

ログイン後にコピー

モジュール式で拡張可能なアーキテクチャ

Roseview は、必要に応じて拡張できるように構築されています。すぐに使える重要な機能が提供されますが、プラグインや追加のライブラリを使用して拡張することを妨げるものではありません。カスタムアニメーションの統合、データ視覚化ライブラリの追加、高度な API の組み込みのいずれを行う場合でも、Roseview を使用すると機能を柔軟に拡張できます。