vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Update Google URLs

old
Antti Ahti 2016-11-06 21:18:36 +02:00
parent 89647815cb
commit df81465350
22 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -2,7 +2,7 @@
[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
## Installation
@ -179,7 +179,7 @@ A couple of things here. First you need to use raw components to get this styles
## Roboto Font and Material Design Icons
React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.

6
components/_globals.scss
View File

@ -56,16 +56,16 @@ $z-index-lower: -200 !default;
//-- Breakpoints
// height of app bar
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
$standard-increment-mobile: (5.6 * $unit) !default;
$standard-increment-desktop: (6.4 * $unit) !default;
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
$baseline-grid: (0.8 * $unit) !default;
$layout-gutter-width-sm: ($baseline-grid * 2) !default;
$layout-gutter-width: ($baseline-grid * 3) !default;
// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
// 4 columns
$layout-breakpoint-xxs: 480px !default;
// 8 columns

2
components/button/readme.md
View File

@ -1,6 +1,6 @@
# Button
A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
A [button](https://material.google.com/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
<!-- example -->
```jsx

2
components/card/readme.md
View File

@ -1,6 +1,6 @@
# Card
A [Card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
A [Card](https://material.google.com/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
Cards are composed of multiple subcomponents in React Toolbox. You can combine each of the subcomponents to create all different Material Design Cards given in the spec.

2
components/checkbox/readme.md
View File

@ -1,6 +1,6 @@
# Checkbox
[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
[Checkboxes](https://material.google.com/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
<!-- example -->
```jsx

2
components/date_picker/readme.md
View File

@ -1,6 +1,6 @@
# Date Picker
A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
A [dialog](https://material.google.com/components/pickers.html#pickers-date-pickers) date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
<!-- example -->
```jsx

2
components/dialog/readme.md
View File

@ -1,6 +1,6 @@
# Dialog
[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
[Dialogs](https://material.google.com/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
<!-- example -->
```jsx

2
components/drawer/readme.md
View File

@ -1,6 +1,6 @@
# Drawer
The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
<!-- example -->
```jsx

2
components/font_icon/readme.md
View File

@ -1,6 +1,6 @@
# Font Icon
The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
The font icon component is used to represent an icon from the [Google Material Design](https://material.io/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
<!-- example -->
```jsx

2
components/input/readme.md
View File

@ -1,6 +1,6 @@
# Input
Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://material.google.com/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
<!-- example -->
```jsx

2
components/layout/_config.scss
View File

@ -5,7 +5,7 @@ $drawer-text-color: $palette-grey-800 !default;
$drawer-overlay-color: $color-black !default;
$drawer-overlay-opacity: .6 !default;
// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
// from: https://material.google.com/layout/structure.html#structure-side-nav
$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
$navigation-drawer-max-desktop-width: 40 * $unit !default;

10
components/layout/readme.md
View File

@ -1,6 +1,6 @@
# Layout
A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://material.google.com/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
<!-- example -->
```jsx
@ -65,7 +65,7 @@ The primary layout component. This acts as the main container that all subcompon
### Breakpoints and Increments
The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
| Width | Abreviation | Typical Device |
|:-----|:-----|:-----|
@ -80,7 +80,7 @@ The Layout's subcomponents can alter their appearance and behavior based on the
| 1600px | `xxl` | desktop |
| 1920px | `xxxl` | desktop |
The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
The components also make use of [standard increments](https://material.google.com/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
### Content Area Layout
@ -103,7 +103,7 @@ The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrap
## NavDrawer
The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://material.google.com/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
| Breakpoint | Drawer Width | Notes |
|:-----|:-----|:-----|
@ -160,7 +160,7 @@ The `Panel` is the main content area within a `Layout`. It is a full-height fle
## Sidebar
The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://material.google.com/layout/structure.html#structure-side-nav)).
### Properties
| Name | Type | Default | Description |

2
components/list/readme.md
View File

@ -1,6 +1,6 @@
# List
A [list component](https://www.google.com/design/spec/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
A [list component](https://material.google.com/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension with the goal of differentiating between like data types or qualities within a single data type. You can compose lists based on subcomponents.

2
components/menu/readme.md
View File

@ -1,6 +1,6 @@
# Menu
A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
A [Menu](https://material.google.com/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
<!-- example -->
```jsx

2
components/progress_bar/readme.md
View File

@ -1,6 +1,6 @@
# Progress Bar
Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://www.google.com/design/spec/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://material.google.com/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
<!-- example -->
```jsx

2
components/radio/readme.md
View File

@ -1,6 +1,6 @@
# Radio buttons
[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
[Radio buttons](https://material.google.com/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
You can provide the theme for this component using the key `ToolboxButton`

2
components/slider/readme.md
View File

@ -1,6 +1,6 @@
# Slider
[Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
[Sliders](https://material.google.com/components/sliders.html) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
<!-- example -->
```jsx

2
components/tabs/readme.md
View File

@ -1,6 +1,6 @@
# Tabs
[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. Tabs are composed with their content, but only the active tab's content is rendered. In the future, we may add the ability to render headers only, with event listeners.
[Tabs](https://material.google.com/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. Tabs are composed with their content, but only the active tab's content is rendered. In the future, we may add the ability to render headers only, with event listeners.
<!-- example -->
```jsx

2
components/time_picker/readme.md
View File

@ -1,6 +1,6 @@
# Time Picker
A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
A [dialog picker](https://material.google.com/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
<!-- example -->
```jsx

4
docs/app/components/layout/install/install.md
View File

@ -1,6 +1,6 @@
# Installation, usage and customization
React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
## Installation
@ -177,7 +177,7 @@ A couple of things here. First you need to use raw components to get this styles
## Roboto Font and Material Design Icons
React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.

2
docs/app/components/layout/main/modules/components.md
View File

@ -1,6 +1,6 @@
# React Toolbox Components
React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://material.google.com/). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
On the top right side of the screen you will see a round button with a code icon. It opens a playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.

6
lib/_globals.scss
View File

@ -56,16 +56,16 @@ $z-index-lower: -200 !default;
//-- Breakpoints
// height of app bar
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
$standard-increment-mobile: (5.6 * $unit) !default;
$standard-increment-desktop: (6.4 * $unit) !default;
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
$baseline-grid: (0.8 * $unit) !default;
$layout-gutter-width-sm: ($baseline-grid * 2) !default;
$layout-gutter-width: ($baseline-grid * 3) !default;
// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
// 4 columns
$layout-breakpoint-xxs: 480px !default;
// 8 columns