レイアウト v1.0.0

カラム

CSSカラムを使用してコンテンツを複数のカラムに流し込むレイアウトコンポーネント。コンテンツが自然に次のカラムへ流れるため、テキストブロック、リスト、メイソンリー風レイアウトに最適です。

プレビュー & コード

_columns.html.erb

███
  ███████ █████████ █████████

  ██████
    ███ ██████ ████████████████████ ██ ██
      ████████ █████████ ████████████
      █████████ █████████ ████████████
    ██ ███ ██

    ███ ██████ █████████████████████ ██████ ██ ████ ███ ██ ██

Get Access to View Code

columns_component.rb

█ ██████████████████████ ████

█████ ████████████████ █ ███████████████████
  ██████ █ ███████████████████
  ████ █ ███████ ██ ██ ██████████

  ███ █████████████████ ██ ████ ████ ████████████████
    ██████ █ ███████████████████ ███
    ████ █ ██████████
    ██████████████ █ █████████████████████ ██ ██

Get Access to View Code

columns_component.html.erb

████ ██████████ ███████████████ ████
  ███ ███████ ██
██████

Get Access to View Code

オプション

名前	型	デフォルト	説明
`count`	Integer	`2`	Number of columns (1-12)
`gap`	Symbol	`:md`	Gap between columns: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

名前	型	デフォルト	説明
`count`	Integer	`2`	Number of columns (1-12)
`gap`	Symbol	`:md`	Gap between columns: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

変更履歴 v1.0.0

- Initial release with 1-12 column support
- Configurable gap sizes

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得