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

Switch

A toggle to switch things on and off.

How to use this component

Should be used in conjunction with a text label to explain the switch.


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:Switch Grid.Row="0"
               Grid.RowSpan="2"
               Grid.Column="1"
               Margin="30,0,10,5"
               HeightRequest="0"
               IsToggled="{Binding IsWelsh}"
               Toggled="SwitchWelsh_Toggled"
               WidthRequest="0" />
  • IsToggled
    • State of the toggle
  • ToggledCommand
    • Invoked when the switch is clicked on
  • Toggled
    • Invoked when the switch is clicked on
      <!-- Bilingual -->
        <Grid Margin="{StaticResource FormMargins}"
              Padding="0,5"
              ColumnDefinitions="*,85"
              RowDefinitions="auto,auto">
            <Label Grid.Row="0"
                   Grid.Column="0"
                   Style="{DynamicResource TextSection}"
                   Text="{x:Static resx:AppResources.LblWelshLang}" />
            <Label Grid.Row="1"
                   Grid.Column="0"
                   Style="{DynamicResource TextBody}"
                   Text="{x:Static resx:AppResources.LblBilingual}" />
            <inputs:Switch Grid.Row="0"
                           Grid.RowSpan="2"
                           Grid.Column="1"
                           Margin="30,0,10,5"
                           HeightRequest="0"
                           IsToggled="{Binding IsWelsh}"
                           Toggled="SwitchWelsh_Toggled"
                           WidthRequest="0" />
        </Grid>
        <sections:Divider Margin="0,15,0,15" HeightRequest="1" />

How should this component look?