feat: add switch

demo/app/assets/views/documentation.xml

@@ -105,6 +105,11 @@
                   Spinners
                 </a>
               </w>
+              <w class="nav-item">
+                <a class="nav-link" href="components/switch.xml" target="demo-content">
+                  Switch
+                </a>
+              </w>
               <w class="nav-item">
                 <a class="nav-link" href="components/scrollbar.xml" target="demo-content">
                   Scrollbar

docs/components/switch.md

@@ -0,0 +1,36 @@
+# Switch
+
+Represent the switching between two states or on-off state.
+
+## Basic
+
+``` switch-basic-demo-xml
+<switch checked="checked" />
+```
+
+## Text & icon
+
+With text and icon.
+
+``` switch-text-icon-demo-xml
+<p>
+  <switch checked-text="开" unchecked-text="关" checked="checked" />
+</p>
+<p>
+  <switch checked-text="1" unchecked-text="0" />
+</p>
+<p>
+  <switch checked-icon="check" unchecked-icon="close" checked="checked" />
+</p>
+```
+
+## Disabled
+
+``` switch-text-icon-demo-xml
+<p>
+  <switch disabled="disabled" />
+</p>
+<p>
+  <switch disabled="disabled" checked="checked" />
+</p>
+```

include/LCDesign/ui/components.h

@@ -38,6 +38,7 @@
 #include <LCDesign/ui/components/img.h>
 #include <LCDesign/ui/components/rate.h>
 #include <LCDesign/ui/components/spinner.h>
+#include <LCDesign/ui/components/switch.h>
 #include <LCDesign/ui/components/tooltip.h>
 #include <LCDesign/ui/components/password.h>
 #include <LCDesign/ui/components/typography.h>

include/LCDesign/ui/components/spinner.h

@@ -1,4 +1,4 @@
-/*
+/*
  * spinner.h -- Spinner, used to indicate the loading state of a component
  * or page.
  *

include/LCDesign/ui/components/switch.h

@@ -0,0 +1,49 @@
+/*
+ * switch.h -- Switch, used to represent the switching between two states or
+ * on-off state.
+ *
+ * Copyright (c) 2019, Liu chao <[email protected]> All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ *   * Redistributions of source code must retain the above copyright notice,
+ *     this list of conditions and the following disclaimer.
+ *   * Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *   * Neither the name of LCUI nor the names of its contributors may be used
+ *     to endorse or promote products derived from this software without
+ *     specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#ifndef LCDESIGN_SWITCH_H_
+#define LCDESIGN_SWITCH_H_
+
+LCUI_API void LCDesign_InitSwitch(void);
+
+LCUI_API LCUI_BOOL Switch_IsChecked(LCUI_Widget w);
+
+LCUI_API void Switch_SetChecked(LCUI_Widget w, LCUI_BOOL checked);
+
+LCUI_API void Switch_SetCheckedText(LCUI_Widget w, const char *text);
+
+LCUI_API void Switch_SetUncheckedText(LCUI_Widget w, const char *text);
+
+LCUI_API void Switch_SetCheckedIcon(LCUI_Widget w, const char *icon_name);
+
+LCUI_API void Switch_SetUncheckedIcon(LCUI_Widget w, const char *icon_name);
+
+#endif

main.vcxproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <ItemGroup Label="ProjectConfigurations">
     <ProjectConfiguration Include="Debug|Win32">
@@ -170,6 +170,7 @@
     <ClCompile Include="src\ui\components\password.c" />
     <ClCompile Include="src\ui\components\rate.c" />
     <ClCompile Include="src\ui\components\spinner.c" />
+    <ClCompile Include="src\ui\components\switch.c" />
     <ClCompile Include="src\ui\components\tooltip.c" />
     <ClCompile Include="src\ui\components\typography.c" />
     <ClCompile Include="src\ui\dismiss.c" />
@@ -187,6 +188,7 @@
     <ClInclude Include="include\LCDesign\ui\components\password.h" />
     <ClInclude Include="include\LCDesign\ui\components\rate.h" />
     <ClInclude Include="include\LCDesign\ui\components\spinner.h" />
+    <ClInclude Include="include\LCDesign\ui\components\switch.h" />
     <ClInclude Include="include\LCDesign\ui\components\tooltip.h" />
     <ClInclude Include="include\LCDesign\ui\components\typography.h" />
     <ClInclude Include="include\LCDesign\ui\dismiss.h" />

main.vcxproj.filters

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <ItemGroup>
     <ClCompile Include="src\main.c" />
@@ -15,6 +15,7 @@
     <ClCompile Include="src\ui\dismiss.c" />
     <ClCompile Include="src\ui\toggle.c" />
     <ClCompile Include="src\ui\components\tooltip.c" />
+    <ClCompile Include="src\ui\components\switch.c" />
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="include\LCDesign.h" />
@@ -32,5 +33,6 @@
     <ClInclude Include="include\LCDesign\ui\dismiss.h" />
     <ClInclude Include="include\LCDesign\ui\toggle.h" />
     <ClInclude Include="include\LCDesign\ui\components\tooltip.h" />
+    <ClInclude Include="include\LCDesign\ui\components\switch.h" />
   </ItemGroup>
 </Project>

src/main.c

@@ -40,6 +40,7 @@ void LCDesign_Init(void)
 	LCDesign_InitRate();
 	LCDesign_InitTooltip();
 	LCDesign_InitSpinner();
+	LCDesign_InitSwitch();
 	LCDesign_InitPassword();
 	LCDesign_InitTypograhy();
 	LCDesign_InitModal();

src/scss/_switch.scss

@@ -0,0 +1,52 @@
+.switch-bar {
+  left: -$switch-icon-width;
+  height: 100%;
+  width: $switch-bar-width;
+  position: relative;
+}
+
+.switch-slider {
+  background-color: #fff;
+  width: $switch-slider-width;
+  height: 100%;
+}
+
+.switch-on-block,
+.switch-off-block {
+  width: $switch-icon-width;
+  color: #fff;
+  font-size: $switch-icon-height - 2px;
+  text-align: center;
+  line-height: $switch-icon-height;
+}
+
+.switch-on-block,
+.switch-off-block,
+.switch-slider {
+  display: inline-block;
+}
+
+.switch {
+	width: $switch-width;
+	height: $switch-height;
+	display: inline-block;
+	border: $switch-border-width solid $switch-color;
+	background-color: $switch-color;
+
+  &.checked {
+  	border-color:  $switch-checked-color;
+  	background-color: $switch-checked-color;
+
+    .switch-bar {
+    	left: 0;
+    }
+  }
+  &:disabled {
+    opacity: 0.4;
+  }
+}
+
+.switch-text {
+	margin-left: $switch-margin-left;
+	line-height: $switch-height;
+}

src/scss/_variables.scss

@@ -562,3 +562,17 @@ $close-color:                       $black !default;
 $rate-star-size:                    $font-size-base * 1.5 !default;
 $rate-star-color:                   $orange !default;
 $rate-star-void-color:              $gray-400 !default;
+
+
+// Switch
+
+$switch-height: 20px;
+$switch-border-width: 2px;
+$switch-margin-left: $font-size-base / 2;
+$switch-slider-width: $switch-height - $switch-border-width * 2;
+$switch-icon-width: $switch-height + $switch-border-width * 2;
+$switch-icon-height: $switch-height - $switch-border-width * 2;
+$switch-bar-width: $switch-icon-width * 2 + $switch-slider-width;
+$switch-width: $switch-icon-width + $switch-slider-width + $switch-border-width * 2;
+$switch-checked-color: $primary;
+$switch-color: $text-muted;

src/scss/lc-design.scss

@@ -14,6 +14,7 @@
 @import "dropdown";
 @import "list-group";
 @import "rate";
+@import "switch";
 @import "close";
 @import "modal";
 @import "toasts";

src/ui/components/spinner.c

@@ -1,4 +1,4 @@
-/*
+/*
  * spinner.c -- Spinner, used to indicate the loading state of a component
  * or page.
  *