javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

updated input page

Browse Source
This commit is contained in:
Jessica Mendes
2024-06-14 14:21:45 +01:00
parent 1c9304394e
commit a8eb066bc3
1 changed files with 60 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
core/src/theme-ionic/test/dear-designer-input/index.html
View File

@@ -52,107 +52,108 @@
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col ></ion-col>
<ion-col size="10">
<h2 class="title">Input types:</h2>
</ion-col>
<ion-col></ion-col>
<ion-col ></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
<ion-col size="5" class="center">
<h6>Password</h6>
</ion-col>
<ion-col size="5" class="center">
<h6> </h6>
</ion-col>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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>
@@ -160,7 +161,7 @@
</ion-col>
<ion-col size="5" class="center padding-preview-input">
</ion-col>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
</ion-row>
@@ -178,7 +179,7 @@
<ion-row>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
<ion-col class="center">
<h6>md</h6>
</ion-col>
@@ -188,13 +189,13 @@
<ion-col class="center">
<h6>xl</h6>
</ion-col>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
<ion-col class="center padding-preview-input2">
<ion-input fill="outline" label="Name" type="text"></ion-input>
</ion-col>
@@ -204,7 +205,7 @@
<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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
@@ -222,7 +223,7 @@
<ion-row>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
<ion-col class="center">
<h6>Round</h6>
</ion-col>
@@ -232,13 +233,13 @@
<ion-col class="center">
<h6>Rectangular</h6>
</ion-col>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
</ion-row>
<ion-row>
<ion-col size="1"></ion-col>
<ion-col class="hide-mobile" size="1"></ion-col>
<ion-col class="center padding-preview-input2">
<ion-input fill="outline" label="Name" type="text"></ion-input>
</ion-col>
@@ -248,7 +249,7 @@
<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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
@@ -266,13 +267,13 @@
<ion-row>
<ion-col></ion-col>
<ion-col size="1"></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-col size="1"></ion-col>
</ion-row>
@@ -302,7 +303,7 @@
<ion-row>
<ion-col></ion-col>
<ion-col class="hide-mobile" size="1"></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>
@@ -313,7 +314,7 @@
<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-col class="hide-mobile" size="1"></ion-col>
</ion-row>
@@ -330,14 +331,14 @@
<ion-row>
<ion-col></ion-col>
<ion-col size="1"></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-col size="1"></ion-col>
</ion-row>
@@ -354,7 +355,7 @@
<ion-row>
<ion-col></ion-col>
<ion-col size="1"></ion-col>
<ion-col size="5" class="center">
<ion-input
placeholder="Placeholder"
@@ -365,7 +366,7 @@
></ion-input>
</ion-col>
<ion-col size="5" class="center padding-preview-input"></ion-col>
<ion-col></ion-col>
<ion-col size="1"></ion-col>
</ion-row>
@@ -382,7 +383,7 @@
<ion-row>
<ion-col></ion-col>
<ion-col size="1"></ion-col>
<ion-col size="5" class="center">
<ion-input
placeholder="Placeholder"
@@ -395,7 +396,7 @@
></ion-input>
</ion-col>
<ion-col size="5" class="center padding-preview-input"></ion-col>
<ion-col></ion-col>
<ion-col size="1"></ion-col>
</ion-row>
@@ -444,11 +445,11 @@
}
ion-card.preview ion-input{
width: 400px;
width: 300px;
}
.padding-preview-input{
padding:0px 70px 70px 70px;
padding:0px 70px 70px 70px
}
.padding-preview-input2{
@@ -478,4 +479,25 @@
margin-bottom: 15px;
line-height: 150%;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
ion-col[size="1"].hide-mobile {
display:none;
}
ion-col[size="5"] {
width: calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
max-width: calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
}
.padding-preview-input{
padding:0px 20px 20px 20px
}
.padding-preview-input2{
padding:0px 20px 20px 20px;
}
}
</style>