Question

我在我的Rails项目中使用ActiveAdmin。如何在columns关系中的显示视图中使用has_many样式化资源的表单视图（按列，我的意思是有两个或三个不同的浮动内容块）？

以下是我尝试设置的代码（我使用.arb视图）：

f.inputs t('activerecord.models.slide.other') do
  f.has_many :slides, heading: false do |item|

    # I would like to be a first column
    item.input :image,
                 as: :file,
                 label: I18n.t('form.label.slide'),
                 hint: retina_image_tag(item.object, :image, :preview)
    item.input :online,
                 as: :boolean,
                 hint: I18n.t('form.hint.slide.online')

    if item.object.self_image?
      item.input :_destroy,
                   as: :boolean,
                   hint: I18n.t('form.hint.slide.destroy')
    end

    # I would like to be a second column
    item.translated_inputs 'Translated fields', switch_locale: true do |t|
      t.input :title, hint: I18n.t('form.hint.title')
      t.input :description,
                hint: I18n.t('form.hint.content')
    end
  end
end

感谢您的帮助！

Answer 1

添加自定义CSS以删除AA默认表单样式。应用浮动：左侧和半屏宽度。

var metin = 'http://metinseylan.com:1923';

Vue.use(VueSocketio, metin); // Automatically socket connect from url string

var vm = new Vue({
    el: '#vue-socket-dynamo',
    sockets:{
        connect: function(val){
            if(val) { console.log('socket connected -> val: ', val); }
            else    { console.log('socket connected'); }
        },
        testClicked: function(val){
            console.log('testClicked method fired by socket server. eg: io.emit("customEmit", data)');
            if(val) { console.log('val: ', val); }
        }
    },
    methods: {
        clickButton: function(val){
            // $socket is socket.io-client instance
            console.log('@click=clickButton Triggered');           // This works.
            console.log('Input val: ', val);
            this.$socket.emit('connect', val);         // Works
            this.$socket.emit('testClicked', val);    // NOT WORKING
        }
    }
});

在ActiveAdmin表单视图中使用列

1 个答案: