New style Format and merge

README.md

@@ -24,7 +24,7 @@ This library is in early alpha stage. The list of supported components is pretty
 ## Supported Components
 
 - Checkbox
-    - Model: checked
+    - Model: :checked / @change
     - Props: disabled, label
 - Button
     - Props: disabled, checked, primary
@@ -35,12 +35,13 @@ This library is in early alpha stage. The list of supported components is pretty
     - Props: iconName
 - Image
     - Info: Take a look at the [Official Documentation](https://developer.microsoft.com/en-us/fabric#/components/image). I implemented all features and the syntax is very similar!
+- TextField
+    - Model: :text / @input
+    - Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName
 
 ## In-Progress Components
 
-- TextField
 - ChoiceGroup
-- Icon
 
 ## Contribution
 

src/components/Overview.vue

@@ -18,6 +18,9 @@ import {ImageFit} from "./Image/OfficeImage.types";
         <OfficeImage src="http://placehold.it/350x150" alt="Example" maximizeFrame/>
         <hr>
         <OfficeIcon iconName="BingLogo"/>
+        <hr>
+        <OfficeTextField label="Test Text" v-model="txt"></OfficeTextField>
+        <OfficeTextField label="Test Text" underlined required v-model="txt"></OfficeTextField>
     </div>
 </template>
 
@@ -30,18 +33,21 @@ import {ImageFit} from "./Image/OfficeImage.types";
     import {Component, Prop, Vue} from "vue-property-decorator";
     import OfficeButton from "./Button/OfficeButton.vue";
     import OfficeCheckbox from "./Checkbox/OfficeCheckbox.vue";
+    import OfficeTextField from "@/components/TextField/OfficeTextField.vue";
 
     @Component({
         components: {
             OfficeIcon,
             OfficeImage,
             OfficeLabel,
             OfficeCheckbox,
-            OfficeButton
+            OfficeButton,
+            OfficeTextField
         },
     })
     export default class Overview extends Vue {
         @Prop() private msg!: string;
+        private txt: string = "test";
 
         private currentImageFit: ImageFit = ImageFit.contain;