mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
21 Commits
ROU-11368
...
test-jess-
| Author | SHA1 | Date | |
|---|---|---|---|
|
59f3350b1b | ||
|
|
5413b4d9e9 | ||
|
|
c3e2880299 | ||
|
|
0148e899f9 | ||
|
|
4c35f91b14 | ||
|
|
4bf6f509d8 | ||
|
|
d34091412a | ||
|
|
a803aa8974 | ||
|
|
7a51a389de | ||
|
|
cfb5e73f03 | ||
|
|
6442acdd43 | ||
|
|
eca02b0864 | ||
|
|
e23f65968c | ||
|
|
a8eb066bc3 | ||
|
|
1c9304394e | ||
|
|
fc9c5ecd30 | ||
|
|
44103e813c | ||
|
|
a29b554516 | ||
|
|
87fe7efdef | ||
|
|
e7cca693ba | ||
|
|
82b7ceacda |
1
core/src/theme-ionic/test/assets/apps.svg
Normal file
1
core/src/theme-ionic/test/assets/apps.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#000000" viewBox="0 0 256 256"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 576 B |
BIN
core/src/theme-ionic/test/assets/avatar.png
Normal file
BIN
core/src/theme-ionic/test/assets/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
1
core/src/theme-ionic/test/assets/calendar-blank.svg
Normal file
1
core/src/theme-ionic/test/assets/calendar-blank.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 351 B |
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 |
1
core/src/theme-ionic/test/assets/settings.svg
Normal file
1
core/src/theme-ionic/test/assets/settings.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#000000" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A112.1,112.1,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.62a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.08,8.08,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8.08,8.08,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
core/src/theme-ionic/test/assets/trash.svg
Normal file
1
core/src/theme-ionic/test/assets/trash.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 415 B |
1
core/src/theme-ionic/test/assets/triangle.svg
Normal file
1
core/src/theme-ionic/test/assets/triangle.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" fill="#ffffff" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.34,24.34,0,0,0,40.55,224h174.9a24.34,24.34,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 474 B |
1
core/src/theme-ionic/test/assets/triangle_color.svg
Normal file
1
core/src/theme-ionic/test/assets/triangle_color.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" fill="#105CEF" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.34,24.34,0,0,0,40.55,224h174.9a24.34,24.34,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 474 B |
1
core/src/theme-ionic/test/assets/triangle_dark.svg
Normal file
1
core/src/theme-ionic/test/assets/triangle_dark.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="M236.8,188.09,149.35,36.22a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.34,24.34,0,0,0,40.55,224h174.9a24.34,24.34,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 474 B |
1
core/src/theme-ionic/test/assets/user.svg
Normal file
1
core/src/theme-ionic/test/assets/user.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#626262" viewBox="0 0 256 256"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 364 B |
252
core/src/theme-ionic/test/dear-designer-avatar/index.html
Normal file
252
core/src/theme-ionic/test/dear-designer-avatar/index.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!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="">Avatar</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-avatar size="xlarge">
|
||||
<img alt="Silhouette of a person's head" src="/src/theme-ionic/test/assets/avatar.png" />
|
||||
</ion-avatar>
|
||||
</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">Image</h2>
|
||||
<ion-text class="subtitle">The user image displayed in the avatar.</ion-text>
|
||||
<ion-avatar>
|
||||
<img alt="Silhouette of a person's head" src="/src/theme-ionic/test/assets/avatar.png" />
|
||||
</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">User Name</h2>
|
||||
<ion-text class="subtitle">The name of the user. The initials will be used to define the avatar content (2 initials, except 2s that accepts only 1).</ion-text>
|
||||
<ion-avatar shape="round" size="medium">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Icon</h2>
|
||||
<ion-text class="subtitle">Default avatars come in 6 sizes. The default Size is md (40px). <br>
|
||||
Note: All avatars show 2 characters except 2xs - only 1 char.</ion-text>
|
||||
|
||||
<ion-avatar shape="round" size="medium">
|
||||
<ion-icon src="/src/theme-ionic/test/assets/user.svg"></ion-icon>
|
||||
</ion-avatar>
|
||||
</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 avatars come in 6 sizes. <br>
|
||||
The default Size is md (40px). </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>xs</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>sm</h6>
|
||||
</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">
|
||||
<ion-avatar shape="round" size="xsmall">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="round" size="small">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="round">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="round" size="large">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="round" size="xlarge">AB</ion-avatar>
|
||||
</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 avatars 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">
|
||||
<ion-avatar shape="round" >AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="soft" >AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-avatar shape="rectangular">AB</ion-avatar>
|
||||
</ion-col>
|
||||
<ion-col size="1"></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;
|
||||
}
|
||||
|
||||
.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-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
</style>
|
||||
322
core/src/theme-ionic/test/dear-designer-badge/index.html
Normal file
322
core/src/theme-ionic/test/dear-designer-badge/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<!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="">Badge</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-badge shape="round" size="large">1</ion-badge>
|
||||
</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">Label</h2>
|
||||
<ion-text class="subtitle">The badge is recommended for numbers. However, text is allowed.<br>
|
||||
The recommended limit for the label is 2 digits but it's possible to add more.
|
||||
</ion-text>
|
||||
|
||||
<ion-badge shape="round">1</ion-badge>
|
||||
<ion-badge class="margin-left-10" shape="round">99+</ion-badge>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Color <ion-chip size="small" >TO DO</ion-chip></h2>
|
||||
<ion-text class="subtitle">Default badges have 5 different kinds. <br>
|
||||
The color is affected by the Is Light property. </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Primary</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Success</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Danger</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Warning</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Neutral</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="primary" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="success" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="danger" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="warning" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="medium" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Is Light <ion-chip size="small">TO DO</ion-chip> </h2>
|
||||
<ion-text class="subtitle">Defaults badges can be light or not. By default, False.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>True</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>False</h6>
|
||||
</ion-col>
|
||||
<ion-col size="8"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="light" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge color="primary" shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col size="8"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Size</h2>
|
||||
<ion-text class="subtitle">Default badges come in 6 sizes. <br>
|
||||
The default Size is sm (32px). </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>2xs</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>xs</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>sm</h6>
|
||||
</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">
|
||||
<ion-badge size="2xs">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge size="xsmall">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge size="small">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge size="medium">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge size="large">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge size="xlarge">1</ion-badge>
|
||||
</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 badges 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">
|
||||
<ion-badge shape="round">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge shape="soft">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-badge shape="rectangular">1</ion-badge>
|
||||
</ion-col>
|
||||
<ion-col size="1"></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;
|
||||
}
|
||||
|
||||
.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-badge{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
</style>
|
||||
170
core/src/theme-ionic/test/dear-designer-bottom-bar/index.html
Normal file
170
core/src/theme-ionic/test/dear-designer-bottom-bar/index.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!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.ionic.css" rel="stylesheet" />
|
||||
<link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,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 class="roboto">Dear Designer</h5>
|
||||
<h1 style="font-weight: 700" class="roboto">Bottom Bar</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-tabs class="bottom-bar-preview">
|
||||
<ion-tab-bar slot="bottom">
|
||||
<ion-tab-button tab="dashboard">
|
||||
<ion-icon src="/src/theme-ionic/test/assets/triangle_dark.svg"></ion-icon>
|
||||
Dashboard
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="apps">
|
||||
<ion-icon src="/src/theme-ionic/test/assets/apps.svg"></ion-icon>
|
||||
Apps
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="settings">
|
||||
<ion-icon src="/src/theme-ionic/test/assets/settings.svg"></ion-icon>
|
||||
Settings
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
</ion-tabs>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</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>
|
||||
|
||||
.roboto{
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
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: 350px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
ion-card.preview2{
|
||||
--background:#F2F2F2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 350px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2.title{
|
||||
font-family: "roboto";
|
||||
margin-top: 50px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #2D4665;
|
||||
}
|
||||
|
||||
ion-text,ion-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-family: "roboto";
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.info-tag{
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
.bottom-bar-preview{
|
||||
width: 500px;
|
||||
margin-left: -250px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.bottom-bar-preview :host-context(ion-icon) svg{
|
||||
fill:red;
|
||||
}
|
||||
|
||||
</style>
|
||||
346
core/src/theme-ionic/test/dear-designer-button/index.html
Normal file
346
core/src/theme-ionic/test/dear-designer-button/index.html
Normal file
@@ -0,0 +1,346 @@
|
||||
<!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="">Button</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-button>
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/triangle.svg"></ion-icon>
|
||||
Button
|
||||
</ion-button>
|
||||
</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">Generic Button</h2>
|
||||
<ion-text class="subtitle">The button can be composed by two icons and one label</ion-text>
|
||||
<ion-button>
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/triangle.svg"></ion-icon>
|
||||
Button
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/triangle.svg"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" fill="outline">
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
Button
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" fill="clear">
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
Button
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Circular Button</h2>
|
||||
<ion-text class="subtitle">The button can be composed by only one icon</ion-text>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" src="/src/theme-ionic/test/assets/triangle.svg"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" fill="outline">
|
||||
<ion-icon slot="icon-only" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" fill="clear">
|
||||
<ion-icon slot="icon-only" src="/src/theme-ionic/test/assets/triangle_color.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Disabled</h2>
|
||||
<ion-text class="subtitle">Buttons can be disabled.</ion-text>
|
||||
<ion-button disabled>
|
||||
Button
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" disabled fill="outline">
|
||||
Button
|
||||
</ion-button>
|
||||
<ion-button class="margin-left-10" disabled fill="clear">
|
||||
Button
|
||||
</ion-button>
|
||||
</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 button comes in 3 sizes. <br>
|
||||
The default Size is md (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">
|
||||
<ion-button>
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button size="large">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button size="xlarge">
|
||||
Button
|
||||
</ion-button>
|
||||
</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 button comes in 3 shapes. <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">
|
||||
<ion-button>
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button shape="soft">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button shape="rectangular">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Color <ion-chip size="small" >TO DO</ion-chip></h2>
|
||||
<ion-text class="subtitle">Default buttons have 5 different kinds. </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Primary</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Success</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Danger</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Warning</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Neutral</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button >
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button color="success">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button color="danger">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button color="warning">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-button color="medium">
|
||||
Button
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col size="1"></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:#FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.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-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.info-tag{
|
||||
pointer-events:none;
|
||||
}
|
||||
</style>
|
||||
205
core/src/theme-ionic/test/dear-designer-checkbox/index.html
Normal file
205
core/src/theme-ionic/test/dear-designer-checkbox/index.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!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="">Checkbox</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-checkbox justify="space-between" label-placement="fixed">Label</ion-checkbox>
|
||||
</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">Label Placement</h2>
|
||||
<ion-text class="subtitle">The checkbox label can be placed on the left or right of the label.</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Start</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>End</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-checkbox label-placement="start">Label End</ion-checkbox>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-checkbox label-placement="end">Label End</ion-checkbox>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Indeterminate</h2>
|
||||
<ion-text class="subtitle">The checkbox label can have the Indeterminate state.</ion-text>
|
||||
<ion-checkbox indeterminate>Indeterminate</ion-checkbox>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Disabled</h2>
|
||||
<ion-text class="subtitle">Checkboxes can be disabled.</ion-text>
|
||||
<ion-checkbox Disabled>Disabled</ion-checkbox>
|
||||
<ion-checkbox class="margin-left-10" Disabled checked>Disabled Checked</ion-checkbox>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Helper message <ion-chip size="small" >TO DO</ion-chip></h2>
|
||||
<ion-text class="subtitle">Checkboxes can have an helper message.</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Error message <ion-chip size="small" >TO DO</ion-chip></h2>
|
||||
<ion-text class="subtitle">Checkboxes can have an error message.</ion-text>
|
||||
|
||||
</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:#FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.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-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.info-tag{
|
||||
pointer-events:none;
|
||||
}
|
||||
</style>
|
||||
533
core/src/theme-ionic/test/dear-designer-input/index.html
Normal file
533
core/src/theme-ionic/test/dear-designer-input/index.html
Normal file
@@ -0,0 +1,533 @@
|
||||
<!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="Label"></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 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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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>
|
||||
</ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input">
|
||||
</ion-col>
|
||||
<ion-col class="hide-mobile" size="1"></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 class="hide-mobile" 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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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>
|
||||
<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 class="hide-mobile" 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 class="hide-mobile" 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 class="hide-mobile" size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<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>
|
||||
<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 class="hide-mobile" 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 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 size="1"></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 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>
|
||||
</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 class="hide-mobile" size="1"></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 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 size="1"></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 size="1"></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 size="1"></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 size="1"></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 size="1"></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Disabled State</h2>
|
||||
<ion-text class="subtitle">Inputs can be disabled.</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col size="5" class="center">
|
||||
<ion-input
|
||||
placeholder="Placeholder"
|
||||
fill="outline"
|
||||
label="Name"
|
||||
counter="true"
|
||||
maxlength="100"
|
||||
disabled="true"
|
||||
helper-text="Helper message"
|
||||
></ion-input>
|
||||
</ion-col>
|
||||
<ion-col size="5" class="center padding-preview-input"></ion-col>
|
||||
<ion-col size="1"></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: 300px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@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>
|
||||
595
core/src/theme-ionic/test/dear-designer-list/index.html
Normal file
595
core/src/theme-ionic/test/dear-designer-list/index.html
Normal file
@@ -0,0 +1,595 @@
|
||||
<!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.ionic.css" rel="stylesheet" />
|
||||
<link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,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 class="roboto">Dear Designer</h5>
|
||||
<h1 style="font-weight: 700" class="roboto">List</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-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
<ion-button shape="rectangular" slot="end">Button</ion-button>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
<ion-button shape="rectangular" slot="end">Button</ion-button>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
<ion-button shape="rectangular" slot="end">Button</ion-button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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">Inset List</h2>
|
||||
<ion-text class="subtitle">Specifies if the list has margins around. By default, False.</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
True
|
||||
</ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
False
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list inset="true" style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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">Shape</h2>
|
||||
<ion-text class="subtitle">The list can have 3 shapes. The default is Round.</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
Round
|
||||
</ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
Soft
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list inset="true" style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list inset="true" shape="soft" style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
Rectangular
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list inset="true" shape="rectangular" style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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">Placeholders</h2>
|
||||
<ion-text class="subtitle">List Items can have placeholders so that developers can add content inside them: Start, End, Start and End and None. By default, List Items don’t have any placeholder.
|
||||
</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
Start
|
||||
</ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
End
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/calendar-blank.svg"></ion-icon>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/trash.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
Start and End
|
||||
</ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
None
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-icon slot="start" src="/src/theme-ionic/test/assets/calendar-blank.svg"></ion-icon>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
<ion-icon slot="end" src="/src/theme-ionic/test/assets/trash.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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">Has Detail Icon</h2>
|
||||
<ion-text class="subtitle">List Items can have details icons. By default, list items don’t have detail icons (False).</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
True
|
||||
</ion-col>
|
||||
<ion-col class="center ionic-body-md-bold" size="5">
|
||||
False (Default)
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item detail="true">
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</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">Swipe Actions</h2>
|
||||
<ion-text class="subtitle">Lists can have swipe actions, visible when the user swipes.</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option><ion-icon slot="top" name="heart"></ion-icon>Favorite</ion-item-option>
|
||||
<ion-item-option color="danger"><ion-icon slot="top" name="trash"></ion-icon>Delete</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Enabled</h2>
|
||||
<ion-text class="subtitle">The List Item can be enabled or disabled. By default, True (enabled).</ion-text>
|
||||
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="5">
|
||||
<ion-card shape="rectangular" class="preview2">
|
||||
<ion-card-content>
|
||||
<ion-list style="width:400px;">
|
||||
<ion-item disabled="true">
|
||||
<ion-label>
|
||||
<p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
|
||||
<p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size="5">
|
||||
|
||||
</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>
|
||||
|
||||
.roboto{
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
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: 350px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
ion-card.preview2{
|
||||
--background:#F2F2F2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 350px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2.title{
|
||||
font-family: "roboto";
|
||||
margin-top: 50px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #2D4665;
|
||||
}
|
||||
|
||||
ion-text,ion-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-family: "roboto";
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.info-tag{
|
||||
pointer-events:none;
|
||||
}
|
||||
</style>
|
||||
287
core/src/theme-ionic/test/dear-designer-tag/index.html
Normal file
287
core/src/theme-ionic/test/dear-designer-tag/index.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!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="">Tag</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-chip>
|
||||
<ion-avatar size="xsmall"> <img alt="Silhouette of a person's head" src="/src/theme-ionic/test/assets/avatar.png" /></ion-avatar>
|
||||
<ion-label>Employee</ion-label>
|
||||
</ion-chip>
|
||||
</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">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>
|
||||
<ion-chip class="info-tag">Info Tag</ion-chip>
|
||||
<ion-chip class="info-tag margin-left-10">
|
||||
<ion-avatar size="xsmall"> <img alt="Silhouette of a person's head" src="/src/theme-ionic/test/assets/avatar.png" /></ion-avatar>
|
||||
<ion-label>Info tag</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip class="info-tag margin-left-10">
|
||||
<ion-icon src="/src/theme-ionic/test/assets/user.svg"></ion-icon>
|
||||
<ion-label>Info tag</ion-label>
|
||||
</ion-chip>
|
||||
</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 tag come in 2 sizes. <br>
|
||||
The default Size is large (32px). </ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col size="2" class="center">
|
||||
<h6>small</h6>
|
||||
</ion-col>
|
||||
<ion-col size="2" class="center">
|
||||
<h6>large</h6>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col size="2" class="center">
|
||||
<ion-chip size="small" class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col size="2" class="center">
|
||||
<ion-chip class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Shape</h2>
|
||||
<ion-text class="subtitle">Default tags 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">
|
||||
<ion-chip class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip shape="soft" class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip shape="rectangular" class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Disabled</h2>
|
||||
<ion-text class="subtitle">Tags can be disabled</ion-text>
|
||||
<ion-chip disabled class="info-tag">Info Tag</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
|
||||
<ion-col></ion-col>
|
||||
<ion-col size="10">
|
||||
<h2 class="title">Color <ion-chip size="small" >TO DO</ion-chip></h2>
|
||||
<ion-text class="subtitle">Default tags have 5 different kinds.
|
||||
</ion-text>
|
||||
</ion-col>
|
||||
<ion-col></ion-col>
|
||||
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Default</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Success</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Danger</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Warning</h6>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<h6>Neutral</h6>
|
||||
</ion-col>
|
||||
<ion-col size="1"></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="1"></ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip>Default</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip color="success">Success</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip color="danger">Danger</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip color="warning">Warning</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col class="center">
|
||||
<ion-chip color="medium">Neutral</ion-chip>
|
||||
</ion-col>
|
||||
<ion-col size="1"></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:#FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
border:0px;
|
||||
}
|
||||
|
||||
.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-avatar{
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.margin-left-10{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.info-tag{
|
||||
pointer-events:none;
|
||||
}
|
||||
</style>
|
||||
367
core/src/theme-ionic/test/theme-ionic/index.html
Normal file
367
core/src/theme-ionic/test/theme-ionic/index.html
Normal file
@@ -0,0 +1,367 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<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="../../../../css/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="../../../../scripts/testing/styles.css" 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>
|
||||
<h2 class="page-title">Theme Ionic </h2>
|
||||
|
||||
<!--<h5>Typography</h5>
|
||||
|
||||
<span class="ionic-font-size-display-m ionic-margin-space-l">The quick brown fox jumps over the lazy dog.</span><br>
|
||||
<span class="ionic-font-size-display-s ionic-margin-space-l">The quick brown fox jumps over the lazy dog.</span>
|
||||
<h1 class="ionic-heading1">The quick brown fox jumps over the lazy dog.</h1>
|
||||
<h2 class="ionic-heading2">The quick brown fox jumps over the lazy dog.</h2>
|
||||
<h3 class="ionic-heading3">The quick brown fox jumps over the lazy dog.</h3>
|
||||
<h4 class="ionic-heading4">The quick brown fox jumps over the lazy dog.</h4>
|
||||
<h5 class="ionic-heading5">The quick brown fox jumps over the lazy dog.</h5>-->
|
||||
|
||||
<h5>Button</h5>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>Round</ion-col>
|
||||
<ion-col>Soft</ion-col>
|
||||
<ion-col>Rectangular</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="xsmall"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="xsmall" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="xsmall" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="xsmall"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="xsmall" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="xsmall" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="xsmall"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="xsmall" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="xsmall" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="small"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="small" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="small" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="small"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="small" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="small" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="small"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="small" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="small" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="large"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="large" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="large" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="large"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="large" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="large" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="large"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="large" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="large" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="xlarge"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="xlarge" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" size="xlarge" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="xlarge"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="xlarge" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" size="xlarge" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="xlarge"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="xlarge" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" size="xlarge" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" disabled size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" disabled size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="round" disabled size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" disabled size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" disabled size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="" disabled size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" disabled size=""><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" disabled size="" fill="outline"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
<ion-button shape="rectangular" disabled size="" fill="clear"><ion-icon slot="start" name="triangle-outline"></ion-icon>Button</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>Circular - Round</ion-col>
|
||||
<ion-col>Circular - Soft</ion-col>
|
||||
<ion-col>Circular - Rectangular</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xsmall"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xsmall" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xsmall" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="small"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="small" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="small" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size=""><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="large"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="large" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="large" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-button shape="round" size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="round" disabled size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="" size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="" disabled size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-button shape="rectangular" size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xlarge"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xlarge" fill="outline"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
<ion-button shape="rectangular" disabled size="xlarge" fill="clear"><ion-icon slot="icon-only" name="triangle-outline"></ion-icon></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h5>Tag</h5>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>Round</ion-col>
|
||||
<ion-col>Soft</ion-col>
|
||||
<ion-col>Rectangular</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-chip shape="round">Info Tag</ion-chip>
|
||||
<ion-chip shape="round" outline="true">Info Tag</ion-chip></ion-col>
|
||||
<ion-col><ion-chip shape="">Info Tag</ion-chip>
|
||||
<ion-chip shape="" outline="true">Info Tag</ion-chip></ion-col>
|
||||
<ion-col><ion-chip shape="rectangular">Info Tag</ion-chip>
|
||||
<ion-chip shape="rectangular" outline="true">Info Tag</ion-chip></ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>16px</ion-col>
|
||||
<ion-col>24px</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-checkbox labelPlacement="start" style="--size: 16px">Unchecked</ion-checkbox>
|
||||
<ion-checkbox checked style="--size: 16px">Checked</ion-checkbox>
|
||||
<ion-checkbox indeterminate style="--size: 16px">Indeterminate</ion-checkbox>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-checkbox labelPlacement="start" style="--size: 24px">Unchecked</ion-checkbox>
|
||||
<ion-checkbox checked style="--size: 24px">Checked</ion-checkbox>
|
||||
<ion-checkbox indeterminate style="--size: 24px">Indeterminate</ion-checkbox>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h5>Input</h5>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
*{
|
||||
font-family: 'Inter';
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h5,
|
||||
h3,
|
||||
h4
|
||||
{
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
h5{
|
||||
color:#1068EB
|
||||
}
|
||||
|
||||
.page-title{
|
||||
margin-bottom:50px;
|
||||
}
|
||||
ion-button{
|
||||
font-family: 'Inter';
|
||||
font-weight: 500;
|
||||
}
|
||||
ion-grid {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
ion-chip + ion-chip {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user