refactor: change camelCase props to kebab-case
This commit is contained in:
woothu
@@ -10,33 +10,96 @@
|
||||
<small>Usage </small>
|
||||
<code><CButton variant="facebook"><span>Facebook</span></CButton></code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
|
||||
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
|
||||
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
|
||||
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
|
||||
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
|
||||
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
|
||||
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
|
||||
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
|
||||
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
|
||||
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
|
||||
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
|
||||
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
|
||||
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
|
||||
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
|
||||
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
|
||||
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
|
||||
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
|
||||
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
|
||||
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
|
||||
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
|
||||
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
|
||||
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
|
||||
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
|
||||
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
|
||||
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
|
||||
<!-- <template v-for="(brand, key) in $options.brands">
|
||||
<button
|
||||
type="button"
|
||||
:class="`c-btn-${brand}`"
|
||||
class="c-btn c-btn-sm c-btn-brand c-mr-1"
|
||||
>
|
||||
<i :class="`fa fa-${brand}`"></i>
|
||||
<span>{{brand}}</span>
|
||||
</button>
|
||||
</template> -->
|
||||
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
|
||||
<i class="fa fa-facebook"></i><span>Facebook</span>
|
||||
</CButton>
|
||||
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
|
||||
<i class="fa fa-twitter"></i><span>Twitter</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-linkedin"></i><span>LinkedIn</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-flickr"></i><span>Flickr</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-tumblr"></i><span>Tumblr</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-xing"></i><span>Xing</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-github"></i><span>Github</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-html5"></i><span>HTML5</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-openid"></i><span>OpenID</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-css3"></i><span>CSS3</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-youtube"></i><span>YouTube</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-dribbble"></i><span>Dribbble</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-google-plus"></i><span>Google+</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-instagram"></i><span>Instagram</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-pinterest"></i><span>Pinterest</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-vk"></i><span>VK</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-yahoo"></i><span>Yahoo</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-behance"></i><span>Behance</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-dropbox"></i><span>Dropbox</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-reddit"></i><span>Reddit</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-spotify"></i><span>Spotify</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-vine"></i><span>Vine</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-foursquare"></i><span>Forsquare</span>
|
||||
</CButton>
|
||||
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
|
||||
<i class="fa fa-vimeo"></i><span>Vimeo</span>
|
||||
</CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
@@ -294,7 +357,8 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'brand-buttons'
|
||||
name: 'brand-buttons',
|
||||
brands: ['facebook', 'twitter', 'linkedin']
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -152,14 +152,14 @@
|
||||
<CFormInput
|
||||
class="c-mb-0 c-w-25 c-mx-1"
|
||||
size="sm"
|
||||
prependHtml="$"
|
||||
appendHtml=".00"
|
||||
prepend-html="$"
|
||||
append-html=".00"
|
||||
value="100"
|
||||
/>
|
||||
<CFormSelect
|
||||
class="c-mb-0 c-w-25 c-mx-1"
|
||||
size="sm"
|
||||
prependHtml="Size"
|
||||
prepend-html="Size"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
@@ -181,7 +181,7 @@
|
||||
<CDropdown
|
||||
class="c-mx-1"
|
||||
placement="bottom-end"
|
||||
buttonContent="Menu"
|
||||
button-content="Menu"
|
||||
>
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown buttonHtml="Dropdown Button" class="c-m-2">
|
||||
<CDropdown button-html="Dropdown Button" class="c-m-2">
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
@@ -25,7 +25,7 @@
|
||||
</CDropdown>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown buttonHtml="Dropdown using buttons as menu items" class="c-m-2">
|
||||
<CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
|
||||
<CDropdownItem>I'm a button</CDropdownItem>
|
||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||
@@ -33,7 +33,7 @@
|
||||
</CDropdown>
|
||||
</div> -->
|
||||
<div>
|
||||
<CDropdown buttonHtml="Dropdown with divider" class="c-m-2">
|
||||
<CDropdown button-html="Dropdown with divider" class="c-m-2">
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider></CDropdownDivider>
|
||||
@@ -41,7 +41,7 @@
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown buttonHtml="Dropdown with header" class="c-m-2">
|
||||
<CDropdown button-html="Dropdown with header" class="c-m-2">
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
@@ -60,7 +60,7 @@
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
buttonHtml="Left align"
|
||||
button-html="Left align"
|
||||
variant="primary"
|
||||
class="c-m-2"
|
||||
>
|
||||
@@ -70,7 +70,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
placement="bottom-end"
|
||||
buttonHtml="Right align"
|
||||
button-html="Right align"
|
||||
variant="primary"
|
||||
class="c-m-2"
|
||||
>
|
||||
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
buttonHtml="Drop-Up"
|
||||
button-html="Drop-Up"
|
||||
variant="info"
|
||||
class="c-m-2"
|
||||
dropup
|
||||
@@ -94,7 +94,7 @@
|
||||
<div>
|
||||
<CDropdown
|
||||
:offset="25"
|
||||
buttonHtml="Offset Dropdown"
|
||||
button-html="Offset Dropdown"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -105,7 +105,7 @@
|
||||
<div>
|
||||
<CDropdown
|
||||
split
|
||||
buttonHtml="Split Dropdown"
|
||||
button-html="Split Dropdown"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -152,7 +152,7 @@
|
||||
<div>
|
||||
<CDropdown
|
||||
size="lg"
|
||||
buttonHtml="Large"
|
||||
button-html="Large"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -162,7 +162,7 @@
|
||||
<CDropdown
|
||||
size="lg"
|
||||
split
|
||||
buttonHtml="Large Split"
|
||||
button-html="Large Split"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -172,7 +172,7 @@
|
||||
<br>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Small"
|
||||
button-html="Small"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -181,7 +181,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
split buttonHtml="Small Split"
|
||||
split button-html="Small Split"
|
||||
class="c-m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@@ -204,7 +204,7 @@
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
buttonHtml="Dropdown ARIA" variant="primary"
|
||||
button-html="Dropdown ARIA" variant="primary"
|
||||
class="c-m-2"
|
||||
>
|
||||
<div role="group">
|
||||
@@ -236,7 +236,7 @@
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Primary"
|
||||
button-html="Primary"
|
||||
variant="primary"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -246,7 +246,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Secondary"
|
||||
button-html="Secondary"
|
||||
variant="secondary"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -256,7 +256,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Success"
|
||||
button-html="Success"
|
||||
variant="success"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -266,7 +266,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Warning"
|
||||
button-html="Warning"
|
||||
variant="warning"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -276,7 +276,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Danger"
|
||||
button-html="Danger"
|
||||
variant="danger"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -286,7 +286,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Info"
|
||||
button-html="Info"
|
||||
variant="info"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -296,7 +296,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Light"
|
||||
button-html="Light"
|
||||
variant="light"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -306,7 +306,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Dark"
|
||||
button-html="Dark"
|
||||
variant="dark"
|
||||
class="c-m-0"
|
||||
>
|
||||
@@ -316,7 +316,7 @@
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
buttonHtml="Link"
|
||||
button-html="Link"
|
||||
variant="link"
|
||||
class="c-m-0"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user