mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
feat(item): add styles for default size in ionic theme (#29559)
Issue number: internal --------- ## What is the new behavior? - Added scss for the `ion-item` for the Ionic theme - Added test page ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
rug
22
core/api.txt
22
core/api.txt
@ -1019,28 +1019,21 @@ ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
ion-item,css-prop,--background,ionic
|
||||
ion-item,css-prop,--background,ios
|
||||
ion-item,css-prop,--background,md
|
||||
ion-item,css-prop,--background-activated,ionic
|
||||
ion-item,css-prop,--background-activated,ios
|
||||
ion-item,css-prop,--background-activated,md
|
||||
ion-item,css-prop,--background-activated-opacity,ionic
|
||||
ion-item,css-prop,--background-activated-opacity,ios
|
||||
ion-item,css-prop,--background-activated-opacity,md
|
||||
ion-item,css-prop,--background-focused,ionic
|
||||
ion-item,css-prop,--background-focused,ios
|
||||
ion-item,css-prop,--background-focused,md
|
||||
ion-item,css-prop,--background-focused-opacity,ionic
|
||||
ion-item,css-prop,--background-focused-opacity,ios
|
||||
ion-item,css-prop,--background-focused-opacity,md
|
||||
ion-item,css-prop,--background-hover,ionic
|
||||
ion-item,css-prop,--background-hover,ios
|
||||
ion-item,css-prop,--background-hover,md
|
||||
ion-item,css-prop,--background-hover-opacity,ionic
|
||||
ion-item,css-prop,--background-hover-opacity,ios
|
||||
ion-item,css-prop,--background-hover-opacity,md
|
||||
ion-item,css-prop,--border-color,ionic
|
||||
ion-item,css-prop,--border-color,ios
|
||||
ion-item,css-prop,--border-color,md
|
||||
ion-item,css-prop,--border-radius,ionic
|
||||
ion-item,css-prop,--border-radius,ios
|
||||
ion-item,css-prop,--border-radius,md
|
||||
ion-item,css-prop,--border-style,ionic
|
||||
@ -1049,43 +1042,30 @@ ion-item,css-prop,--border-style,md
|
||||
ion-item,css-prop,--border-width,ionic
|
||||
ion-item,css-prop,--border-width,ios
|
||||
ion-item,css-prop,--border-width,md
|
||||
ion-item,css-prop,--color,ionic
|
||||
ion-item,css-prop,--color,ios
|
||||
ion-item,css-prop,--color,md
|
||||
ion-item,css-prop,--color-activated,ionic
|
||||
ion-item,css-prop,--color-activated,ios
|
||||
ion-item,css-prop,--color-activated,md
|
||||
ion-item,css-prop,--color-focused,ionic
|
||||
ion-item,css-prop,--color-focused,ios
|
||||
ion-item,css-prop,--color-focused,md
|
||||
ion-item,css-prop,--color-hover,ionic
|
||||
ion-item,css-prop,--color-hover,ios
|
||||
ion-item,css-prop,--color-hover,md
|
||||
ion-item,css-prop,--detail-icon-color,ionic
|
||||
ion-item,css-prop,--detail-icon-color,ios
|
||||
ion-item,css-prop,--detail-icon-color,md
|
||||
ion-item,css-prop,--detail-icon-font-size,ionic
|
||||
ion-item,css-prop,--detail-icon-font-size,ios
|
||||
ion-item,css-prop,--detail-icon-font-size,md
|
||||
ion-item,css-prop,--detail-icon-opacity,ionic
|
||||
ion-item,css-prop,--detail-icon-opacity,ios
|
||||
ion-item,css-prop,--detail-icon-opacity,md
|
||||
ion-item,css-prop,--inner-border-width,ionic
|
||||
ion-item,css-prop,--inner-border-width,ios
|
||||
ion-item,css-prop,--inner-border-width,md
|
||||
ion-item,css-prop,--inner-box-shadow,ionic
|
||||
ion-item,css-prop,--inner-box-shadow,ios
|
||||
ion-item,css-prop,--inner-box-shadow,md
|
||||
ion-item,css-prop,--inner-padding-bottom,ionic
|
||||
ion-item,css-prop,--inner-padding-bottom,ios
|
||||
ion-item,css-prop,--inner-padding-bottom,md
|
||||
ion-item,css-prop,--inner-padding-end,ionic
|
||||
ion-item,css-prop,--inner-padding-end,ios
|
||||
ion-item,css-prop,--inner-padding-end,md
|
||||
ion-item,css-prop,--inner-padding-start,ionic
|
||||
ion-item,css-prop,--inner-padding-start,ios
|
||||
ion-item,css-prop,--inner-padding-start,md
|
||||
ion-item,css-prop,--inner-padding-top,ionic
|
||||
ion-item,css-prop,--inner-padding-top,ios
|
||||
ion-item,css-prop,--inner-padding-top,md
|
||||
ion-item,css-prop,--min-height,ionic
|
||||
@ -1103,10 +1083,8 @@ ion-item,css-prop,--padding-start,md
|
||||
ion-item,css-prop,--padding-top,ionic
|
||||
ion-item,css-prop,--padding-top,ios
|
||||
ion-item,css-prop,--padding-top,md
|
||||
ion-item,css-prop,--ripple-color,ionic
|
||||
ion-item,css-prop,--ripple-color,ios
|
||||
ion-item,css-prop,--ripple-color,md
|
||||
ion-item,css-prop,--transition,ionic
|
||||
ion-item,css-prop,--transition,ios
|
||||
ion-item,css-prop,--transition,md
|
||||
ion-item,part,detail-icon
|
||||
|
||||
90
core/src/components/item/item.ionic.scss
Normal file
90
core/src/components/item/item.ionic.scss
Normal file
@ -0,0 +1,90 @@
|
||||
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
||||
|
||||
// Item
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the item
|
||||
*
|
||||
* @prop --border-color: Color of the item border
|
||||
* @prop --border-style: Style of the item border
|
||||
* @prop --border-width: Width of the item border
|
||||
*
|
||||
* @prop --min-height: Minimum height of the item
|
||||
*
|
||||
* @prop --padding-bottom: Bottom padding of the item
|
||||
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
|
||||
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
|
||||
* @prop --padding-top: Top padding of the item
|
||||
*
|
||||
*/
|
||||
--background: #{globals.$ionic-color-base-white};
|
||||
--border-color: #{globals.$ionic-color-neutral-300};
|
||||
--border-style: #{globals.$ionic-border-style-solid};
|
||||
--border-width: #{globals.$ionic-border-size-025};
|
||||
--min-height: #{globals.$ionic-scale-1800};
|
||||
--padding-top: #{globals.$ionic-space-200};
|
||||
--padding-end: #{globals.$ionic-space-400};
|
||||
--padding-bottom: #{globals.$ionic-space-200};
|
||||
--padding-start: #{globals.$ionic-space-400};
|
||||
|
||||
@include globals.font-smoothing;
|
||||
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
outline: none;
|
||||
|
||||
font-family: globals.$ionic-font-family;
|
||||
|
||||
text-align: initial;
|
||||
text-decoration: none;
|
||||
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Item: Structure
|
||||
// --------------------------------------------------
|
||||
.item-native {
|
||||
@include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: var(--min-height);
|
||||
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-style: var(--border-style);
|
||||
border-bottom-color: var(--border-color);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
overflow: inherit;
|
||||
box-sizing: border-box;
|
||||
|
||||
slot[name="start"]::slotted(*) {
|
||||
@include globals.margin(null, #{globals.$ionic-space-400}, null, null);
|
||||
}
|
||||
|
||||
slot[name="end"]::slotted(*) {
|
||||
@include globals.margin(null, null, null, #{globals.$ionic-space-400});
|
||||
}
|
||||
|
||||
.item-inner,
|
||||
.item-inner .input-wrapper {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
|
||||
overflow: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -27,7 +27,7 @@ import type { RouterDirection } from '../router/utils/interface';
|
||||
styleUrls: {
|
||||
ios: 'item.ios.scss',
|
||||
md: 'item.md.scss',
|
||||
ionic: 'item.md.scss',
|
||||
ionic: 'item.ionic.scss',
|
||||
},
|
||||
shadow: true,
|
||||
})
|
||||
|
||||
197
core/src/components/item/test/theme-ionic/index.html
Normal file
197
core/src/components/item/test/theme-ionic/index.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" theme="ionic">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Item - Basic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.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-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Item - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>List Header</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label> Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<ion-label>Item Divider</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-label> Item</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label> Plain Ol' div with some text</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-nowrap">
|
||||
Single line text that should have ellipses when it doesn't all fit in the item
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-label>Single line item with no lines</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on ion-label
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="secondary">
|
||||
<ion-label>
|
||||
<h1>H1 Title Text</h1>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h2>H2 Title Text</h2>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<ion-text color="primary">
|
||||
<h3>H3 Title Text</h3>
|
||||
</ion-text>
|
||||
<p>Paragraph line 1</p>
|
||||
<ion-text color="secondary">
|
||||
<p>Paragraph line 2 secondary</p>
|
||||
</ion-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h4>H4 Title Text</h4>
|
||||
<p>Paragraph line 1</p>
|
||||
<p>Paragraph line 2</p>
|
||||
<p>Paragraph line 3</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item using inner ion-label </ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="overflow-visible">
|
||||
<ion-input
|
||||
label="PIN:"
|
||||
label-placement="fixed"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
inputmode="numeric"
|
||||
formControlName="acct_no"
|
||||
placeholder="Enter 7 digits"
|
||||
></ion-input>
|
||||
<span class="error">Must enter 7 digits</span>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="overflow-scroll">
|
||||
<ion-label class="ion-text-wrap"
|
||||
>Item with overflow scroll. Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing
|
||||
commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis
|
||||
eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus
|
||||
eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla
|
||||
facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc
|
||||
id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas
|
||||
ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.</ion-label
|
||||
>
|
||||
</ion-item>
|
||||
|
||||
<ion-item detail>
|
||||
<ion-label>Item with details.</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h1>Heading</h1>
|
||||
<p>Normal paragraph</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h1>Heading</h1>
|
||||
<p>Normal paragraph</p>
|
||||
</ion-label>
|
||||
<ion-button slot="end" fill="outline">Outline</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label slot="start">Start</ion-label>
|
||||
<ion-label>
|
||||
<h1>Heading</h1>
|
||||
<p>Normal paragraph</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label slot="start">Start</ion-label>
|
||||
<ion-label>
|
||||
<h1>Heading</h1>
|
||||
<p>Normal paragraph</p>
|
||||
</ion-label>
|
||||
<ion-button slot="end" fill="outline">Outline</ion-button>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.overflow-visible {
|
||||
--border-color: red;
|
||||
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
margin-top: 10px;
|
||||
height: 140px;
|
||||
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: 1em;
|
||||
padding: 0 6px;
|
||||
color: red;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user