Greetings, I am diving into the world of Ionic for the first time. Recently, I embarked on a new project in Ionic and decided to integrate a theme. To do so, I copied an .html file, an .scss file, and also created a .ts file.
Forms.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="../bower_components/ionic/release/css/ionic.min.css">
<link rel="stylesheet" type="text/css" href="../dist/css/ionic.material-design-lite.css">
<script src="../bower_components/ionic/release/js/ionic.bundle.js"></script>
<script src="../dist/js/ionic.material-design-lite.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body class="use-material-icons" ng-app="material-starter">
<div class="bar bar-header bar-assertive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Form Elements</h1>
</div>
<ion-content class="has-header padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name" class="ng-invalid">
</label>
<label class="item item-input item-floating-label input-calm">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input input-energized">
<span class="input-label">Username</span>
<input type="text" ng-model="user">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text">
</label>
<label class="item item-input">
<textarea placeholder="Comments"></textarea>
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small">
Submit
</button>
</div>
</div>
<div class="padding">
<button class="button button-block button-positive">Submit</button>
</div>
</ion-content>
</body>
</html>
Forms.scss
The styles within the Forms.scss file have been tailored to provide a unique design experience.Forms.ts
Introducing the functionality written in TypeScript for the FormsPage component. It allows for interaction with the form elements.Upon running the command 'ionic serve', an error was encountered:
Sass Error
A mixin named roboto-family is missing Backtrace: src/pages/forms/forms.scss:5
The fonts have been stored at the following path:
src/www/assets/fonts/roboto
If anyone could offer assistance in resolving this issue and point out any overlooked details, it would be greatly appreciated.