Summary

cz-front is based on vue3 + bootstrap5, it strengthen the bootstrap5 by vue3 but without change that

Init

main.ts

import { createApp } from 'vue'
import App from './App.vue'

// @ts-ignore
import cz from 'cz-front'
import 'cz-front/dist/style.css'

createApp(App).use(cz).mount('#app')

Api

alert

demo

const alertRef = ref()

<cz-alert ref="alertRef" type="primary">alert info</cz-alert>

<cz-button type="primary" @click="alertRef.show()">show alert</cz-button>
<cz-button type="danger" @click="alertRef.hide()">hide alert</cz-button>

props

| name | description | | ---- | ---- | | type | default as 'primary' in [ 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light' ] |

emits

| name | description | | ---- | ---- | | show | no params | | hide | no params |

expose

| name | description | | ---- | ---- | | show | no params | | hide | no params |

slots

| name | description | | ---- | ---- | | default | no scope |

badge

demo

<cz-badge type="danger" :rounded="true">99+</cz-badge>

props

| name | description | | ---- | ---- | | type | default as 'primary' in [ 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light' ] | | rounded | default as false in [ true, false ] |

slots

| name | description | | ---- | ---- | | default | no scope |

button、button-block、button-group

demo

const onclick = () => {
  alert(1)
}

<cz-button type="link" @click="onclick()">onclick</cz-button>

<cz-button-block>
  <cz-button type="primary" @click="onclick()">onclick</cz-button>
</cz-button-block>

<cz-button-group>
  <cz-button type="success" @click="onclick()">onclick</cz-button>
  <cz-button type="danger" @click="onclick()">onclick</cz-button>
</cz-button-group>

props

| name | description | | ---- | ---- | | type | default as '' in [ '', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light', 'link' ] | | outline | default as false in [ true, false ] | | size | default as '' in [ '', 'lg', 'sm' ] | | loading | default as false in [ true, false ] | | disabled | default as false in [ true, false ] |

emits

| name | description | | ---- | ---- | | click | no params |

slots

| name | description | | ---- | ---- | | default | no scope |

card

demo

<cz-card>
  <template #header>header</template>
  <template #default>default</template>
  <template #footer>footer</template>
</cz-card>

slots

| name | description | | ---- | ---- | | header | no scope | | default | no scope | | footer | no scope |

carousel

demo

const picList = ref([
  { src: 'https://static.runoob.com/images/mix/img_fjords_wide.jpg' },
  { src: 'https://static.runoob.com/images/mix/img_nature_wide.jpg', label: 'Label' },
  { src: 'https://static.runoob.com/images/mix/img_mountains_wide.jpg', label: 'Label', desc: 'Desc！！！' }
])

<cz-carousel :items="picList"></cz-carousel>

props

| name | description | | ---- | ---- | | items | a list like [ { src: '', label: '', desc: '' } ] |

collapse、collapse-group

demo

<cz-collapse>
  <template #toggle>
    <cz-button>toggle</cz-button>
  </template>
  <template #default>default</template>
</cz-collapse>

<cz-collapse-group>
  <cz-collapse>
    <template #toggle>
      <cz-button>toggle1</cz-button>
    </template>
    <template #default>default1</template>
  </cz-collapse>

  <cz-collapse>
    <template #toggle>
      <cz-button>toggle2</cz-button>
    </template>
    <template #default>default2</template>
  </cz-collapse>

  <cz-collapse>
    <template #toggle>
      <cz-button>toggle3</cz-button>
    </template>
    <template #default>default3</template>
  </cz-collapse>
</cz-collapse-group>

slots

| name | description | | ---- | ---- | | toggle | no scope | | default | no scope |

dropdown

demo

const curDrop = ref(4)
const dropList = ref([
  { key: 0, label: 'Systems', type: 'header' },
  { key: 1, label: 'Users', type: 'item', disabled: true },
  { key: 2, label: 'Roles', type: 'item' },
  { type: 'divider' },
  { key: 3, label: 'Funcs', type: 'item' },
  { key: 4, label: 'Apis', type: 'item' }
])
const onchange = () => {
  alert()
}

<cz-dropdown
  v-model:value="curDrop"
  :items="dropList"
  placement="top"
  alignment="right"
  @change="onchange"
>
  <template #toggle>
    <cz-button type="primary">toggle</cz-button>
  </template>
</cz-dropdown>

props

| name | description | | ---- | ---- | | value | v-model | | items | a list like [ { key: '', label: '', type: 'a not null value in ['item', 'divider', 'header']', disabled: false } ] | | placement | default as '' in [ '', 'top', 'left', 'right' ] | | alignment | default as '' in [ '', 'right' ] |

emits

| name | description | | ---- | ---- | | change | params as the selected key | | update:value | params as the selected key |

slots

| name | description | | ---- | ---- | | toggle | no scope |

list-group

demo

const curGroup = ref(3)
const groupList = ref([
  { key: 1, label: 'Users', type: 'primary', disabled: true },
  { key: 2, label: 'Roles', type: 'primary' },
  { key: 3, label: 'Funcs', type: 'danger' },
  { key: 4, label: 'Apis', type: 'danger' }
])
const onchange = () => {
  alert()
}

<cz-list-group
  v-model:value="curGroup"
  :items="groupList"
  :horizontal="true"
  @change="onchange"
></cz-list-group>

props

| name | description | | ---- | ---- | | value | v-model | | items | a list like [ { key: '', label: '', type: 'a not null value in ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light']', disabled: false } ] | | horizontal | default as false in [ true, false ] | | disabled | default as false in [ true, false ] |

emits

| name | description | | ---- | ---- | | change | params as the selected key | | update:value | params as the selected key |

modal

demo

<cz-modal ref="modal" label="The Modal" @submit="inner.submit()">
    ...
</cz-modal>

props

| name | description | | ---- | ---- | | label | required string | | closable | default as true in [ true, false ] | | readonly | default as false in [ true, false ] | | size | default as '' in [ '', 'sm', 'lg', 'xl', 'fullscreen' ] |

emits

| name | description | | ---- | ---- | | submit | no params |

expose

| name | description | | ---- | ---- | | show | no params | | loaded | no params, using for cancel the loading status after show() | | submitted | no params, using for cancel the submitting status during @submit | | hide | no params |

slots

| name | description | | ---- | ---- | | default | no scope |

nav