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

Picker

A dropdown to select an option from multiple values.

Base control is the XF editor control, more info here – https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/picker/

How to use this component

Should be used in conjunction with a label to explain what the dropdown is for.


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
<inputs:Picker ItemDisplayBinding="{Binding VehicleName}"
               ItemsSource="{Binding VehicleTypes.VehicleCustomerList}"
               SelectedIndexChanged="VehicleType_OnSelectedIndexChanged"
               SelectedItem="{Binding Booking.VehicleInfo.SelectedVehicleType}" />
<controls:ErrorLabel Errors="{Binding Booking.VehicleInfo.Errors[SelectedVehicleType]}" HorizontalOptions="CenterAndExpand" />
  • Title
    • Title for picker
    • Default is String.Empty
  • IsEnabledPicker
    • Used to enable or disable the picker
    • Default is true
  • ItemsSource
    • The source list of items to display,
    • Defaults is null
  • SelectedIndex
    • The index of the selected item
    • Default is -1
  • SelectedItem
    • The selected item
    • Default is null
  • ItemDisplayBinding
    • Used to identify the data shown in the picker if ItemSource is a list of objects
  • SelectedIndexChanged
    • Raised when the value of the SelectIndex property has changed

How should this component look?