Esempio n. 1
0
export default Component(() => (
  <div>
    <Example code="import { Table } from 'snabbdom-material'"/>
    <p>
      Only <code>Table</code>, <code>Table.Toolbar</code> and <code>Table.Row</code> are necessary, for other
      element types use the default html
      elements <code>thead</code>, <code>tbody</code>, <code>th</code> and <code>td</code>.
    </p>
    <Paper noPadding style={{ paper: { margin: '24px 0' } }}>
      <Table>
        <thead>
          <Table.Toolbar colSpan={3}>
            <Button style={{ margin: '0 8px', padding: '0 8px' }} primary flat onClick={() => {}}>Add</Button>
          </Table.Toolbar>
          <Table.Row>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Role</th>
          </Table.Row>
        </thead>
        <tbody>
          {[
            { firstName: 'Brian', lastName: 'Wilson', role: 'user' },
            { firstName: 'Geoff', lastName: 'Hayes', role: 'user' },
            { firstName: 'John', lastName: 'Doe', role: 'admin' }
          ].map((user) => (
            <Table.Row onClick={() => console.log('clicked', user)}>
              <td>{user.firstName}</td>
              <td>{user.lastName}</td>
              <td>{user.role}</td>
            </Table.Row>
          ))}
        </tbody>
      </Table>
    </Paper>
    <Example code={`${
    N}<Table className="paper1">${
    N}  <thead>${
    N}    <Table.Toolbar colSpan={3}>${
    N}      <Button style={{ margin: '0 8px', padding: '0 8px' }} primary flat>Add</Button>${
    N}    </Table.Toolbar>${
    N}    <Table.Row>${
    N}      <th>First Name</th>${
    N}      <th>Last Name</th>${
    N}      <th>Role</th>${
    N}    </Table.Row>${
    N}  </thead>${
    N}  <tbody>${
    N}    {[${
    N}      { firstName: 'Brian', lastName: 'Wilson', role: 'user' },${
    N}      { firstName: 'Geoff', lastName: 'Hayes', role: 'user' },${
    N}      { firstName: 'John', lastName: 'Doe', role: 'admin' }${
    N}    ].map((user, index) => (${
    N}      <Table.Row key={index} onClick={select(user)}>${
    N}        <td>{user.firstName}</td>${
    N}        <td>{user.lastName}</td>${
    N}        <td>{user.role}</td>${
    N}      </Table.Row>${
    N}    ))}${
    N}  </tbody>${
    N}</Table>
    `}/>
  </div>
))
Esempio n. 2
0
export default Component(() => (
  <div>
    <Typ headline>Screen Info</Typ>
    <p>
      Many components require a <code>screenInfo</code> object to be passed in via props.
      A <code>getScreenInfo()</code> helper has been provided that will get the required object. However
      it is stongly recommended to use the <a href='#/responsiveEvents'>responsive events</a> system that
      will automatically emit an updated <code>screenInfo</code> whenever it changes (such as when the
      device is rotated).
    </p>
    <Example code={`${
    N}import { getScreenInfo } from 'snabbdom-material'${
    N}const screenInfo = getScreenInfo()
    `}/>

    <Typ headline>Custom Styling</Typ>
    <p>
      All snabbdom-material components accept a <code>style</code> prop which can be used to cutomise
      the style of individual components.
    </p>
    <p>
      To change the global styles add the following to your app init logic:
    </p>

    <Example code={`${
    N}import { style } from 'snabbdom-material'${
    N}${
    N}style.init(style.getComponentVariables({${
    N}${
    N}  // optionally set custom style base variables here${
    N}${
    N}}), {${
    N}${
    N}  // optionally set style overrides here${
    N}${
    N}})
    `}/>

    <Typ headline>Default Variables</Typ>

    <Example code={`${
    N}export const baseVariables = {${
    N}  primaryColor: '#FFC107',${
    N}  primaryFontColor: 'rgba(0, 0, 0, 0.7)',${
    N}  primaryFontColorDisabled: 'rgba(0, 0, 0, 0.45)',${
    N}  primaryLightWaves: false,${
    N}  secondaryColor: '#009688',${
    N}  secondaryFontColor: 'rgba(255, 255, 255, 0.9)',${
    N}  secondaryFontColorDisabled: 'rgba(255, 255, 255, 0.6)',${
    N}  secondaryLightWaves: true,${
    N}  disabledFontColor: 'rgba(0, 0, 0, 0.35)',${
    N}  labelColor: '#AAA',${
    N}  errorColor: '#C00',${
    N}  successColor: '#090',${
    N}  typographyColor: '#212121',${
    N}  transitionTime: '.3s'${
    N}}${
    N}${
    N}export const getComponentVariables = (customBaseVariable) => {${
    N}  const variables = Object.assign({}, baseVariables, customBaseVariable)${
    N}${
    N}  return Object.assign({${
    N}    // appbar${
    N}    appbarHeight: 64,${
    N}    appbarBackgroundColor: variables.primaryColor,${
    N}    appbarFontColor: variables.primaryFontColor,${
    N}    appbarButtonLightWaves: variables.primaryLightWaves,${
    N}    appbarButtonFontColor: variables.primaryFontColor,${
    N}    appbarButtonFontColorDisabled: variables.primaryFontColorDisabled,${
    N}  ${
    N}    // button${
    N}    buttonLightWaves: variables.primaryLightWaves,${
    N}    buttonPrimaryLightWaves: variables.primaryLightWaves,${
    N}    buttonSecondarylightWaves: variables.secondaryLightWaves,${
    N}    buttonFontColor: variables.primaryFontColor,${
    N}    buttonPrimaryFontColor: variables.primaryFontColor,${
    N}    buttonSecondaryFontColor: variables.secondaryFontColor,${
    N}    buttonDisabledFontColor: variables.disabledFontColor,${
    N}    buttonFlatPrimaryFontColor: variables.primaryColor,${
    N}    buttonFlatSecondaryFontColor: variables.secondaryColor,${
    N}    buttonFlatDisabledFontColor: variables.disabledFontColor,${
    N}    buttonBackgroundColor: 'transparent',${
    N}    buttonPrimaryBackgroundColor: variables.primaryColor,${
    N}    buttonSecondaryBackgroundColor: variables.secondaryColor,${
    N}    buttonDisabledBackgroundColor: 'rgba(0, 0, 0, 0.12)',${
    N}  ${
    N}    // calendar${
    N}    calendarLightWaves: variables.primaryLightWaves,${
    N}    calendarSelectedDayFontColor: variables.secondaryFontColor,${
    N}    calendarSelectedDayBackgroundColor: variables.secondaryColor,${
    N}    calendarTodayFontColor: variables.secondaryColor,${
    N}    calendarNavIconColor: variables.typographyColor,${
    N}    calendarTitleFontColor: '#3e3e3e',${
    N}    calendarHeadingFontColor: '#9e9e9e',${
    N}  ${
    N}    // checkbox${
    N}    checkboxLightWaves: false,${
    N}    checkboxIconColor: 'rgba(0, 0, 0, 0.54)',${
    N}    checkboxIconSelectedColor: variables.secondaryColor,${
    N}  ${
    N}    // datepicker${
    N}    datepickerTitleBackgroundColor: variables.secondaryColor,${
    N}    datepickerTitleColor: variables.secondaryFontColor,${
    N}  ${
    N}    // input${
    N}    inputBackgroundColor: 'transparent',${
    N}    inputLabelColor: variables.labelColor,${
    N}    inputLabelFocusedColor: variables.secondaryColor,${
    N}    inputErrorColor: variables.errorColor,${
    N}    inputSuccessColor: variables.successColor,${
    N}  ${
    N}    // mask${
    N}    maskBackgroundColor: 'rgba(0, 0, 0, 0.15)',${
    N}  ${
    N}    // menu${
    N}    menuTopOffset: 10,${
    N}    menuTopPadding: 10,${
    N}    menuItemHeight: 32,${
    N}    menuBackgroundColor: '#fff',${
    N}    menuFontColor: variables.typographyColor,${
    N}  ${
    N}    // paper${
    N}    paperBackgroundColor: '#fdfdfd',${
    N}  ${
    N}    // select${
    N}    selectSelectedItemBackgroundColor: '#dcdcdc',${
    N}    selectDropDownIconColor: variables.labelColor,${
    N}  ${
    N}    // sidenav${
    N}    sidenavWidth: 280,${
    N}    sidenavCloseLightWaves: false,${
    N}    sidenavCloseIconColor: variables.typographyColor,${
    N}    sidenavItemColor: variables.typographyColor,${
    N}    sidenavItemSelectedColor: variables.primaryColor,${
    N}  ${
    N}    // spinner${
    N}    spinnerPrimaryColor: variables.primaryColor,${
    N}    spinnerSecodaryColor: variables.secondaryColor,${
    N}  ${
    N}    // typography${
    N}    typographyPrimaryColor: variables.primaryColor,${
    N}    typographySecodaryColor: variables.secondaryColor${
    N}  }, variables)${
    N}}
    `}/>

  </div>
))
Esempio n. 3
0
import { Component } from 'cerebral-view-snabbdom'
import { Typ } from '../../lib'

export default Component(() => (
  <div>
    <Typ headline>snabbdom-material</Typ>
    <p>
      snabbdom-material is a library of <a href='https://github.com/paldepind/snabbdom'>snabbdom</a> user
      interface components based on <a href='https://www.google.com/design/spec/'>material design</a>.
    </p>
    <p>
      snabbdom-material components are completely stateless making them an ideal companion to libraries such
      as <a href='http://www.cerebraljs.com'>Cerebral</a>.
    </p>
    <p>
      For source code please see
      the <a href='https://github.com/garth/snabbdom-material'>GitHub Repository</a>.
    </p>
    <p>
      The development of snabbdom-material has been sponsored
      by <a href='http://www.elastictime.com/'>Elastic Time</a>.
    </p>
  </div>
))
Esempio n. 4
0
import { Component } from 'cerebral-view-snabbdom';
import TeamListItem from '../TeamListItem';

export default Component(({
  state: {app: {selectedTeamId}, teams: {byName}},
  signals
}) => {
  return (
    <div id="list" className="pure-u-1">
      {byName.map(team =>
        <TeamListItem
          key={team.id}
          {...team}
          onClick={() => signals.teams.teamSelected({id: team.id})}
        />
      )}
    </div>
  );
});