cz-front

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