Ribbon like semantic ui
-
Hi,
I see that in the documentation of version 1.0 beta, but I cant find how to use this. Is this a component of Quasar?
-
this is not part of quasar. its a custom implementation only for the docs currently afaik
-
I was able to recreate this using CSS and a custom class. I added this code to the App.vue file in the style tag.
<style lang=“stylus” >
@import ‘~quasar-variables’
$title-color = $grey-4
.card-title
padding-top 8px
padding-bottom 8px
:first-child
display inline
margin-left -27px
padding 2px 10px 2px 24px
background $title-color
color $grey-8
position relative
border-radius 3px 5px 5px 0
font-size 1.25rem
font-weight 500
line-height 2rem
letter-spacing 0.0125em
&:after
content ‘’
position absolute;
top 100%
left 0
width 0
height 0
border 0 solid transparent
border-top-color darken($title-color, 15%)
border-width 9px 0 0 11px
</style>Then on the card section for the title, I added the following code.
<q-card-section class=“card-title”>
<div>Test Title</div>
</q-card-section> -
ok, thanks!