mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(): local icon handling in actionbar and tabview (#7009)
This commit is contained in:
17
apps/app/ui-tests-app/action-bar/icons.ts
Normal file
17
apps/app/ui-tests-app/action-bar/icons.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import { EventData } from "tns-core-modules/ui/frame";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { ActionBar } from "tns-core-modules/ui/action-bar";
|
||||
|
||||
const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean");
|
||||
}
|
||||
|
||||
export function onChangeRenderingMode(args: EventData) {
|
||||
const button = <Button>args.object;
|
||||
const actionBar = <ActionBar>button.page.actionBar
|
||||
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
|
||||
button.text = "" + actionBar.iosIconRenderingMode;
|
||||
}
|
||||
14
apps/app/ui-tests-app/action-bar/icons.xml
Normal file
14
apps/app/ui-tests-app/action-bar/icons.xml
Normal file
@@ -0,0 +1,14 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem icon="res://icon" tap="navigate"/>
|
||||
<ActionItem icon="res://add_to_fav" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
17
apps/app/ui-tests-app/action-bar/local-icons.ts
Normal file
17
apps/app/ui-tests-app/action-bar/local-icons.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import { EventData } from "tns-core-modules/ui/frame";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { ActionBar } from "tns-core-modules/ui/action-bar";
|
||||
|
||||
const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
|
||||
|
||||
export function navigate(args) {
|
||||
frame.topmost().navigate("ui-tests-app/action-bar/clean");
|
||||
}
|
||||
|
||||
export function onChangeRenderingMode(args: EventData) {
|
||||
const button = <Button>args.object;
|
||||
const actionBar = <ActionBar>button.page.actionBar
|
||||
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
|
||||
button.text = "" + actionBar.iosIconRenderingMode;
|
||||
}
|
||||
14
apps/app/ui-tests-app/action-bar/local-icons.xml
Normal file
14
apps/app/ui-tests-app/action-bar/local-icons.xml
Normal file
@@ -0,0 +1,14 @@
|
||||
<Page>
|
||||
<Page.actionBar>
|
||||
<ActionBar>
|
||||
<ActionBar.actionItems>
|
||||
<ActionItem icon="~/ui-tests-app/resources/images/icon.png" tap="navigate"/>
|
||||
<ActionItem icon="~/ui-tests-app/resources/images/add_to_fav@3x.png" tap="navigate"/>
|
||||
</ActionBar.actionItems>
|
||||
</ActionBar>
|
||||
</Page.actionBar>
|
||||
<StackLayout>
|
||||
<Button text="go to cleared page" tap="navigate"/>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</StackLayout>
|
||||
</Page>
|
||||
@@ -15,6 +15,8 @@ export function loadExamples() {
|
||||
examples.set("actBG", "action-bar/background");
|
||||
examples.set("actStyle", "action-bar/all");
|
||||
examples.set("actIcons", "action-bar/system-icons");
|
||||
examples.set("actLocalIcons", "action-bar/local-icons");
|
||||
examples.set("actResIcons", "action-bar/icons");
|
||||
examples.set("actView", "action-bar/action-view");
|
||||
examples.set("actionItemPosition", "action-bar/action-item-position");
|
||||
examples.set("actBGCss", "action-bar/background-css");
|
||||
|
||||
@@ -19,6 +19,7 @@ export function loadExamples() {
|
||||
examples.set("tabmore", "tab-view/tab-view-more");
|
||||
examples.set("tabViewCss", "tab-view/tab-view-css");
|
||||
examples.set("tab-view-icons", "tab-view/tab-view-icon");
|
||||
examples.set("tab-view-icons-local", "tab-view/tab-view-icon-local");
|
||||
examples.set("tab-view-icon-change", "tab-view/tab-view-icon-change");
|
||||
examples.set("text-transform", "tab-view/text-transform");
|
||||
examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
|
||||
|
||||
21
apps/app/ui-tests-app/tab-view/tab-view-icon-local.ts
Normal file
21
apps/app/ui-tests-app/tab-view/tab-view-icon-local.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { EventData } from "tns-core-modules/data/observable";
|
||||
import { Button } from "tns-core-modules/ui/button";
|
||||
import { TabView } from "tns-core-modules/ui/tab-view";
|
||||
|
||||
let iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
|
||||
|
||||
export const onNavigate = updateButtons;
|
||||
|
||||
export function onChangeRenderingMode(args: EventData) {
|
||||
let tabView = (<Button>args.object).page.getViewById<TabView>("tab-view");
|
||||
tabView.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
|
||||
updateButtons(args);
|
||||
}
|
||||
|
||||
function updateButtons(args) {
|
||||
let button = (<Button>args.object);
|
||||
let tabView = button.page.getViewById<TabView>("tab-view");
|
||||
for (let i = 0, length = tabView.items.length; i < length; i++) {
|
||||
(<Button>tabView.items[i].view).text = "" + tabView.iosIconRenderingMode;
|
||||
}
|
||||
}
|
||||
26
apps/app/ui-tests-app/tab-view/tab-view-icon-local.xml
Normal file
26
apps/app/ui-tests-app/tab-view/tab-view-icon-local.xml
Normal file
@@ -0,0 +1,26 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
|
||||
<TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
|
||||
<TabView.items>
|
||||
<TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png">
|
||||
<TabViewItem.view>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png">
|
||||
<TabViewItem.view>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png" title="NativeScript">
|
||||
<TabViewItem.view>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
<TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png" title="Favorites">
|
||||
<TabViewItem.view>
|
||||
<Button text="undefined" tap="onChangeRenderingMode"/>
|
||||
</TabViewItem.view>
|
||||
</TabViewItem>
|
||||
</TabView.items>
|
||||
</TabView>
|
||||
</Page>
|
||||
Reference in New Issue
Block a user