리액션 버튼 커스텀하기

기본 리액션 버튼 또는 커스텀 버튼은 리액션 목록의 끝에 표시되는 것이 기본 설정입니다.

기본으로 표시되는 버튼 대신에 커스텀 버튼을 추가하거나, 영역 밖에 있는 버튼을 사용할 수 있습니다.

<div
    class="da-reaction"
    x-reaction-print
    x-data="daReaction('대상ID', { button: false })"
>
    <button x-bind="daReactionButton">+ 반응</button>
</div>

옵션

리액션 기능의 옵션을 x-data HTML 속성에서 설정할 수 있습니다.

<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { options })"
></div>

옵션명	타입	기본값	설명
button	string|boolean	'end'	리액션 추가 버튼의 위치 및 비활성 - 'start': 리액션 목록 앞에 버튼을 추가합니다. - 'end': 리액션 목록 뒤에 버튼을 추가합니다. - false: 버튼을 표시하지 않습니다.
placement	string	'prepend'	커스텀 버튼 사용 시 리액션 목록이 추가될 위치 - 'prepend': 커스텀 버튼 앞에 출력 - 'append': 커스텀 버튼 뒤에 출력

버튼 위치 변경하기

button 옵션을 변경하여 리액션 버튼의 위치를 변경할 수 있습니다.

<!-- 기본 버튼을 리액션 목록 앞에 표시하도록 변경하는 예시 -->
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { button: 'start' })"
></div>

커스텀 버튼의 위치

커스텀 버튼을 사용할 때 리액션 목록을 이 버튼의 앞/뒤에 표시할지를 설정할 수 있습니다. placement 옵션의 기본 값은 prepend 입니다.

<!-- 커스텀 버튼 뒤에 리액션 목록을 표시하도록 변경하는 예시 -->
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { placement: 'append' })"
>
    <button x-bind="daReactionButton">+ 반응</button>
</div>

영역 밖에 리액션 버튼을 사용하기

영역 밖의 버튼을 사용할 때는 x-init, x-bind 속성을 사용해야하며, x-bind="daReactionButton('대상ID')" 처럼 대상 ID를 지정해야합니다.

<!-- 기본 버튼을 감추고 `.da-reaction` 영역 밖의 버튼을 사용하는 예시 -->
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { button: false })"
></div>

<button
    x-init
    x-bind="daReactionButton('대상ID')"
>+ 반응</button>