机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

React95

组件 - 演示应用 - React Native - Slack - PayPal 捐赠 💰

焕然一新 的 Windows95 用户界面组件，适用于您的现代 React 应用。
使用 styled-components 构建 💅

支持

• 在 Patreon 上成为支持者或赞助者
• 通过 PayPal 一次性捐款

入门

首先，在你的项目目录中安装组件库和 styled-components：

# yarn
$ yarn add react95 styled-components

# npm
$ npm install react95 styled-components

应用样式重置，将你的应用用你选择的主题用 ThemeProvider 包裹起来……然后你就可以开始使用了！🚀

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { MenuList, MenuListItem, Separator, styleReset } 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}>
      <MenuList>
        <MenuListItem>🎤 Sing</MenuListItem>
        <MenuListItem>💃🏻 Dance</MenuListItem>
        <Separator />
        <MenuListItem disabled>😴 Sleep</MenuListItem>
      </MenuList>
    </ThemeProvider>
  </div>
);

export default App;

提交你的项目

使用 React95 构建的应用程序将会在官方 React95 网站 上展示 🤟🏻

贡献

任何来自 UI / UX 设计师的帮助都将非常感激。挑战在于提出新的组件设计 / 布局，这些设计在现代 UI 中被广泛使用，但在 95 年并不存在。

如果你想帮助该项目，欢迎提交拉取请求、问题或组件提案。让我们让这个 UI 重获新生 ♥️