Basic button component built for use with clientside-view-loader. Follows material design principles.
This module utilizes the clientside-require and clientside-view-loader modules.
npm install clientside-view-button --save
// building and appending the view
var view_loader = await load('clientside-view-loader'); // load the view loader
var text_button = await view_loader.load('clientside-view-button').build({type:"text", title:"text button"});
document.body.appendChild(text_button);
// functionality usage
text_button.hide();
text_button.show();
text_button.set_state('loading');One can choose from the button types by defining build_options.type as text, outlined, or contained. See the gif above for visual examples.
A button can be set to be a floating_action_button by setting the option floating='true' or float='true'.
The default color scheme is set as color_scheme-blue. To change the color scheme one can choose from a list of premade color schemes or define their own. To define their own, look at src/styles.css to see how color_scheme-blue was created. Change the colors as desired.
To use a premade color scheme, set the option color_scheme=supported_color. E.g., color_scheme='blue'.
List of supported colors for premade color scheme :
bluered- more coming soon
Premade color schemes are defined from material design colors.
calling button.state('loading') can set the state to the loading state and show the spinner, as seen in the gif above.
calling button.state('default') will reset the state to the default state
calling button.hide() hides the element with display='none'
calling button.show() will show the button again, undoing hide()