ruby 介绍如何使用涡轮框架显示选项卡

nr9pn0ug 于 2023-02-18 发布在 Ruby

关注(0)|答案(1)|浏览(123)

在我的Rails7应用中，我有CustomersController，其中包含show action和相应的show.slim视图。在这个视图中，我希望有2个标签：

"数据"，文本为"这是数据页面"-用户点击显示后，此选项卡应处于活动状态。
"客户用户"，文本为"这是客户用户列表"。

当用户点击显示网址（客户路径），他应该能够看到数据选项卡作为活动的，并点击"客户用户"后，他/她不应该被重定向，而是停留在页面和文本"这是客户用户列表"应该呈现。我想使用涡轮框架来控制选项卡切换，没有额外的JS需要。我使用tailwindcss。
所以我所做的是：
customers/show.slim：

div.tabs
  button.tab-button[data-turbo-frame="customer_data" data-turbo-frame-target="data"] Data
  button.tab-button[data-turbo-frame="customer_users" data-turbo-frame-target="users"] Customer Users

= turbo_frame_tag "data" do
  h1 Data

  p This is data page

= turbo_frame_tag "users" do
  h1 Customer Users

  p Here is the list of Customer Users

加上一些额外的css：

.tab-button {
  @apply inline-block py-2 px-4 border-b-2 font-medium text-sm focus:outline-none transition duration-150 ease-in-out;
}

.tab-button.active {
  @apply border-indigo-500 text-gray-900;
}

.tab-button:hover:not(.active) {
  @apply border-indigo-500 text-gray-900;
}

.tabs {
  @apply border-b border-gray-200 px-4 flex justify-start;
}

相反，我得到了这样的观点：

就像我说的，第一眼我想知道应该做些什么来使它工作？它必须是涡轮框架，因为EOD我将有很少的视图组件。

ruby

来源：https://stackoverflow.com/questions/75450645/rails-how-to-display-tabs-with-turbo-frame

1条答案

按热度按时间

flvlnr441#

Turbo的工作原理是向后端发出请求，所以如果你想在同一个请求中呈现标签内容，你必须使用javascript来隐藏和显示标签。
如果您确实希望使用Turbo，那么您必须改变处理此问题的方式：
1.由于一次只能打开一个标签页，因此您不需要两个turbo帧，而应该只有一个。
customers/show.slim

div.tabs
  button.tab-button[data-turbo-frame="tab_content"] Data
  button.tab-button[data-turbo-frame="tab_content"] Customer Users

= turbo_frame_tag "tab_content"

1.为每个选项卡创建一个控制器操作
app/controllers/customer_tabs_controller.rb

class CustomerTabsController < ApplicationController
  def data
  end

  def customer_users
  end
end

routes.rb

Rails.application.routes.draw do
  # ...

  resource :customer_tab, only: [] do
    get :data
    get :customer_users
  end
end

1.为这些动作添加视图模板，其中turbo_frame包含选项卡内容。呈现时，框架以前的内容将被此处的内容替换。
app/views/customer_tabs/data.html.erb

= turbo_frame_tag "tab_content" do
  h1 Data

  p This is data page

app/views/customer_tabs/customer_users.html.erb

= turbo_frame_tag "tab_content" do
  h1 Customer Users

  p Here is the list of Customer Users

1.然后，您必须将链接添加到选项卡按钮，以便单击它们将呈现适当的内容。
customers/show.slim

div.tabs
  / To avoid having to specify `method: :get`, `link_to` could be used
  = button_to "Data", data_customer_tab_path, class: "tab-button", method: :get, data: { turbo_frame: "tab_content" }
  = button_to "Customer Users", customer_users_customer_tab_path, class: "tab-button", method: :get, data: { turbo_frame: "tab_content" }

= turbo_frame_tag "tab_content"

现在，单击选项卡将打开相应的选项卡内容。要在打开页面时自动加载第一个选项卡，您必须使用快速加载框架
customers/show.slim

div.tabs
  = button_to "Data", data_customer_tab_path, class: "tab-button", method: :get, data: { turbo_frame: "tab_content" }
  = button_to "Customer Users", customer_users_customer_tab_path, class: "tab-button", method: :get, data: { turbo_frame: "tab_content" }

/ Will make a request for the data tab immediately and display it.
= turbo_frame_tag "tab_content", src: data_customer_tab_path do
  / The content that will be shown before the request to `data_customer_tab_path` completes
  p Loading...

作为

赞(0）回复(0）举报 2023-02-18

我来回答

ruby 介绍如何使用涡轮框架显示选项卡

1条答案

相关问题

热门标签

最新问答