Cardiff Council Content and design system

www.cardiff.gov.uk

App

viewers

Pdf page viewerMarkdown viewMap Image

popups

How to: Animate a popupHow to: Create a popupSuccess popup (page removal)Message popupSuccess popup (and or go to new route)

pages

Base pageHome pageProcess pageDetails page

layout

Section headingDividerNoteMarginsError labelHeadingHighlightAlertNotifyAnimationTextStandard header iconsLinks

input

SwitchTime pickerPickerCheckboxText editorMapSearch bar with GPSSearch addressSearch barText entry

buttons

EditCancel buttonVertical transparent buttonVertical inverted buttonTag buttonCarousel buttonCallout button (Main)Vertical buttonNext / Back buttonsClose buttonInfo buttonFull button

accessibility

AutomationProperties.IsInAccessibleTreeAutomationProperties.NameAutomationProperties.HelpTextUseful docs

How to: Animate a popup

Popups use a 3rd party NuGet package – https://github.com/rotorgames/Rg.Plugins.Popup

How to use this component

Animations can be added to the popup in XAML.

For more info – https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Animations

 

The XAML section below shows the XAML animation add to the collection reminders popups


Code Resource


Deprecated: htmlentities(): Passing null to parameter #1 ($string) of type string is deprecated in /home/site/wwwroot/wp-content/themes/huntsman-child/single-mobile.php on line 96
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="700"
                                   PositionIn="Top"
                                   PositionOut="Right"
                                   ScaleIn="1"
                                   ScaleOut="0" />
    </pages:PopupPage.Animation>