# @blaze-elements/card Latest version **1.1.4** (published 2017-03-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @blaze-elements/card pnpm add @blaze-elements/card yarn add @blaze-elements/card bun add @blaze-elements/card ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.4 | | Published | 2017-03-23 | | First published | 2017-02-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Maintainers | blaze-elements | ## Links - npm: https://www.npmjs.com/package/@blaze-elements/card - Repository: https://github.com/wc-catalogue/blaze-elements - Homepage: https://github.com/wc-catalogue/blaze-elements#readme - Issues: https://github.com/wc-catalogue/blaze-elements/issues - npm.io page: https://npm.io/package/@blaze-elements/card ## Dependencies (1) - [@blaze-elements/common](https://npm.io/package/@blaze-elements/common.md) ^1.0.0 ## Recent versions - 1.1.4 (latest) — 2017-03-23 - 1.0.0-alpha.c5e62487 (canary) — 2017-02-15 - 1.1.3 — 2017-03-20 - 1.1.2 — 2017-03-06 - 1.2.0 — 2017-03-03 - 1.1.1 — 2017-03-03 - 1.1.0 — 2017-02-22 - 1.0.0-alpha.d801040c — 2017-02-15 - 1.0.0-alpha.0fb0f07c — 2017-02-15 - 1.0.0 — 2017-02-15 ## README # Blaze Elements Blaze Elements Logo [Blaze CSS](http://blazecss.com/) wrapped using [Web Component](http://webcomponents.org/) [PROJECT STATUS](https://github.com/wc-catalogue/blaze-elements/milestones) [![Build Status](https://travis-ci.org/wc-catalogue/blaze-elements.svg?branch=master)](https://travis-ci.org/wc-catalogue/blaze-elements) [![npm version](https://badge.fury.io/js/blaze-elements.svg)](https://badge.fury.io/js/blaze-elements) [![Build Status](https://saucelabs.com/browser-matrix/elmariofredo.svg)](https://saucelabs.com/beta/builds/de2a9d3d2222445290dd8e29ba80de84) ## Quick start You can install whole blaze-elements suite or just specific component/packages. Install the library `yarn add blaze-elements`. From user perspective you can use whole lib or separate packages in 2 modes: 1. traditional widget style ( standalone web component ) 2. in SPA ( raw Web component with peerDependency on Skate ) ### 1. Widget Style ( pure Web Component + all dependecies bundled ) Then simply include the correct files, write some HTML, and you are done! ```html Blaze Elements for the web

Blaze App

 Home About
``` ### 2. SPA > @TODO ## Installing individual components Blaze-elements is modular by design. Each component lives within its own packages `yarn add bl-button bl-card bl-textfield bl-typography` All our components can be found in the [packages](https://github.com/wc-catalogue/blaze-elements/tree/master/packages) directory. Each component has a *README* documenting installation and usage. So let's say you just want to use blaze buttons ```html Blaze Elements for the web Click me ``` --- ## Frameworks interop **NOTE:** `` is the same as `` ### React ```ts import {Button} from 'bl-button'; import {Input} from 'bl-input'; import * as React from 'react'; import {Component} from 'react'; import {render} from 'react-dom'; const mountPoint = document.getElementById('app'); type AppState = {name:string, color: string} class App extends Component { state = { name: 'Jim Raynor', color: 'brand' } private blInputRef: Input; private blButtonRef: Button; render(){ return (
console.log('submitted')}> this.blInputRef=node}> this.blButtonRef=node} type="submit" >Submit
) } componentDidMount(){ this.setRefsProps(); this.setRefsListeners(); } componentDidUpdate(){ this.setRefsProps(); } private setRefsProps(){ this.blButtonRef.color = this.state.color; this.blInputRef.value = this.state.name; } private setRefsListeners(){ this.blInputRef.addEventListener(Button.events.change, (event: CustomEvent)=>{ this.setState({ name: event.target.detail.value }) }) } } render(,mountPoint) ``` ### Preact >= 7 ```ts import {Button} from 'bl-button'; import {Input} from 'bl-input'; import {h,render,Component} from 'preact'; const mountPoint = document.getElementById('app'); type AppState = {name:string, color: string} class App extends Component { state = { name: 'Jim Raynor', color: 'brand' } render(){ return (
console.log('submitted')}> this.setState({name:event.target.detail.value})} > Submit
) } } render(,mountPoint) ``` ### Angular >= 2 ```ts import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; @Component({ selector: 'my-app', template: ` <${Input.is} [value]="name" (change)="name=$event.target.detail.value" > <${Button.is} type="submit" [color]="color">Submit ` }) class AppComponent { name = 'Jim Raynor'; color = 'brand'; } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) platformBrowserDynamic().bootstrapModule(AppModule); ``` --- ## [Development](docs/DEVELOPER.md) --- ## Packaging and Usage ### `bl-button` #### Installing `yarn add bl-button` will contain 2 bundles: 1. `index-with-dependecies.min.js` - minified and bundled all `dependencies` of bl-button + skatejs ( without polyfills ) 2. `index.min.js` - just minified implementation of `bl-button` , skatejs and all dependecies should be loaded via specific `imports` ( without polyfills ) and generated type definitions with JSX.Intrinsic element plugin for specific custom element So shiped package structure should look like: ``` bl-button/ |-- index.min.js * compiled Button with customElements.define |-- index.min.js.map |-- index.d.ts |-- index-with-deps.min.js * compiled Button bundled with Skate and all `dependencies` and `customElements.define` |-- index-with-deps.min.js.map |-- Button.js * compiled Button for custom WC registration |-- Button.d.ts |-- README.md |-- package.json ``` #### Usage: 1. within any app ( PHP, Ruby, JSP, plain HTML, whatever... ) ```html Hello ``` 2. within SPA with bundler ( webpack ) ```html
``` ```ts // CustomButton.tsx import {Button, ButtonProps} from 'bl-button/Button'; declare global { namespace JSX { interface IntrinsicElement { 'my-button': ButtonProps & Partial } } } customElements.define('my-button',Button); // main.ts import 'skatejs-web-components'; import 'skate'; import 'bl-button'; import 'bl-calendar'; import 'bl-input'; import * as React from 'react'; import {render} from 'react-dom'; // add custom namespaced button button import './CustomButton'; const mountPoint = document.getElementById('app'); const App = () => (

Hello world

Submit Im custom yo!
) render(, mountPoint); ``` --- _Source: https://npm.io/package/@blaze-elements/card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._