Created Floating action button component.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent e0bb4c8523
commit da146bfb07

@ -0,0 +1,45 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import './floatingButton.css';
class FloatingButton extends Component {
handleClick(event) {
console.log("click");
this.props.onClick(event);
}
render() {
let classes = 'btn-circle ' + this.props.className;
return (
<div className={classes} onClick={this.handleClick.bind(this)}>
<i className="fw fw-add"></i>
</div>
)
}
}
FloatingButton.propTypes = {
classNames: PropTypes.string,
onClick: PropTypes.func
};
export default FloatingButton;

@ -0,0 +1,49 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
.btn-circle {
color: white;
position: relative;
background-color: #e65100;
border-radius: 50%;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn-circle i {
position: absolute;
margin-top: 37%;
margin-left: 37%;
}
.small {
height: 50px;
width: 50px;
}
.medium {
height: 100px;
width: 100px;
}
.btn-circle:hover {
cursor: pointer;
}
.primary {
background-color: blue;
}
Loading…
Cancel
Save