当前位置: 首页 > 软件库 > 程序开发 > >

ember-content-loader

授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 虞展
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-content-loader

Build Status

SVG-Powered component to easily create skeleton screens / placeholder loadings (like Facebook's cards loading). Documentation can be found here

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v12 or above
  • ember-auto-import >= 2

Installation

ember install ember-content-loader

Usage

Facebook skeleton

Simply add the <ContentLoader> component in your code with the shapes that you want.

<ContentLoader>
  {{!-- Only SVG shapes --}}
  <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
  <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
  <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
  <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
  <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
  <circle cx="30" cy="30" r="30" />
</ContentLoader>

You can use the online editor to create complex shapes.

Note: This editor is made for React, so you need to translate the produced code.

Options

You can find all <ContentLoader> available options here

Thanks

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

 相关资料
  • ember-content-placeholders Ember addon for rendering fake content while data is fetching to provide better UX and lower bounce rate. �� Installation ember install ember-content-placeholders �� Usage {

  • Angular Content Loader Angular component that uses SVG to create a collection of loaders which simulates the structure of thecontent that will be loaded, similar to Facebook cards loaders. Live Demo F

  • Content组件提供了易于使用的方法来控制滚动,同时可以和其他组件配合实现下拉刷新和上拉加载的功能。 实例方法 onScrollElementTransitionEnd() scrollTo(x,y,duration,tolerance) 滚动到具体的坐标 x number x轴距离 y number y轴距离 duration number 滚动动画的持续时间 tolerance TODO 此

  • md-content是一个Angular Directive,是一个容器元素,用于可滚动内容。 可以添加layout-padding属性以具有填充内容。 例子 (Example) 以下示例显示了md-content指令的使用以及角度内容显示的使用。 am_content.htm <html lang = "en"> <head> <link rel = "stylesheet"

  • 描述 (Description) content属性定义要在生成的内容操作中插入的内容。 此属性与以下内容一起使用:before或:after伪元素。 可能的值 (Possible Values) string - 任何允许的字符串值。 它始终用引号括起来。 URI - 指向外部资源(如图像)的指针。 counter - 这个值有两种可能的形式:counter(name,style?)和count

  • 应用程序内容包含页面的所有内容,包括按钮、列表和输入。虽然这些小部件是有用的,但通常情况下,应用程序的自定义HTML结构会在这里。 默认情况下,它会自动为它进行滚动管理。要关闭自动滚动,可以将属性数据无滚动条添加到内容元素中。 <div class="app-content"></div>