Roseview 소개: 필요한 모든 것을 갖춘 경량 UI 프레임워크, 불필요한 것은 없습니다.-CSS 튜토리얼-php.cn

Roseview 소개: 필요한 모든 것을 갖춘 경량 UI 프레임워크, 불필요한 것은 없습니다.

Barbara Streisand

풀어 주다： 2024-10-28 08:49:29

원래의

523명이 탐색했습니다.

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는 기능을 확장할 수 있는 유연성을 제공합니다.