From 00e896a1a658406f9166c2389080fa78de5195b5 Mon Sep 17 00:00:00 2001 From: Christophe de Vienne Date: Mon, 18 Jul 2022 13:15:16 +0200 Subject: [PATCH] Add checkbox widget (closes #6) --- docs/assets/material/checkbox.png | Bin 0 -> 5595 bytes explorer/index.html | 297 +++++++++++++++++++++- explorer/src/Main.elm | 2 + explorer/src/Page/Checkbox.elm | 152 +++++++++++ src/Internal/Checkbox.elm | 57 +++++ src/Internal/Material/Checkbox.elm | 100 ++++++++ src/Widget.elm | 63 +++++ src/Widget/Material.elm | 24 ++ tests/VerifyExamples/Widget/Checkbox0.elm | 34 +++ 9 files changed, 724 insertions(+), 5 deletions(-) create mode 100644 docs/assets/material/checkbox.png create mode 100644 explorer/src/Page/Checkbox.elm create mode 100644 src/Internal/Checkbox.elm create mode 100644 src/Internal/Material/Checkbox.elm create mode 100644 tests/VerifyExamples/Widget/Checkbox0.elm diff --git a/docs/assets/material/checkbox.png b/docs/assets/material/checkbox.png new file mode 100644 index 0000000000000000000000000000000000000000..f20abee3d247448244370a6fecec7805e8c9a50d GIT binary patch literal 5595 zcmcIoXH*kyw;hT^QMwdGAcAxSM5Om3AOw&OLMYOuNs}U=pcp~ANQYNCLr26nu+m6Ov@mXm`!yEs|d+FL>pN2G70gi?$2oi-D#%rxpI5As(X8p-!j zG_QuZZhn)^p*D2qtJ=MuAaIY9CoJG)Q&V_bUSLQ`0ck-1{19(uX)a@lne`mQS&G{F zUCFeuF0nq1CtLSZ0R0lb&uvnbb;g{nhKmSE(Fi{#msPd;`jA~&*)t5|b9m@YJ8v+( zcz);1?w9#n^?NCnLAF#**;LKMU_rEp;$9(&Rf+uDKf#n; zg%p`O>}|5a`?HMaf3i%NV`U2{=|pHW-Vs$T!!81GSi_@SWg$*FShdNW#TPfPuHuI# z%)Vg~Q=28+lp@gco;1lNc$AtkI$=0>m2QlPr(iOn7-qB%$*Bj~cOg2}wK^8x9XvYD zx=&tx#d~yW+VDi!7aADS*(MSeCj3GCrEYy|J>}Q*xy0bg2F%;sCGUK>R0gDl$XrEH z9=f>v{8N`54fb4fRx)sfARd;>FP>+nln2-eb5lkrz!qSX*Kdl5z`lJ1yKcED=)1`| zIXGB4xd5WrT*_J5pK*qAF3Am(li|Si^d0Q_o+(HV>}GUgwHc zP{3=Mf0-7Pn;8)NjII4atWnnu2};AP_!KRJZ@5yec!jUezs5Ybvq_nflW~=4@f{tC zR;bFCHl3y!?zdj09s|9{VM?i16=-zqU%bHNErm=OaCYJfXZisrCniwEPWb zW^?kQYbcbAJXj0jQ9ML}bt@a3nTP_c#|Y(H;mly2_!dPc57y>X<@q(tvWZaInE#1j61|>fntMp8Kbz+_unSa2#q$`F8W!YXO zCiXV<7^?N!;jS}+D6Z!Ab{HZ-01vXCEbnowYHgKo@t@?TrJ=EUECGi@ z@7}%J+}^I{4O}`qz*&>``*v0p)7+$?35sS{pCE}t>tSYEKT+iv*9dBAX{~+j?&xR) zVc!U}nXdJkN|#@y7(ZyGQimW?MsZZ4kkiCZT)nTDJR!E`wW6shoRmrO^WRYn{a0=- zuHs`=@Oopa6bYdZA3hxJjhc`U5J93ItEj#{jhoceG5Q6sW`E>pWrq#d7EgVbd~?Wm zyuTKb@c3n#-EbbbpGcNka&U8VGrvRo`PoT-wmK8~_~FBc9AF#lS)ZCRQcV;jVGwnD z8yide)9TU6C?-57ha*YUy({Z=qqJ+2742U*wIZUTG|jQDi@)yj^J@+}4CPS#2xkia{{6dVY>mtO)7{l^D)*J4 zcOfCy?M4eik#*i?vp+&JM-T{vf}5LwVY&S^GBPr4v@QvFxd3|7Mn*6lU z%n@q{b!;?T@LZ?4PY!MW65AO2a-Ecv2I7Bn=$z=KE_GH4MZ`a{zRh#7nCeeMOG}Ff zPsmbUn<#7R=|MnBqXov6hns)!rGI?B^+MmjEtq;{b=6+K;dzB)=7^O4d98rMgf?^) z%GJya*2W->&(>E~xX`-!#d*;Y5pXjzGxH*S!nXpBQ~DrnL%qM70=w&&ii?XgoN)Da zRS8+2va_>=MMQFKK^k@42L=a+Ybz^-x3;$_p*)G*)a(@Rr^MH|~gT|qC&{kU3KjR+aOC!DJsnN>{3JP{9ZRU{< zljY+>4*h8#pom_n3nNDFrMr0Wl$4a2wYB`OM}2Z+olO3xW|j3`US8W%uD!X%YHDgT z%geTVCsS3f4lBtLKDrL002THN2OBsONGX~PagUo@WgQlCTRt)}5?@+YPA)$SSNTdV zDLFY)Em@SA+2wfG77q^4RKXP+AJ54atqgUfDTH)U%hU2AwPCM3Ju5{$x3{+~ekF;R z^T!YU5+aVePRo1Nl6JS2Zs`*q^}>hI#wj-;_9j+ zUAH@+vJ$=wA{5*cb6bK#bCXUDb!%sQ79Hexa2_6>?X7mE?ig;pq4FegFHJV}l>6WY zrS$TTUyghMF?PNqfMw+5C=Cn@SbzdgvrT{^#>Vtp=1J)VRUxH7A`*-7VoR6VA0!kM zogEz!adC97+})|6?b&dti6IG()i~{ZLmf!T*}2djS8sd;X=s?x+SbQ3aru>yF zSNPqQH1Ob$?S>-id=73GU>N1s*Vi>G9F50oy-E@)d`~=b^)M+=1Sx~4(z9ogh_kKP zc64LBsC(X2t(Vr?#&n$z+N;K6tvFZA|NKo^IN+C@EMB8Z4G7g~5#@Wb-+7j%8K~rB zR5E^le0^p6A_?zZa%cc!B9-X%k(5DGBKVQ@FFGDMr*xVJhGRefj^rmo z5xV(?1`J}ERgY1ZS##>^?NtwBl5(slV3gO%(|&lGF6AIW1SrU&-z!=GuX~Z{`2A8YgBAwgdK13 z2ngTWj~6Q-d^YM1hHecjDa#D~BSU}(FR|+3|DG5ftz{nmMC!!%Y;QDZ&(+m+cs}^q z+1Cfpi6Mhxi%-~ngDRIy(am*T^3dClpF&Dtt6HHZV@~hBMiJ??vyiJosftj-Pf*5Xm!u zl~W)RN~)^bLWO&ZdkkV8+Lm&1az$^BT<)>4&2+M-mU8J$XItL7bxZj5deR>j|KxG| zC(h1%l$4Y={(=fZ=EqV1PAheoq}kfq65Qc`^k_J=lehj5ANOV_^pEwDIu$^a^XPt4 zfpHB40nNf}T9?}NH#>V{tKD^cuw0y+*PuenZkjTwP{32)3Jb|;d5om<4a*>?=JiGp zs?lCBT`OCS+Hmpn=Ns=oetfa`E7@k``z=AosjE^_4K5NkMM6${E5m}bHM=-DS=rwU z3s(9Ex!EZJS+?X9cf>vWtS0S-a^4;7ET#iejT3QYgZ}Z}ThTAIp-4(f5)NDPV4A(y zY$4;)26Rzq-OK3d>G=;xM_v-+)3)xl>AIRBf|hA2GGk>}YMocx-;?9xiF_v~q@7)! z_i+)RSiB8%PUlYdsE>{9JigOj*4|8&gw?h%3=W&AsvyEe#E4q1349eQTQp-9LhHVy_)@ zCwZB5C3?k*ekF^#2ZV={fuee7KgKt=u%P?YXL{X*2U%+~+&x|N0@hA}&1H=At19-t z@I!CORe1D+w;vG`^ML?Hn&WbQem*bBvSj?mw|(M;)2iy$F>5HMNT|2HUGePXaBG$n z`{#I!`%JT>cnBb)c@l$hefpFbWPq#m^dplWU810aEGUzRh={kqiO}y)t$vWPJ*ho> zsCjx2HF5MKl-{myJ%4X6BINVuR-FGuXk(+au$UN&px}P}n`;#VfjP?2Y%Bk$s;b`K zs#o9Ye&n+e8}lJMoBg(c4FruV*Qq_wHtuBU`>gk#bN2HRPniV;gN5Zt+5gVM5aSyndH21$Fg7drURmg%g z8A9mnidRtGEW7)p38iqRu~LbbO6= z$Z$ppP?AAEf2x8ovCdMyyZwsLxfjdt5!y2K6!A|LI6r!boQf(CB=9qn6eFNz1#fTB zAW{ZzMIM8VTVbBsLaqy{k0l8%=zm)~5f+AogmA&6)slqG4qR2}`*Ol()~2dTl7NSh z@VHn(V_GfvbB~^c<9bu2c!%?JsG#kik9u?PLP0?mn>OJCjeW4S<*%#zbr`Aw%x@r3 zj8ImNYzv`P0d2v2Aem%gu9V}HFfbPrWzoC4ZZ!_ho4;j-bzhDaJibpwLGg{K8xha1 z0Aw8qzwj$r-~%n207$v;5L%XkCyA}xuH%I2Z9tIf$e8kgKN#8E`WfBbranHg(HqO5O2KQ;U z4h~`wiGsOaljRQF?$YU!_Z67>;^N~CvhYGLE!E*{_;o0;T-bf(%k41{-($BhmTHEN zWK89^N2JV}32Q7tVQPyoF{M&URg~(914*;q3s&q&c-&?$i0&WAtV_Ej{Jq=nvuri9 z)fn70fMCdl-eDASOfoy0o3q&C3OT=pL?XFI5zV?ra5GyE2Ss2UNlJ zn%vUL>S=F^1ovsMqCy~tkdR)e&4~XL7TY#Bs1-^zpnmfSunhLdPn_q$N?ynR3fY#;wj{ zP5d~aR$!j}PS%8oo+(gMQybJ_sF;|XDpsF6)n#_=ZQw4-1C*HlOoIMpYk!|cNJ!`! zF>w?ySezUj5qe0k%vSh-BHO{ruu5%ht@ar(>Dr+FEdkNuO9LNgUr|3Dcqy=lhleQO z4MCrQ0P%4F$&3batmNlcZ-xa4Q3fW{)5iymG&eOhtqN4a!GLbZu48LL!o$PkRN1!n z_F@1Uy4h3TFoVQb&&p&>7F&kgxGkWBkB{GKFBmdz{}ps9DxjgW>`zm00i0js9vvM$ zA1X8*VbznM4Dg!?w2G3Bj)Q`NA}EkSg_xNl(!}pbVXyQ_*d1Fs`J$pCm-#MgueGw# zdvN$=AC%#Ut>(8I;@I<6RbIP8PtSeXgMctYIxQ%Hz2hi{lTb0D) zqCsn4?E{GBorvp#zAp@+rbbG`V}z0kB*KHz($dzuF?p=jiJrE)q%2Q9HztX=LZ>^z z*p?Q8+}zxiSAI4&93vQ$aDbtbB2-sXJVL_**nQA>iFvF_13A#t)HE&9C%<{~JuT7` z@7c3w)PA(VC<(weuo>`sIZ62U;Nfz_a5-+c94uT89R4$(_-_Y4qDwJ&M=zZ2j=YHo zW%;}PsseW~D)77CT6Jm9L}xEgb#jKYx8{bj=TPX75H3F}o%cG^Wnecwhr!FbI|+u--^t%?|}QnTE+OqgE-8| zv5ziK1WzPzc{ehmMIT$sVBDi^G8gl!mrq9j_wwCAn_72?Et9OPH_ zOi(SZa58{K0ue*0lt5IvWZV26OY>iuYd-+fsSSXE|1Bi`N4)$$9Mq1wAUNZRa UIExplorer.nextPage "Select" Page.Select.page |> UIExplorer.nextPage "Multi Select" Page.MultiSelect.page + |> UIExplorer.nextPage "Checkbox" Page.Checkbox.page |> UIExplorer.nextPage "Switch" Page.Switch.page |> UIExplorer.nextPage "Radio" Page.Radio.page |> UIExplorer.nextPage "Tab" Page.Tab.page diff --git a/explorer/src/Page/Checkbox.elm b/explorer/src/Page/Checkbox.elm new file mode 100644 index 0000000..62729ac --- /dev/null +++ b/explorer/src/Page/Checkbox.elm @@ -0,0 +1,152 @@ +module Page.Checkbox exposing (page) + +{-| This is an example Page. If you want to add your own pages, simple copy and modify this one. +-} + +import Element exposing (Element) +import Material.Icons.Types exposing (Coloring(..)) +import Page +import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) +import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) +import Widget +import Widget.Material as Material + + +{-| The title of this page +-} +title : String +title = + "Checkbox" + + +{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons) +-} +description : String +description = + "Checkboxes toggle the state of a single item on or off." + + +{-| List of view functions. Essentially, anything that takes a Button as input. +-} +viewFunctions = + let + viewCheckbox style desc selected onPress { palette } () = + Widget.checkbox (style palette) + { description = desc + , checked = selected + , onChange = onPress + } + --Don't forget to change the title + |> Page.viewTile "Widget.checkbox" + in + [ viewCheckbox ] + |> List.foldl Story.addTile + Story.initStaticTiles + + +{-| Let's you play around with the options. +Note that the order of these stories must follow the order of the arguments from the view functions. +-} +book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags +book = + Story.book (Just "Options") + viewFunctions + --Adding a option for different styles. + |> Story.addStory + (Story.optionListStory "Style" + ( "Checkbox", Material.checkbox ) + [] + ) + --Changing the text of the label + |> Story.addStory + (Story.textStory "Description" + "Be Awesome" + ) + --Change the Icon + |> Story.addStory + (Story.boolStory "Selected" + ( True + , False + ) + True + ) + --Should an event be triggered when pressing the button? + |> Story.addStory + (Story.boolStory "with event handler" + ( Just (always ()), Nothing ) + True + ) + |> Story.build + + + +{- This next section is essentially just a normal Elm program. -} +-------------------------------------------------------------------------------- +-- Interactive Demonstration +-------------------------------------------------------------------------------- + + +type Model + = IsButtonEnabled Bool + + +type Msg + = ToggledButtonStatus + + +init : ( Model, Cmd Msg ) +init = + ( IsButtonEnabled False + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg (IsButtonEnabled buttonEnabled) = + case msg of + ToggledButtonStatus -> + ( IsButtonEnabled <| not buttonEnabled + , Cmd.none + ) + + +subscriptions : Model -> Sub Msg +subscriptions _ = + Sub.none + + +{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. +-} +view : Context -> Model -> Element Msg +view { palette } (IsButtonEnabled isButtonEnabled) = + Widget.checkbox (Material.checkbox palette) + { description = "click me" + , checked = isButtonEnabled + , onChange = + always ToggledButtonStatus + |> Just + } + + + +-------------------------------------------------------------------------------- +-- DO NOT MODIFY ANYTHING AFTER THIS LINE +-------------------------------------------------------------------------------- + + +demo : Tile Model Msg flags +demo = + { init = always init + , update = update + , view = Page.demo view + , subscriptions = subscriptions + } + + +page = + Page.create + { title = title + , description = description + , book = book + , demo = demo + } diff --git a/src/Internal/Checkbox.elm b/src/Internal/Checkbox.elm new file mode 100644 index 0000000..3be41d9 --- /dev/null +++ b/src/Internal/Checkbox.elm @@ -0,0 +1,57 @@ +module Internal.Checkbox exposing (Checkbox, CheckboxStyle, checkbox) + +import Element exposing (Attribute, Element) +import Element.Input as Input +import Element.Region as Region +import Html.Attributes + + +type alias CheckboxStyle msg = + { elementButton : List (Attribute msg) + , ifDisabled : List (Attribute msg) + , ifSelected : List (Attribute msg) + , ifDisabledSelected : List (Attribute msg) + , otherwise : List (Attribute msg) + } + + +type alias Checkbox msg = + { description : String + , onChange : Maybe (Bool -> msg) + , checked : Bool + } + + +checkbox : CheckboxStyle msg -> Checkbox msg -> Element msg +checkbox style { onChange, description, checked } = + Input.button + (Element.htmlAttribute + (Html.Attributes.attribute "aria-checked" <| + if checked then + "true" + + else + "false" + ) + :: Element.htmlAttribute + (Html.Attributes.attribute "role" "checkbox") + :: style.elementButton + ++ (case ( onChange == Nothing, checked ) of + ( True, True ) -> + style.ifDisabledSelected + + ( True, False ) -> + style.ifDisabled + + ( False, True ) -> + style.ifSelected + + ( False, False ) -> + style.otherwise + ) + ++ [ Region.description description + ] + ) + { onPress = onChange |> Maybe.map (\tomsg -> tomsg <| not checked) + , label = Element.none + } diff --git a/src/Internal/Material/Checkbox.elm b/src/Internal/Material/Checkbox.elm new file mode 100644 index 0000000..59b614a --- /dev/null +++ b/src/Internal/Material/Checkbox.elm @@ -0,0 +1,100 @@ +module Internal.Material.Checkbox exposing (checkbox) + +import Color +import Element exposing (Attribute, Decoration) +import Element.Background as Background +import Element.Border as Border +import Internal.Checkbox exposing (CheckboxStyle) +import Internal.Material.Palette as Palette exposing (Palette) +import Svg exposing (Svg, g, line, polygon, polyline, rect, svg, text, use) +import Svg.Attributes as A exposing (baseProfile, clipRule, cx, cy, d, enableBackground, fill, fillOpacity, fillRule, id, overflow, points, r, x1, x2, xlinkHref, y1, y2) +import Widget.Material.Color as MaterialColor + + +checkbox : Palette -> CheckboxStyle msg +checkbox palette = + let + rounded : Bool -> Float -> Color.Color -> List Decoration + rounded bg opacity color = + let + scaledColor = + MaterialColor.fromColor <| + MaterialColor.scaleOpacity opacity color + in + Border.shadow + { offset = ( 0, 0 ) + , size = 10 + , blur = 0 + , color = scaledColor + } + :: (if bg then + [ Background.color scaledColor ] + + else + [] + ) + + check visible = + Element.inFront + (Element.el + [ Border.color <| MaterialColor.fromColor palette.on.primary + , Element.transparent (not visible) + , Element.height (Element.px 7) + , Element.width (Element.px 11) + , Element.rotate (degrees -45) + , Element.centerX + , Element.centerY + , Element.moveUp 2 + , Border.widthEach + { top = 0 + , left = 2 + , bottom = 2 + , right = 0 + } + ] + Element.none + ) + in + { elementButton = + [ Element.width <| Element.px 16 + , Element.height <| Element.px 16 + , Border.rounded 2 + , Border.width 2 + , Element.focused <| rounded True MaterialColor.buttonHoverOpacity palette.on.surface + ] + , ifDisabled = + [ Border.color <| + MaterialColor.fromColor <| + MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface + , check False + ] + , ifSelected = + [ Border.color <| MaterialColor.fromColor palette.primary + , Background.color <| MaterialColor.fromColor palette.primary + , Element.mouseDown <| rounded False MaterialColor.buttonPressedOpacity palette.primary + , Element.focused <| rounded False MaterialColor.buttonFocusOpacity palette.primary + , Element.mouseOver <| rounded False MaterialColor.buttonHoverOpacity palette.primary + , check True + ] + , ifDisabledSelected = + [ Border.color <| + MaterialColor.fromColor <| + MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface + , Background.color <| + MaterialColor.fromColor <| + MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface + , Element.mouseDown <| rounded False MaterialColor.buttonPressedOpacity palette.on.surface + , Element.focused <| rounded False MaterialColor.buttonFocusOpacity palette.on.surface + , Element.mouseOver <| rounded False MaterialColor.buttonHoverOpacity palette.on.surface + , check True + ] + , otherwise = + [ Border.color <| + MaterialColor.fromColor <| + Palette.gray palette + , Element.mouseDown <| rounded True MaterialColor.buttonPressedOpacity palette.on.surface + , Element.focused <| rounded True MaterialColor.buttonFocusOpacity palette.on.surface + , Element.mouseOver <| rounded True MaterialColor.buttonHoverOpacity palette.on.surface + , check False + ] + } diff --git a/src/Widget.elm b/src/Widget.elm index f24bd6e..9d61bf4 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -1,5 +1,6 @@ module Widget exposing ( ButtonStyle, Button, TextButton, iconButton, textButton, button + , CheckboxStyle, Checkbox, checkbox , RadioStyle, Radio, radio , SwitchStyle, Switch, switch , Select, selectButton, select, toggleButton @@ -58,6 +59,13 @@ You can create you own widgets by sticking widgets types together. @docs ButtonStyle, Button, TextButton, iconButton, textButton, button +# Checkbox + +![Checkbox](https://orasund.github.io/elm-ui-widgets/assets/checkbox.png) + +@docs CheckboxStyle, Checkbox, checkbox + + # Radio ![Radio](https://orasund.github.io/elm-ui-widgets/assets/radio.png) @@ -182,6 +190,7 @@ import Element exposing (Attribute, DeviceClass, Element, Length) import Element.Input exposing (Placeholder) import Internal.AppBar as AppBar import Internal.Button as Button +import Internal.Checkbox as Checkbox import Internal.Dialog as Dialog import Internal.Item as Item import Internal.List as List @@ -367,6 +376,60 @@ button = +{---------------------------------------------------------- +- CHECKBOX +----------------------------------------------------------} + + +type alias CheckboxStyle msg = + { elementButton : List (Attribute msg) + , ifDisabled : List (Attribute msg) + , ifSelected : List (Attribute msg) + , ifDisabledSelected : List (Attribute msg) + , otherwise : List (Attribute msg) + } + + +type alias Checkbox msg = + { description : String + , onChange : Maybe (Bool -> msg) + , checked : Bool + } + + +{-| A checkbox button + + import Widget.Material as Material + + type Msg + = Check Bool + + checkbox (Material.checkbox Material.defaultPalette) + { description = "Dark Mode" + , onChange = Just Check + , checked = False + } + |> always "Ignore this line" --> "Ignore this line" + +-} +checkbox : + CheckboxStyle msg + -> + { description : String + , onChange : Maybe (Bool -> msg) + , checked : Bool + } + -> Element msg +checkbox = + let + fun : Checkbox.CheckboxStyle msg -> Checkbox.Checkbox msg -> Element msg + fun = + Checkbox.checkbox + in + fun + + + {---------------------------------------------------------- - RADIO ----------------------------------------------------------} diff --git a/src/Widget/Material.elm b/src/Widget/Material.elm index c17e555..2505f22 100644 --- a/src/Widget/Material.elm +++ b/src/Widget/Material.elm @@ -2,6 +2,7 @@ module Widget.Material exposing ( Palette, defaultPalette, darkPalette, swapColor, gray, lightGray, textGray , containedButton, outlinedButton, textButton , iconButton, toggleButton, toggleRow + , checkbox , switch , radio , cardColumn, cardAttributes @@ -51,6 +52,11 @@ Different styles for buttons have different meanings. @docs iconButton, toggleButton, toggleRow +# Checkbox + +@docs checkbox + + # Switch @docs switch @@ -131,6 +137,7 @@ import Color exposing (Color) import Element exposing (Attribute) import Internal.AppBar exposing (AppBarStyle) import Internal.Button exposing (ButtonStyle) +import Internal.Checkbox exposing (CheckboxStyle) import Internal.Dialog exposing (DialogStyle) import Internal.Item exposing @@ -146,6 +153,7 @@ import Internal.Item import Internal.List exposing (ColumnStyle, RowStyle) import Internal.Material.AppBar as AppBar import Internal.Material.Button as Button +import Internal.Material.Checkbox as Checkbox import Internal.Material.Chip as Chip import Internal.Material.Dialog as Dialog import Internal.Material.Item as Item @@ -323,6 +331,22 @@ iconButton = +-------------------------------------------------------------------------------- +-- Checkbox +-------------------------------------------------------------------------------- + + +{-| A checkbox button + +![checkbox](https://orasund.github.io/elm-ui-widgets/assets/material/checkbox.png) + +-} +checkbox : Palette -> CheckboxStyle msg +checkbox = + Checkbox.checkbox + + + -------------------------------------------------------------------------------- -- Radio -------------------------------------------------------------------------------- diff --git a/tests/VerifyExamples/Widget/Checkbox0.elm b/tests/VerifyExamples/Widget/Checkbox0.elm new file mode 100644 index 0000000..2053624 --- /dev/null +++ b/tests/VerifyExamples/Widget/Checkbox0.elm @@ -0,0 +1,34 @@ +module VerifyExamples.Widget.Checkbox0 exposing (..) + +-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples). +-- Please don't modify this file by hand! + +import Test +import Expect + +import Widget exposing (..) +import Widget.Material as Material + +type Msg + = Check Bool + + + + + +spec0 : Test.Test +spec0 = + Test.test "#checkbox: \n\n checkbox (Material.checkbox Material.defaultPalette)\n { description = \"Dark Mode\"\n , onChange = Just Check\n , checked = False\n }\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <| + \() -> + Expect.equal + ( + checkbox (Material.checkbox Material.defaultPalette) + { description = "Dark Mode" + , onChange = Just Check + , checked = False + } + |> always "Ignore this line" + ) + ( + "Ignore this line" + ) \ No newline at end of file