javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 10:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(action-bar): iosLargeTitle and iosShadow attributes (#10694)

Browse Source 
[skip ci]
This commit is contained in:
Nathan Walker
2025-02-18 08:35:56 -08:00
committed by GitHub
parent adaa796bda
commit 11d5e542eb
6 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/app.css
View File

@ -10,7 +10,7 @@ Button {
}
.btn-view-demo {
/* background-color: #65ADF1; */
border-radius: 5;
border-radius: 8;
font-size: 17;
padding: 15;
font-weight: bold;

6
apps/toolbox/src/main-page.xml
View File

@ -1,11 +1,11 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Dev Toolbox" icon="" class="action-bar">
<ActionBar title="Dev Toolbox" icon="" class="action-bar" iosLargeTitle="true" iosShadow="false">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<ScrollView class="h-full">
<StackLayout>
<ScrollView class="h-full">
<StackLayout class="p-20" paddingBottom="40" iosOverflowSafeArea="false">
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

5
apps/toolbox/src/pages/winter-tc.xml
View File

@ -1,5 +1,8 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="WinterTC" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="Btoa y Atob" tap="encodeDecode" />
</StackLayout>

10
packages/core/ui/action-bar/action-bar-common.ts
View File

@ -18,6 +18,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
public title: string;
public flat: boolean;
public iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate';
// prefer large titles
public iosLargeTitle = false;
// show bottom border shadow (always defaulted to true)
public iosShadow = true;
public effectiveContentInsetLeft: number;
public effectiveContentInsetRight: number;
@ -387,6 +391,12 @@ function convertToContentInset(this: void, value: string | CoreTypes.LengthType)
export const iosIconRenderingModeProperty = new Property<ActionBarBase, 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>({ name: 'iosIconRenderingMode', defaultValue: 'alwaysOriginal' });
iosIconRenderingModeProperty.register(ActionBarBase);
export const iosLargeTitleProperty = new Property<ActionBarBase, boolean>({ name: 'iosLargeTitle', defaultValue: false, valueConverter: booleanConverter });
iosLargeTitleProperty.register(ActionBarBase);
export const iosShadowProperty = new Property<ActionBarBase, boolean>({ name: 'iosShadow', defaultValue: true, valueConverter: booleanConverter });
iosShadowProperty.register(ActionBarBase);
export const textProperty = new Property<ActionItemBase, string>({
name: 'text',
defaultValue: '',

19
packages/core/ui/action-bar/index.ios.ts
View File

@ -1,5 +1,5 @@
import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from '.';
import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon } from './action-bar-common';
import { ActionItemBase, ActionBarBase, isVisible, flatProperty, iosIconRenderingModeProperty, traceMissingIcon, iosShadowProperty, iosLargeTitleProperty } from './action-bar-common';
import { View } from '../core/view';
import { Color } from '../../color';
import { ios as iosBackground } from '../styling/background';
@ -8,6 +8,7 @@ import { colorProperty, backgroundInternalProperty, backgroundColorProperty, bac
import { ios as iosViewUtils } from '../utils';
import { ImageSource } from '../../image-source';
import { layout, iOSNativeHelper, isFontIconURI } from '../../utils';
import { SDK_VERSION } from '../../utils/constants';
import { accessibilityHintProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityValueProperty } from '../../accessibility/accessibility-properties';
export * from './action-bar-common';
@ -533,7 +534,7 @@ export class ActionBar extends ActionBarBase {
if (navBar.standardAppearance) {
// Not flat and never been set do nothing.
const appearance = navBar.standardAppearance;
appearance.shadowColor = UINavigationBarAppearance.new().shadowColor;
appearance.shadowColor = this.iosShadow ? UINavigationBarAppearance.new().shadowColor : UIColor.clearColor;
this._updateAppearance(navBar, appearance);
}
} else {
@ -644,9 +645,8 @@ export class ActionBar extends ActionBarBase {
[backgroundInternalProperty.getDefault](): UIColor {
return null;
}
[backgroundInternalProperty.setNative](value: UIColor) {
// tslint:disable-line
}
// @ts-ignore
[backgroundInternalProperty.setNative](value: UIColor) {}
[flatProperty.setNative](value: boolean) {
const navBar = this.navBar;
@ -661,4 +661,13 @@ export class ActionBar extends ActionBarBase {
[iosIconRenderingModeProperty.setNative](value: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate') {
this.update();
}
[iosLargeTitleProperty.setNative](value: boolean) {
if (!this.navBar) {
return;
}
if (SDK_VERSION >= 11) {
this.navBar.prefersLargeTitles = value;
}
}
}

2
packages/core/ui/animation/animation-interfaces.ts
View File

@ -61,7 +61,7 @@ export interface AnimationDefinition {
scale?: Pair;
height?: CoreTypes.PercentLengthType | string;
width?: CoreTypes.PercentLengthType | string;
rotate?: Point3D;
rotate?: number | Point3D;
duration?: number;
delay?: number;
iterations?: number;