手绘风格的 UI 合集:Wired Elements

·  阅读 3388
手绘风格的 UI 合集:Wired Elements
原文链接: github.com

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

alt Preview

The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

Try now

Play with wired-elements live on StackBlitz playground:

Wired Elements

Wired Elements in React

Install

The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.

Add wired-elements to your project:

npm i wired-elements
复制代码

or individual controls

npm i wired-button
复制代码

Usage

Import into your module script:

import { WiredButton, WiredInput } from "wired-elements"复制代码

Alternatively, load a bundled version from the dist folder or from CDN:

<script src="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.js"></script>复制代码

Use it in your web page:

<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>复制代码

Learn about web components here.

Demo

Demo of all components is available at wiredjs.com.

Dev Environment

View the Dev environment page for instructions.

License

MIT License (c) Preet Shihn

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改