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

Updated dear developer for List

Browse Source
This commit is contained in:
Jessica Mendes
2024-07-05 10:07:01 +01:00
parent 4bf6f509d8
commit 4c35f91b14
4 changed files with 168 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/package-lock.json generated
View File

@@ -1794,8 +1794,9 @@
},
"node_modules/@phosphor-icons/core": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
"integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
"resolved": "https://pkgs.dev.azure.com/OutSystemsRD/_packaging/ArtifactRepository/npm/registry/@phosphor-icons/core/-/core-2.1.1.tgz",
"integrity": "sha1-YqTPvsl3LxphOmR9ohT7uW86050=",
"license": "MIT"
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
@@ -12081,8 +12082,8 @@
},
"@phosphor-icons/core": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
"integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
"resolved": "https://pkgs.dev.azure.com/OutSystemsRD/_packaging/ArtifactRepository/npm/registry/@phosphor-icons/core/-/core-2.1.1.tgz",
"integrity": "sha1-YqTPvsl3LxphOmR9ohT7uW86050="
},
"@pkgjs/parseargs": {
"version": "0.11.0",

1
core/src/theme-ionic/test/assets/calendar-blank.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
core/src/theme-ionic/test/assets/trash.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 415 B

163
core/src/theme-ionic/test/dear-designer-list/index.html
View File

@@ -270,6 +270,165 @@
<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-grid>
@@ -309,7 +468,7 @@
ion-card.preview{
margin-top: 50px;
--background:#FAFAFA;
--background:#F2F2F2;
display: flex;
align-items: center;
justify-content: center;
@@ -318,7 +477,7 @@
}
ion-card.preview2{
--background:#FAFAFA;
--background:#F2F2F2;
display: flex;
align-items: center;
justify-content: center;