Merge branch 'master' of https://github.com/soyjavi/react-toolbox
* 'master' of https://github.com/soyjavi/react-toolbox: Add slider documentation Move button style to local cssold
Javi Jimenez Villar
commit
cc262911a5
|
|
@ -1,6 +1,6 @@
|
|||
require './style'
|
||||
FontIcon = require "../font_icon"
|
||||
Ripple = require "../ripple"
|
||||
localCSS = require './style'
|
||||
FontIcon = require '../font_icon'
|
||||
Ripple = require '../ripple'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
|
|
@ -14,11 +14,12 @@ module.exports = React.createClass
|
|||
type : React.PropTypes.string
|
||||
|
||||
getDefaultProps: ->
|
||||
className : ""
|
||||
type : "square"
|
||||
className : ''
|
||||
type : 'raised'
|
||||
|
||||
getInitialState: ->
|
||||
loading : @props.loading
|
||||
focused : false
|
||||
ripple : undefined
|
||||
|
||||
# -- Lifecycle
|
||||
|
|
@ -29,19 +30,26 @@ module.exports = React.createClass
|
|||
onClick: (event) ->
|
||||
event.preventDefault()
|
||||
client = event.target.getBoundingClientRect?()
|
||||
@setState ripple:
|
||||
left : event.pageX - client?.left
|
||||
top : event.pageY - client?.top
|
||||
width : (client?.width * 2.5)
|
||||
@setState
|
||||
focused: true
|
||||
ripple:
|
||||
left : event.pageX - client?.left
|
||||
top : event.pageY - client?.top
|
||||
width : (client?.width * 2.5)
|
||||
@props.onClick? event, @
|
||||
setTimeout (=> @setState focused: false), 450
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
<button data-component-button={@props.type}
|
||||
className = @props.className
|
||||
className += " #{@props.type}" if @props.type
|
||||
className += ' focused' if @state.focused
|
||||
|
||||
<button data-react-toolbox='button'
|
||||
onClick={@onClick}
|
||||
className={@props.className}
|
||||
className={localCSS.root + ' ' + className}
|
||||
disabled={@props.disabled or @state.loading}
|
||||
data-flex="horizontal center">
|
||||
data-flex='horizontal center'>
|
||||
{ <FontIcon value={@props.icon} /> if @props.icon }
|
||||
{ <abbr>{@props.caption}</abbr> if @props.caption }
|
||||
<Ripple origin={@state.ripple} loading={@state.loading} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../constants'
|
||||
|
||||
[data-component-button]
|
||||
:local(.root)
|
||||
z-index : 1
|
||||
display : inline-block
|
||||
position : relative
|
||||
|
|
@ -10,22 +10,63 @@
|
|||
text-decoration : none
|
||||
white-space : nowrap
|
||||
border : none
|
||||
transition-property background-color, box-shadow
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
transition-property : background-color, box-shadow
|
||||
transition-duration : ANIMATION_DURATION
|
||||
transition-timing-function : ANIMATION_EASE
|
||||
|
||||
&.raised, &.flat
|
||||
padding : (SPACE / 2) (SPACE / 1.25)
|
||||
font-size : FONT_SIZE_SMALL
|
||||
text-transform : uppercase
|
||||
border-radius : (SPACE / 8)
|
||||
> *
|
||||
vertical-align : bottom
|
||||
> .icon
|
||||
font-size : FONT_SIZE_BIG
|
||||
margin-right : (SPACE / 2)
|
||||
> abbr
|
||||
font-weight : FONT_WEIGHT_BOLD
|
||||
&.anchor
|
||||
width : 100%
|
||||
|
||||
&.flat
|
||||
background-color : transparent
|
||||
&:not(.primary):not(.accent)
|
||||
> [data-component-ripple]
|
||||
background-color : alpha(TEXT, 12.5%)
|
||||
&.primary
|
||||
color : PRIMARY
|
||||
> [data-component-ripple]
|
||||
background-color : alpha(PRIMARY, 12.5%)
|
||||
&.accent
|
||||
color : ACCENT
|
||||
> [data-component-ripple]
|
||||
background-color : alpha(ACCENT, 12.5%)
|
||||
|
||||
&.floating
|
||||
width : BUTTON_CIRCLE_HEIGHT
|
||||
height : BUTTON_CIRCLE_HEIGHT
|
||||
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
|
||||
border-radius : 50%
|
||||
> .icon
|
||||
line-height : BUTTON_CIRCLE_HEIGHT
|
||||
|
||||
// Overrides
|
||||
&[disabled]
|
||||
color : darken(DIVIDER, 25%)
|
||||
background-color : DIVIDER
|
||||
|
||||
// -- Style
|
||||
&:not([disabled])
|
||||
cursor : pointer
|
||||
&:hover, &:active, &:focus
|
||||
outline : 0
|
||||
&:not(.transparent)
|
||||
&:not(.flat)
|
||||
box-shadow ZDEPTH_SHADOW_1
|
||||
&:not(.primary):not(.accent)
|
||||
color : TEXT
|
||||
background-color : WHITE
|
||||
&:hover
|
||||
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
||||
&.focused
|
||||
box-shadow : ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
||||
&.primary, &.accent
|
||||
color : WHITE
|
||||
&.primary
|
||||
|
|
@ -33,54 +74,8 @@
|
|||
&.accent
|
||||
background-color : ACCENT
|
||||
|
||||
&.transparent
|
||||
background-color : transparent
|
||||
&:not(.primary):not(.accent)
|
||||
&:hover
|
||||
background-color : alpha(TEXT, 12.5%)
|
||||
&.primary
|
||||
color : PRIMARY
|
||||
&:hover
|
||||
background-color : alpha(PRIMARY, 12.5%)
|
||||
&.accent
|
||||
color : ACCENT
|
||||
&:hover
|
||||
background-color : alpha(ACCENT, 12.5%)
|
||||
&:not(.primary):not(.accent) > [data-component-ripple]
|
||||
background-color : DIVIDER
|
||||
&[disabled]
|
||||
color : darken(DIVIDER, 25%)
|
||||
&:not(.transparent)
|
||||
background-color : DIVIDER
|
||||
&.transparent
|
||||
background-color : transparent
|
||||
|
||||
// -- Layout
|
||||
&:not(.transparent) ~ &:not(:last-child)
|
||||
margin-left : SPACE
|
||||
> *
|
||||
pointer-events : none
|
||||
|
||||
[data-component-button="square"]
|
||||
padding : (SPACE / 2) (SPACE / 1.25)
|
||||
font-size : FONT_SIZE_SMALL
|
||||
text-transform : uppercase
|
||||
border-radius : (SPACE / 8)
|
||||
> *
|
||||
vertical-align : bottom
|
||||
> .icon
|
||||
font-size : FONT_SIZE_BIG
|
||||
margin-right : (SPACE / 2)
|
||||
> abbr
|
||||
font-weight : FONT_WEIGHT_BOLD
|
||||
|
||||
&.anchor
|
||||
width : 100%
|
||||
|
||||
[data-component-button="circle"]
|
||||
width : BUTTON_CIRCLE_HEIGHT
|
||||
height : BUTTON_CIRCLE_HEIGHT
|
||||
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
|
||||
border-radius : 50%
|
||||
> .icon
|
||||
line-height : BUTTON_CIRCLE_HEIGHT
|
||||
pointer-events: none
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
# Slider
|
||||
|
||||
```javascript
|
||||
var Slider = require('react-toolbox/components/slider');
|
||||
|
||||
// Normal slider with max, min and initial value
|
||||
<Slider min={0} max={255} value={140} />
|
||||
|
||||
// Slider with editable field, pinned and with steps
|
||||
<Slider editable pinned step={1} min={0} max={10} step={1}/>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
| ------------- |:-------:|:--------- |:---------- |
|
||||
| **editable** | Boolean | `false` | If true, an input is shown and user can use it to set the slider value.|
|
||||
| **pinned** | Boolean | `false` | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
|
||||
| **snaps** | Boolean | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
|
||||
| **step** | Number | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.|
|
||||
| **min** | Number | `0` | Minimum value permitted.|
|
||||
| **max** | Number | `100` | Maximum value permitted.|
|
||||
| **value** | Number | `0` | Value of the current value.|
|
||||
| **className** | String | `''` | Additional class name to provide custom styling.|
|
||||
|
||||
## Methods
|
||||
|
||||
#### getValue
|
||||
Returns the value of the slider.
|
||||
|
||||
```
|
||||
slider_instance.getValue();
|
||||
> 150
|
||||
```
|
||||
|
||||
#### setValue
|
||||
Sets the value of the slider.
|
||||
|
||||
```
|
||||
var new_value = 340
|
||||
slider_instance.setValue(new_value);
|
||||
```
|
||||
|
|
@ -13,19 +13,23 @@ module.exports = React.createClass
|
|||
# -- Render
|
||||
render: ->
|
||||
<section>
|
||||
|
||||
<h2>Buttons</h2>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button caption="Login"/>
|
||||
|
||||
<Button caption="Login" type="flat" />
|
||||
<Button caption="Primary" className="primary" icon="access_alarm" type="flat" />
|
||||
<Button caption="Secondary" className="accent" type="flat" />
|
||||
<Button caption="Disabled" disabled type="flat" />
|
||||
|
||||
<Button caption="Primary" className="primary" icon="access_alarm" />
|
||||
<Button caption="Secondary" className="accent" />
|
||||
<Button caption="Disabled" disabled />
|
||||
<Button caption="loading" loading />
|
||||
|
||||
<Button type="circle" icon="access_alarm" />
|
||||
<Button type="circle" icon="explore" className="primary" />
|
||||
<Button type="circle" icon="zoom_in" className="accent" />
|
||||
<Button type="circle" icon="input" disabled />
|
||||
<Button type="circle" icon="zoom_in" loading />
|
||||
|
||||
<Button type="floating" icon="access_alarm" />
|
||||
<Button type="floating" icon="explore" className="primary" />
|
||||
<Button type="floating" icon="zoom_in" className="accent" />
|
||||
<Button type="floating" icon="input" disabled />
|
||||
<Button type="floating" icon="zoom_in" loading />
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue