Rimble - dapps UI库
Rimble
https://rimble.consensys.design/
Rimble is an open-source library of React components and guides to help you make dApps everyone can use.
去中心化应用引入了新的设计模式, 对设计者和开发者都带来了负担。
此库就是为解决这个问题的。
Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dapp UX patterns, validated through user research, and built for developers.
rimble-ui
https://github.com/ConsenSysMesh/rimble-ui
为去中心化应用提供可适应的组件和设计标准。
为创建此类应用更加容易,并带有出色的用户体验。
但是此库还不出于稳定状态。
Rimble is a project from ConsenSys Design, aiming to provide adaptable components and design standards for decentralized applications (dApps). Our goal is simply to make it easier to build dApps with outstanding user experience. If you're interested, we have written a bit more about our rationale and approach to building Rimble.
Rimble is in initial development and should not be considered stable today. We have made the project public in a very early stage of work in order to gather feedback from the community of designers and developers building dApps.
We are actively working on adding new components to Rimble and will be sharing more information on the roadmap very soon.
组件
https://rimble.consensys.design/components#components-a-z
![]()
Avatar
Images that represent things – like currencies – in your product.![]()
Blockie
Identicons for representing Ethereum addresses.![]()
Box
A responsive component for box-model layouts.![]()
Button
Allows a user to take an action or make a choice.![]()
Card
Creates a Box layout for content and actions about a specific subject.![]()
Checkbox
Allows a user to choose one or more items from a list.![]()
EthAddress
Allows a user to quickly view, copy and scan an Ethereum address.![]()
Field
A quick way to add a label to your form inputs.![]()
Flash
A way to deliver messages to your user without blocking them.![]()
Flex
For arranging content in columns or rows and making responsive layouts.![]()
Form
Gives your inputs validation styles and feedback messages.![]()
Heading
Give pages or page areas titles that introduce the content below.![]()
Image
Add an image and its alt description to your product.![]()
Input
Input allows you add different types of inputs when building forms.![]()
Link
Link provides a basic styled link – ideal for use in copy.![]()
Loader
Loader lets you know that a process is happening or content is loading.![]()
MetaMaskButton
Show your users when an action will involve MetaMask.![]()
Modal
Display information that requires a choice or an acknowledgement.![]()
Pill
Pill allows you to show a status or grouping at a glance.![]()
Progress
Shows a user their progress through a process or loading.![]()
QR
QR creates a QR code from a string – like an Ethereum address.![]()
Radio
Allows a user to choose only one item from a list.![]()
Select
Allows a user to choose from a drop-down list.![]()
Slider
Allows a user to control a value using a slider.![]()
Table
Allows a user to compare data in your product.![]()
Text
Text allows you to control the presentation of your copy content.![]()
Textarea
Textarea gives you a long-form free-text input for your forms.![]()
ToastMessage
Provide your users with an unimportant temporary message.![]()
Tooltip
Give your user extra information about something on the interface.![]()
UPortButton
Show your users when an action will involve uPort.Rimble Icons