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

Callout button (Main)

The main call to action button used throughout the app.

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

How to use this component

This button should be used within page content when you need to confirm a selection or route.


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:CallOut Clicked=""
                         Icon="{x:Static styles:IconFont.ChevronRight}"
                         Text="{x:Static resx:AppResources.LblMakeBooking}" />
  • Text
    • Sets the text displayed on the button
    • Default is String.Empty
  • Icon
    • Sets the icon (right side of text)
    • Default is IconFont.ChevronRight
  • IconFontSize
    • Sets the Icon font size
    • Default is 26d
  • IconStart
    • Sets the icon (left side of text)
    • Default is String.Empty
  • IconStartFontSize
    • Sets the font size for IconStart
    • Default is 26d
  • TextPosition
    • Used to alter position of Text
    • Options Centre or Default
    • Default is TextPositionEnum.Default
  • ColourMode
    • Used to alter colours of the button
    • Options are Solid or Gradient
    • Default is ColourModeEnum.Gradient
  • 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

How should this component look?