All Projects → NARKOZ → holder_rails

NARKOZ / holder_rails

Licence: BSD-2-Clause license
Client side image placeholders for Rails applications

Programming Languages

ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to holder rails

lorem.space
✨✨✨🪐✨✨✨  LOREM.SPACE ✨✨✨🪐✨✨✨
Stars: ✭ 310 (+559.57%)
Mutual labels:  placeholder, placeholder-image
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+5836.17%)
Mutual labels:  placeholder
Cminputview
💪之前代码是基于UITextView进行的封装,侵入性较强,不方便使用,现使用Category重构代码,支持Cocoapods
Stars: ✭ 149 (+217.02%)
Mutual labels:  placeholder
Rskplaceholdertextview
A light-weight UITextView subclass that adds support for placeholder.
Stars: ✭ 192 (+308.51%)
Mutual labels:  placeholder
Param.macro
Partial application syntax and lambda parameters for JavaScript, inspired by Scala's `_` & Kotlin's `it`
Stars: ✭ 170 (+261.7%)
Mutual labels:  placeholder
Placeload.js
The best way to create a placeholder layout effect using pure js. 🐨 Like Facebook, Slack, Medium, etc.
Stars: ✭ 207 (+340.43%)
Mutual labels:  placeholder
React Content Loader
⚪ SVG-Powered component to easily create skeleton loadings.
Stars: ✭ 11,830 (+25070.21%)
Mutual labels:  placeholder
Tabanimated
A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架,包含快速植入,低耦合,兼容复杂视图等特点,提供国内主流骨架屏动画的加载方案,同时支持上拉加载更多、自定制动画。)
Stars: ✭ 2,909 (+6089.36%)
Mutual labels:  placeholder
Pupa
Simple micro templating
Stars: ✭ 231 (+391.49%)
Mutual labels:  placeholder
Ocskeleton
[OCSkeleton] - Make your loading view a little difference.
Stars: ✭ 184 (+291.49%)
Mutual labels:  placeholder
Statefulviewcontroller
Placeholder views based on content, loading, error or empty states
Stars: ✭ 2,139 (+4451.06%)
Mutual labels:  placeholder
React Loading Skeleton
Create skeleton screens that automatically adapt to your app!
Stars: ✭ 2,533 (+5289.36%)
Mutual labels:  placeholder
Ragtextfield
Subclass of UITextField that adds an animated placeholder and an optional hint label below the text.
Stars: ✭ 227 (+382.98%)
Mutual labels:  placeholder
Hgplaceholders
Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project
Stars: ✭ 2,048 (+4257.45%)
Mutual labels:  placeholder
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+389.36%)
Mutual labels:  placeholder
Rn Placeholder
🏖️ Display some placeholder stuff before rendering your text or media content in React Native
Stars: ✭ 1,934 (+4014.89%)
Mutual labels:  placeholder
Vue Morphling
Vue filters and directives collection.
Stars: ✭ 179 (+280.85%)
Mutual labels:  placeholder
Floatl
☁️ A pragmatic implementation of the Float Label Pattern for the web
Stars: ✭ 204 (+334.04%)
Mutual labels:  placeholder
Aiforms.effects
AiForms.Effects for Xamarin.Forms
Stars: ✭ 245 (+421.28%)
Mutual labels:  placeholder
Rhplaceholder
Show pleasant loading view for your users 😍
Stars: ✭ 238 (+406.38%)
Mutual labels:  placeholder

Holder.js for Rails

Build Status Gem Version

Provides Holder.js to render image placeholders entirely on the client side.

Installation

Add to your Gemfile:

gem 'holder_rails'

and run:

bundle install

Usage

Add to your JavaScript manifest file:

//= require holder

For versions less than 2.3.2, if you're using turbolinks don't forget to run Holder after page:change event:

$(document).bind 'page:change', ->
  Holder.run()

You can use holder_tag helper in your views:

holder_tag 100
# => <img data-src="holder.js/100x100?" src="" />

holder_tag '200x300'
# => <img data-src="holder.js/200x300?" src="" />

holder_tag '200x300', 'Lorem ipsum'
# => <img data-src="holder.js/200x300?text=Lorem ipsum" src="" />

holder_tag '200x300', 'Lorem ipsum', 'social'
# => <img data-src="holder.js/200x300?text=Lorem ipsum&amp;theme=social" src="" />

holder_tag '500x800', 'Example text', 'gray', id: 'new', class: 'special'
# => <img class="special" data-src="holder.js/500x800?text=Example text&amp;theme=gray" id="new" src="" />

holder_tag '500x800', 'Example text', 'gray', { id: 'new', class: 'special' }, { font: 'Helvetica' }
# => <img class="special" data-src="holder.js/500x800?font=Helvetica&amp;text=Example text&amp;theme=gray" id="new" src="" />

For more information, check out holder readme.

Versioning

holder_rails X.Y.Z == Holder.js X.Y.Z

License

Released under the BSD 2-clause license. See LICENSE.txt for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].