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?

    0_1551817008542_faa6a3aa-eadf-4c01-bf37-ec0f923a4a76-image.png



  • 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!


Log in to reply