Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit839a2bc

Browse files
authored
Merge pull request#290 from cesargb/tag_semantic_header
feat(CHeader): add the `as` property to enable the usage of semantic tags
2 parentsdef1903 +7f9805c commit839a2bc

File tree

3 files changed

+32
-5
lines changed

3 files changed

+32
-5
lines changed

‎packages/coreui-vue/src/components/header/CHeader.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
33
constCHeader=defineComponent({
44
name:'CHeader',
55
props:{
6+
/**
7+
* Component used for the root node. Either a string to use a HTML element or a component.
8+
*/
9+
as:{
10+
type:String,
11+
default:'div',
12+
},
613
/**
714
* Defines optional container wrapping children elements.
815
*
@@ -31,7 +38,7 @@ const CHeader = defineComponent({
3138
setup(props,{ slots}){
3239
return()=>
3340
h(
34-
'div',
41+
props.as,
3542
{class:['header',{[`header-${props.position}`]:props.position}]},
3643
props.container
3744
?h(

‎packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ const customWrapper = mount(Component, {
2020
},
2121
})
2222

23+
constcustomWrapperTwo=mount(Component,{
24+
propsData:{
25+
as:'header',
26+
},
27+
slots:{
28+
default:'Default slot',
29+
},
30+
})
31+
2332
describe(`Loads and display${ComponentName} component`,()=>{
2433
it('has a name',()=>{
2534
expect(Component.name).toMatch(ComponentName)
@@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => {
4453
expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true)
4554
})
4655
})
56+
57+
58+
describe(`Customize (number two)${ComponentName} component`,()=>{
59+
it('renders correctly',()=>{
60+
expect(customWrapperTwo.html()).toMatchSnapshot()
61+
})
62+
it('tag name is custom',()=>{
63+
expect(customWrapperTwo.element.tagName).toBe('HEADER')
64+
})
65+
})

‎packages/docs/api/header/CHeader.api.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import CHeader from '@coreui/vue/src/components/header/CHeader'
88

99
####Props
1010

11-
| Prop name| Description| Type| Values| Default|
12-
| -------------| ------------------------------------------------------| ---------------| -------------------------------------------------------------| -------|
13-
|**container**| Defines optional container wrapping children elements.| boolean\|string|`boolean`,`'sm'`,`'md'`,`'lg'`,`'xl'`,`'xxl'`,`'fluid'`| -|
14-
|**position**| Place header in non-static positions.| string|`'fixed'`,`'sticky'`| -|
11+
| Prop name| Description| Type| Values| Default|
12+
| -------------| ---------------------------------------------------------------------------------------| ---------------| -------------------------------------------------------------| -------|
13+
|**as**| Component used for the root node. Either a string to use a HTML element or a component.| string| -| 'div'|
14+
|**container**| Defines optional container wrapping children elements.| boolean\|string|`boolean`,`'sm'`,`'md'`,`'lg'`,`'xl'`,`'xxl'`,`'fluid'`| -|
15+
|**position**| Place header in non-static positions.| string|`'fixed'`,`'sticky'`| -|

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp