Widget Libraries - Axure Docs

Widgets in Axure RP are organized into libraries, which you can access in the Libraries pane. Axure RP comes with five pre-installed default widget ... ›WorkingwithWidgetsInstallingandActivatingRPActivatingAxureRP10InstallingonmacOSInstallingonWindowsAxureLicensePortalGettingStartedGettingStartedVideoTheAxureRPEnvironmentViewingandSharingYourPrototypesKeyboardShortcutsAuto-SavedBackupFilesWorkingwithWidgetsOrganizingWidgetsWidgetGroupsStylingWidgetsWidgetLibrariesTheGrid,Guides,andSnappingBasicWidgetsButtons,Shapes,&TextImagesHotSpotsLines&ArrowsDynamicPanelsInlineFramesTextFields&TextAreasDroplistsListBoxesCheckboxesRadioButtonsTreesTablesClassicMenusSnapshotsWorkingwithPagesManagingPagesStylingPagesComponentsCreatingandUsingComponentsComponentViewsRaisedEventsIntroductiontoInteractionsEvents,Cases,andActionsListofEventsListofActionsTextLinksStyleEffectsAnimationsAdvancedInteractionsVariablesConditionalLogicMath,Functions,andExpressionsSelectionGroupsMoveActionBoundariesTheRepeaterRepeatersDynamicallyAddingRowsDynamicallyDeletingRowsUpdatingRowsMarkingRowsSortingRowsFilteringRowsPaginationAdaptiveViewsAdaptiveViewsDocumentingYourPrototypePageandWidgetNotesTheWordSpecificationPrintingFlowDiagramsFlowDiagramsFlowConnectorsPublishingYourPrototypeThePrototypePlayerCustomizingtheHTMLOutputWebFontsandFontMappingTeamProjectsCreatingandSharingProjectsWorkingwithTeamProjectsTeamProjectHistoryTroubleshootingTeamProjectsUpgradingProjectstoRP10WidgetsinAxureRPareorganizedintolibraries,whichyoucanaccessintheLibrariespane.AxureRPcomeswithfivepre-installeddefaultwidgetlibraries—Default,Flow,Icons,SampleUIPatterns,andSampleFormPatterns. Tip TherearemanydifferentcustomwidgetlibrariesavailableforfreedownloadorforpurchasefromtheAxureusercommunity.YoucanbrowsethroughthemintheCommunitysectionofourwebsiteatwww.axure.com/support/download-widget-libraries. AxureRPwidgetlibrariesarestoredinyourcomputer'sfilesystemasstandalone.rplibfiles. SwitchingBetweenLibraries ThedropdownmenuatthetopoftheLibrariespanelistsallwidgetlibrariesandlocalimagefolderscurrentloadedintoAxureRPaswellasanylibrariesavailabletoyouviaAxureCloud. Toswitchtoawidgetlibrary,clickthedropdownandselectthelibraryinthelist.Alternatively,youcanselectAllLibrariestoviewthecontentsofallyourloadedlibrariesatonce. AddingandRemovingLibraries AddingLocalLibraryFiles ToaddalocallystoredwidgetlibraryfiletotheLibrariespaneforuse,clicktheMorelibraryoptionsiconatthetopofthepane.Inthefilebrowserthatappears,locateyourdesired.rplibfileandselectittoaddittothepane. EverytimeyouopenAxureRP,itwillattempttoloadallofthelocallibrariesyou'veaddedinthepast.AxureRPwillalsoattempttoloadanylibrariesitfindsatthefollowingfilelocations: Windows:C:\Users\%USERNAME%\MyDocuments\Axure\Libraries Mac:~/Documents/Axure/Libraries Tip Toseewherealocallibraryfileisstored,clicktheOptionsmenuatthetop-rightofthepaneandselectFindonDisk. AddingLibrariesfromAxureCloud WidgetlibrariescanbehostedonAxureCloudjustlikeregularprototypefiles,andyoucanaddAxureCloud–hostedlibrariestoAxureRPdirectlyfromtheAxureCloudservers.Cloud-hostedlibrariesappearinthelistwithacloudiconbesidethem. ClickthedropdownmenuatthetopoftheLibrariespane.UndertheAvailablefromCloudheadingtowardthebottomofthelist,you'llseealltheAxureCloud–hostedwidgetlibrariesyoucurrentlyhaveaccessto.Clickoneofthoselibrariestodownloadanduseit. EverytimeyouopenAxureRP,itwillattempttoloadanyAxureCloudlibrariesyou'vepreviouslyadded.Itwillalsoautomaticallyattempttodownloadanychangestothelibrariessinceyoulastusedthem. RemovingLibraries ToremovealibraryfromAxureRP,selectitinthedropdownatthetopoftheLibrariespane.Then,clicktheOptionsmenuatthetop-rightofthepaneandselectRemoveLibrary. CreatingLibraries YoucancreateawidgetlibraryforyourownuseortosharewithyourteamortheAxurecommunity.YoucanworkaloneorcollaboratewithteammemberstocreatealibraryasaTeamProject. GotoFile→NewLibrarytocreateanewwidgetlibrary.Toturnyournewlibraryintoateamproject,followtheinstructionsintheCreatingandSharingTeamProjectsarticle. CreatingCustomWidgets Whenyou'reworkinginawidgetlibrary,thePagespaneisreplacedbytheWidgetspane,whichincludesthesameoptions.EachwidgetyouaddtothispanewillappearasawidgetintheLibrariespanewhenyouaddyourcustomlibrarytoAxureRPforuse. Theworkflowforbuildingcustomwidgetsislargelythesameasitisforbuildingpagesinaregularprototypefile:double-clickawidgetintheWidgetspanetoopenitonthecanvas,andthenaddcomponentwidgetstothecanvasfromtheLibrariespane. Tip Ifyourcustomwidgetismadeupofmultiplecomponentwidgets,itcanbehelpfultogroupthemsotheycanactasasinglewidgetwhenaddedtoadiagraminaregularprototypefile. OrganizingWidgetsintoFolders Widgetlibrariescanincludecollapsiblesectionheadings,suchasFormsandMarkupintheDefaultlibrary.Tocreatetheseinyourcustomlibraries,addyourwidgetstofolderswiththeAddFoldericonatthetop-rightoftheWidgetspane. WidgetStyles Justlikeinaregularprototypefile,youcanusewidgetstylestocentrallymanagewidgetstylinginyourcustomwidgetlibraries.Whenyouaddoneofyourcustomwidgetstothecanvasinaprototypefile,itswidgetstyleisautomaticallyaddedtotheprototype'slistofwidgetstyles. Interactions Youcanbuildinteractivityintothewidgetsinyourcustomlibrary,allowingyoutocreatereusableinteractiveassetslikebuttons,switches,flyouts,andmore. IconsintheLibrariesPane EverywidgetisrepresentedbyaniconintheLibrariespane.Bydefault,acustomwidget'siconisasmallthumbnailimageofitscontent.Ifdesired,youcanreplacethisthumbnailwithacustomicon. Toaddacustomicontoawidget,openthewidgetforeditingandclickablankspotonthecanvas.IntheStylepane,selecttheCustomiconradiobuttonandusethefieldsbelowtoimportyourcustomiconimages. Thebaseiconmustbe28x28pixels,andyoucanoptionallyaddasecond,56x56pixelimagetobeusedonhigh-densitydisplays. Tooltips WidgeticonsintheLibrariespanecanincludetooltips.Whenyoumouseovertheicon,agrey?iconappearsatitstop-rightcorner,andclickingtheiconshowsthetooltip. Toaddoreditawidget'stooltiptext,openthewidgetonthecanvasandusetheTooltipfieldintheStylepane. AdaptiveViews Youcansetupadaptiveviewsinyourcustomwidgetlibrarytocreateadaptivewidgets.Tolearnhowtosetupandworkwithadaptiveviews,checkouttheAdaptiveViewsreferencearticle. ←StylingWidgetsTheGrid,Guides,andSnapping→SwitchingBetweenLibrariesAddingandRemovingLibrariesAddingLocalLibraryFilesAddingLibrariesfromAxureCloudRemovingLibrariesCreatingLibrariesCreatingCustomWidgetsOrganizingWidgetsintoFoldersWidgetStylesInteractionsIconsintheLibrariesPaneTooltipsAdaptiveViews