• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

codypearce/material-bread: Cross Platform React Native Material Design Component ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

codypearce/material-bread

开源软件地址(OpenSource Url):

https://github.com/codypearce/material-bread

开源编程语言(OpenSource Language):

JavaScript 99.0%

开源软件介绍(OpenSource Introduction):

Material Bread logo

Material Bread

Cross Platform React Native Material Design Components

Build Status NPM registry Code style NPM license Storybook

adf

Choose a platform to get started

adf adf adf adf adf adf adf adf

Features

  • Highly Customizable React Native Components.
  • Cross platform support: React Native (iOS, Android), React-native-web (Browsers), Electron (Windows, Mac, Linux), react-native-windows, react-native-macos, Next.js, Expo, Vue Native
  • Support for Material Design 2.0 components.
  • Live react native demos you can edit in in your browser.
  • Typescript support

Table of Contents

Quick Start

  1. npm install material-bread or yarn add material-bread
  2. Install and link react-native-vector-icons and react-native-svg
  3. Wrap your root <App> with a <BreadProvider>
<BreadProvider>
  <Root />
</BreadProvider>
  1. Start developing!

Read the getting started guides for your platform to learn more.

Documentation

The component API docs and curated demos can be found at material-bread.org. See the contributing section to learn how to run the docs locally.

More demos for each component can be found at the component Storybook. This environment is used for developing cross-platform, see the contributing section to learn how to set it up locally.

Getting Started

Guides

Getting Started with React Native

Getting Started with Web

Getting Started with Electron

Getting Started with MacOS

Getting Started with Windows

Getting Started with NextJS

Getting Started with Expo

Getting Started with Vue Native

Example Repos

Boilerplate projects with minimal configuration to get started on each platform.

React Native: material-bread-rn-example

React Web: material-bread-react-example

Electron: material-bread-electron-example

MacOS: material-bread-macos-example

Windows: material-bread-windows-example

NextJS: material-bread-next-example

Expo: material-bread-expo-example

Vue Native: material-bread-vue-native-example

Usage

import React from 'react';
import { Button } from 'material-bread';

function App() {
  return <Button type="contained">Click Me</Button>;
}

Sponsored By

Fullstack Labs

Supported Components

A major goal of this library is to match all the components found in the material docs or provide enough demos/instructions that a developer can create a non-supported component from supported components. Keep in mind this still a work in progress so not all functionality from the Material Docs is supported yet.

Currently there are 39 distinct components (though what is a full component and what is a subcomponent is somewhat arbitrary), each with many variations, and 4 utility components.

Name iOS Android Web Electron
Appbar
AppbarBottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Button
Card
Checkbox
Chip
DataTable
Dialog
Divider
Drawer
DrawerBottom
Fab
FabSpeeddial
Icon
IconButton
List
ListExpand
Menu
Paper
ProgressBar
ProgressCircle
RadioButton
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
TextField
ToggleButton
Tooltip
Typography

Utility components

Name iOS Android Web Electron
Anchor
Color
Hoverable
Shadow

Contributing

All contributions are welcome and encouraged. If you are reporting a bug, please follow the bug issue template. If you are proposing an enhancement, please first search the backlogs before creating a new issue.

Contribute to library

Storybook is used as the dev environment for all components on all platforms. You can learn about how to get the storybook environment running locally for all platforms here. Please follow the conventions already in place. For example, most components follow the made up "props for prebuilt, children for custom" pattern. Additionally, make sure you are testing your components across platforms before making a PR.

Contribute to docs

Documentation is built using GatsbyJs and all pages are built using react components. You can learn how to get the docs running locally here.

Easy first contribution

You can start contribute extremely easily by improving demos or adding more interesting demos to the docs or storybook. Interesting, useful, and plentiful demos is a major goal of the project, so any help in that regard would be greatly appreciated.

Tests

Jest is the current test framework for all components. You can see the result of each component test in our storybook environement under the "Tests" tab. Writing more comprehensive tests is on the roadmap, but please consider contributing to speed this process up.

You can run tests locally using npm test.

You can generate test coverage by running npm run test:generate-output, this will output a json file with coverage.

Accessibility

react-native-web describes how to write accessible react-native components on the web here. Additionally, the storybook addon, addon-a11y, runs some simple accessibility tests on each component story. You can see the output of each accessibility test on the Accessibility tab for each component. Please consider contributing to make accessibility even better.

Copyright and License

Copyright 2019 Material Bread. Code released under the MIT license.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
BlackBoxVision/material-calendar-view: 发布时间:2022-08-17
下一篇:
forehalo/materialize-blog: redesign blog using material design发布时间:2022-08-17
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap