Nerds Publishing Monstrosities

    @yetan/vue-hollow

    0.0.1 • Public • Published

    内边距盒子

    <Hollow />,通过由内而外撑开的内边距盒子实现,可内嵌内容。即可以作为页面级别的布局组件,也可以作为局部布局组件。

    安装

    # 使用 NPM
    $ npm i @yetan/vue-view-hollow
    
    # 使用 Yarn
    $ yarn add @yetan/vue-view-hollow

    使用

    <template>
      <Hollow class="hollow-demo">
        <div class="hollow-demo-content"></div>
        <div class="hollow-demo-content"></div>
      </Hollow>
    </template>
    
    <script>
    import Hollow from '@yetan/vue-hollow';
    
    export default {
      name: 'newPage',
      components: {
        Hollow,
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .hollow-demo {
      padding-top: 300px !important;
      background-color: #ff9a9e;
    
      > div {
        border-radius: 10px;
        padding: 0 10px !important;
        background: #fff;
      }
    
      .hollow-demo-content {
        &:last-child {
          border-bottom: 10px solid #fff;
        }
      }
    }
    
    .hollow-demo-content {
      min-height: 100px;
      border-top: 10px solid #fff;
      background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
    </style>

    Install

    npm i @yetan/vue-hollow

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    none

    Unpacked Size

    9.86 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar