Button Documentation
This commit is contained in:
@@ -1,19 +1,33 @@
|
||||
import "../styles/App.css"
|
||||
|
||||
/**
|
||||
* Function Takes in Paramter for:
|
||||
* text: text to be shown on the button
|
||||
* width, height: width and height of the button
|
||||
* icon: an icon that should be shown on the button (HTML <svg> tag) (see Icons.js for example)
|
||||
* iconWidth, iconHeight: width and height of the icon
|
||||
* onClick: a function that should be run if the button is clicked
|
||||
* Example for onClick:
|
||||
* <Button onClick={onClick={() => {console.log("do something")}}
|
||||
* Example for icon:
|
||||
*/
|
||||
export default function Button(p) {
|
||||
|
||||
//default parameters for the button
|
||||
let text = p.text;
|
||||
let width = p.width, height = p.height;
|
||||
let iconHTML = p.icon;
|
||||
let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
|
||||
let onClick = p.onClick;
|
||||
|
||||
//if parameters are not set, they are set to default values
|
||||
if (height == null) height = 50;
|
||||
if (width == null) width = 100;
|
||||
if (iconWidth == null) iconWidth = 50;
|
||||
if (iconHeight == null) iconHeight = 50;
|
||||
if (onClick == null) onClick = () => {};
|
||||
|
||||
//build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
|
||||
if (iconHTML != null) {
|
||||
let split = iconHTML.split("fill=");
|
||||
split[1] = "fill=" + split[1];
|
||||
@@ -23,6 +37,7 @@ export default function Button(p) {
|
||||
iconHTML = "";
|
||||
}
|
||||
|
||||
//return the button
|
||||
return (
|
||||
<>
|
||||
<button className={"round-border button font font-middle"}
|
||||
|
||||
Reference in New Issue
Block a user