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

news2024/9/21 19:59:05

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>。
这样做的主要目的是为了更好地管理样式，提高代码的可复用性和可维护性。

样式复用：通过将多个类组合在一起，可以灵活地复用已有的样式。例如，你可以有一个基础样式类和一个特定样式类：
```
<div class="box primary">内容</div>
```
在这个例子中，box 是基础样式，而 primary 可能是特定的颜色或背景。
响应式设计：可以为不同的屏幕尺寸或状态应用不同的类。例如：
```
<button class="btn large hidden-on-mobile">点击我</button>
```
这里 large 和 hidden-on-mobile 可以分别控制按钮的大小和在移动设备上的可见性。
状态管理：当元素的状态发生变化时，可以通过添加或移除类来改变样式。例如，添加 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
}) => (
    <button
        className={`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'))