Win95桌面复刻前端组件-React95
来源:开源派 发布时间:2022-10-18 分享至微信
React95是复刻了Windows 95 风格的React开源组件库。遵守MIT开源协议。虽然是模仿复古win95的桌面窗口,但作者也加入了一些现代风格,可以更换不同妖娆的颜色。
使用指南:
安装组件库到项目目录:
# yarn
$ yarn add react95 styled-components
# npm
$ npm i react95 styled-components
应用样式,用ThemeProvider 打包你的app 即可!
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { styleReset, List, ListItem, Divider } from 'react95';
// pick a theme of your choice
import original from 'react95/dist/themes/original';
// original Windows95 font (optionally)
import ms_sans_serif from 'react95/dist/fonts/ms_sans_serif.woff2';
import ms_sans_serif_bold from 'react95/dist/fonts/ms_sans_serif_bold.woff2';
const GlobalStyles = createGlobalStyle`
${styleReset}
@font-face {
font-family: 'ms_sans_serif';
src: url('${ms_sans_serif}') format('woff2');
font-weight: 400;
font-style: normal
}
@font-face {
font-family: 'ms_sans_serif';
src: url('${ms_sans_serif_bold}') format('woff2');
font-weight: bold;
font-style: normal
}
body {
font-family: 'ms_sans_serif';
}
`;
const App = () => (
<div>
<GlobalStyles />
<ThemeProvider theme={original}>
<List>
<ListItem> Sing</ListItem>
<ListItem> Dance</ListItem>
<Divider />
<ListItem disabled> Sleep</ListItem>
</List>
</ThemeProvider>
</div>
);
export default App;
[ 新闻来源:开源派,更多精彩资讯请下载icspec App。如对本稿件有异议,请联系微信客服specltkj]
存入云盘 收藏
举报
全部评论
暂无评论哦,快来评论一下吧!
开源派
欢迎关注开源派 osp.io
查看更多
相关文章
股价暴跌95%!芯片巨头免职CEO
4 天前
BitEnergy AI开发新算法,AI处理功耗可降低95%
2024-10-22
三星OLED电视SD95获福布斯“2024年秋季最佳电视”
2024-10-30
奔驰Drive Pilot提升L3自动驾驶速度至95公里/小时
2024-10-05
韩国L&F领跑EV高续航材料,年底量产95%镍三元材料
2024-11-12
热门搜索