javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): add ionic theme styles (#29989)

Browse Source
This commit is contained in:
Maria Hutt
2024-11-07 13:33:12 -08:00
committed by GitHub
parent 1b6f07dfb8
commit 9e3062963f
94 changed files with 582 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/select/select.tsx
View File

@ -50,7 +50,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
styleUrls: {
ios: 'select.ios.scss',
md: 'select.md.scss',
ionic: 'select.md.scss',
ionic: 'select.ionic.scss',
},
shadow: true,
})
@ -1050,6 +1050,8 @@ export class Select implements ComponentInterface {
this;
const theme = getIonTheme(this);
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;
const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
const rtl = isRTL(el) ? 'rtl' : 'ltr';
const inItem = hostContext('ion-item', this.el);
@ -1104,13 +1106,25 @@ export class Select implements ComponentInterface {
<label class="select-wrapper" id="select-label">
{this.renderLabelContainer()}
<div class="select-wrapper-inner">
{
/**
* For the ionic theme, we render the outline container here
* instead of higher up, so it can be positioned relative to
* the native wrapper instead of the <label> element or the
* entire component. This allows the label text to be positioned
* above the outline, while staying within the bounds of the
* <label> element, ensuring that clicking the label text
* focuses the select.
*/
theme === 'ionic' && fill === 'outline' && <div class="select-outline"></div>
}
<slot name="start"></slot>
<div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
{this.renderSelectText()}
{this.renderListbox()}
</div>
<slot name="end"></slot>
{!hasFloatingOrStackedLabel && this.renderSelectIcon()}
{shouldRenderInnerIcon && this.renderSelectIcon()}
</div>
{/**
* The icon in a floating/stacked select
@ -1121,7 +1135,7 @@ export class Select implements ComponentInterface {
* icon outside the inner wrapper, which holds
* those components.
*/}
{hasFloatingOrStackedLabel && this.renderSelectIcon()}
{shouldRenderOuterIcon && this.renderSelectIcon()}
{shouldRenderHighlight && <div class="select-highlight"></div>}
</label>
</Host>