react-toolbox

History

Javi Velasco 81acda7162 Migrate styles to PostCSS (#666 ) * Add postcss-next postcss-include and reporter * Add stylelint * Add CSS colors * Add CSS custom media queries * Use dashes for CSS colors * Add base CSS variables * Remove AppBar SASS dependency from spec page * Migrate AppBar style to PostCSS * Migrate Avatar style to PostCSS * Migrate Ripple style to PostCSS * Remove unneeded media CSS import in Avatar * Add shadows to CSS variables * Migrate Button style to PostCSS * Update webpack test config and linting from npm * Migrate Input style to PostCSS * Add missing input config variables for Dropdown and Autocomplete * Migrate Chip style to PostCSS * Migrate Autocomplete style to PostCSS * Migrate Dropdown style to PostCSS * Migrate animations to PostCSS * Migrate Card style to PostCSS * Migrate Checkbox style to PostCSS * Migrate DataPicker style to PostCSS * Migrate Dialog style to PostCSS * Migrate Drawer style to PostCSS * Add postcss-mixins and postcss-each * Migrate Layout style to PostCSS * Fix bug in button theme * Bugfix in avatar css * Add some missing nesting notations * Migrate Link style to PostCSS * Migrate List style to PostCSS * Migrate Menu style to PostCSS * Migrate Navigation style to PostCSS * Migrate Overlay style to PostCSS * Migrate ProgressBar style to PostCSS * Migrate Radio style to PostCSS * Migrate Slider style to PostCSS * Migrate Snackbar style to PostCSS * Migrate Switch style to PostCSS * Migrate Table style to PostCSS * Migrate Tabs style to PostCSS * Migrate TimePicker to PostCSS * Migrate Tooltip styles to PostCSS * Update webpack config for testing and tests * Migrate commons to PostCSS * Remove sass from main project * Bye from docs to sass * Build with CSS * Remove unneded deps for sass in docs subproject * Fix tests * use 4p shadow in AppBar as spec indicates * Fixed typo in list/config.css * Fix tests * Fix linter errors * Latest build * Release 2.0.0-beta.0 * Remove sass lint * fixes old sass var in css config * Update linter * New Table implementation * Fix old sass var in list/config.css See `da0c47041e`. * Remove normalize.css from commons.css * Update dependencies * Latest build * Input ready to accept visible hint * Prepare slider and progress to be disabled * Render Snackbar using Portal * Refactor Dialog, Drawer and Overlay to be used in Layout * Add inner layer to AppBar * New layout * Use Layout in spec * Latest build * remove layout playground example * add smTablet and lgTablet to NavDrawer in Layout readme * add default prop className to Layout, NavDrawer and Sidebar * fix css linter errors in card and slider * Typings for Table component * Add missing Drawer identifier * Update lib build * Adds onQueryChange callback property to Autocomplete The onQueryChange callback is called when the value of the query changes in Autocomplete. It is called with the new query value. * Fix #966 * Fix #965 * Fixes #976 * Updated css-related dependencies Removed usages of `addDependencyTo` since it's deprecated and not needed anymore. See https://github.com/postcss/postcss-import#adddependencyto * Enabled HMR for styles by disabling extracting them to a CSS file * Remove lib from repo * Remove lib * Fixes #1021 * Build using Gulp * Export ThemeProvider from react-css-themr * Add CHANGELOG to release command * Release 2.0.0-beta.1 * Remove immutability helper * Update dependencies * Fix Tooltip trying to render after it's been unmounted * Fixes #1038 * Release 2.0.0-beta.2 * Add ramda, refactor utils and remove slide animation modules * Remove separate slide animations modules * Remove box-sizing reset and body rule * Remove commons.css * Release 2.0.0-beta.4 * Update dependencies * Fixes #1061 * More aggresive guard condition for multiple autocomplete * Fix typeof check in isBrowser function * Fixes an issue when specs are opened with browsers that do not support Object.entries(). * Import from ramda using the 'import XXX from "ramda/src/XXX"' pattern so that bundle sizes will be smaller for not including the whole ramda package. * Fix #1032 * Fix tests * Update yarn.lock * Fixes #1064		2017-01-05 02:42:18 +01:00
..
Navigation.js	Better PropType syntax and delete required className api	2016-06-03 23:44:33 +02:00
config.css	Migrate styles to PostCSS (#666 )	2017-01-05 02:42:18 +01:00
index.d.ts	update typings to 1.3.3	2016-12-19 20:13:36 +01:00
index.js	Migrate styles to PostCSS (#666 )	2017-01-05 02:42:18 +01:00
readme.md	Autoinject Navigation theme	2016-05-29 21:56:10 +02:00
theme.css	Migrate styles to PostCSS (#666 )	2017-01-05 02:42:18 +01:00

readme.md

This component is intended to be a common wrapper for a group of links or buttons. It sets a minimal layout, semantic markup and spacing for each of those elements.

import Navigation from 'react-toolbox/lib/navigation';
import Link from 'react-toolbox/lib/link';

const actions = [
  { label: 'Alarm', raised: true, icon: 'access_alarm'},
  { label: 'Location', raised: true, accent: true, icon: 'room'}
];

const NavigationTest = () => (
  <div>
    <Navigation type='horizontal' actions={actions} />
    <Navigation type='vertical'>
      <Link href='http://' label='Inbox' icon='inbox' />
      <Link href='http://' active label='Profile' icon='person' />
    </Navigation>
  </div>
);

The theming for this component can be provided using the key RTNavigation.

Properties

Name	Type	Default	Description
`actions`	`Array`		Array of objects that will be represented as `<Button/>` so the keys will be transferred as properties the Button Component.
`className`	`String`		Set a custom class styles to style the navigation.
`routes`	`Array`		Array of objects similar to actions but that will be rendered as `<Link/>` component definition.
`type`	`String`	`horizontal`	Type of the navigation, it can be `vertical` or `horizontal`.

Theming

Name	Description
`button`	Used for buttons provided in the component.
`horizontal`	Used for the root element if the layout is horizontal.
`link`	Used for links provided in the component.
`vertical`	Used for the root element if the layout is vertical.