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

Info button

Used to produce a popup containing more relevant information.

Base component is StateButton, more info here – https://github.com/IeuanWalker/Xamarin.Forms.StateButton

How to use this component

Should be used in conjuction with a text label. (See context)


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
<buttons:Info AutomationProperties.HelpText="{x:Static resx:AppResources.AccAmountDueInfo}"
              AutomationProperties.IsInAccessibleTree="true"
              Clicked="" />
  • Icon
    • Sets the icon
    • Default is IconFont.Info
  •  State
    • This changes based on the button state.
    • Options are Pressed or NotPressed
    • Default is NotPressed
  • ClickedCommand
    • Triggered when the button is pressed and released
  • PressedCommand
    • Triggered when the button is pressed
  • ReleasedCommand
    • Triggered when the button is released
  • Clicked
    • Triggered when the button is pressed and released
  • Pressed
    • Triggered when the button is pressed
  • Released
    • Triggered when the button is released
 <PancakeView:PancakeView Margin="{StaticResource FormMargins}" Style="{StaticResource NoteStyle}">
            <FlexLayout Margin="0" Direction="Row">

                <FlexLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="NotificationsAdvice_Clicked" />
                </FlexLayout.GestureRecognizers>

                <Label Margin="0,5,0,0"
                       FlexLayout.Basis="90%"
                       Style="{DynamicResource TextBody}"
                       Text="{x:Static resx:AppResources.TextNotReceivingNotifications}" />
                <buttons:Info Margin="0"
                              AutomationProperties.IsInAccessibleTree="true"
                              AutomationProperties.Name="{x:Static resx:AppResources.TextNotReceivingNotifications}"
                              Clicked="NotificationsAdvice_Clicked"
                              FlexLayout.AlignSelf="End"
                              HorizontalOptions="End"
                              VerticalOptions="Center" />
            </FlexLayout>

        </PancakeView:PancakeView>

How should this component look?