ionic常用css工具集

参考官方css工具集

  • 内间距
  1. 子元素上下左右间距 padding
  2. 子元素无间距 no-padding
  3. 子元素上下间距 padding-vertical
  4. 子元素左右间距 padding-horizontal
  • 外间距
  1. 与外元素间距16px margin
  2. 与外元素无间距 no-margin
  3. 上下元素间距16px margin-vertical
  4. 左右元素间距16px margin-horizontal
  • 行元素排列顺序 div包裹元素
  1. text-left
  2. text-right
  3. text-start
  4. text-end
  5. text-center
  6. text-justify
  7. text-wrap
  8. text-nowrap
  9. text-uppercase
  10. text-lowercase
  11. text-capitalize
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  • 边角间距
  1. no-border
  • flex布局

ionic的card组件样式

默认的card的周围有灰色的阴影,采用如下样式将对应的灰色去掉:

.card {
  /*border-radius:10px;*/
  /*box-shadow: 1px 8px 11px rgba(131, 131, 131, 0.25), 0 8px 8px rgba(124, 124, 124, 0.22);*/
}

.card, .list-inset {
  overflow: hidden;
  margin: 20px 10px;
  border-radius: 2px;
  background-color: #fff;
}
/** 去掉周围阴影**/
.card {
  padding-top: 1px;
  padding-bottom: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /*box-shadow: none !important;*/
  border: none !important;
  border-style: none !important;
}

.card .item {
  border-left: 0;
  border-right: 0;
}

.card .item:first-child {
  border-top: 0;
}

.card .item:last-child {
  border-bottom: 0;
}

.padding .card, .padding .list-inset {
  margin-left: 0;
  margin-right: 0;
}

.card .item:first-child, .list-inset .item:first-child, .padding > .list .item:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.card .item:first-child .item-content, .list-inset .item:first-child .item-content, .padding > .list .item:first-child .item-content {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.card .item:last-child, .list-inset .item:last-child, .padding > .list .item:last-child {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.card .item:last-child .item-content, .list-inset .item:last-child .item-content, .padding > .list .item:last-child .item-content {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.card .item:last-child, .list-inset .item:last-child {
  margin-bottom: -1px;
}

.card .item, .list-inset .item, .padding > .list .item, .padding-horizontal > .list .item {
  margin-right: 0;
  margin-left: 0;
}

.card .item.item-input input, .list-inset .item.item-input input, .padding > .list .item.item-input input, .padding-horizontal > .list .item.item-input input {
  padding-right: 44px;
}

.padding-left > .list .item {
  margin-left: 0;
}

.padding-right > .list .item {
  margin-right: 0;
}

最后更新: 8/10/2019, 1:11:38 PM
本文浏览量