×
Namespaces

Variants
Actions
Revision as of 13:55, 13 June 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

MeeGo Harmattan QML ToolIcon Element and Various icons

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to how to use ToolIcon and it’s various predefined icons in ToolBarLayout QML Element for MeeGo Harmattan.

Article Metadata
Tested with
SDK: Qt SDK 1.1.3
Devices(s): N9, N950 Developer Device
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component, ToolIcon, iconid
Created: chintandave_er (28 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

This wiki articles explains how to use ToolIcon and it’s various predefined icons in ToolBarLayout QML Element for MeeGo Harmattan.

ToolIcon QML Element

This is a Button-like component composed by an icon and supposed to be used inside a ToolBarLayout. You can define predefined icon images in ToolIcon Element by defining in iconid.

ToolBarLayout 
{
id: commonTools
ToolIcon { iconId: "toolbar-back"; onClicked: { myMenu.close(); pageStack.pop(); } }
ToolIcon { iconId: "toolbar-view-menu"; }
}

IconId - Various predefined Icons

There are various predefined icons to use in ToolIcon in MeeGo Harmattan. I categorized the icon in some category by myself as below.

Media / Image Related Icons

Icons List:

toolbar-mediacontrol-backwards  
toolbar-mediacontrol-forward
toolbar-mediacontrol-next
toolbar-mediacontrol-pause
toolbar-mediacontrol-play
toolbar-mediacontrol-previous
toolbar-mediacontrol-stop
toolbar-stop
toolbar-shuffle
toolbar-share
toolbar-volume-off
toolbar-volume
toolbar-headphones
toolbar-image-edit
toolbar-gallery
toolbar-tag

Here is sample code on which iconId used in the ToolIcon Ids.

ToolIcon { iconId: "toolbar-mediacontrol-backwards" }  
ToolIcon { iconId: "toolbar-mediacontrol-pause" }
ToolIcon { iconId: "toolbar-mediacontrol-play" }
ToolIcon { iconId: "toolbar-mediacontrol-stop";}
ToolIcon { iconId: "toolbar-mediacontrol-forward" }
ToolIcon { iconId: "toolbar-mediacontrol-previous" }
ToolIcon { iconId: "toolbar-mediacontrol-next" }
ToolIcon { iconId: "toolbar-headphones" }

Screenshot

Ss MediaIcons.png

Application Related Icons

Icons List:

toolbar-clock  
toolbar-camera
toolbar-dialer
toolbar-alarm
toolbar-application

Here is sample code on which iconsid used in the ToolIcon Ids.

ToolIcon { iconId: "toolbar-clock";}  
ToolIcon { iconId: "toolbar-camera" }
ToolIcon { iconId: "toolbar-dialer" }
ToolIcon { iconId: "toolbar-alarm" }
ToolIcon { iconId: "toolbar-application" }

Screenshot

Ss ApplicationsIcona.png

Contacts Related Icons

Icons List:

toolbar-contact  
toolbar-addressbook
toolbar-callhistory

Here is sample code on which iconsid used in the ToolIcon Ids.

ToolIcon { iconId: "toolbar-contact" }  
ToolIcon { iconId: "toolbar-addressbook" }
ToolIcon { iconId: "toolbar-callhistory" }

Screenshot

Ss ContactIcons.png

Refresh Icons

Icons List:

toolbar-refresh1  
toolbar-refresh2
toolbar-refresh3
toolbar-refresh4
toolbar-refresh

Screenshot

Ss RefrashIcons.png

Communication related icons

Icons List:

Chat:

toolbar-send-chat  
toolbar-new-chat

Screenshot

Ss ChatIcons.png

SMS/Message:

toolbar-new-message  
toolbar-send-sms

Screenshot

Ss SMSIcons.png

Email:

toolbar-reply-all  
toolbar-reply
toolbar-new-email
toolbar-send-email

Screenshot

Ss emailIcons.png

Content Related Icons

Icons List:

toolbar-content-audio  
toolbar-content-ovi-music
toolbar-cut-paste
toolbar-select-text
toolbar-rich-text
toolbar-rich-text-view-menu
toolbar-backspace
toolbar-bold
toolbar-italic
toolbar-trim
toolbar-underline

Screenshot

Ss ContentIcons.png

Directory Icons

Icons List:

toolbar-directory-move-to  
toolbar-directory

Screenshot

Ss DIRIcons.png

Favorite Icon

Icons List:

toolbar-favorite-mark  
toolbar-favorite-unmark

Screenshot

Ss FavIcons.png


Tab Icon

Icons List:

toolbar-tab-next  
toolbar-tab-previous

Screenshot

Ss TabIcons.png

General Controls Icons

Icons List:

toolbar-settings  
toolbar-delete
toolbar-search
toolbar-cancle
toolbar-close
toolbar-add
toolbar-back
toolbar-column
toolbar-done
toolbar-down
toolbar-edit
toolbar-next
toolbar-pages-all
toolbar-previous
toolbar-redo
toolbar-jump-to
toolbar-list
toolbar-main-view
toolbar-home
toolbar-history
toolbar-forward
toolbar-frequent-used
toolbar-grid
toolbar-tools
toolbar-up
toolbar-update
toolbar-undo

Screenshot

Ss Gen1Icons.png

Ss Gen2Icons.png

This page was last modified on 13 June 2012, at 13:55.
105 page views in the last 30 days.
×