feat(web): h-button block

gethexon · Nov 12, 2021 · 7ef674b · 7ef674b
1 parent 5b815f9
commit 7ef674b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/packages/hexon-web/src/components/HButton.stories.mdx b/packages/hexon-web/src/components/HButton.stories.mdx
@@ -45,14 +45,16 @@ import HIcon from "./HIcon.vue";
 `inverted?: boolean = false`
 
 <Canvas>
-  <Story name="颜色反转" args={{ inverted: true }}>
+  <Story name="颜色反转" parameters={{ layout: "fullscreen" }}>
     {() => ({
       components: { HButton },
       template: `
+<div style="padding:20px; background-color: gray;">
   <HButton type="primary" inverted>primary</HButton>&nbsp;
   <HButton type="success" inverted>success</HButton>&nbsp;
   <HButton type="warning" inverted>warning</HButton>&nbsp;
   <HButton type="error" inverted>error</HButton>
+</div>
   `,
     })}
   </Story>
@@ -66,17 +68,37 @@ import HIcon from "./HIcon.vue";
   <Story name="圆的">
     {() => ({
       components: { HButton },
-      template: `<HButton round>圆</HButton>&nbsp;`,
+      template: `
+<HButton round style="margin-right:10px">圆</HButton>
+<HButton round style="margin-right:10px">的</HButton>
+<HButton round style="margin-right:10px">就</HButton>
+<HButton round style="margin-right:10px">很</HButton>
+<HButton round style="margin-right:10px">好</HButton>
+<HButton round style="margin-right:10px">玩</HButton>
+`,
+    })}
+  </Story>
+</Canvas>
+
+## 扩展的
+
+`block?: boolean = false`
+
+<Canvas>
+  <Story name="扩展的">
+    {() => ({
+      components: { HButton },
+      template: `<HButton block style="margin-bottom:10px">确定</HButton><HButton block type="error">取消</HButton>`,
     })}
   </Story>
 </Canvas>
 
 ## 图标
 
-使用 HIcon 或者 xicons 的 Icon
+使用 [HIcon](?path=/docs/hicon--基础) 或者 [xicons](https://www.xicons.org/#/) 的 [Icon](https://github.com/07akioni/xicons#usage)
 
 <Canvas>
-  <Story name="圆图标">
+  <Story name="图标">
     {() => ({
       components: {
         HButton,
@@ -101,21 +123,7 @@ import HIcon from "./HIcon.vue";
   <HIcon>
     <Edit16Filled />
   </HIcon>
-</HButton>
-`,
-    })}
-  </Story>
-  <Story name="长图标">
-    {() => ({
-      components: {
-        HButton,
-        HIcon,
-        Icon,
-        Search16Filled,
-        Add16Filled,
-        Edit16Filled,
-      },
-      template: `
+</HButton>&nbsp;
 <HButton>
   <HIcon>
     <Search16Filled />

diff --git a/packages/hexon-web/src/components/HButton.vue b/packages/hexon-web/src/components/HButton.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import { Icon } from "@vicons/utils";
 import { computed, toRefs } from "@vue/reactivity";
 
 const props = withDefaults(
   defineProps<{
     type?: "primary" | "secondary";
     inverted?: boolean;
     round?: boolean;
+    block?: boolean;
   }>(),
   {
     type: "primary",
     inverted: false,
     round: false,
+    block: false,
   }
 );
-const { type, inverted, round } = toRefs(props);
+const { type, inverted, round, block } = toRefs(props);
 const classes = computed(() => {
   return {
     [`${type.value}`]: true,
     inverted: inverted.value,
     round: round.value,
+    block: block.value,
   };
 });
 </script>
@@ -56,6 +58,10 @@ button {
   user-select: none;
   text-decoration: none;
   overflow: hidden;
+  &.block {
+    display: flex;
+    width: 100%;
+  }
   &.round {
     width: 32px;
   }

diff --git a/packages/hexon-web/src/components/HIcon.stories.mdx b/packages/hexon-web/src/components/HIcon.stories.mdx
@@ -28,10 +28,10 @@ import HIcon from "./HIcon.vue";
       template: `
 <HIcon>
   <Search16Filled />
-</HIcon>&nbsp;
+</HIcon>
 <HIcon>
   <Add16Filled />
-</HIcon>&nbsp;
+</HIcon>
 <HIcon>
   <Edit16Filled />
 </HIcon>
@@ -51,10 +51,10 @@ import HIcon from "./HIcon.vue";
       template: `
 <HIcon>
   <Search16Filled />
-</HIcon>&nbsp;
+</HIcon>
 <HIcon size="1.5em">
   <Add16Filled />
-</HIcon>&nbsp;
+</HIcon>
 <HIcon size="2em">
   <Edit16Filled />
 </HIcon>
@@ -75,12 +75,12 @@ import HIcon from "./HIcon.vue";
 <span style="color:red">
   <HIcon>
     <Search16Filled />
-  </HIcon>&nbsp;
+  </HIcon>
 </span>
 <span style="color:green">
   <HIcon>
     <Add16Filled />
-  </HIcon>&nbsp;
+  </HIcon>
 </span>
 <span style="color:blue">
   <HIcon>