mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Added dear developer page for bottom bar
This commit is contained in:
Jessica Mendes
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 |
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/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 |
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>
|
||||
Reference in New Issue
Block a user