河源网站网站建设,大连网站排名公司,网件路由器app,linux播放高清电影Prect 简单示例
Prect 为使用相同的现代 API 的快速 3kB React 替代方案。代码形式与 React 基本相同。部分语法区别可见 prect-differences-to-react。以下是一个 Prect 简单示例。
Button目录Button.css#xff1a;
.this {display: inline-block;padding: 3px 8px;margi…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 (divh1欢迎使用按钮组件/h1Button children{点击我}//div);}
}render(App /,document.querySelector(#root))prect 中multiple classes样式管理
前端的multiple classes 通常指的是在 HTML 元素中同时应用多个 CSS 类。类似div classclass1 class2 class3内容/div。 这样做的主要目的是为了更好地管理样式提高代码的可复用性和可维护性。 样式复用通过将多个类组合在一起可以灵活地复用已有的样式。例如你可以有一个基础样式类和一个特定样式类 div classbox primary内容/div在这个例子中box 是基础样式而 primary 可能是特定的颜色或背景。 响应式设计可以为不同的屏幕尺寸或状态应用不同的类。例如 button classbtn 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
}) (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 (divh1欢迎使用按钮组件/h1Button text{HELLO WORLD} className{default}//div);}
}render(App /,document.querySelector(#root))效果 CG
注React 组件以大写字母开头而 HTML 标签则必须是小写字母。
