smart-webcomponents

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Material Bootstrap Input | https://www.htmlelements.com</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../../styles/demos.css" /> <link rel="stylesheet" type="text/css" href="../../styles/common.css" /> <script type="text/javascript" src="../../scripts/common.js"></script> <link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="../source/smart.element.js"></script> <script type="text/javascript" src="../source/smart.bootstrap.js"></script> <script src="index.js"></script> </head> <body class="smart viewport"> <h2 id="buttons">Material Bootstrap Input`</h2><br /> <p>Use Material Bootstrap inputs to replace the standard text inputs. The component is available in Bootstrap and Material styles and supports different rendering modes.</p> </br> <h2>Input</h2> <p> The Input elements below are created with the "bootstrap-input" tag. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="group"> <div class="mb-3"> <bootstrap-input placeholder="Primary" style-mode="primary"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Success" style-mode="success"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Info" style-mode="info"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Warning" style-mode="warning"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Danger" style-mode="danger"></bootstrap-input> </div> </div> <h2>Textarea</h2> <p> The Textarea elements below are created with the "bootstrap-textarea" tag. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="group"> <div class="mb-3"> <bootstrap-textarea placeholder="Primary" style-mode="primary"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Success" style-mode="success"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Info" style-mode="info"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Warning" style-mode="warning"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Danger" style-mode="danger"></bootstrap-textarea> </div> </div> <h2>Material Design</h2> <h2>Input</h2> <p> The Input elements below are created with the "bootstrap-input" tag. By default, they are outlined. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-input placeholder="Primary" style-mode="primary"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Success" style-mode="success"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Info" style-mode="info"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Warning" style-mode="warning"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input placeholder="Danger" style-mode="danger"></bootstrap-input> </div> </div> <h2>Textarea</h2> <p> The Textarea elements below are created with the "bootstrap-textarea" tag. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-textarea placeholder="Primary" style-mode="primary"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Success" style-mode="success"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Info" style-mode="info"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Warning" style-mode="warning"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea placeholder="Danger" style-mode="danger"></bootstrap-textarea> </div> </div> <h2>Outlined Inputs</h2> <h2>Input</h2> <p> The Input elements below are created with the "bootstrap-input" tag. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-input outlined placeholder="Primary" style-mode="primary"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input outlined placeholder="Success" style-mode="success"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input outlined placeholder="Info" style-mode="info"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input outlined placeholder="Warning" style-mode="warning"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input outlined placeholder="Danger" style-mode="danger"></bootstrap-input> </div> </div> <h2>Textarea</h2> <p> The Textarea elements below have "outlined" attribute. </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-textarea outlined placeholder="Primary" style-mode="primary"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea outlined placeholder="Success" style-mode="success"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea outlined placeholder="Info" style-mode="info"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea outlined placeholder="Warning" style-mode="warning"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea outlined placeholder="Danger" style-mode="danger"></bootstrap-textarea> </div> </div> <h2>Filled Inputs</h2> <h2>Input</h2> <p> The Input elements below have "filled" attribute. </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-input filled placeholder="Primary" style-mode="primary"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input filled placeholder="Success" style-mode="success"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input filled placeholder="Info" style-mode="info"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input filled placeholder="Warning" style-mode="warning"></bootstrap-input> </div> <div class="mb-3"> <bootstrap-input filled placeholder="Danger" style-mode="danger"></bootstrap-input> </div> </div> <h2>Textarea</h2> <p> The Textarea elements below are created with the "bootstrap-textarea" tag. The "style-mode" property of each input is set to "primary", "success", "info", "warning" or "danger". </p> <div class="smart material group"> <div class="mb-3"> <bootstrap-textarea filled placeholder="Primary" style-mode="primary"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea filled placeholder="Success" style-mode="success"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea filled placeholder="Info" style-mode="info"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea filled placeholder="Warning" style-mode="warning"></bootstrap-textarea> </div> <div class="mb-3"> <bootstrap-textarea filled placeholder="Danger" style-mode="danger"></bootstrap-textarea> </div> </div> </body> </html>