nodejs 013:Prect 样式复用（multiple classes）例子

Prect 简单示例

• Prect 为使用相同的现代 API 的快速 3kB React 替代方案。代码形式与 React 基本相同。部分语法区别可见 prect-differences-to-react。以下是一个 Prect 简单示例。

Button目录Button.css：

.this {display: inline-block;padding: 3px 8px;margin-bottom: 0;font-size: 0.9rem;line-height: 1.4;text-align: center;white-space: nowrap;vertical-align: middle;cursor: default;background-image: none;border: 1px solid transparent;border-radius: var(--radius-size);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);-webkit-app-region: no-drag;cursor: pointer;
}.this:focus {outline: none;box-shadow: none;
}

Button目录index.jsx：

import { h } from 'preact';
import styles from './Button.css'; // CSS Modules模块化,需要打包工具支持，比如webpack在style-loader配置const Button = ({className,children,type = 'default',...props
}) => (<button// CSS Modules模块化,需要打包工具支持，比如webpack在style-loader配置className={${styles.this} ${styles[type]} ${className ? className : ''}}{...props}>{ children }</button>
);export default Button;

src使用的例子index.jsx

import { h, Component, render } from 'preact';
import Button from '../Button';class App extends Component { render() { return (<div><h1>欢迎使用按钮组件</h1><Button children={'点击我'}/></div>);}
}render(<App />,document.querySelector('#root'))

prect 中multiple classes样式管理

• 前端的"multiple classes" 通常指的是在 HTML 元素中同时应用多个 CSS 类。类似<div class="class1 class2 class3">内容</div>。
  这样做的主要目的是为了更好地管理样式，提高代码的可复用性和可维护性。

1. 样式复用：通过将多个类组合在一起，可以灵活地复用已有的样式。例如，你可以有一个基础样式类和一个特定样式类：

   <div class="box primary">内容</div>
   

   在这个例子中，box 是基础样式，而 primary 可能是特定的颜色或背景。

2. 响应式设计：可以为不同的屏幕尺寸或状态应用不同的类。例如：

   <button class="btn large hidden-on-mobile">点击我</button>
   

   这里 large 和 hidden-on-mobile 可以分别控制按钮的大小和在移动设备上的可见性。

3. 状态管理：当元素的状态发生变化时，可以通过添加或移除类来改变样式。例如，添加 active 类表示按钮被点击：

   button.classList.add('active');
   

Button目录Button.css：

.this {display: inline-block;padding: 3px 80px;margin-bottom: 0;font-size: 0.9rem;line-height: 1.4;text-align: center;white-space: nowrap;vertical-align: middle;cursor: default;background-image: none;border: 1px solid transparent;border-radius: var(--radius-size);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);-webkit-app-region: no-drag;cursor: pointer;}.this:focus {outline: none;box-shadow: none;
}.default {color: #123eed;border-top-color: #c2c0c2;border-right-color: #c2c0c2;border-bottom-color: #a19fa1;border-left-color: #c2c0c2;background-color: #fcfcfc;background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
}.default:active {/* background-color: #ddd; */background-color: #20B2AA; /* 蓝绿色 */background-image: none;
}

Button目录index.jsx：

import { h } from 'preact';
import './Button.css';const Button = ({className,text,...props
}) => (<buttonclassName={`this ${className || ''}`}>{ text}</button>
);export default Button;

src使用的例子index.jsx

import { h, Component, render } from 'preact';
import Button from '../Button';class App extends Component { state = {Text: "WORLD",};  render() { return (<div><h1>欢迎使用按钮组件</h1><Button text={'HELLO WORLD'} className={'default'}/></div>);}
}render(<App />,document.querySelector('#root'))

效果

CG

• 注：React 组件以大写字母开头，而 HTML 标签则必须是小写字母。