レイアウト v1.0.0

コンテナ

コンテンツを最大幅で囲み、水平方向に中央揃えするレイアウトコンポーネント。設定可能なサイズとパディングで一貫したページ幅の制約を提供します。

プレビュー & コード

_container.html.erb

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

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

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

Get Access to View Code

container_component.html.erb

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

Get Access to View Code

container_component.rb

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

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

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

Get Access to View Code

オプション

名前	型	デフォルト	説明
`size`	Symbol	`:lg`	Max-width size: :sm (640px), :md (768px), :lg (1024px), :xl (1280px), :2xl (1536px), :full (100%)
`padding`	Symbol	`:md`	Horizontal padding: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

名前	型	デフォルト	説明
`size`	Symbol	`:lg`	Max-width size: :sm (640px), :md (768px), :lg (1024px), :xl (1280px), :2xl (1536px), :full (100%)
`padding`	Symbol	`:md`	Horizontal padding: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

変更履歴 v1.0.0

- Initial release with size variants (sm, md, lg, xl, 2xl, full)
- Configurable horizontal padding

フルアクセスを取得

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

今すぐアクセスを取得