4

Win95桌面复刻前端组件-React95

 1 year ago
source link: http://osp.io/archives/7615
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Win95桌面复刻前端组件-React95 – 开源派

React95是复刻了Windows 95 风格的 React 开源组件库。遵守MIT开源协议。虽然是模仿复古win95的桌面窗口,但作者也加入了一些现代风格,可以更换不同妖娆的颜色。

he_94565.jpg@596w_1l.jpg

使用指南:

安装组件库到项目目录:

# 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;

源码:
https://github.com/arturbien/React95


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK