mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
added Dear Designer page for Input
This commit is contained in:
Jessica Mendes
1
core/src/theme-ionic/test/assets/check-circle.svg
Normal file
1
core/src/theme-ionic/test/assets/check-circle.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" fill="#000000" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 363 B |
1
core/src/theme-ionic/test/assets/lock.svg
Normal file
1
core/src/theme-ionic/test/assets/lock.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" fill="#000000" viewBox="0 0 256 256"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 345 B |
481
core/src/theme-ionic/test/dear-designer-input/index.html
Normal file
481
core/src/theme-ionic/test/dear-designer-input/index.html
Normal file
@@ -0,0 +1,481 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" theme="ionic">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Ionic Theme</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h5>Dear Designer</h5>
|
||||
<h1 class="">Input</h1>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<ion-card shape="rectangular" class="preview">
|
||||
<ion-card-content>
|
||||
<ion-input fill="outline" label="Email"></ion-input>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Input types:</h2>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Text</h6>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Number</h6>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Number" type="number"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Email</h6>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Phone number</h6>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Email" type="email"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Phone Number" type="tel"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Date</h6>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Search</h6>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Date" type="datetime-local"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Search" type="search"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<h6>Password</h6>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input fill="outline" label="Password" type="password">
|
||||
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Size</h2>
|
||||
<ion-text class="subtitle">Default input come in 3 sizes. <br>
|
||||
The default Size is medium (40px). </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>md</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>lg</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>xl</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" size="large" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" size="xlarge" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Shape</h2>
|
||||
<ion-text class="subtitle">Default input come in 3 shapes: Rounded, Soft and Rectangular. <br>
|
||||
The default Shape is Round. </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Round</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Soft</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Rectangular</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" shape="soft" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col class="center padding-preview-input2">
|
||||
<ion-input fill="outline" shape="rectangular" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Clear Icon</h2>
|
||||
<ion-text class="subtitle">Inputs can have a clear action that is displayed when the input has a value.<br>
|
||||
The default is false. </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<ion-input clear-input="true" fill="outline" label="Name" type="text"></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Icon with icon</h2>
|
||||
<ion-text class="subtitle">Inputs can have icons on slot Start and/or slot End.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Slot Start</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Slot End</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input placeholder="Placeholder" clear-input="true" fill="outline" label="Name" type="text">
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/lock.svg" aria-hidden="true"></ion-icon>
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
<ion-input placeholder="Placeholder" clear-input="true" fill="outline" label="Name" type="text">
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/check-circle.svg" aria-hidden="true"></ion-icon>
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Helper Message</h2>
|
||||
<ion-text class="subtitle">Inputs can have a message below the input box.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<ion-input placeholder="Placeholder" helper-text="Helper Text" clear-input="true" fill="outline" label="Name" type="text">
|
||||
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input"></ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Character Counter</h2>
|
||||
<ion-text class="subtitle">Inputs can have a character counter.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<ion-input
|
||||
placeholder="Placeholder"
|
||||
fill="outline"
|
||||
label="Name"
|
||||
counter="true"
|
||||
maxlength="100"
|
||||
></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input"></ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Error Message</h2>
|
||||
<ion-text class="subtitle">Inputs can have the state invalid.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<ion-input
|
||||
placeholder="Placeholder"
|
||||
class="ion-touched ion-invalid"
|
||||
fill="outline"
|
||||
label="Name"
|
||||
counter="true"
|
||||
maxlength="100"
|
||||
error-text="Error message"
|
||||
></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input"></ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
|
||||
|
||||
</ion-grid>
|
||||
|
||||
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
ion-header ion-toolbar{
|
||||
--background:#105CEF;
|
||||
color: white;
|
||||
--padding-top:30px;
|
||||
--padding-bottom:30px;
|
||||
}
|
||||
|
||||
ion-toolbar h1{
|
||||
margin-top:0px;
|
||||
font-size:55px;
|
||||
}
|
||||
|
||||
ion-card.preview{
|
||||
margin-top: 50px;
|
||||
--background:#F2F2F2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
ion-card.preview ion-input{
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.padding-preview-input{
|
||||
padding:0px 70px 70px 70px;
|
||||
}
|
||||
|
||||
.padding-preview-input2{
|
||||
padding:0px 50px 50px 50px;
|
||||
}
|
||||
.center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2.title{
|
||||
margin-top: 50px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #2D4665;
|
||||
}
|
||||
|
||||
ion-text,ion-input, label, ion-input div{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
</style>
|
||||
@@ -55,7 +55,7 @@
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Info tag</h2>
|
||||
<ion-text class="subtitle">Non-interactive tags that serve uniquely to provide contextual information regarding a specific part of the screen, such as an image or a card.</ion-text>
|
||||
|
||||
Reference in New Issue
Block a user