rough-stuff / wired-elements Goto Github PK
View Code? Open in Web Editor NEWCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.
Home Page: https://wiredjs.com
License: MIT License
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
Home Page: https://wiredjs.com
License: MIT License
I tried importing a wired element but React throws an error:
NotSupportedError
Failed to construct 'CustomElement': The result must not have attributes
https://codesandbox.io/s/pp4q7kw9q7
Do I need to do something else to make it compatible with react? thanks!
Would a PR be accepted that added accessible outlines, tab navigation and screen readability to these components?
<wired-card>
calls this._requestRender()
when the slotchange
event is fired. However, that method does not exist on the elemnt.
<wired-card>
depends on Lit Element ^0.5.1
. I've checked the source code of Lit Element, and it looks like they renamed it to this.requestRender()
:
(I did a quick search and noticed a few more places that call _requestRender()
.
I was using <wired-card>
by importing it form unpkg:
<script type='module' src='https://unpkg.com/[email protected]/wired-card.js?module'></script>
Again, need this on almost every project. If these are not in scope, just close it.
See reference: https://materializecss.com/toasts.html
These are needed on almost every project.
See for reference: https://materializecss.com/modals.html
It seems that every wired element I tested has a focus ring. It goes away when I add outline: none;
. Is this a problem or is it intended?
I don't know if charting is on the table or not, but these charting controls are useful.
Is this due to lit-html
not supporting IE11 in some edge cases?
I think a navigation sidebard, with a tree view option would be nice control to have. I don't know if this is appropriate for a self-contained control, but I sure wish it was because I always seem to spend time on these in the past.
The current setup is each component has its own standalone package.
We should think about adopting monorepo structure where we would have to maintain only one repo. This makes maintenance and debugging better and easier.
I would love to contribute adopting monorepo or yarn workspaces for the project.
window.ShadyCSS.prepareTemplateDom is not a function
After using the wired-button, I realized the button width and height is a fixed path.
How can I change the width of the button?
Failed to modify the code from this file
./node_modules/@polymer/lit-element/lit-elelment.js:12
This doesn't appear to work in a Typescript project using React. If I use the lower case <wired-button>
, Typescript gives the error, Property 'wired-button' does not exist on type 'JSX.IntrinsicElements'.
If I use <WiredButton>
as if it were a React component, I get a runtime error, TypeError: Class constructor WiredButton cannot be invoked without 'new'
. Is there any way to fix one/both of these errors, or modify the library so it can be used in Typescript + React projects?
This is the critical control and almost always needed. It's a date control, and usually has a dropdown calendar to pick a date or date range (most of the time just a signle date).
The element looks great for web project. Mine isn't an issue is more of a request for a paginated Table.
I am trying to use the wired-checkbox-Element, but ran into a few problems. Would love to use those, because I think wired-elements look pretty neat :)
Installed with npm i wired-checkbox
and copied the tag. Btw, I think it would be nicer if the path would include the node-modules directory, so you don't have work it out yourself ...
The HTML looks like this:
<html` lang="en">
<head>
<meta charset="UTF-8">
<script type="module" src="node_modules/wired-checkbox/wired-checkbox.js"></script>
</head>
<body>
<wired-checkbox text="Checkbox One"></wired-checkbox>
</body>
</html>
When I open it up in the Browser the console logs TypeError: Error resolving module specifier: @polymer/lit-element/lit-element.js
I looked for known Issues and stumbled upon this one.
After copying <script type="module" src="https://unpkg.com/wired-button@latest/wired-button.js?module"></script>
from the jsfiddle sample (which works) and changing it to be wired-checkbox
it throws Reference Error: customElements is not defined
Firstly - I love love love this library and have already pulled it into be part of our key work flow with clients.
However I also love React SFC's and would love it if i could use a wired-elements sfc library.
If I had the time I would consider making a fork honorary this library as the root and mirror improvements into it.
Is anyone aware of someone that is already doing this?
I was on the showcase (https://wiredjs.com/showcase.html) in the wired-combo section and I noticed that the disabled element can be opened if you click on its small triangle. It seems like a bug to me.
Just wanted to let you know
Really nice work btw
When I resize my page, the card doesn't resize dynamically. Can I trigger it somehow?
<body>
<main>
<wired-card elevation="2">Here's my content</wired-card>
</main>
</body>
and some css to show responsiveness
body,html { height:100vh;}
body{display:flex;}
main{flex:1;position:relative}
wired-card{position:absolute;top:10px;left:10px;width:calc(100%-20px);height:calc(100%-20px)}
I didn't see any particular handlers for observing or responding to resize events on these components - perhaps I'm missing something?
I'm always in need of search input control, with either the button next to it or the magnifying glass inside the input.
when i use it in chrome 67.0.3396.62, it report error from console that " Relative references must start with either "/", "./", or "../". "
my web server is tomcat
i hope u can fixed all "import" Sentence
an interesting UI framework, I want to know how to support a table elements in my web page, I'm not good at HTML/CSS/JS and can't find any introduce to a table emement.
Wired Elements accesses window
object which makes it unsuitable with server-side rendering, which just crash.
Well, I know, but still⦠:p
I think a navigation header, with a few dropdowns on the right and something on the left, with the option to colapse into a menu dropdown as you see on mobile, would be nice control to have.
Again, I don't know if this is appropriate for a self-contained control, but I sure wish it was because I always seem to spend time on these in the past.
Hello idk if this is the right place, but how to use this ? :S I'm pretty confused I thought it was as simple as the readme x))
Thanks and have a nice day
https://stackblitz.com/edit/wired-elements?file=index.html
Error in 0.6.0/wired-button.js (86:1)
customElements is not defined
Evaluating https://unpkg.com/[email protected]/wired-button.js
Evaluating https://unpkg.com/[email protected]/wired-elements.js
Evaluating index.js
Booting application
You have a progress bar, but this is a preloader and shows of course something is happening...
Reference: https://materializecss.com/preloader.html
Again, don't know if this kinda thing is in scope, but I'm almost always building a control that allows one to pick a file or files from the desktop or a URL.
I might be making a newbie mistake but when I try to use wired-input connected with v-model in vuejs the model isn't updating.
I don't know if controls like this are in scope, but is also a nice to have control.
Just like LitElement's official demo at CodePen, it would be great to try it out out of the box, this great wired-elements, without downloading packages, setting up local development environments, etc..
LitElements provides its built assets within its repository so I can just use them from CodePen with unpkg.com CDN.
it would be great if wired-elements also provides the same way :D
something wrong when it work with Vue
I can't get value when I uesd v-model
combine wired-input
but if I use input
I can get the value from input
<template>
<wired-input placeholder="Hero name" type="text" v-model="name"></wired-input>
<wired-button @click="print">Click Me</wired-button>
</template>
<script>
import { WiredButton, WiredInput } from "wired-elements";
export default{
data(){
return {
name:''
}
}
methods:{
print(){
alert(this.score);
}
}
</script>
Instead of a signle point slider, a range slider with two points is sometimes a nice option.
See this: https://materializecss.com/range.html
I couldn't find any, but perhaps someone is working on this. It would give an extra level of randomness/uniqueness to the mockups.
On Chrome, Opera & Safari. It loads up with no sketch displayed, only when I started clicking the item.
I really want to use the wired.js component in the vue.js project. Can I support it?
when I type this to import WiredCard:
import { WiredCard } from "wired-card";
there are a error in FF:
ReferenceError: customElements is not defined
but totally normal operation in chrome.
I am sure the error is caused by wired-js
:
customElements.define('wired-card', WiredCard);
what can I do to solve it?thanks!
I am using this in a custom Joomla template but changing "input" to "wired-input" breaks Joomla form. Joomla expects < input >. Is there a way I can achieve the wired effect by using a css class instead of changing them to "wired-***" ?
It'd be cool if there were an option for wired-button
and similar elements with solid background colors to render the background as an svg path that looks like a thick pen/brush stroke, rather than a solid rectangle. I think this would help it feel a lot "sketchier."
Thanks for making these awesome components! π
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.