Button Documentation

This commit is contained in:
brausjonas
2023-05-02 15:50:46 +02:00
parent 1f172ea4d2
commit dccefaa3ea
+15
View File
@@ -1,19 +1,33 @@
import "../styles/App.css" 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) { export default function Button(p) {
//default parameters for the button
let text = p.text; let text = p.text;
let width = p.width, height = p.height; let width = p.width, height = p.height;
let iconHTML = p.icon; let iconHTML = p.icon;
let iconWidth = p.iconWidth, iconHeight = p.iconHeight; let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
let onClick = p.onClick; let onClick = p.onClick;
//if parameters are not set, they are set to default values
if (height == null) height = 50; if (height == null) height = 50;
if (width == null) width = 100; if (width == null) width = 100;
if (iconWidth == null) iconWidth = 50; if (iconWidth == null) iconWidth = 50;
if (iconHeight == null) iconHeight = 50; if (iconHeight == null) iconHeight = 50;
if (onClick == null) onClick = () => {}; 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) { if (iconHTML != null) {
let split = iconHTML.split("fill="); let split = iconHTML.split("fill=");
split[1] = "fill=" + split[1]; split[1] = "fill=" + split[1];
@@ -23,6 +37,7 @@ export default function Button(p) {
iconHTML = ""; iconHTML = "";
} }
//return the button
return ( return (
<> <>
<button className={"round-border button font font-middle"} <button className={"round-border button font font-middle"}